/* ===================================================
   Gårdbutikker — akra Design System
   Matches the akra investor deck aesthetic:
   Space Grotesk headings, Inter body, earthy greens,
   soft backgrounds, generous radius, minimal borders.
   =================================================== */

:root {
  --bg: #f2f5f1;
  --bg-alt: #e6efe8;
  --surface: #ffffff;
  --primary: #142418;
  --accent: #2b8a55;
  --accent-light: #e0f0e6;
  --muted: #5c7563;
  --card-bg: #ffffff;
  --border: rgba(43, 138, 85, 0.12);
  --shadow: 0 8px 30px -6px rgba(20, 36, 24, 0.07);
  --radius: 16px;
  --radius-sm: 10px;
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Event accent (amber/orange) */
  --event-accent: #d97706;
  --event-accent-light: #fef3c7;
  --event-border: rgba(217, 119, 6, 0.15);
  --event-bg: #fffbeb;

  /* Food truck accent (coral/red) */
  --truck-accent: #E74C3C;
  --truck-accent-light: #fde8e8;
  --truck-border: rgba(231, 76, 60, 0.15);
  --truck-bg: #fef2f2;

  /* Audited organic place badge */
  --organic-accent: #c81e2a;
  --organic-accent-light: #fee2e2;
  --organic-border: rgba(200, 30, 42, 0.18);
  /* Specialbutik (curated specialty resellers) */
  --special-accent: #3f5e8c;
  --special-accent-light: #eef2f8;
  --special-border: rgba(63, 94, 140, 0.16);
  --special-bg: #f5f8fc;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== Global button UX ===== */
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--primary);
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ===== Sidebar ===== */
#sidebar {
  width: 360px;
  min-width: 360px;
  height: 100%;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 10;
  border-right: 1px solid var(--border);
  overflow: hidden;
  transition: width 0.34s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.34s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease, background 0.28s ease;
}

#sidebar.sidebar-entered {
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.34s cubic-bezier(0.4, 0, 0.2, 1),
    min-width 0.34s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.28s ease,
    background 0.28s ease;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 24px 24px 20px;
  gap: 14px;
  transition: opacity 0.24s ease, transform 0.3s ease, padding 0.3s ease;
}

/* Header */
.sidebar-header { display: flex; flex-direction: column; gap: 4px; }

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.site-brand-icon {
  width: 46px;
  height: 46px;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 14px 30px -20px rgba(20, 36, 24, 0.65);
}

.site-brand-wordmark {
  font-family: var(--font-heading);
  font-size: 1.62rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--primary);
  line-height: 1;
  white-space: nowrap;
}

/* ===== Map Location Controls ===== */
.map-location-controls {
  overflow: hidden;
}

.maplibregl-ctrl-top-right .map-location-controls {
  margin-top: 6px;
}

#locate-btn,
.center-location-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

#locate-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ===== Search ===== */
.search-container {
  position: relative;
  width: 100%;
}

.search-toggle {
  margin-top: 0;
}

.search-toggle-icon {
  display: block;
}

.search-input-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translateY(-8px);
  margin-top: 0;
  padding: 0 14px;
  background: var(--card-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px -22px rgba(20, 36, 24, 0.28);
  transition: max-height 0.28s ease, opacity 0.16s ease, transform 0.22s ease, padding 0.28s ease, margin-top 0.22s ease, border-color 0.2s, box-shadow 0.2s;
}

.search-toggle[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(43, 138, 85, 0.12);
}

.search-container--expanded .search-input-wrap {
  max-height: 56px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  margin-top: 10px;
  padding: 10px 14px;
  border-color: var(--border);
}

.search-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 138, 85, 0.1);
}

.search-icon {
  flex-shrink: 0;
  stroke: var(--muted);
  transition: stroke 0.2s;
}

.search-input-wrap:focus-within .search-icon {
  stroke: var(--accent);
}

#search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--primary);
  min-width: 0;
  width: 100%;
}

#search-input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

.search-clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: var(--bg);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.2s, color 0.2s;
  padding: 0;
}

.search-clear:hover {
  background: var(--accent-light);
  color: var(--accent);
}

.search-clear.hidden { display: none; }

/* Search dropdown */
.search-dropdown {
  position: fixed;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 40px -8px rgba(20, 36, 24, 0.14);
  max-height: 340px;
  overflow-y: auto;
  z-index: 500;
  padding: 6px;
}

.search-dropdown.hidden { display: none; }

.search-dropdown-group {
  padding: 6px 10px 4px;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--muted);
  opacity: 0.7;
}

.search-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.82rem;
}

.search-dropdown-item:hover,
.search-dropdown-item.active {
  background: var(--accent-light);
}

.search-dropdown-item .search-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-dropdown-item .search-item-icon svg {
  display: block;
}

.search-dropdown-item .search-item-icon--shop {
  background: var(--accent-light);
}

.search-dropdown-item .search-item-icon--event {
  background: var(--event-accent-light);
}

.search-dropdown-item .search-item-icon--specialbutik {
  background: var(--special-accent-light);
  color: var(--special-accent);
}

.search-dropdown-item .search-item-icon--area {
  background: var(--bg-alt);
}

.search-dropdown-item .search-item-info {
  flex: 1;
  min-width: 0;
}

.search-dropdown-item .search-item-name {
  font-weight: 500;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-dropdown-item .search-item-meta {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-dropdown-item .search-item-match {
  font-weight: 600;
  color: var(--accent);
}

.search-dropdown-empty {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}

.search-dropdown-empty svg {
  display: block;
  margin: 0 auto 8px;
  stroke: var(--muted);
  opacity: 0.4;
}

/* ===== Distance Banner ===== */
.distance-info {
  padding: 10px 14px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 500;
  line-height: 1.45;
}
.distance-info.hidden { display: none; }

/* ===== Section Labels ===== */
.section-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted);
}

.section-label span { font-weight: 400; opacity: 0.7; }

/* ===== Homepage Taxonomy ===== */
/* ===== Filters ===== */
.filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.filter-btn .filter-icon {
  display: flex;
  align-items: center;
  line-height: 1;
}

.filter-btn .filter-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--muted);
  transition: stroke 0.2s;
}

.filter-btn:hover .filter-icon svg { stroke: var(--accent); }
.filter-btn.active .filter-icon svg { stroke: #fff; }

.filter-btn--organic {
  border-color: var(--organic-border);
}

.filter-btn--organic:hover {
  border-color: var(--organic-accent);
  color: var(--organic-accent);
}

.filter-btn--organic.active {
  background: var(--organic-accent);
  border-color: var(--organic-accent);
  color: #fff;
}

/* Specialbutik chip — slate-blue identity matching the specialbutik map marker */
.filter-btn--specialbutik {
  border-color: #c3d0e3;
}

.filter-btn--specialbutik .filter-icon svg { stroke: #3f5e8c; }

.filter-btn--specialbutik:hover {
  border-color: #3f5e8c;
  color: #3f5e8c;
}

.filter-btn--specialbutik:hover .filter-icon svg { stroke: #3f5e8c; }

.filter-btn--specialbutik.active {
  background: #3f5e8c;
  border-color: #3f5e8c;
  color: #fff;
}

.filter-btn--specialbutik.active .filter-icon svg { stroke: #fff; }

/* Specialbutik identity in the results list + detail panel (mirrors event/truck) */
.result-card-icon--specialbutik {
  background: var(--special-accent-light);
  color: var(--special-accent);
}

.result-card--specialbutik {
  border-left: 3px solid var(--special-accent);
  background: var(--special-bg);
}

.result-card--specialbutik:hover {
  box-shadow: 0 8px 30px -6px rgba(63, 94, 140, 0.14);
}

.detail-tag--specialbutik {
  background: var(--special-accent-light);
  color: var(--special-accent);
}

/* Re-scope the accent tokens inside the specialbutik detail panel so every accent
   element (tabs, buttons, links, section labels, follow button, ratings, borders)
   picks up the slate identity — same idea as the amber event / red truck panels. */
.detail-panel--specialbutik {
  --accent: var(--special-accent);
  --accent-light: var(--special-accent-light);
  --border: var(--special-border);
  --hover-bg: rgba(63, 94, 140, 0.08);
}

.detail-panel--specialbutik .detail-panel-inner {
  border-left: 3px solid var(--special-accent);
}

/* Literal-green spots the variable re-scope can't reach (hardcoded rgba / hover) */
.detail-panel--specialbutik .detail-nav-btn:hover {
  background: #31486b !important;
  border-color: #31486b !important;
}
.detail-panel--specialbutik .detail-link--web {
  border-color: rgba(63, 94, 140, 0.3);
}
.detail-panel--specialbutik .detail-link--web:hover {
  background: rgba(63, 94, 140, 0.08);
  border-color: var(--special-accent);
}
.detail-panel--specialbutik .detail-tab.active {
  box-shadow:
    0 14px 24px -22px rgba(20, 36, 24, 0.5),
    inset 0 0 0 1px rgba(63, 94, 140, 0.18);
}

.organic-filter-mark,
.organic-badge-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--organic-accent);
  color: #fff;
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
}

.filter-btn--organic.active .organic-filter-mark {
  background: #fff;
  color: var(--organic-accent);
}

/* ===== Results ===== */
.results-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-bottom: 8px;
}

.results-preview-note {
  padding: 12px 14px;
  background: rgba(224, 240, 230, 0.82);
  border: 1px solid rgba(43, 138, 85, 0.14);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
}

.result-card {
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow);
}

.result-card:hover {
  transform: translateY(-2px);
}

.result-card-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.result-card-icon-wrapper {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-card-icon-wrapper svg {
  display: block;
  width: 22px;
  height: 22px;
}

.result-card-icon--shop {
  background: var(--accent-light);
  color: var(--accent);
}

.result-card-icon--event {
  background: var(--event-accent-light);
  color: var(--event-accent);
}

.result-card-content {
  flex: 1;
  min-width: 0;
}

.result-card .name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.result-card .name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.result-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #92400e;
  white-space: nowrap;
}

.result-card .address {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.result-card .tags { display: flex; flex-wrap: wrap; gap: 4px; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg);
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
}

.tag.distance-tag {
  background: var(--accent-light);
  color: var(--accent);
}

.organic-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag--organic {
  background: var(--organic-accent-light);
  color: var(--organic-accent);
  font-weight: 600;
}

/* ===== Map ===== */
#map {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: saturate(1) brightness(1);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Markers are rendered as native map symbol layers — no DOM styles needed */

/* ===== User Location ===== */
.user-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(43, 138, 85, 0.2), 0 2px 6px rgba(0,0,0,0.15);
  animation: pulse 2.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(43,138,85,0.2), 0 2px 6px rgba(0,0,0,0.15); }
  50%      { box-shadow: 0 0 0 10px rgba(43,138,85,0.05), 0 2px 6px rgba(0,0,0,0.15); }
}

/* ===== Popup ===== */
.maplibregl-popup {
  z-index: 3;
}

.maplibregl-popup-content {
  border-radius: var(--radius) !important;
  padding: 18px 20px !important;
  box-shadow: 0 8px 30px rgba(20, 36, 24, 0.12) !important;
  font-family: var(--font-body) !important;
}

.maplibregl-popup-close-button {
  font-size: 18px;
  padding: 4px 10px;
  color: var(--muted);
}

.popup-content { max-width: 250px; }

.popup-content h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin-bottom: 3px;
}

.popup-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.popup-name-row h3 {
  margin-bottom: 0;
}
.popup-rating-inline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
  flex-shrink: 0;
}

.popup-content .popup-address {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.popup-content .popup-desc {
  font-size: 0.8rem;
  color: var(--primary);
  opacity: 0.75;
  line-height: 1.5;
  margin-bottom: 10px;
}

.popup-content .popup-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.popup-content .popup-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-light);
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--accent);
}

.popup-tag--organic {
  background: var(--organic-accent-light) !important;
  color: var(--organic-accent) !important;
  font-weight: 600 !important;
}

.popup-content .popup-website {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.popup-content .popup-website:hover { text-decoration: underline; }

/* Hover tooltip hint */
.popup-hint {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: 0.01em;
}

.popup-hint--event {
  color: var(--event-accent);
}

.popup-hover {
  pointer-events: none;
}

.popup-content .popup-distance {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 500;
}

/* ===== Detail Panel ===== */
.detail-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: rgba(20, 36, 24, 0);
  transition: background 0.35s ease;
  pointer-events: none;
  will-change: background;
}

.detail-panel.open {
  background: rgba(20, 36, 24, 0.35);
  pointer-events: all;
}

.detail-panel-inner {
  width: 420px;
  max-width: 92vw;
  height: 100%;
  background: var(--bg);
  box-shadow: -12px 0 50px rgba(20, 36, 24, 0.12);
  overflow-y: scroll;
  scrollbar-gutter: stable;
  padding: 32px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  will-change: transform;
}

.detail-panel.open .detail-panel-inner {
  transform: translateX(0);
}

/* Close button */
.detail-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s, transform 0.15s;
  z-index: 2;
}

.detail-close:hover {
  color: var(--primary);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(43, 138, 85, 0.12);
}

/* Follow bell icon button — positioned next to the close button */
.detail-follow-icon-btn {
  position: absolute;
  top: 20px;
  right: 64px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  z-index: 2;
}
.detail-follow-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(43, 138, 85, 0.12);
}
.detail-follow-icon-btn.followed {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
.detail-follow-icon-btn--event:hover {
  border-color: var(--event-accent);
  color: var(--event-accent);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.1);
}
.detail-follow-icon-btn--event.followed {
  background: var(--event-accent-light);
  border-color: var(--event-accent);
  color: var(--event-accent);
}

/* Header */
.detail-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 0;
  position: relative;
}

.detail-header > :not(.detail-tabs) {
  padding-right: 88px;
}

.detail-header > .detail-award-badges {
  padding-right: 0;
}

.detail-header--has-awards .detail-name-row {
  padding-right: 174px;
}

.detail-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary);
  line-height: 1.2;
}

.detail-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
  flex-wrap: wrap;
}

.detail-address svg {
  stroke: var(--accent);
  flex-shrink: 0;
}

.detail-distance {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--accent-light);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  margin-left: 4px;
}

.detail-distance--event {
  background: var(--event-accent-light);
  color: var(--event-accent);
}

/* Tags */
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--accent-light);
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--accent);
}

.detail-tag--event {
  background: var(--event-accent-light);
  color: var(--event-accent);
}

.detail-tag--organic {
  background: var(--organic-accent-light);
  color: var(--organic-accent);
  font-weight: 600;
}

.detail-tag--organic .organic-badge-mark {
  width: 16px;
  height: 16px;
  font-size: 0.72rem;
}

/* Sections */
.detail-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-section-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted);
}

.detail-story {
  font-size: 0.88rem;
  color: var(--primary);
  line-height: 1.65;
  opacity: 0.85;
}

.detail-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  font-style: italic;
}

/* Items grid */
.detail-items-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.detail-item:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.detail-item {
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.detail-item:hover {
  background: transparent;
}

.detail-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.detail-item-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--primary);
}

.detail-item-price {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

/* Empty state (no verified products) */
.detail-empty-state {
  padding: 20px 16px;
  text-align: center;
  color: var(--secondary, #6b7280);
  font-size: 0.85rem;
  line-height: 1.5;
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Pagination controls */
.detail-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 0;
}

.detail-page-btn {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent, #2b8a55);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.detail-page-btn:hover:not(:disabled) {
  background: var(--hover-bg, rgba(43,138,85,0.08));
}

.detail-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.detail-page-info {
  font-size: 0.75rem;
  color: var(--secondary, #6b7280);
  white-space: nowrap;
}

/* Schedule (event detail) */
.detail-schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--event-bg);
  border: 1px solid var(--event-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.detail-schedule-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--primary);
  line-height: 1.5;
}

.detail-schedule-row svg {
  stroke: var(--event-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.detail-schedule-row strong {
  color: var(--event-accent);
  font-weight: 600;
}

.detail-schedule-note {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  padding-top: 4px;
  border-top: 1px solid var(--event-border);
}

/* Vendors */
.detail-vendors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-vendor-chip {
  display: inline-block;
  padding: 4px 12px;
  background: var(--card-bg);
  border: 1px solid var(--event-border);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--primary);
}

/* Specialties */
.detail-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-specialty-chip {
  display: inline-block;
  padding: 4px 12px;
  background: var(--event-accent-light);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--event-accent);
}

/* Event badge */
.detail-event-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--event-accent);
  background: var(--event-accent-light);
  padding: 3px 12px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  align-self: flex-start;
}

/* Footer */
.detail-footer {
  margin-top: auto;
  padding-top: 20px;
  padding-bottom: 80px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.detail-footer .detail-nav-wrap {
  flex: 1;
  min-width: 0;
}
.detail-footer .detail-action-btn {
  flex: 1;
  justify-content: center;
  min-width: 0;
  padding: 8px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* External links row (website, facebook, instakram) */
.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.detail-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 22px;
  border: 1.5px solid var(--border);
  background: var(--bg-alt);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  color: var(--primary);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 100px;
}

.detail-link--web {
  color: var(--accent);
  border-color: rgba(43,138,85,0.3);
}
.detail-link--web:hover {
  background: rgba(43,138,85,0.08);
  border-color: var(--accent);
}

.detail-link--fb {
  color: #1877f2;
  border-color: rgba(24,119,242,0.25);
}
.detail-link--fb:hover {
  background: rgba(24,119,242,0.06);
  border-color: #1877f2;
}

.detail-link--ig {
  color: #c13584;
  border-color: rgba(193,53,132,0.25);
}
.detail-link--ig:hover {
  background: rgba(193,53,132,0.06);
  border-color: #c13584;
}

/* Phone */
.detail-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 4px;
}
.detail-phone svg {
  stroke: var(--accent);
  flex-shrink: 0;
}
.detail-phone-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.detail-phone-link:hover {
  text-decoration: underline;
}

/* Google rating badge */
.rating-badge--google .rating-badge-count {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 400;
  margin-left: 2px;
}

/* Google reviews */
.reviews-section-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.review-card--google {
  border-left: 3px solid #4285f4;
}
.review-badge--google {
  color: #4285f4;
  background: #e8f0fe;
}
.review-badge--google svg {
  width: 10px;
  height: 10px;
}
.rating-summary--google {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.google-reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 14px;
  background: #e8f0fe;
  color: #1a73e8;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.google-reviews-link:hover {
  background: #d2e3fc;
}

/* Keep these for event/truck panels which still use the old classes */
.detail-website {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  font-family: var(--font-body);
}

.detail-website:hover {
  background: #237a49;
  transform: translateY(-1px);
}

.detail-facebook {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #1877f2;
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  font-family: var(--font-body);
}

.detail-facebook:hover {
  background: #1565c0;
  transform: translateY(-1px);
}

.detail-verified {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 9999px;
  vertical-align: middle;
  margin-left: 6px;
}

.detail-unverified {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: 9999px;
  vertical-align: middle;
  margin-left: 6px;
}

/* ===== Season Note Banner ===== */
.detail-season-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #92400e;
  line-height: 1.45;
}

.detail-season-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #d97706;
}

.detail-opening-hours {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.detail-opening-hours.expanded {
  align-items: flex-start;
}

.opening-hours-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f0fdf4;
  color: #16a34a;
  border-radius: 50%;
  flex-shrink: 0;
}

.opening-hours-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.opening-hours-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  gap: 8px;
}

.opening-hours-today {
  display: flex;
  align-items: center;
  gap: 8px;
}

.opening-hours-status {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.opening-hours-status--open {
  color: #16a34a;
  background: #dcfce7;
}
.opening-hours-status--closed {
  color: #dc2626;
  background: #fee2e2;
}

.opening-hours-today-text {
  font-size: 0.85rem;
  color: #1f2937;
  font-weight: 500;
}

.opening-hours-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.detail-opening-hours.expanded .opening-hours-chevron {
  transform: rotate(180deg);
}

.opening-hours-all {
  display: none;
  flex-direction: column;
  gap: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}
.detail-opening-hours.expanded .opening-hours-all {
  display: flex;
}

.opening-hours-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.8rem;
  color: #374151;
}
.opening-hours-row--today {
  font-weight: 700;
  color: var(--accent);
}
.opening-hours-row--closed .opening-hours-time {
  color: #9ca3af;
}
.opening-hours-day {
  min-width: 35px;
}
.opening-hours-time {
  text-align: right;
}

.popup-season-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 5px;
  padding: 3px 7px;
  line-height: 1.3;
}

.detail-website--event {
  background: var(--event-accent);
}

.detail-website--event:hover {
  background: #b45309;
}

/* Event panel accent */
.detail-panel--event .detail-panel-inner {
  border-left: 3px solid var(--event-accent);
}

/* Scrollbar for detail panel */
.detail-panel-inner::-webkit-scrollbar {
  width: 4px;
}

.detail-panel-inner::-webkit-scrollbar-track {
  background: transparent;
}

.detail-panel-inner::-webkit-scrollbar-thumb {
  background: rgba(43, 138, 85, 0.15);
  border-radius: 2px;
}

/* ===== Events Section ===== */
.events-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Toggle Switch */
.event-toggle-label {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  cursor: pointer;
}

.event-toggle-label input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.event-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 20px;
  transition: background 0.25s;
}

.event-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
}

.event-toggle-label input:checked ~ .event-toggle-slider {
  background: var(--event-accent);
}

.event-toggle-label input:checked ~ .event-toggle-slider::before {
  transform: translateX(18px);
}

.event-toggle-label input:focus-visible ~ .event-toggle-slider {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Event Filter Buttons */
.filter-btn--event {
  border-color: var(--event-border);
}

.filter-btn--event:hover {
  border-color: var(--event-accent);
  color: var(--event-accent);
}

.filter-btn--event.active {
  background: var(--event-accent);
  color: #fff;
  border-color: var(--event-accent);
}

.filter-btn--event .filter-icon svg {
  stroke: var(--muted);
}

.filter-btn--event:hover .filter-icon svg {
  stroke: var(--event-accent);
}

.filter-btn--event.active .filter-icon svg {
  stroke: #fff;
}

/* Event Result Cards */
.result-card--event {
  border-left: 3px solid var(--event-accent);
  background: var(--event-bg);
}

.result-card--event:hover {
  box-shadow: 0 8px 30px -6px rgba(217, 119, 6, 0.12);
}

.event-badge-small {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--event-accent);
  background: var(--event-accent-light);
  padding: 1px 8px;
  border-radius: 100px;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.schedule-preview {
  font-size: 0.72rem;
  color: var(--event-accent);
  font-weight: 500;
  margin-bottom: 6px;
}

.tag--event {
  background: var(--event-accent-light);
  color: var(--event-accent);
}

.distance-tag--event {
  background: var(--event-accent-light);
  color: var(--event-accent);
}

/* Event Popup Styles */
.popup-content--event .popup-event-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--event-accent);
  background: var(--event-accent-light);
  padding: 2px 10px;
  border-radius: 100px;
  margin-bottom: 6px;
}

.popup-tag--event {
  background: var(--event-accent-light) !important;
  color: var(--event-accent) !important;
}

.popup-schedule {
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--event-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--event-border);
}

.popup-schedule-row {
  font-size: 0.75rem;
  color: var(--primary);
  line-height: 1.6;
}

.popup-schedule-row strong {
  color: var(--event-accent);
  font-weight: 600;
}

.popup-vendors {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}

.popup-vendors strong {
  color: var(--event-accent);
}

.popup-distance--event {
  color: var(--event-accent) !important;
}

.popup-website--event {
  color: var(--event-accent) !important;
}

/* ===== Food Truck Styles ===== */

/* Food Truck Filter Buttons */
.filter-btn--truck {
  border-color: var(--truck-border);
}

.filter-btn--truck:hover {
  border-color: var(--truck-accent);
  color: var(--truck-accent);
}

.filter-btn--truck.active {
  background: var(--truck-accent);
  color: #fff;
  border-color: var(--truck-accent);
}

.filter-btn--truck .filter-icon svg {
  stroke: var(--muted);
}

.filter-btn--truck:hover .filter-icon svg {
  stroke: var(--truck-accent);
}

.filter-btn--truck.active .filter-icon svg {
  stroke: #fff;
}

/* Day indicator under food truck filter */
.filter-panel-day-indicator {
  font-size: 0.72rem;
  color: var(--truck-accent);
  font-weight: 500;
  padding: 4px 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-panel-day-indicator svg {
  flex-shrink: 0;
}

/* Food Truck Result Cards */
.result-card--truck {
  border-left: 3px solid var(--truck-accent);
  background: var(--truck-bg);
}

.result-card--truck:hover {
  box-shadow: 0 8px 30px -6px rgba(231, 76, 60, 0.12);
}

.truck-badge-small {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--truck-accent);
  background: var(--truck-accent-light);
  padding: 1px 8px;
  border-radius: 100px;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.truck-location-preview {
  font-size: 0.72rem;
  color: var(--truck-accent);
  font-weight: 500;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.truck-location-preview svg {
  flex-shrink: 0;
}

.tag--truck {
  background: var(--truck-accent-light);
  color: var(--truck-accent);
}

.distance-tag--truck {
  background: var(--truck-accent-light);
  color: var(--truck-accent);
}

/* Food Truck Popup Styles */
.popup-content--truck .popup-truck-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--truck-accent);
  background: var(--truck-accent-light);
  padding: 2px 10px;
  border-radius: 100px;
  margin-bottom: 6px;
}

.popup-tag--truck {
  background: var(--truck-accent-light) !important;
  color: var(--truck-accent) !important;
}

.popup-truck-today {
  margin: 6px 0;
  padding: 6px 10px;
  background: var(--truck-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--truck-border);
  font-size: 0.72rem;
  color: var(--truck-accent);
  font-weight: 500;
}

/* Food Truck Detail Panel */
.detail-panel--truck .detail-panel-inner {
  border-top: 3px solid var(--truck-accent);
}

.detail-truck-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--truck-accent);
  background: var(--truck-accent-light);
  padding: 3px 14px;
  border-radius: 100px;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.detail-tag--truck {
  background: var(--truck-accent-light);
  color: var(--truck-accent);
}

.detail-distance--truck {
  color: var(--truck-accent);
}

.detail-website--truck {
  background: var(--truck-accent);
  color: #fff;
  border-color: var(--truck-accent);
}

.detail-website--truck:hover {
  background: #c0392b;
  color: #fff;
}

.detail-follow-btn--truck {
  border-color: var(--truck-accent);
  color: var(--truck-accent);
}

.detail-follow-btn--truck:hover,
.detail-follow-btn--truck.followed {
  background: var(--truck-accent);
  color: #fff;
  border-color: var(--truck-accent);
}

/* Truck panel — themed nav button & web links */
.detail-panel--truck .detail-nav-btn {
  background: var(--truck-accent);
  border-color: var(--truck-accent);
}
.detail-panel--truck .detail-nav-btn:hover {
  background: #c0392b !important;
  border-color: #c0392b !important;
}
.detail-panel--truck .detail-link--web {
  color: var(--truck-accent);
  border-color: rgba(231,76,60,0.3);
}
.detail-panel--truck .detail-link--web:hover {
  background: rgba(231,76,60,0.08);
  border-color: var(--truck-accent);
}

/* Event/market panel — themed nav button & web links */
.detail-panel--event .detail-nav-btn {
  background: var(--event-accent);
  border-color: var(--event-accent);
}
.detail-panel--event .detail-nav-btn:hover {
  background: #b45309 !important;
  border-color: #b45309 !important;
}
.detail-panel--event .detail-link--web {
  color: var(--event-accent);
  border-color: rgba(217,119,6,0.3);
}
.detail-panel--event .detail-link--web:hover {
  background: rgba(217,119,6,0.08);
  border-color: var(--event-accent);
}

/* Food truck weekly schedule in detail panel */
.truck-weekly-schedule {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.truck-schedule-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 0.78rem;
  transition: background 0.2s;
}

.truck-schedule-row.is-today {
  background: var(--truck-accent-light);
  border: 1px solid var(--truck-border);
}

.truck-schedule-day {
  font-weight: 600;
  min-width: 64px;
  color: var(--primary);
}

.truck-schedule-row.is-today .truck-schedule-day {
  color: var(--truck-accent);
}

.truck-schedule-location {
  color: var(--muted);
  flex: 1;
}

.truck-schedule-row.is-today .truck-schedule-location {
  color: var(--primary);
  font-weight: 500;
}

.truck-schedule-today-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: var(--truck-accent);
  padding: 1px 6px;
  border-radius: 100px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  align-self: center;
}

/* "Se rute på kort" CTA at the bottom of the weekly schedule */
.truck-schedule-see-route {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--truck-accent-light);
  border: 1px solid var(--truck-accent);
  color: var(--truck-accent);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.truck-schedule-see-route:hover {
  background: var(--truck-accent);
  color: #fff;
}

/* Rute tab: hero & stop cards */
.network-hero--truck {
  border-color: rgba(231, 76, 60, 0.22);
  background:
    radial-gradient(circle at top right, rgba(231, 76, 60, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(231, 76, 60, 0.10), rgba(255, 255, 255, 0.96));
  box-shadow: 0 22px 42px -30px rgba(120, 32, 24, 0.34);
}
.network-kicker--truck {
  color: var(--truck-accent);
}
.detail-action-btn--truck-route {
  background: var(--truck-accent);
  border-color: var(--truck-accent);
  color: #fff;
}
.detail-action-btn--truck-route:hover {
  background: #c0392b;
  border-color: #c0392b;
}

.route-stop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.route-stop-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(231, 76, 60, 0.16);
  background: var(--card-bg, #fff);
  box-shadow: var(--shadow);
}
.route-stop-card--today {
  border-color: var(--truck-accent);
  background: linear-gradient(180deg, #fff, var(--truck-accent-light));
}
.route-stop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.route-stop-day {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--truck-accent);
}
.route-stop-today-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: var(--truck-accent);
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}
.route-stop-city {
  margin: 2px 0 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--primary);
}
.route-stop-address {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(20, 36, 24, 0.74);
}
.route-stop-focus-btn {
  margin-top: 6px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(231, 76, 60, 0.42);
  color: var(--truck-accent);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.route-stop-focus-btn:hover {
  background: var(--truck-accent);
  color: #fff;
  border-color: var(--truck-accent);
}

/* Food truck specialties */
.truck-specialty-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--truck-accent-light);
  color: var(--truck-accent);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 500;
  margin: 0 4px 6px 0;
}

.truck-linked-shop,
.shop-linked-truck {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--truck-accent-light);
  border: 1px solid var(--truck-accent);
  border-radius: var(--radius-sm);
  color: var(--truck-accent);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
  font-family: inherit;
}
.truck-linked-shop + .shop-linked-truck,
.shop-linked-truck + .shop-linked-truck {
  margin-top: 8px;
}
.truck-linked-shop:hover,
.shop-linked-truck:hover {
  background: var(--truck-accent);
  color: #fff;
}
.truck-linked-shop-text,
.shop-linked-truck-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.truck-linked-shop-name,
.shop-linked-truck-name {
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.truck-linked-shop-address,
.shop-linked-truck-meta {
  font-size: 0.72rem;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Search result icon for trucks */
.search-item-icon--truck {
  background: var(--truck-accent-light);
}

.result-card-icon--truck {
  background: var(--truck-accent-light);
}

/* ===== Mobile Toggle ===== */
#sidebar-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 20;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
  color: var(--primary);
}

/* ===== Scrollbar ===== */
.results-list::-webkit-scrollbar,
.sidebar-inner::-webkit-scrollbar {
  width: 4px;
}

.results-list::-webkit-scrollbar-track,
.sidebar-inner::-webkit-scrollbar-track {
  background: transparent;
}

.results-list::-webkit-scrollbar-thumb,
.sidebar-inner::-webkit-scrollbar-thumb {
  background: rgba(43, 138, 85, 0.15);
  border-radius: 2px;
}

/* ===== Header Top Row (with bell) ===== */
.header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* ===== Notification Bell ===== */
.notif-bell {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
  flex-shrink: 0;
  margin-top: 0;
}

.notif-bell:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(43, 138, 85, 0.12);
}

.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 100px;
  padding: 0 4px;
  line-height: 1;
  border: 2px solid var(--bg);
}

.notif-badge.hidden {
  display: none;
}

/* ===== Notification Panel ===== */
.notif-panel {
  position: fixed;
  top: 12px;
  left: 330px;
  width: 360px;
  max-height: 80vh;
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 16px 50px rgba(20, 36, 24, 0.14);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  overflow: hidden;
  will-change: transform, opacity;
}

.notif-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.notif-panel-header h3 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.notif-panel-actions {
  display: flex;
  gap: 4px;
}

.notif-panel-actions button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
}

.notif-panel-actions button:hover {
  background: var(--bg-alt);
  color: var(--accent);
}

/* Followed summary */
.notif-followed-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 18px;
  background: var(--bg);
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}

.notif-followed-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 500;
}

.notif-followed-chip--event {
  background: var(--event-accent-light);
  color: var(--event-accent);
}

.notif-followed-chip--shop {
  background: var(--accent-light);
  color: var(--accent);
}

/* Notification list */
.notif-list {
  flex: 1;
  overflow-y: auto;
  max-height: 50vh;
}

.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.notif-item--clickable {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.notif-item--clickable:hover,
.notif-item--clickable:focus-visible {
  background: var(--bg);
  outline: none;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
  margin-top: 1px;
}

.notif-item-body {
  flex: 1;
  min-width: 0;
}

.notif-item-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
}

.notif-item-text {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}

.notif-item-time {
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0.6;
  margin-top: 4px;
}

.notif-item--event .notif-item-title { color: var(--event-accent); }
.notif-item--shop .notif-item-title { color: var(--accent); }

.notif-empty {
  padding: 28px 18px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}

.notif-clear-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.15s;
}

.notif-clear-btn:hover {
  background: var(--bg);
  color: #ef4444;
}

/* ===== Follow Button (in detail panel) ===== */
.detail-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
  margin-bottom: 10px;
}

.detail-follow-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(43, 138, 85, 0.1);
}

.detail-follow-btn.followed {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.detail-follow-btn--event:hover {
  border-color: var(--event-accent);
  color: var(--event-accent);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.1);
}

.detail-follow-btn--event.followed {
  background: var(--event-accent-light);
  border-color: var(--event-accent);
  color: var(--event-accent);
}

/* ===== Notification Preferences Overlay ===== */
.notif-prefs-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 36, 24, 0);
  transition: background 0.3s ease;
  pointer-events: none;
}

.notif-prefs-overlay.open {
  background: rgba(20, 36, 24, 0.35);
  pointer-events: all;
}

.notif-prefs-card {
  width: 440px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(20, 36, 24, 0.18);
  padding: 24px;
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}

.notif-prefs-overlay.open .notif-prefs-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.notif-prefs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.notif-prefs-header h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.notif-prefs-close {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
}

.notif-prefs-close:hover {
  color: var(--primary);
  border-color: var(--accent);
}

.notif-prefs-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

.notif-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  transition: opacity 0.2s;
}

.notif-pref-row.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.notif-pref-info {
  flex: 1;
}

.notif-pref-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
}

.notif-pref-desc {
  font-size: 0.73rem;
  color: var(--muted);
  margin-top: 2px;
}

.notif-pref-row--email {
  border: 1px solid rgba(43, 138, 85, 0.12);
  background: linear-gradient(180deg, rgba(241, 248, 243, 0.92) 0%, rgba(248, 251, 249, 0.98) 100%);
}

.notif-email-test-btn {
  padding: 9px 14px;
  border: 1px solid rgba(43, 138, 85, 0.22);
  border-radius: 12px;
  background: #fff;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.notif-email-test-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-1px);
}

.notif-email-test-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.notif-radius-selector {
  display: flex;
  gap: 4px;
}

.notif-radius-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--card-bg);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

.notif-radius-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.notif-radius-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Followed list in prefs */
.notif-prefs-followed {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.notif-followed-intro {
  margin-bottom: 10px;
  line-height: 1.5;
}

.notif-followed-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-followed-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: var(--radius-sm);
}

.notif-followed-item--event {
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.78) 0%, rgba(255, 248, 240, 0.98) 100%);
  border: 1px solid rgba(217, 119, 6, 0.16);
}

.notif-followed-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
}

.notif-followed-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-followed-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--primary);
}

.notif-followed-meta {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
}

.notif-followed-next {
  display: block;
  font-size: 0.69rem;
  color: var(--muted);
}

.notif-followed-setting-label {
  display: block;
  margin-top: 8px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(107, 114, 128, 0.92);
}

.notif-followed-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.notif-reminder-choice {
  padding: 7px 11px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--primary);
  font-size: 0.71rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.18s ease;
}

.notif-reminder-choice:hover {
  border-color: var(--event-accent);
  background: rgba(255, 250, 240, 0.94);
  color: var(--event-accent);
}

.notif-reminder-choice.active {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.52);
  color: #9a5b00;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.08);
}

.notif-unfollow-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: 0.7rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 2px;
}

.notif-unfollow-btn:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #ef4444;
}

/* ===== Mobile Sidebar Overlay (closes sidebar on tap) ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 36, 24, 0.4);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay.visible {
  display: block;
  opacity: 1;
}

/* ===== Mobile Close Button inside Sidebar ===== */
.sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
}

.sidebar-close-btn:hover {
  color: var(--primary);
  border-color: var(--accent);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  /* -- Sidebar -- */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 88vw;
    min-width: unset;
    max-width: 360px;
    height: 100%;
    height: 100dvh;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-100%);
    z-index: 100;
    box-shadow: none;
    border-right: none;
  }

  #sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.12);
  }

  .sidebar-close-btn {
    display: flex;
  }

  .sidebar-inner {
    padding: 20px 20px 24px;
    gap: 12px;
  }

  .site-brand {
    gap: 11px;
  }

  .site-brand-icon {
    width: 42px;
    height: 42px;
  }

  .site-brand-wordmark {
    font-size: 1.4rem;
  }

  /* -- Sidebar Toggle Button -- */
  #sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    width: 44px;
    height: 44px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 2px 12px rgba(20, 36, 24, 0.1);
    cursor: pointer;
    color: var(--primary);
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s, transform 0.2s;
  }

  #sidebar-toggle:active {
    transform: scale(0.92);
  }

  /* Hide hamburger when sidebar is open */
  #sidebar.open ~ #sidebar-toggle {
    opacity: 0;
    pointer-events: none;
  }

  /* -- Map -- */
  #map {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
  }

  /* -- Detail Panel: bottom sheet -- */
  .detail-panel {
    align-items: flex-end;
    justify-content: center;
  }

  .detail-panel-inner {
    width: 100%;
    max-width: 100vw;
    height: 65vh;
    height: 65dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    padding: 24px 20px 32px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.28s ease, padding 0.28s ease;
  }

  .detail-panel.open .detail-panel-inner {
    transform: translateY(0);
  }

  body.detail-network-focus-mobile .detail-panel.open {
    background: transparent;
    pointer-events: none;
  }

  body.detail-network-focus-mobile .detail-panel-inner {
    height: 46vh;
    height: 46dvh;
    min-height: 340px;
    gap: 14px;
    padding: 14px 14px 18px;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -18px 40px rgba(20, 36, 24, 0.12);
    pointer-events: auto;
  }

  body.detail-network-focus-mobile .detail-close,
  body.detail-network-focus-mobile .detail-follow-icon-btn {
    top: 12px;
    width: 38px;
    height: 38px;
  }

  body.detail-network-focus-mobile .detail-close {
    right: 12px;
  }

  body.detail-network-focus-mobile .detail-follow-icon-btn {
    right: 56px;
  }

  body.detail-network-focus-mobile .detail-header {
    gap: 4px;
  }

  body.detail-network-focus-mobile .detail-header > :not(.detail-tabs) {
    padding-right: 70px;
  }

  body.detail-network-focus-mobile .detail-tags {
    gap: 4px;
  }

  body.detail-network-focus-mobile .detail-tag {
    padding: 3px 10px;
    font-size: 0.69rem;
  }

  body.detail-network-focus-mobile .detail-name {
    font-size: 1.1rem;
  }

  body.detail-network-focus-mobile .detail-name-row {
    gap: 6px;
    align-items: flex-start;
  }

  body.detail-network-focus-mobile .detail-address,
  body.detail-network-focus-mobile .detail-phone {
    font-size: 0.75rem;
    line-height: 1.45;
  }

  body.detail-network-focus-mobile .detail-tabs {
    margin-top: 10px;
    gap: 3px;
    padding: 3px;
  }

  body.detail-network-focus-mobile .detail-tab {
    padding: 8px 10px;
    font-size: 0.72rem;
  }

  body.detail-network-focus-mobile .detail-tab-network {
    gap: 12px;
    padding-bottom: 16px;
  }

  body.detail-network-focus-mobile .network-hero {
    padding: 16px 15px;
    border-radius: 18px;
  }

  body.detail-network-focus-mobile .network-kicker {
    margin-bottom: 6px;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }

  body.detail-network-focus-mobile .network-hero-title {
    font-size: 1.02rem;
    line-height: 1.15;
  }

  body.detail-network-focus-mobile .network-hero-lead {
    margin-top: 8px;
    font-size: 0.82rem;
    line-height: 1.48;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.detail-network-focus-mobile .network-stat-list {
    margin-top: 10px;
    gap: 6px;
  }

  body.detail-network-focus-mobile .network-stat-pill {
    padding: 6px 10px;
    font-size: 0.71rem;
  }

  body.detail-network-focus-mobile .network-hero-actions {
    margin-top: 10px;
  }

  body.detail-network-focus-mobile .network-hero-actions .detail-action-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 12px;
    font-size: 0.78rem;
  }

  body.detail-network-focus-mobile .network-section {
    gap: 8px;
  }

  body.detail-network-focus-mobile .network-card-grid {
    gap: 10px;
  }

  body.detail-network-focus-mobile .network-card {
    padding: 14px;
    gap: 9px;
    border-radius: 16px;
  }

  body.detail-network-focus-mobile .network-card-title {
    font-size: 0.94rem;
  }

  body.detail-network-focus-mobile .network-card-address,
  body.detail-network-focus-mobile .network-card-meta,
  body.detail-network-focus-mobile .network-card-note {
    font-size: 0.78rem;
    line-height: 1.48;
  }

  body.detail-network-focus-mobile .network-card-actions {
    gap: 6px;
  }

  body.detail-network-focus-mobile .detail-action-btn--compact {
    padding: 8px 11px;
    font-size: 0.73rem;
  }

  body.detail-network-focus-mobile #map::after {
    opacity: 1;
    background: rgba(244, 248, 245, 0.08);
    backdrop-filter: saturate(0.88) brightness(1.06);
  }

  body.detail-network-focus-mobile #sidebar-toggle {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }

  body.detail-network-focus-mobile .maplibregl-ctrl-top-right {
    transform: scale(0.92);
    transform-origin: top right;
    opacity: 0.76;
  }

  .detail-close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
  .detail-follow-icon-btn {
    top: 16px;
    right: 64px;
    width: 40px;
    height: 40px;
  }

  .detail-name {
    font-size: 1.3rem;
  }

  /* -- Notification Panel -- */
  .notif-panel {
    left: 12px;
    right: 12px;
    width: auto;
    top: 60px;
    max-height: 70vh;
  }

  /* -- Filter FAB: compact icon button -- */
  .filter-fab {
    position: fixed;
    left: auto;
    right: 12px;
    top: auto;
    bottom: 20px;
    padding: 10px;
    border-radius: 50%;
    font-size: 0;
    box-shadow: 0 2px 12px rgba(20, 36, 24, 0.12);
    z-index: 15;
    width: 42px;
    height: 42px;
    justify-content: center;
    gap: 0;
  }

  .filter-fab span {
    display: none;
  }

  .filter-fab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  /* -- Filter Panel: bottom sheet style -- */
  .filter-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(20, 36, 24, 0.16);
    padding: 20px 20px 28px;
    z-index: 16;
    transform: translateY(100%) scale(1);
    opacity: 0;
  }

  .filter-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* Drag indicator on filter panel */
  .filter-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(20, 36, 24, 0.12);
    border-radius: 100px;
    margin: 0 auto 14px;
  }

  .filter-grid {
    gap: 8px;
  }

  .filter-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  /* -- Admin Bar -- */
  .admin-bar {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 14px;
  }

  .admin-bar-inner {
    justify-content: space-between;
    width: 100%;
  }

  /* -- Request Modal -- */
  .request-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .request-card {
    max-width: 100vw;
    width: 100%;
    max-height: 95vh;
    max-height: 95dvh;
    border-radius: 20px 20px 0 0;
  }

  .request-header {
    padding: 24px 20px 16px;
  }

  .request-form {
    padding: 20px 20px 28px;
  }

  /* -- Search dropdown mobile -- */
  .search-dropdown {
    max-height: 50vh;
  }

  /* -- Popup mobile -- */
  .maplibregl-popup-content {
    padding: 14px 16px !important;
    border-radius: 14px !important;
  }

  .popup-content {
    max-width: 220px;
  }

  /* -- Admin code overlay mobile -- */
  .admin-code-card {
    padding: 24px 20px;
  }

  /* -- Notif prefs mobile -- */
  .notif-prefs-card {
    max-width: 100vw;
    width: 100%;
    max-height: 95vh;
    max-height: 95dvh;
    border-radius: 20px 20px 0 0;
  }

  .notif-prefs-overlay {
    align-items: flex-end;
  }

  /* -- Safe area padding for notch devices -- */
  #sidebar-toggle {
    top: max(12px, env(safe-area-inset-top, 12px));
    left: max(12px, env(safe-area-inset-left, 12px));
  }

  .filter-fab {
    bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
    right: max(14px, env(safe-area-inset-right, 14px));
  }
}

/* ===================================================
   REQUEST SYSTEM STYLES
   =================================================== */

/* Request Section in Sidebar */
.request-section {
  padding-top: 4px;
}

.request-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(224, 240, 230, 0.92), rgba(255, 255, 255, 0.98));
  color: var(--primary);
  border: 1px solid rgba(43, 138, 85, 0.18);
  border-radius: 18px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
  text-align: left;
  box-shadow: 0 14px 28px -24px rgba(20, 36, 24, 0.4);
}

.request-btn:hover {
  background: linear-gradient(135deg, rgba(224, 240, 230, 1), rgba(255, 255, 255, 1));
  border-color: rgba(43, 138, 85, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -24px rgba(43, 138, 85, 0.28);
}

.request-btn:active {
  transform: scale(0.98);
}

.request-btn-icon,
.request-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.request-btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(43, 138, 85, 0.12);
  color: var(--accent);
}

.request-btn-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.request-btn-kicker {
  font-family: var(--font-heading);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.request-btn-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
}

.request-btn-arrow {
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(43, 138, 85, 0.12);
  color: var(--accent);
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}

.request-btn:hover .request-btn-arrow {
  transform: translateX(2px);
  background: #fff;
  border-color: rgba(43, 138, 85, 0.22);
}

.center-location-btn.hidden {
  display: none;
}

/* ===== Filter FAB & Floating Panel ===== */
.filter-fab {
  position: fixed;
  top: 14px;
  left: 380px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: 0 4px 16px rgba(20, 36, 24, 0.1);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

.filter-fab:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(43, 138, 85, 0.12);
}

.filter-fab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.filter-fab.active svg { stroke: #fff; }

.filter-panel {
  position: fixed;
  top: 56px;
  left: 380px;
  z-index: 15;
  width: 320px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(20, 36, 24, 0.14);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  will-change: transform, opacity;
}

.filter-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-panel-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.filter-panel-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
}

.filter-panel-close:hover {
  background: var(--bg);
  color: var(--primary);
}

.filter-panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-panel-label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted);
}

.filter-panel-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Collapsible filter sections (accordion). Plain .filter-panel-section divs
   (e.g. the dynamic "open now" toggle) keep the default flex-column layout;
   only <details> sections get the clickable summary + chevron behaviour. */
details.filter-panel-section {
  display: block;
}

details.filter-panel-section > .filter-grid,
details.filter-panel-section > .filter-panel-day-indicator {
  margin-top: 8px;
}

.filter-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.filter-section-summary::-webkit-details-marker { display: none; }
.filter-section-summary::marker { content: ''; }

.filter-section-summary-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-section-chevron {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.15s ease;
}

details.filter-panel-section:not([open]) .filter-section-chevron {
  transform: rotate(-90deg);
}

.filter-section-summary:hover .filter-panel-label,
.filter-section-summary:hover .filter-section-chevron {
  color: var(--primary);
}

details.filter-panel-section[open] > .filter-grid,
details.filter-panel-section[open] > .filter-panel-day-indicator {
  animation: filterSectionReveal 0.18s ease;
}

@keyframes filterSectionReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .filter-section-chevron { transition: none; }
  details.filter-panel-section[open] > .filter-grid,
  details.filter-panel-section[open] > .filter-panel-day-indicator { animation: none; }
}

.filter-panel-label-row--inline-status {
  justify-content: flex-start;
  gap: 10px;
}

.filter-panel-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.filter-clear-btn {
  padding: 8px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
  text-align: center;
}

.filter-clear-btn:hover {
  color: #ef4444;
  border-color: #fecaca;
  background: #fef2f2;
}

.filter-panel-actions {
  display: none;
}

.filter-apply-btn {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px -12px rgba(43, 138, 85, 0.55);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.filter-apply-btn:hover {
  background: #237a49;
  box-shadow: 0 10px 28px -12px rgba(43, 138, 85, 0.62);
}

.filter-apply-btn:active {
  transform: scale(0.98);
}

/* Mobile filter overrides (must come after desktop rules) */
@media (max-width: 768px) {
  .filter-fab {
    position: fixed;
    left: auto;
    right: 12px;
    top: auto;
    bottom: 20px;
    padding: 10px;
    border-radius: 50%;
    font-size: 0;
    box-shadow: 0 2px 12px rgba(20, 36, 24, 0.12);
    z-index: 15;
    width: 42px;
    height: 42px;
    justify-content: center;
    gap: 0;
  }

  .filter-fab span {
    display: none;
  }

  .filter-fab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .filter-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: min(78vh, calc(100dvh - 72px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(20, 36, 24, 0.16);
    padding: 20px 20px 0;
    z-index: 16;
    transform: translateY(100%) scale(1);
    opacity: 0;
  }

  .filter-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .filter-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(20, 36, 24, 0.12);
    border-radius: 100px;
    margin: 0 auto 14px;
  }

  .filter-grid {
    gap: 8px;
  }

  .filter-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .filter-panel-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: block;
    margin: 8px -20px 0;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255,255,255,0.86), var(--card-bg) 34%);
    border-top: 1px solid var(--border);
  }

  .map-location-controls button {
    width: 30px;
    height: 30px;
  }
}

/* ===== Admin Floating Bar ===== */
.admin-bar {
  position: fixed;
  top: 14px;
  left: 380px;
  z-index: 20;
  transition: opacity 0.3s, transform 0.3s;
  will-change: transform, opacity;
}

.admin-bar.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

.admin-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 16px;
  background: linear-gradient(135deg, #1e3a2f, #234a39);
  border: 1px solid rgba(43, 138, 85, 0.35);
  border-radius: 100px;
  box-shadow: 0 6px 24px rgba(20, 36, 24, 0.2);
  color: #fff;
  font-family: var(--font-body);
}

.admin-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-bar-left svg {
  stroke: var(--accent);
  flex-shrink: 0;
}

.admin-bar-label {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.admin-bar-count {
  font-size: 0.75rem;
  opacity: 0.7;
  font-weight: 400;
}

.admin-exit-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

.admin-exit-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.4);
}

.admin-exit-btn svg {
  stroke: #fca5a5;
}

/* Admin pending card in sidebar */
.result-card--admin {
  border-left: 3px solid var(--accent);
}

.admin-card-badge {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 2px;
}

.no-results {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ===== Admin Code Overlay ===== */
.admin-code-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 36, 24, 0);
  transition: background 0.3s ease;
  pointer-events: none;
}

.admin-code-overlay.open {
  background: rgba(20, 36, 24, 0.5);
  pointer-events: all;
}

.admin-code-card {
  width: 360px;
  max-width: 92vw;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(20, 36, 24, 0.2);
  padding: 32px 28px;
  text-align: center;
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}

.admin-code-overlay.open .admin-code-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.admin-code-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--primary);
}

.admin-code-header h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.admin-code-desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 18px;
}

.admin-code-input {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--primary);
  text-align: center;
  letter-spacing: 0.15em;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-code-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 138, 85, 0.1);
}

.admin-code-input.shake {
  animation: shakeInput 0.4s ease;
}

@keyframes shakeInput {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.admin-code-error {
  font-size: 0.78rem;
  color: #ef4444;
  font-weight: 500;
  margin-top: 8px;
}

.admin-code-error.hidden { display: none; }

.admin-code-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.admin-code-cancel,
.admin-code-submit {
  flex: 1;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s;
}

.admin-code-cancel {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}

.admin-code-cancel:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.admin-code-submit {
  background: var(--accent);
  border: none;
  color: #fff;
}

.admin-code-submit:hover {
  background: #237a49;
}

/* ===== Request Category Chips ===== */
.req-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.req-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.15s;
  user-select: none;
}

.req-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.req-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.req-chip--event:hover {
  border-color: var(--event-accent);
  color: var(--event-accent);
}

.req-chip--event.active {
  background: var(--event-accent);
  color: #fff;
  border-color: var(--event-accent);
}

.req-chip--truck:hover {
  border-color: var(--truck-accent);
  color: var(--truck-accent);
}

.req-chip--truck.active {
  background: var(--truck-accent);
  color: #fff;
  border-color: var(--truck-accent);
}

/* Spinner for submit button */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin { animation: spin 0.8s linear infinite; }

/* ===== Request Modal Overlay ===== */
.request-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 36, 24, 0);
  transition: background 0.3s ease;
  pointer-events: none;
  overflow-y: auto;
  padding: 20px;
}

.request-overlay.open {
  background: rgba(20, 36, 24, 0.45);
  pointer-events: all;
}

.request-card {
  width: 540px;
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(20, 36, 24, 0.22);
  padding: 0;
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
  position: relative;
}

.request-overlay.open .request-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.request-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
  z-index: 2;
}

.request-close:hover {
  color: var(--primary);
  border-color: var(--accent);
}

/* Header */
.request-header {
  padding: 32px 28px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.request-icon-circle {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  border-radius: 50%;
  margin: 0 auto 14px;
  color: var(--accent);
}

.request-header h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary);
  margin-bottom: 6px;
}

.request-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Form */
.request-form {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Type toggle */
.request-type-toggle {
  display: flex;
  gap: 8px;
}

.request-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

.request-type-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.request-type-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.request-type-btn.active svg {
  stroke: #fff;
}

.request-type-btn[data-type="event"].active {
  background: var(--event-accent);
  border-color: var(--event-accent);
}

@media (max-width: 520px) {
  .request-form {
    padding: 20px clamp(14px, 5vw, 20px) 28px;
  }

  .request-type-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .request-type-btn {
    min-width: 0;
    width: 100%;
    padding: 11px 10px;
    gap: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .request-type-btn svg {
    flex-shrink: 0;
  }

  .request-type-btn[data-type="truck"] {
    grid-column: 1 / -1;
  }
}

/* Fields */
.request-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.request-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.01em;
}

.request-field input[type="text"],
.request-field input[type="email"],
.request-field input[type="url"],
.request-field input[type="number"],
.request-field textarea,
.request-field select {
  padding: 10px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--primary);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.request-field input:focus,
.request-field textarea:focus,
.request-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 138, 85, 0.1);
}

.request-field textarea {
  resize: vertical;
  min-height: 70px;
}

.request-field select {
  cursor: pointer;
}

.request-field select option {
  padding: 4px;
}

.request-hint {
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.7;
}

.request-field-error {
  font-size: 0.72rem;
  color: #ef4444;
  font-weight: 500;
  min-height: 0;
}

.request-field.has-error input,
.request-field.has-error textarea,
.request-field.has-error select {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.request-field.hidden { display: none; }

/* Coords row */
.request-coords-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.request-field-half {
  flex: 1;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.request-field-half label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
}

.request-field-half input {
  padding: 10px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--primary);
  transition: border-color 0.2s;
  outline: none;
  width: 100%;
}

.request-field-half input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 138, 85, 0.1);
}

.request-pick-map-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
  white-space: nowrap;
}

.request-pick-map-btn:hover {
  background: var(--accent);
  color: #fff;
}

.request-pick-map-btn:hover svg {
  stroke: #fff;
}

/* Owner toggle */
.request-owner-toggle {
  margin: 4px 0 2px;
}

.request-owner-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}

.request-owner-label:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
}

.request-owner-label input[type="checkbox"] {
  display: none;
}

.request-owner-switch {
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  background: var(--border);
  border-radius: 11px;
  position: relative;
  transition: background 0.25s;
}

.request-owner-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

.request-owner-label input:checked ~ .request-owner-switch {
  background: var(--accent);
}

.request-owner-label input:checked ~ .request-owner-switch::after {
  transform: translateX(18px);
}

.request-owner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.request-owner-text strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
}

.request-owner-text small {
  font-size: 0.73rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Verification section */
.request-verification {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.request-verification-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}

.request-verification-header h3 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
}

.request-verification-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Photo upload */
.request-photo-upload {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}

.request-photo-upload.drag-over {
  border-color: var(--accent);
  background: var(--accent-light);
}

.request-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 16px;
  color: var(--muted);
  text-align: center;
}

.request-photo-placeholder span {
  font-size: 0.8rem;
  font-weight: 500;
}

.request-photo-placeholder.hidden { display: none; }

.request-photo-btn-row {
  display: flex;
  gap: 8px;
  margin: 4px 0;
}

.request-photo-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s, color 0.2s;
}

.request-photo-action-btn:hover {
  background: var(--accent);
  color: #fff;
}

.request-photo-action-btn:hover svg {
  stroke: #fff;
}

.request-photo-hint {
  font-size: 0.7rem !important;
  opacity: 0.6;
  font-weight: 400 !important;
}

.request-photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}

.request-photo-preview.hidden { display: none; }

.request-photo-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--accent-light);
}

.request-proof-item {
  display: flex;
  width: 96px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-align: center;
}

.request-proof-item span {
  width: 100%;
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-proof-item--file {
  min-height: 72px;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.request-proof-item--file strong {
  color: var(--accent);
  font-size: 0.78rem;
}

/* Submit */
.request-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

.request-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s;
}

.request-submit-btn:hover {
  background: #237a49;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(43, 138, 85, 0.2);
}

.request-submit-btn:active {
  transform: scale(0.98);
}

.request-actions-note {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

.request-actions-note strong {
  color: var(--accent);
}

/* ===== Toast Notification ===== */
.request-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 2000;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.request-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

.request-toast-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(20, 36, 24, 0.16);
  max-width: 440px;
}

.request-toast-inner strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
}

.request-toast-inner span {
  font-size: 0.78rem;
  color: var(--muted);
}

.request-toast--accept .request-toast-inner {
  border-left: 3px solid var(--accent);
}

.request-toast--decline .request-toast-inner {
  border-left: 3px solid #ef4444;
}

/* ===== Map Pick Overlay ===== */
.map-pick-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  pointer-events: none;
}

.map-pick-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(20, 36, 24, 0.2);
  font-size: 0.85rem;
  font-weight: 500;
  pointer-events: all;
  animation: slideDown 0.3s ease;
}

.map-pick-banner svg {
  flex: 0 0 auto;
}

.map-pick-instruction {
  min-width: 0;
  line-height: 1.35;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.map-pick-cancel {
  padding: 5px 14px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 100px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s;
}

.map-pick-cancel:hover {
  background: rgba(255,255,255,0.35);
}

.map-pick-actions {
  width: min(420px, calc(100vw - 32px));
  padding: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(20, 36, 24, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.map-pick-overlay.has-selection .map-pick-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}

.map-pick-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s, opacity 0.2s;
}

.map-pick-confirm:hover:not(:disabled) {
  background: #237a49;
  transform: translateY(-1px);
}

.map-pick-confirm:disabled {
  cursor: wait;
  opacity: 0.72;
}

.map-pick-marker {
  position: relative;
  width: 34px;
  height: 42px;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(20, 36, 24, 0.26));
}

.map-pick-marker::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 3px;
  width: 28px;
  height: 28px;
  background: var(--accent);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.map-pick-marker::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 13px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}

/* ===== Admin Review Panel ===== */
.admin-review-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #d97706;
  background: #fef3c7;
  padding: 4px 14px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  align-self: flex-start;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.admin-verification-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.admin-verif-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.admin-verif-label {
  font-weight: 600;
  color: var(--muted);
  min-width: 60px;
}

.admin-verif-value {
  flex: 1;
  color: var(--primary);
}

.admin-verif-badge {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
}

.admin-verif-badge--ok {
  background: #dcfce7;
  color: #16a34a;
}

.admin-verif-badge--warn {
  background: #fef3c7;
  color: #d97706;
}

/* Admin action buttons */
.admin-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}

.admin-accept-btn,
.admin-decline-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s;
}

.admin-accept-btn {
  background: var(--accent);
  color: #fff;
}

.admin-accept-btn:hover {
  background: #237a49;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(43, 138, 85, 0.2);
}

.admin-decline-btn {
  background: #fef2f2;
  color: #ef4444;
  border: 1.5px solid #fecaca;
}

.admin-decline-btn:hover {
  background: #fee2e2;
  border-color: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.12);
}

/* Scrollbar for request card */
.request-card::-webkit-scrollbar {
  width: 4px;
}

.request-card::-webkit-scrollbar-track {
  background: transparent;
}

.request-card::-webkit-scrollbar-thumb {
  background: rgba(43, 138, 85, 0.15);
  border-radius: 2px;
}

/* ===== Inline SVG Icons in Tags & Badges ===== */
.tag-icon,
.ui-icon,
.product-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.tag .tag-icon,
.popup-tag .tag-icon,
.detail-tag .tag-icon {
  vertical-align: -0.15em;
  margin-right: 1px;
}

.req-chip .tag-icon {
  vertical-align: -0.1em;
  margin-right: 2px;
}

.notif-item-icon .ui-icon {
  vertical-align: middle;
}

.notif-pref-label .ui-icon {
  vertical-align: -0.15em;
  margin-right: 2px;
}

.notif-followed-chip .ui-icon {
  vertical-align: -0.15em;
  margin-right: 1px;
}

.admin-card-badge .ui-icon {
  vertical-align: -0.15em;
  margin-right: 1px;
}

.owner-badge {
  color: var(--accent);
  font-weight: 600;
}

.admin-verif-badge .ui-icon {
  vertical-align: middle;
}

/* ===================================================
   Rating System
   =================================================== */

/* Rating badge next to title */
.detail-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.detail-name-row .detail-name {
  flex: 1 1 220px;
  min-width: 0;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
}
.rating-badge-score {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
}
.rating-badge-count {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 400;
  margin-left: 2px;
}

.detail-award-badges {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  position: absolute;
  top: 32px;
  right: 0;
  justify-content: flex-end;
  width: min(170px, 44%);
  gap: 3px;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}

.detail-award-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  min-height: 21px;
  padding: 3px 8px;
  border: 1px solid rgba(43, 138, 85, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 20px -18px rgba(20, 36, 24, 0.4);
  backdrop-filter: blur(8px);
}

.detail-award-badge span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-award-badge--gold {
  border-color: rgba(196, 134, 33, 0.3);
  background: rgba(255, 248, 230, 0.88);
  color: #9a5f12;
}

.detail-award-badge--silver {
  border-color: rgba(116, 129, 144, 0.28);
  background: rgba(248, 250, 252, 0.9);
  color: #475569;
}

.detail-award-badge--bronze {
  border-color: rgba(168, 95, 43, 0.28);
  background: rgba(255, 246, 239, 0.9);
  color: #9a4f1f;
}

.detail-award-badge--nominee {
  border-color: rgba(43, 138, 85, 0.14);
  background: rgba(247, 250, 246, 0.72);
  color: #4d6b55;
  font-weight: 600;
  box-shadow: none;
}

.detail-award-badge--nominee svg {
  opacity: 0.72;
}

.detail-award-badge--link {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.detail-award-badge--link:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 22px -16px rgba(20, 36, 24, 0.5);
  transform: translateY(-1px);
}

.detail-award-badge--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .detail-header--has-awards .detail-name-row {
    padding-right: 88px;
  }

  .detail-award-badges {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: auto;
    margin-top: 2px;
  }
}

/* Detail panel tabs */
.detail-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 6px;
  border: 1px solid rgba(43, 138, 85, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(224, 240, 230, 0.36), rgba(255, 255, 255, 0.9));
  overflow-x: auto;
  scrollbar-width: none;
}

.detail-tabs::-webkit-scrollbar {
  display: none;
}

.detail-tab {
  flex: 0 0 auto;
  padding: 10px 13px;
  font-family: var(--font-heading);
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
  text-align: center;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.detail-tab:hover {
  color: var(--primary);
  background: rgba(255, 255, 255, 0.72);
}
.detail-tab.active {
  color: var(--accent);
  background: #fff;
  box-shadow:
    0 14px 24px -22px rgba(20, 36, 24, 0.58),
    inset 0 0 0 1px rgba(43, 138, 85, 0.14);
}
.detail-panel--event .detail-tab.active {
  color: var(--event-accent);
  box-shadow:
    0 14px 24px -22px rgba(180, 83, 9, 0.52),
    inset 0 0 0 1px rgba(217, 119, 6, 0.18);
}
.detail-panel--truck .detail-tab.active {
  color: var(--truck-accent, var(--accent));
  box-shadow:
    0 14px 24px -22px rgba(20, 36, 24, 0.52),
    inset 0 0 0 1px rgba(20, 36, 24, 0.14);
}

/* Tab content */
.detail-tab-content {
  display: none;
  flex-direction: column;
  gap: 24px;
}
.detail-tab-content.active {
  display: flex;
}
.detail-tab-reviews {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.detail-tab-reviews.active {
  display: flex;
}
.detail-tab-reviews .reviews-list {
  max-height: none;
}

/* ============================================================
   "Om butikken" tab — story, highlights, products
   ============================================================ */
/* ========== OM BUTIKKEN TAB ========== */
.detail-tab-about {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0 32px;
}
.detail-tab-about.active {
  display: flex;
}

/* --- About hero --- */
.about-hero {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 24px;
  border: 1px solid rgba(43, 138, 85, 0.16);
  background:
    radial-gradient(circle at top right, rgba(43, 138, 85, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(43, 138, 85, 0.12), rgba(255, 255, 255, 0.92));
  overflow: hidden;
  box-shadow: 0 22px 42px -30px rgba(20, 36, 24, 0.34);
}
.about-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -35% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(10px);
}
.about-kicker,
.about-hero-title,
.about-hero-lead,
.about-hero-pills {
  position: relative;
  z-index: 1;
}
.about-kicker {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.about-hero-title {
  font-family: var(--font-heading);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary);
  line-height: 1.1;
}
.about-hero-lead {
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(20, 36, 24, 0.86);
}
.about-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.about-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.72);
  color: var(--primary);
  border: 1px solid rgba(20, 36, 24, 0.08);
}
.about-pill--accent {
  background: rgba(43, 138, 85, 0.12);
  color: var(--accent);
  border-color: rgba(43, 138, 85, 0.1);
}
.about-pill--rating {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.14);
}

/* --- Layout --- */
.about-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-story-card,
.about-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.about-story-card {
  position: relative;
  padding: 24px;
  overflow: hidden;
}
.about-story-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(43, 138, 85, 0.08));
}
.about-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.about-story-icon {
  flex-shrink: 0;
  opacity: 0.72;
}
.about-story-title {
  font-family: var(--font-heading);
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--primary);
}
.about-story-subtitle {
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}
.about-story-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-parakraph {
  position: relative;
  margin: 0;
  padding-left: 16px;
  font-size: 0.9rem;
  line-height: 1.82;
  color: var(--primary);
}
.about-parakraph::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(43, 138, 85, 0.34);
}
.about-parakraph:first-child {
  font-size: 0.95rem;
}
.about-sidebar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.about-card {
  padding: 18px 18px 20px;
  min-height: 100%;
}
.about-card-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 14px;
}
.about-fact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-fact {
  display: grid;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(43, 138, 85, 0.1);
}
.about-fact:first-child {
  padding-top: 0;
  border-top: none;
}
.about-fact-label {
  font-family: var(--font-heading);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.about-fact-value {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--primary);
}
.about-products {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.about-product-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.77rem;
  font-weight: 600;
}
.about-quote-card {
  grid-column: 1 / -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(224, 240, 230, 0.55));
}
.about-quote {
  margin: 0;
}
.about-quote-text {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--primary);
}
.about-quote-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 0.74rem;
  color: var(--muted);
}
.about-review-stars {
  color: #b45309;
  font-weight: 700;
}

/* --- "Læs mere" link on overview tab --- */
.detail-read-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(43, 138, 85, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.detail-read-more-link:hover {
  transform: translateY(-1px);
  border-color: rgba(43, 138, 85, 0.24);
  box-shadow: 0 10px 24px -18px rgba(20, 36, 24, 0.45);
}

/* ========== FORHANDLERE / NETVÆRK TAB ========== */
.detail-network-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(43, 138, 85, 0.14);
  background:
    linear-gradient(135deg, rgba(43, 138, 85, 0.1), rgba(255, 255, 255, 0.94));
}

.detail-network-preview-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.detail-network-preview-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.detail-network-preview-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--primary);
}

.detail-network-preview-btn {
  flex-shrink: 0;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.detail-network-preview-btn:hover {
  background: #237a49;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -18px rgba(20, 36, 24, 0.52);
}

.detail-tab-network {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0 32px;
}

.detail-tab-network.active {
  display: flex;
}

.network-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 24px;
  border-radius: 24px;
  border: 1px solid rgba(43, 138, 85, 0.16);
  background:
    radial-gradient(circle at top right, rgba(217, 119, 6, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(43, 138, 85, 0.14), rgba(255, 255, 255, 0.96));
  box-shadow: 0 22px 42px -30px rgba(20, 36, 24, 0.34);
}

.network-kicker,
.network-hero-title,
.network-hero-lead,
.network-stat-list,
.network-hero-actions {
  position: relative;
  z-index: 1;
}

.network-kicker {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 10px;
}

.network-hero-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--primary);
}

.network-hero-lead {
  margin: 12px 0 0;
  font-size: 0.93rem;
  line-height: 1.68;
  color: rgba(20, 36, 24, 0.84);
}

.network-stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.network-stat-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(20, 36, 24, 0.08);
  color: var(--accent);
  font-size: 0.77rem;
  font-weight: 600;
}

.network-stat-pill--market {
  color: #b45309;
}

.network-hero-actions {
  margin-top: 16px;
}

.network-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.network-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.network-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(43, 138, 85, 0.12);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.network-card--market {
  border-color: rgba(217, 119, 6, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 247, 237, 0.9));
}

.network-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.network-card-badge,
.network-card-flag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
}

.network-card-badge {
  color: var(--accent);
  background: rgba(43, 138, 85, 0.12);
}

.network-card-badge--market {
  color: #b45309;
  background: rgba(217, 119, 6, 0.14);
}

.network-card-flag {
  color: var(--muted);
  background: rgba(20, 36, 24, 0.05);
}

.network-card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary);
}

.network-card-address,
.network-card-meta,
.network-card-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
}

.network-card-address {
  color: var(--primary);
}

.network-card-meta {
  color: var(--accent);
  font-weight: 600;
}

.network-card--market .network-card-meta {
  color: #b45309;
}

.network-card-note {
  color: var(--muted);
}

.network-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.detail-action-btn--compact {
  padding: 8px 12px;
  font-size: 0.76rem;
}

.detail-action-btn--accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.detail-action-btn--accent:hover {
  background: #237a49;
  border-color: #237a49;
}

@media (min-width: 769px) {
  body.detail-network-focus .detail-panel {
    pointer-events: none;
  }

  body.detail-network-focus #sidebar {
    width: 0;
    min-width: 0;
    border-right-color: transparent;
    background: rgba(242, 245, 241, 0.66);
  }

  body.detail-network-focus #sidebar .sidebar-inner {
    opacity: 0;
    transform: translateX(-18px);
    pointer-events: none;
  }

  body.detail-network-focus #map::after {
    opacity: 1;
    background: rgba(244, 248, 245, 0.14);
    backdrop-filter: saturate(0.78) brightness(1.1);
  }

  body.detail-network-focus .detail-panel-inner {
    pointer-events: auto;
  }

  body.detail-network-focus .detail-panel.open {
    background: transparent;
  }

  body.detail-network-focus .filter-fab,
  body.detail-network-focus .filter-panel {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(0.98);
  }
}

@media (max-width: 768px) {
  .about-hero,
  .about-story-card,
  .network-hero {
    padding: 22px 20px;
  }

  .about-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail-network-preview {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-network-preview-btn {
    width: 100%;
  }

  .network-card-grid {
    grid-template-columns: 1fr;
  }

  .detail-tabs {
    gap: 4px;
    padding: 4px;
  }

  .detail-tab {
    padding: 9px 11px;
    font-size: 0.75rem;
  }
}

@media (max-width: 560px) {
  .about-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Rating summary in detail panel */
.rating-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.rating-stars {
  display: flex;
  gap: 2px;
}

.rating-star {
  width: 18px;
  height: 18px;
  color: #d4d4d4;
  transition: color 0.15s;
}

.rating-star.filled {
  color: #f59e0b;
}

.rating-star.half {
  color: #f59e0b;
}

.rating-avg {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.rating-count {
  font-size: 0.75rem;
  color: var(--muted);
}

.rating-no-reviews {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

/* Individual review cards */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}

.reviews-list::-webkit-scrollbar {
  width: 3px;
}

.reviews-list::-webkit-scrollbar-thumb {
  background: rgba(43, 138, 85, 0.15);
  border-radius: 2px;
}

.review-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.review-author {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
}

.review-date {
  font-size: 0.7rem;
  color: var(--muted);
}

.review-stars {
  display: flex;
  gap: 1px;
}

.review-star {
  width: 13px;
  height: 13px;
  color: #d4d4d4;
}

.review-star.filled {
  color: #f59e0b;
}

.review-comment {
  font-size: 0.8rem;
  color: var(--primary);
  line-height: 1.55;
  opacity: 0.85;
}

.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 100px;
  align-self: flex-start;
}

.review-badge svg {
  flex-shrink: 0;
}

/* Write review button */
.rating-write-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
  margin-top: 4px;
}

.rating-write-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(43, 138, 85, 0.1);
}

.rating-write-btn--event:hover {
  border-color: var(--event-accent);
  color: var(--event-accent);
}

.rating-write-btn--truck:hover {
  border-color: var(--truck-accent);
  color: var(--truck-accent);
}

/* Rating form */
.rating-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  animation: ratingFormIn 0.25s ease;
}

@keyframes ratingFormIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.rating-form-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
}

.rating-form-stars {
  display: flex;
  gap: 4px;
}

.rating-form-star {
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: #d4d4d4;
  transition: color 0.15s ease, transform 0.15s ease;
}

.rating-form-star:hover,
.rating-form-star.active {
  color: #f59e0b;
  transform: scale(1.15);
}

.rating-form-star.hover-preview {
  color: #fbbf24;
}

.rating-form input[type="text"],
.rating-form textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-family: var(--font-body);
  color: var(--primary);
  background: var(--bg);
  outline: none;
  transition: border-color 0.2s;
}

.rating-form input[type="text"]:focus,
.rating-form textarea:focus {
  border-color: var(--accent);
}

.rating-form textarea {
  resize: vertical;
  min-height: 60px;
  max-height: 140px;
}

.rating-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.rating-form-cancel {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

.rating-form-cancel:hover {
  background: var(--bg-alt);
  color: var(--primary);
}

.rating-form-submit {
  padding: 7px 16px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

.rating-form-submit:hover {
  background: #237a49;
}

.rating-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rating-form-submit--event {
  background: var(--event-accent);
}

.rating-form-submit--event:hover {
  background: #b45309;
}

.rating-form-submit--truck {
  background: var(--truck-accent);
}

.rating-form-submit--truck:hover {
  background: #c0392b;
}

.rating-form-error {
  font-size: 0.75rem;
  color: #dc2626;
  display: none;
}

.rating-form-error.show {
  display: block;
}

.rating-form-info {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;
  font-style: italic;
}

/* Rating success toast */
.rating-success-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #dcfce7;
  border: 1px solid rgba(22, 163, 74, 0.2);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  color: #16a34a;
  animation: ratingFormIn 0.25s ease;
}

/* Admin: pending ratings in results list */
.admin-rating-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-rating-target {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
}

.admin-rating-author {
  font-size: 0.75rem;
  color: var(--muted);
}

.admin-rating-comment {
  font-size: 0.8rem;
  color: var(--primary);
  line-height: 1.5;
  opacity: 0.85;
}

.admin-rating-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.admin-rating-approve,
.admin-rating-reject {
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
  border: none;
}

.admin-rating-approve {
  background: var(--accent-light);
  color: var(--accent);
}

.admin-rating-approve:hover {
  background: var(--accent);
  color: #fff;
}

.admin-rating-reject {
  background: #fee2e2;
  color: #dc2626;
}

.admin-rating-reject:hover {
  background: #dc2626;
  color: #fff;
}

/* ===== Admin Shops Tab ===== */
.admin-shops-search-wrap {
  margin-bottom: 8px;
}

.admin-shops-search {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-family: var(--font-body);
  color: var(--primary);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.admin-shops-search:focus {
  border-color: var(--accent);
}

.admin-export-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin: 0 0 8px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  gap: 10px;
}
.admin-export-stats {
  font-size: 12px;
  color: var(--muted);
}
.admin-export-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.admin-export-btn:active {
  opacity: 0.85;
}

.admin-wiki-layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 0.58fr);
  gap: 10px;
  align-items: start;
}

.admin-wiki-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 62vh;
  overflow: auto;
}

.admin-wiki-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--primary);
  text-align: left;
  cursor: pointer;
}

.admin-wiki-row:hover,
.admin-wiki-row.active {
  border-color: rgba(43, 138, 85, 0.35);
  box-shadow: 0 4px 14px rgba(20, 36, 24, 0.08);
}

.admin-wiki-row-name {
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-wiki-row-meta {
  font-size: 0.7rem;
  color: var(--muted);
}

.admin-wiki-preview {
  min-width: 0;
}

.admin-wiki-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.admin-wiki-markdown {
  width: 100%;
  min-height: 58vh;
  resize: vertical;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 768px) {
  .admin-wiki-layout {
    grid-template-columns: 1fr;
  }

  .admin-wiki-list {
    max-height: 36vh;
  }
}

.admin-shop-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 8px 18px rgba(20, 36, 24, 0.04);
}

.admin-shop-card-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-shop-card-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-shop-card-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.admin-shop-card-name {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.admin-shop-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.admin-shop-card-address {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.admin-shop-owner-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.74rem;
  line-height: 1.45;
}

.admin-shop-owner-status--assigned {
  background: rgba(43, 138, 85, 0.08);
  color: var(--accent);
}

.admin-shop-owner-status--empty {
  background: #fff8e1;
  color: #8a6512;
}

.admin-shop-owner-status--loading {
  background: var(--bg-alt);
  color: var(--muted);
}

.admin-shop-owner-status-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
}

.admin-shop-owner-status-copy {
  min-width: 0;
}

.admin-shop-owner-status-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.82;
}

.admin-shop-owner-status-value {
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-shop-owner-status-secondary {
  margin-top: 2px;
  font-size: 0.74rem;
  font-weight: 500;
  opacity: 0.88;
  overflow-wrap: anywhere;
}

.admin-shop-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-shop-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-action-label {
  display: none;
}

.admin-shop-locate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.admin-shop-locate-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.admin-shop-edit-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  min-height: 38px;
}

.admin-shop-edit-btn:hover {
  background: rgba(43,138,85,0.1);
  border-color: var(--accent);
}

.admin-shop-owner-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #d8c27c;
  border-radius: var(--radius-sm);
  background: #fff8e1;
  color: #8a6512;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  min-height: 38px;
}

.admin-shop-owner-btn:hover {
  background: #ffefbf;
  border-color: #c69216;
}

/* ===== Shop Edit Modal ===== */
.shop-edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.shop-edit-box {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  max-height: 90vh;
  overflow-y: auto;
}

.shop-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.shop-edit-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
}

.shop-edit-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--muted);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}

.shop-edit-close:hover {
  background: var(--bg-alt);
}

.shop-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shop-edit-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}

.shop-edit-input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.shop-edit-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43,138,85,0.1);
}

.shop-edit-input[type=number] { -moz-appearance: textfield; }
.shop-edit-input[type=number]::-webkit-inner-spin-button { display: none; }

.shop-edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shop-edit-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shop-edit-cat-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary);
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.shop-edit-cat-label input { display: none; }

.shop-edit-cat-label.selected {
  background: rgba(43,138,85,0.12);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.shop-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: flex-end;
}

.shop-edit-save {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-size: 0.83rem;
  font-family: var(--font-body);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}

.shop-edit-save:hover { background: #236e44; }

.shop-edit-danger {
  margin-right: auto;
  background: #fff1f1;
  color: #b42318;
  border: 1px solid #f4c7c3;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 0.83rem;
  font-family: var(--font-body);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}

.shop-edit-danger:hover {
  background: #ffe4e1;
  border-color: #e8958d;
}

.shop-edit-cancel {
  background: var(--bg-alt);
  color: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 0.83rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s;
}

.shop-edit-cancel:hover { background: var(--border); }

.shop-edit-subtitle {
  margin: -8px 0 10px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
}

.shop-edit-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #fde8e8;
  color: #c0392b;
  font-size: 0.79rem;
  line-height: 1.5;
}

.shop-edit-section-note {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f4f6f0;
  color: #516354;
  font-size: 0.76rem;
  line-height: 1.55;
}

.shop-edit-current-owner {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.shop-edit-current-owner strong {
  color: inherit;
}

.shop-edit-current-owner--assigned {
  background: rgba(43, 138, 85, 0.08);
  color: var(--accent);
}

.shop-edit-current-owner--empty {
  background: #fff8e1;
  color: #8a6512;
}

.shop-edit-current-owner--loading {
  background: var(--bg-alt);
  color: var(--muted);
}

.shop-edit-textarea {
  min-height: 110px;
  resize: vertical;
}

.shop-edit-hours {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fbfcf8;
}

.shop-edit-hours-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shop-edit-hours-help {
  margin: 0;
  font-size: 0.73rem;
  color: var(--muted);
  line-height: 1.45;
}

.shop-edit-hours-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-edit-hours-row {
  display: grid;
  grid-template-columns: minmax(82px, 0.7fr) minmax(0, 1.9fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.18s, background 0.18s;
}

.shop-edit-hours-row.is-open {
  border-color: rgba(43, 138, 85, 0.34);
  background: rgba(43, 138, 85, 0.045);
}

.shop-edit-hours-row.is-closed {
  background: rgba(244, 246, 240, 0.85);
}

.shop-edit-hours-row.is-always {
  border-color: rgba(43, 138, 85, 0.22);
}

.shop-edit-hours-day {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
}

.shop-edit-hours-controls {
  display: grid;
  grid-template-columns: minmax(120px, 0.95fr) minmax(190px, 1.25fr);
  gap: 8px;
  align-items: center;
}

.shop-edit-hours-times {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.shop-edit-hours-times.is-disabled {
  opacity: 0.42;
}

.shop-edit-hours-separator {
  color: var(--muted);
  font-size: 0.76rem;
}

.shop-edit-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-edit-products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shop-edit-products-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
}

.shop-edit-products-help {
  margin: 0;
  font-size: 0.73rem;
  color: var(--muted);
  line-height: 1.5;
}

.shop-edit-add-product-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(43, 138, 85, 0.25);
  border-radius: var(--radius-sm);
  background: rgba(43, 138, 85, 0.08);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.shop-edit-add-product-btn:hover {
  background: rgba(43, 138, 85, 0.16);
  border-color: var(--accent);
}

.shop-edit-product-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-edit-product-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(110px, 0.8fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.7);
}

.shop-edit-product-row .shop-edit-label {
  margin: 0;
}

.shop-edit-product-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 38px;
  border: 1px solid #f1c2c2;
  border-radius: var(--radius-sm);
  background: #fff5f5;
  color: #c0392b;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.shop-edit-product-remove:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

.shop-edit-product-empty {
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.shop-edit-actions .shop-edit-save[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

.shop-edit-actions .shop-edit-danger[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .shop-edit-hours {
    padding: 12px;
  }

  .shop-edit-hours-row,
  .shop-edit-hours-controls {
    grid-template-columns: 1fr;
  }

  .shop-edit-product-row {
    grid-template-columns: 1fr;
  }

  .shop-edit-product-remove {
    width: 100%;
  }
}

/* ===== Shop Flag System ===== */
.detail-flag-btn {
  color: var(--muted);
}

.detail-flag-btn.detail-flag-btn--flagged {
  color: #d97706;
  background: #fffbeb;
  border-color: #fcd34d;
}

.detail-flag-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: #d97706;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 5px 10px;
}

.shop-flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #d97706;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 4px;
}

.admin-shop-card--flagged {
  border-color: #fcd34d;
  background: #fffdf5;
}

.admin-shop-clearflag-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm);
  background: #fffbeb;
  color: #d97706;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  min-height: 38px;
}

.admin-shop-clearflag-btn:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}

.admin-shop-delete-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  background: #fff1f2;
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  min-height: 38px;
}

.admin-shop-delete-btn:hover {
  background: #fee2e2;
  border-color: #dc2626;
}

.admin-shop-delete-btn--confirming {
  background: #dc2626;
  border-color: #b91c1c;
  color: #fff;
  animation: pulse-confirm 0.5s ease;
}

.admin-shop-delete-btn--confirming:hover {
  background: #b91c1c;
  border-color: #991b1b;
}

.admin-shop-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  gap: 0;
  flex-shrink: 0;
  border-radius: 14px;
}

.admin-shop-action-btn svg {
  flex-shrink: 0;
}

.admin-action-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d97706;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(20, 36, 24, 0.12);
}

@keyframes pulse-confirm {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ===== Admin Pending Shops Tab ===== */
.admin-pending-summary {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.admin-pending-summary-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
}

.admin-pending-summary--flagged { color: #b45309; }
.admin-pending-summary--notfound { color: #dc2626; }
.admin-pending-summary--approved { color: #2b8a55; }
.admin-pending-summary--rejected { color: #dc2626; }

.admin-pending-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 8px;
  transition: box-shadow 0.2s;
}

.admin-pending-card:hover {
  box-shadow: 0 4px 16px rgba(20, 36, 24, 0.1);
}

.admin-pending-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-pending-card-info {
  flex: 1;
  min-width: 0;
}

.admin-pending-card-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary);
  margin-bottom: 2px;
}

.admin-pending-card-address {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.admin-pending-evidence {
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--bg-alt);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
  line-height: 1.4;
  max-height: 60px;
  overflow-y: auto;
}

.admin-pending-status {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 6px;
}

.pending-status--flagged {
  background: #fef3c7;
  color: #b45309;
}

.pending-status--notfound {
  background: #fde8e8;
  color: #dc2626;
}

.admin-discovery-status--pending {
  background: #e0f2fe;
  color: #0369a1;
}

.admin-discovery-status--approved {
  background: #dcfce7;
  color: #166534;
}

.admin-discovery-status--rejected {
  background: #fee2e2;
  color: #b91c1c;
}

.admin-pending-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-pending-locate-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

.admin-pending-locate-btn:hover {
  background: var(--card-bg);
  color: var(--primary);
  border-color: var(--accent);
}

.admin-pending-accept-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

.admin-pending-accept-btn:hover {
  background: #237a49;
  border-color: #237a49;
}

.admin-pending-accept-btn:active {
  transform: scale(0.97);
}

.admin-pending-remove-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: #6b7280;
  border: 1px solid #6b7280;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

.admin-pending-remove-btn:hover {
  background: #4b5563;
  border-color: #4b5563;
}

.admin-pending-remove-btn--confirming {
  background: #dc2626;
  border-color: #b91c1c;
  animation: pulse-confirm 0.5s ease;
}

.admin-pending-remove-btn--confirming:hover {
  background: #b91c1c;
  border-color: #991b1b;
}

.admin-tab-count--warning {
  background: #d97706;
}

/* Admin pending card extra details */
.admin-pending-desc {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-pending-evidence--empty {
  color: #9ca3af;
  font-style: italic;
}

.admin-pending-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}


.admin-request-attachments {
  display: grid;
  gap: 8px;
}

.admin-request-attachment {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
}

.admin-request-attachment:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.admin-request-attachment span {
  color: var(--muted);
  font-size: 0.76rem;
}

.admin-request-attachment--error {
  color: #b91c1c;
  background: #fef2f2;
  border-color: rgba(185, 28, 28, 0.2);
}
.admin-pending-link {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  padding: 3px 8px;
  background: var(--accent-light);
  border-radius: 5px;
  transition: background 0.2s;
}

.admin-pending-link:hover {
  background: var(--bg-alt);
  text-decoration: underline;
}

.admin-discovery-proof-editor {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(43, 138, 85, 0.18);
}

.admin-discovery-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.admin-discovery-proof-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
}

.admin-discovery-input {
  font-size: 0.78rem;
  padding: 8px 10px;
}

.admin-discovery-proof-hint {
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.45;
}

.admin-pending-draft-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: #ecfdf3;
  border: 1px solid rgba(43, 138, 85, 0.24);
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #237a49;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

.admin-pending-draft-btn:hover {
  background: #dff7e8;
  border-color: rgba(43, 138, 85, 0.38);
}

.admin-pending-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 4px;
}

.admin-pending-meta strong {
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 900px) {
  .admin-discovery-proof-grid {
    grid-template-columns: 1fr;
  }
}

/* Verification status badges in detail panel */
.detail-status-notfound {
  color: #dc2626 !important;
}

.detail-status-rejected {
  color: #6b7280 !important;
  text-decoration: line-through;
}

/* Rating section within detail panel for events/trucks */
.detail-panel--event .rating-write-btn:hover {
  border-color: var(--event-accent);
  color: var(--event-accent);
}

.detail-panel--truck .rating-write-btn:hover {
  border-color: var(--truck-accent);
  color: var(--truck-accent);
}

/* Admin rating tab count badge */
.admin-tab-ratings-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--event-accent);
  color: #fff;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: 4px;
}

/* Stars in sidebar result cards */
.result-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.result-card-rating .mini-star {
  width: 11px;
  height: 11px;
  color: #f59e0b;
}

.result-card-rating .rating-text {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 500;
}

/* ===== Rating in hover popup ===== */
.popup-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #b45309;
  margin-top: 2px;
}

.popup-rating svg {
  flex-shrink: 0;
}

/* ===== Admin Tab Toggle ===== */
.admin-tab-toggle {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(20,36,24,0.07);
}

.admin-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
  min-width: 0;
  text-align: center;
  line-height: 1.2;
  min-height: 48px;
  position: relative;
}

.admin-tab-btn:hover {
  color: var(--primary);
  background: rgba(255,255,255,0.5);
}

.admin-tab-btn.active {
  background: var(--card-bg);
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(20, 36, 24, 0.08);
}

.admin-tab-btn svg {
  flex-shrink: 0;
}

.admin-tab-label {
  display: inline;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .admin-tab-toggle {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: static;
  }

  .admin-tab-btn {
    padding: 0;
    min-height: 52px;
  }

  .admin-tab-label {
    display: none;
  }

  .admin-tab-btn svg {
    width: 18px;
    height: 18px;
  }

  .admin-export-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-export-btn {
    width: 100%;
  }

  .admin-shops-search {
    font-size: 16px;
  }

  .admin-shop-card {
    padding: 14px;
  }

  .admin-shop-locate-btn,
  .admin-shop-clearflag-btn,
  .admin-shop-owner-btn,
  .admin-shop-edit-btn,
  .admin-shop-delete-btn {
    min-height: 44px;
  }

  .admin-shop-card-tags .tag {
    padding: 5px 10px;
    font-size: 0.72rem;
  }
}

@media (max-width: 720px) {
  .admin-shop-card-name-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-shop-card-badges {
    justify-content: flex-start;
  }

  .admin-shop-card-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .admin-shop-action-btn {
    width: 100%;
  }
}

.admin-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent);
  color: #fff;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  position: absolute;
  top: 6px;
  right: 6px;
  box-shadow: 0 2px 6px rgba(20, 36, 24, 0.14);
}

/* ===== Admin Reviews Tab ===== */
.admin-reviews-place {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}

.admin-reviews-place-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 8px;
}

.admin-reviews-place-type {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--muted);
}

.admin-reviews-place-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: color 0.15s;
}

.admin-reviews-place-name:hover {
  color: var(--accent);
}

.admin-reviews-place-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

.admin-reviews-place-stats svg {
  flex-shrink: 0;
}

.admin-reviews-toggle-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
  flex-shrink: 0;
}

.admin-reviews-toggle-btn:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

.admin-reviews-toggle-btn svg {
  transition: transform 0.25s ease;
}

.admin-reviews-list {
  border-top: 1px solid var(--border);
  padding: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
  max-height: 600px;
  overflow-y: auto;
}

.admin-reviews-list.collapsed {
  max-height: 0;
  overflow: hidden;
  border-top: none;
}

.admin-review-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-review-item:last-child {
  border-bottom: none;
}

.admin-review-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-review-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #dc2626;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
  align-self: flex-start;
}

/* ===== Toast Notification ===== */
.app-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-family: var(--font-body);
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9000;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform, opacity;
  max-width: calc(100vw - 48px);
  text-align: center;
}
.app-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.app-toast--error { background: #b91c1c; }
.app-toast--success { background: var(--accent); }

.admin-review-delete-btn:hover {
  background: #fee2e2;
  border-color: #dc2626;
}

.admin-review-delete-btn svg {
  flex-shrink: 0;
}

/* ========== CVR VALIDATION ========== */
.cvr-check-btn {
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cvr-check-btn:hover { opacity: 0.85; }
.cvr-check-btn:disabled { opacity: 0.5; cursor: default; }

.cvr-status {
  display: block;
  margin-top: 5px;
  font-size: 0.75rem;
  font-weight: 500;
}
.cvr-status--ok { color: var(--accent); }
.cvr-status--error { color: #dc2626; }
.cvr-status--warn { color: #d97706; }

/* CVR lookup in admin panel */
.cvr-lookup-btn {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
}
.cvr-lookup-btn:hover { background: var(--border); }
.cvr-lookup-result {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 500;
}
.cvr-lookup-ok { color: var(--accent); }
.cvr-lookup-error { color: #dc2626; }
.cvr-lookup-warn { color: #d97706; }

/* ========== DAWA AUTOCOMPLETE ========== */
.dawa-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  z-index: 1000;
  overflow: hidden;
  margin-top: 2px;
}
.dawa-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.dawa-item:last-child { border-bottom: none; }
.dawa-item:hover { background: var(--hover); }

/* ========== DUPLICATE WARNING ========== */
.duplicate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.duplicate-overlay.open { opacity: 1; }

.duplicate-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 24px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.duplicate-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.duplicate-hdr h3 { margin: 0; font-size: 1rem; }
.duplicate-list {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.duplicate-item {
  padding: 8px 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  font-size: 0.82rem;
}
.duplicate-type {
  font-weight: 600;
  margin-right: 6px;
  color: #92400e;
}
.duplicate-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.dup-cancel-btn {
  flex: 1;
  padding: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
}
.dup-continue-btn {
  flex: 1;
  padding: 9px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
}

/* ========== DETAIL ACTION BUTTONS ========== */
.detail-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}
.detail-action-btn:hover { background: var(--hover); }
.detail-action-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Navigation dropdown (directions + route plan) */
.detail-nav-wrap {
  position: relative;
  display: inline-block;
}
.detail-nav-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
  gap: 4px;
  width: 100%;
}
.detail-nav-btn:hover { background: #237a49 !important; border-color: #237a49 !important; }
.detail-nav-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: calc(50% + 50px);
  transform: translateX(-50%) translateY(6px);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  min-width: 215px;
  z-index: 60;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}
.detail-nav-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.detail-nav-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 15px;
  border: none;
  background: none;
  font-size: 0.83rem;
  cursor: pointer;
  color: var(--primary);
  text-align: left;
  transition: background 0.12s;
  font-family: var(--font-body);
}
.detail-nav-opt:not(:last-child) { border-bottom: 1px solid #f0f0f0; }
.detail-nav-opt:hover { background: var(--bg); }
.detail-nav-opt.active { color: var(--accent); font-weight: 600; }

/* Season button in sidebar */
.season-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 12px;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s;
}
.season-btn:hover { background: var(--hover); }

/* ========== ROUTE PLANNER ========== */
.route-fab.hidden { display: none !important; }
.route-fab {
  position: fixed;
  bottom: 140px;
  right: 16px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  transition: box-shadow 0.15s;
}
.route-fab:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.16); }

.route-count {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.route-panel {
  position: fixed;
  bottom: 180px;
  right: 16px;
  z-index: 200;
  width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s;
}
.route-panel.open { opacity: 1; transform: translateY(0); }

.route-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.route-panel-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
}

.route-stops-list { padding: 8px 0; max-height: 200px; overflow-y: auto; }
.route-stop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
}
.route-stop-num {
  width: 20px;
  height: 20px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.route-stop-name { flex: 1; color: var(--text); }
.route-stop-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  padding: 2px;
}
.route-stop-remove:hover { color: #dc2626; }

.route-empty {
  padding: 16px 14px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
.route-hint {
  padding: 8px 14px 12px;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}
.route-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.route-maps-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}
.route-optimize-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  transition: background 0.15s;
}
.route-optimize-btn:hover { background: var(--accent-light); }

.route-clear-btn {
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ========== ADMIN ANALYTICS ========== */
.analytics-container { padding: 4px 0; }
.analytics-section { margin-bottom: 16px; }
.analytics-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding: 0 2px;
}
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.analytics-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.analytics-stat--pending .analytics-stat-val { color: #d97706; }
.analytics-stat-val {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.analytics-stat-label {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 2px;
}
.analytics-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}
.analytics-row:last-child { border-bottom: none; }
.analytics-rank {
  width: 20px;
  height: 20px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}
.analytics-row-name { flex: 1; color: var(--text); }
.analytics-row-val { font-weight: 600; color: #f59e0b; font-size: 0.78rem; }
.analytics-empty { font-size: 0.8rem; color: var(--muted); padding: 4px 0; }

.analytics-export-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.analytics-export-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s;
}
.analytics-export-btn:hover { background: var(--hover); }

/* ========== SEASONALITY CALENDAR ========== */
.seasonal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
  padding: 16px;
}
.seasonal-overlay.open { opacity: 1; }

.seasonal-card {
  background: #fff;
  border-radius: 18px;
  width: min(860px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 90px rgba(0,0,0,0.28);
  overflow: hidden;
}
.seasonal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.seasonal-title {
  margin: 0 0 3px;
  font-size: 1.1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--primary);
}
.seasonal-sub { margin: 0; font-size: 0.82rem; color: var(--muted); }
.seasonal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  display: flex;
  padding: 6px;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.seasonal-close:hover { background: #f0f0f0; color: var(--primary); }

/* Bar grid layout */
.sc2-table-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; }

.sc2-header {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  background: #fafafa;
  z-index: 3;
  border-bottom: 1px solid #ebebeb;
  padding: 10px 0 8px;
}
.sc2-label-spacer { width: 160px; flex-shrink: 0; }
.sc2-month-row {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding-right: 16px;
}
.sc2-month {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sc2-month.sc2-cur-hdr { color: var(--accent); }

.sc2-rows { padding: 6px 0 10px; }

.sc2-row {
  display: flex;
  align-items: center;
  padding: 2px 0;
  border-radius: 8px;
  margin: 0 8px;
  transition: background 0.12s;
}
.sc2-row:hover { background: #f7f9f7; }
.sc2-row-active .sc2-name { font-weight: 600; color: var(--primary); }

.sc2-label {
  width: 152px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 14px;
}
.sc2-icon { display: flex; align-items: center; flex-shrink: 0; opacity: 0.9; }
.sc2-name { font-size: 0.8rem; color: #444; flex: 1; min-width: 0; }
.sc2-now-badge {
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.sc2-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 38px;
  padding-right: 16px;
}

.sc2-cell {
  position: relative;
  height: 38px;
}

/* Current month column highlight (behind bar) */
.sc2-cur-col {
  background: rgba(43, 138, 85, 0.06);
}
.sc2-cur-col::before {
  content: '';
  position: absolute;
  inset: 0;
  border-left: 1.5px solid rgba(43, 138, 85, 0.25);
  border-right: 1.5px solid rgba(43, 138, 85, 0.25);
  pointer-events: none;
}

/* Season bar via ::after */
.sc2-on::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  height: 11px;
  background: var(--c);
  opacity: 0.82;
}
.sc2-start::after { left: 5px; border-radius: 6px 0 0 6px; }
.sc2-end::after   { right: 5px; border-radius: 0 6px 6px 0; }
.sc2-start.sc2-end::after { left: 5px; right: 5px; border-radius: 6px; }

/* Footer legend */
.sc2-footer {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 24px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
  flex-wrap: wrap;
  background: #fafafa;
}
.sc2-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  color: var(--muted);
}
.sc2-leg-swatch {
  width: 22px;
  height: 9px;
  border-radius: 5px;
  display: inline-block;
}
.sc2-leg-on  { background: var(--accent); opacity: 0.8; }
.sc2-leg-off { background: #e5e7eb; }
.sc2-leg-cur-label { color: var(--accent); font-weight: 600; }
.sc2-leg-cur-box {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(43, 138, 85, 0.08);
  border: 1.5px solid rgba(43, 138, 85, 0.35);
}

/* ========== OWNER CLAIMING ========== */
.claim-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  padding: 16px;
}
.claim-overlay.open { opacity: 1; }

.claim-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.claim-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
}
.claim-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.claim-hdr h2 { margin: 0; font-size: 1rem; line-height: 1.3; }
.claim-desc { font-size: 0.82rem; color: var(--muted); margin: 0 0 16px; }
.claim-note { font-size: 0.75rem; color: var(--muted); margin-top: 12px; text-align: center; }

/* ========== PHOTO GALLERY ========== */
.photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.photo-thumb-wrap {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
}
.photo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}
.photo-thumb-wrap:hover .photo-thumb { transform: scale(1.05); }

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 90vw;
  max-height: 90vh;
}
.lightbox-img {
  max-width: 80vw;
  max-height: 85vh;
  border-radius: 8px;
  object-fit: contain;
}
.lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
.lightbox-prev, .lightbox-next {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.lightbox-counter {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
}

/* ========== BATCH ADMIN ACTIONS ========== */
.batch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface2, #1e2e22);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.batch-select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.batch-select-all input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.batch-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.batch-approve-btn,
.batch-decline-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: none;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.batch-approve-btn {
  background: #2d6a4f;
  color: #fff;
}
.batch-approve-btn:hover { opacity: 0.85; }
.batch-decline-btn {
  background: #7f1d1d;
  color: #fff;
}
.batch-decline-btn:hover { opacity: 0.85; }

.admin-card-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.batch-checkbox {
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
/* ===== Legal Info Modal ===== */
.legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 36, 24, 0);
  transition: background 0.3s ease;
  pointer-events: none;
  overflow-y: auto;
  padding: 20px;
}

.legal-overlay.open {
  background: rgba(20, 36, 24, 0.45);
  pointer-events: all;
}

.legal-card {
  width: 600px;
  max-width: 96vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(20, 36, 24, 0.22);
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
  overflow: hidden;
  position: relative;
}

.legal-overlay.open .legal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.legal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
  z-index: 2;
}

.legal-close:hover {
  color: var(--primary);
  border-color: rgba(20, 36, 24, 0.3);
}

.legal-header {
  padding: 28px 60px 0 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.legal-icon-circle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.legal-header h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.legal-tabs {
  display: flex;
  padding: 16px 28px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.legal-tabs::-webkit-scrollbar { display: none; }

.legal-tab {
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color 0.18s, border-color 0.18s;
}

.legal-tab:hover { color: var(--primary); }

.legal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.legal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 28px;
}

.legal-pane { display: none; }
.legal-pane.active { display: block; }

.legal-loading,
.legal-load-error {
  padding: 18px 0;
}

.legal-pane h2 {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin-bottom: 14px;
}

.legal-pane h3 {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 8px;
  margin-top: 22px;
}

.legal-pane h2:first-child,
.legal-pane h3:first-child { margin-top: 0; }

.legal-pane p {
  font-size: 0.855rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 10px;
}

.legal-pane ul {
  margin: 6px 0 12px 18px;
  padding: 0;
}

.legal-pane ul li {
  font-size: 0.855rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 4px;
}

.legal-pane strong { color: var(--primary); }

.legal-pane a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.legal-pane a:hover { color: var(--primary); }

.legal-link-hub {
  margin: 12px 0 18px;
}

.legal-link-hub-intro {
  margin-bottom: 12px;
}

.legal-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.legal-link-card {
  padding: 14px 15px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 247, 0.92));
  border: 1px solid rgba(20, 36, 24, 0.08);
  box-shadow: 0 18px 30px -28px rgba(20, 36, 24, 0.34);
}

.legal-link-card--featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(224, 240, 230, 0.9), rgba(255, 255, 255, 0.98));
  border-color: rgba(43, 138, 85, 0.16);
}

.legal-link-card-kicker {
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.legal-pane a.legal-link-featured {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--primary);
  text-decoration: none;
}

.legal-pane a.legal-link-featured:hover {
  color: var(--accent);
}

.legal-link-card p:last-child {
  margin-bottom: 0;
  font-size: 0.81rem;
  line-height: 1.65;
}

.legal-link-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legal-pane a.legal-link-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(224, 240, 230, 0.76);
  border: 1px solid rgba(43, 138, 85, 0.14);
  color: var(--primary);
  font-size: 0.79rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.legal-pane a.legal-link-pill:hover {
  background: rgba(224, 240, 230, 1);
  border-color: rgba(43, 138, 85, 0.24);
  color: var(--accent);
  transform: translateY(-1px);
}

.legal-contact {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.65;
}

.legal-contact strong { color: var(--accent); }

@media (max-width: 600px) {
  .legal-card { max-height: 92vh; }
  .legal-header { padding: 20px 56px 0 20px; }
  .legal-tabs { padding: 12px 20px 0; }
  .legal-body { padding: 18px 20px 24px; }
  .legal-link-grid {
    grid-template-columns: 1fr;
  }
}

.admin-card-body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

/* ===================================================
   Auth / Profile Modals
   Reuses the legal-overlay pattern and design tokens.
   =================================================== */

/* ── Shared overlay backdrop ── */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 36, 24, 0);
  transition: background 0.3s ease;
  pointer-events: none;
  overflow-y: auto;
  padding: 20px;
}

.auth-overlay.open {
  background: rgba(20, 36, 24, 0.45);
  pointer-events: all;
}

/* ── Modal card ── */
.auth-card {
  width: 440px;
  max-width: 96vw;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(20, 36, 24, 0.22);
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.auth-overlay.open .auth-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.auth-card--profile {
  width: 460px;
}

.auth-card--activation {
  width: 440px;
}

/* ── Close button ── */
.auth-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
  z-index: 2;
}

.auth-close:hover {
  color: var(--primary);
  border-color: rgba(20, 36, 24, 0.3);
}

/* ── Header ── */
.auth-header {
  padding: 28px 60px 0 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-header--profile {
  align-items: flex-start;
}

.auth-header-text { flex: 1; min-width: 0; }

.auth-icon-circle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.auth-header h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.auth-profile-email {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Role badge ── */
.auth-role-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.auth-role-badge--user    { background: var(--bg-alt);        color: var(--muted); }
.auth-role-badge--owner   { background: var(--accent-light);  color: var(--accent); }
.auth-role-badge--store-owner { background: var(--accent-light); color: var(--accent); }
.auth-role-badge--admin   { background: #fef3c7;              color: #92400e; }

/* ── Tabs ── */
.auth-tabs {
  display: flex;
  padding: 16px 28px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.auth-tabs::-webkit-scrollbar { display: none; }

.auth-tab {
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color 0.18s, border-color 0.18s;
}

.auth-tab:hover { color: var(--primary); }

.auth-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Body / panes ── */
.auth-body {
  padding: 24px 28px 28px;
  overflow-y: auto;
}

.auth-pane { display: none; }
.auth-pane.active { display: block; }

.auth-reset-desc {
  font-size: 0.845rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 18px;
}

/* Signup newsletter disclosure */
.auth-consent-note {
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 14px 0 4px;
}

/* ── Form elements ── */
.auth-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 6px;
  margin-top: 16px;
}

.auth-label:first-child { margin-top: 0; }

.auth-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 138, 85, 0.1);
}

.auth-input::placeholder { color: var(--muted); opacity: 0.6; }

.auth-error,
.auth-success {
  font-size: 0.8rem;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.auth-error {
  color: #c0392b;
  background: #fde8e8;
}

.auth-success {
  color: #17603a;
  background: #e6f4ea;
}

.auth-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  padding: 11px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.auth-submit-btn:hover    { background: #237a49; }
.auth-submit-btn:active   { transform: scale(0.98); }
.auth-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Footer links ── */
.auth-links {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}

.auth-links a {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.15s;
}

.auth-links a:hover { opacity: 0.75; }

.auth-activation-body p {
  font-size: 0.845rem;
  color: var(--muted);
  line-height: 1.65;
}

.auth-info-note {
  margin-top: 14px;
  padding: 10px 12px;
  color: var(--primary);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ── Auth button (in sidebar header) ── */
#auth-btn.auth-btn--active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-light);
}

/* ── Profile modal — body sections ── */
.auth-profile-body {
  padding: 20px 28px 4px;
  overflow-y: auto;
}

.auth-profile-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.auth-profile-section:last-child { border-bottom: none; }

.auth-profile-section-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

/* ── Toggle row (e.g. Email opt-in) ── */
.auth-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: default;
}

.auth-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.845rem;
  color: var(--muted);
  user-select: none;
  cursor: pointer;
}

/* Green variant of the toggle slider (overrides amber from event-toggle) */
.auth-toggle-green input:checked ~ .event-toggle-slider {
  background: var(--accent);
}

/* Stacked toggle rows (e.g. notifications + newsletter) */
.auth-toggle-row + .auth-toggle-row { margin-top: 12px; }

.auth-toggle-hint {
  margin-top: 10px;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Profile empty state ── */
.auth-profile-empty {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 12px;
}

/* ── Claimed shop rows ── */
.auth-shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-size: 0.845rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 6px;
}

.auth-shop-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.auth-shop-row-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-shop-row svg { color: var(--accent); flex-shrink: 0; }

.auth-shop-manage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid rgba(43, 138, 85, 0.25);
  border-radius: var(--radius-sm);
  background: rgba(43, 138, 85, 0.08);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s;
}

.auth-shop-manage-btn:hover {
  background: rgba(43, 138, 85, 0.16);
  border-color: var(--accent);
}

/* ── Claim shop button ── */
.auth-claim-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid rgba(43, 138, 85, 0.25);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.845rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.auth-claim-btn:hover {
  background: rgba(43, 138, 85, 0.18);
  border-color: var(--accent);
}

/* ── Profile footer (sign out) ── */
.auth-profile-footer {
  padding: 16px 28px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.auth-signout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.auth-signout-btn:hover {
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.35);
  background: rgba(192, 57, 43, 0.05);
}

@media (max-width: 600px) {
  .auth-card,
  .auth-card--profile { max-width: 100%; }
  .auth-header  { padding: 20px 56px 0 20px; }
  .auth-tabs    { padding: 12px 20px 0; }
  .auth-body    { padding: 18px 20px 24px; }
  .auth-profile-body   { padding: 16px 20px 4px; }
  .auth-profile-footer { padding: 14px 20px 20px; }
}

/* ========== ADMIN NEWSLETTER ========== */
.nl-container { padding: 4px 0 8px; }

.nl-intro-card {
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.nl-intro-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
}
.nl-intro-text {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
}

.nl-composer { display: flex; flex-direction: column; gap: 16px; }

.nl-field { display: flex; flex-direction: column; gap: 6px; }
.nl-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nl-optional { text-transform: none; font-weight: 400; opacity: 0.8; }

.nl-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
}
.nl-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.nl-textarea { resize: vertical; line-height: 1.55; min-height: 56px; }

.nl-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--bg);
}
.nl-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.nl-group-title {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nl-add-btn {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.nl-add-btn:hover { background: var(--accent-light); }

.nl-repeat-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nl-repeat-item + .nl-repeat-item { margin-top: 9px; }
.nl-repeat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nl-repeat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nl-remove-btn {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: #c0392b;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
}
.nl-remove-btn:hover { text-decoration: underline; }
.nl-field-row { display: flex; gap: 7px; flex-wrap: wrap; }
.nl-field-row .nl-input { flex: 1 1 140px; }

/* ── Checkbox row (dividers) ── */
.nl-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.nl-check input { accent-color: var(--accent); width: 14px; height: 14px; }

/* ── Image upload field ── */
.nl-image-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.nl-image-field--busy { opacity: 0.55; pointer-events: none; }
.nl-img-preview {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}
.nl-img-preview img { display: block; width: 100%; height: auto; }
.nl-btn-mini {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
  border: 1px dashed var(--accent);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.nl-btn-mini:hover { background: var(--accent-light); }
.nl-img-hint { font-size: 0.7rem; color: var(--muted); }

/* ── Nested list block ── */
.nl-list-items { margin-top: 4px; }
.nl-list-item { background: var(--bg); }
.nl-add-btn--sub { align-self: flex-start; margin-top: 2px; }
.nl-list > .nl-add-btn--sub { margin-top: 8px; }

.nl-status {
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.nl-status--hidden { display: none; }
.nl-status--info    { background: var(--bg); color: var(--muted); }
.nl-status--success { background: var(--accent-light); color: var(--accent); border-color: var(--border); }
.nl-status--error   { background: #fdecea; color: #c0392b; border-color: rgba(192, 57, 43, 0.2); }

.nl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-btn {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.nl-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.nl-btn--ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--primary);
}
.nl-btn--ghost:hover:not(:disabled) { background: var(--accent-light); }
.nl-btn--primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  flex: 1 1 auto;
}
.nl-btn--primary:hover:not(:disabled) { background: #237046; }

/* ── Campaign history ── */
.nl-history {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.nl-history-title {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.nl-history-empty { font-size: 0.8rem; color: var(--muted); }
.nl-history-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.nl-history-row:last-child { border-bottom: none; }
.nl-history-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nl-history-status {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.nl-history-status--sent    { background: var(--accent-light); color: var(--accent); }
.nl-history-status--sending { background: #fef3c7; color: #b45309; }
.nl-history-status--failed  { background: #fdecea; color: #c0392b; }
.nl-history-status--draft   { background: var(--bg-alt); color: var(--muted); }
.nl-history-subject {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nl-history-meta { font-size: 0.73rem; color: var(--muted); margin-top: 3px; }
.nl-history-error { font-size: 0.73rem; color: #c0392b; margin-top: 3px; }

/* ── Preview overlay ── */
.nl-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(20, 36, 24, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.nl-preview-card {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nl-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.nl-preview-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.nl-preview-subject {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 2px;
}
.nl-preview-count { font-size: 0.73rem; color: var(--muted); margin-top: 2px; }
.nl-preview-actions { display: flex; align-items: center; gap: 6px; }
.nl-preview-width {
  font-family: var(--font-body);
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
}
.nl-preview-width.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.nl-preview-close {
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}
.nl-preview-stage {
  flex: 1;
  overflow: auto;
  background: var(--bg);
  display: flex;
  justify-content: center;
  padding: 16px;
}
.nl-preview-frame {
  width: 100%;
  min-height: 60vh;
  border: none;
  background: #f2f5f1;
  transition: max-width 0.2s ease;
}
.nl-preview-frame--mobile { max-width: 380px; }

@media (max-width: 560px) {
  .nl-actions { flex-direction: column; }
  .nl-btn { width: 100%; }
  .nl-preview-overlay { padding: 0; }
  .nl-preview-card { max-width: 100%; max-height: 100vh; border-radius: 0; }
}