/* ========== Modern UI/UX Design System ========== */
:root {
  /* Color System */
  --brand-primary: #fd9118;
  --brand-primary-hover: #e08a00;
  --brand-primary-dark: #c97a00;
  --brand-primary-light: #ffb366;
  
  /* Neutral Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  
  /* Semantic Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  
  /* Spacing System (8px grid) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  
  /* Border Radius */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px; /* For tags */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* Layout */
  --container-max-width: 1200px;
  --header-height: 80px;
  --sidebar-width: 320px;
  --bottom-nav-height: 56px;
  /* Normal browser mode must not inherit Safari's changing toolbar inset.
     Standalone/PWA mode opts into the device safe-area below. */
  --mobile-bottom-safe-area: 0px;

  /* Brand accent tints — token-based so tenant themes (e.g. the red
     escortservice_xxx preset) stay on-brand instead of inheriting a
     hard-coded orange. */
  --brand-primary-soft: rgba(253, 145, 24, 0.1);
  --brand-primary-focus: rgba(253, 145, 24, 0.15);
}

/* ========== Reset & Base Styles ========== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Kill the iOS tap-highlight overlay on EVERY element. Document-level
     delegated click handlers (filterbar outside-click, timeline, account
     UI) make Safari treat any tapped block (paragraph, card row, footer
     column) as clickable and flash its adaptive system highlight over
     that block's bounds — a fast semi-transparent band, rendered LIGHT on
     dark surfaces: the "white band" seen on mobile. Setting this on html
     alone is not enough: WebKit applies the property per element and the
     html value does not reliably cover descendants on all iOS versions,
     so it must live on the universal selector. */
  -webkit-tap-highlight-color: transparent;
}

html {
  /* Must match the body background: the html layer shows through during
     iOS rubber-band overscroll, keyboard viewport resizes, and repaints —
     an unset (white) html background flashes as a white band on taps and
     scrolls, most visibly on dark surfaces. */
  background-color: var(--color-gray-50);
}

/* Smooth scrolling ONLY while focus sits inside the document (clicking an
   in-page anchor focuses the link in Chrome/Firefox, so those jumps stay
   animated; Safari does not focus clicked links and simply jumps — fine).
   A bare `html { scroll-behavior: smooth }` is NOT safe: browsers also
   apply it to their own scroll restoration on navigation (back/forward,
   reload, history jumps). Safari then visibly ANIMATES the page from the
   top to the restored offset, racing past tiles it has not rasterised
   yet, which renders as a blank white band shooting vertically through
   the viewport right after tapping a link. That band survived every
   header positioning variant because it never was the header. On
   load/restore nothing is focused, so restoration snaps instantly. */
html:focus-within {
  scroll-behavior: smooth;
}

/* Offset in-page anchor jumps so targets aren't hidden behind the
   sticky header. */
:target {
  scroll-margin-top: calc(var(--header-height) + var(--space-2));
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-gray-900);
  background-color: var(--color-gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== Typography ========== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
  margin-bottom: var(--space-4);
  color: var(--color-gray-700);
}

/* SEO override intro slots: the sitewide SEO override layer may inject
   editorial HTML (<p>, <a>, <strong>) into surface-specific intro slots
   (hero subtitles, landing intros) through the shared <x-seo-heading>
   component. Nested elements must adopt the slot's own typography and
   color — the global `p` color (gray-700) is unreadable on dark hero
   surfaces like the Top 100 header. */
.seo-heading__intro p {
  margin: 0 0 var(--space-3);
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.seo-heading__intro p:last-child {
  margin-bottom: 0;
}

.seo-heading__intro a {
  color: inherit;
  text-decoration: underline;
}

.seo-heading__intro strong {
  color: inherit;
}

/* ========== Layout & Container ========== */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 640px) {
  .container { padding: 0 var(--space-6); }
}

@media (min-width: 1024px) {
  .container { padding: 0 var(--space-8); }
}

/* ========== Modern Header System ========== */
.site-header {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Desktop-only: sticky anchoring plus its compositing layer (Safari
   repaints sticky elements a frame late during momentum scrolls without
   it). On mobile (≤1024px block below) the header is FIXED with
   scroll-direction auto-hide and must not carry this transform hack. */
@media (min-width: 1025px) {
  .site-header {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* Spacer rendered directly after the header in partials/header.blade.php.
   Only does work on mobile where the header is position:fixed (below);
   on desktop the sticky header occupies normal flow. Lives inside the
   header partial (not body padding) so header-less layouts (account,
   reels) are never affected. */
.site-header-spacer {
  display: none;
}

.header-top {
  background: var(--brand-primary);
  color: var(--color-white);
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav__link {
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  transition: all var(--transition-fast);
  position: relative;
}

.header-nav__link:hover {
  transform: translateY(-1px);
}

.header-nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-white);
  transition: all var(--transition-fast);
  transform: translateX(-50%);
}

.header-nav__link:hover::after {
  width: 80%;
}

/* Header Nav Dropdown (orange top bar) */
.header-nav__item--has-dropdown {
  position: relative;
}

.header-nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  min-width: 180px;
  padding: var(--space-2);
  list-style: none;
  margin: 0;
  display: none;
  z-index: 1000;
}

/* Invisible hover bridge over the 8px visual gap between the menu item and
   its dropdown. Without it, slowly moving the cursor down crosses a dead
   zone, :hover on the parent li is lost and the submenu snaps shut (fast
   movements skip the gap within one mouse event, which is why it only
   happened when moving slowly). */
.header-nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.header-nav__item--has-dropdown:hover > .header-nav-dropdown {
  display: block;
  animation: headerNavDropdownIn 0.15s ease-out;
}

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

.header-nav-dropdown li {
  margin: 0;
  padding: 0;
}

.header-nav-dropdown__link {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-gray-700);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.header-nav-dropdown__link:hover {
  background: var(--brand-primary);
  color: var(--color-white);
}

/* Caret indicator on the orange top bar (desktop only — the submenus are
   not hover-expandable on the mobile scroll strip, so the caret would be
   misleading there). Flips while the submenu is open for a clear
   open/closed affordance. */
.header-nav__caret {
  display: inline-block;
  font-size: 0.95em;
  opacity: 0.95;
  margin-left: 2px;
  transition: transform var(--transition-fast);
}

.header-nav__item--has-dropdown:hover .header-nav__caret {
  transform: rotate(180deg);
}

/* Mobile chrome: aligned to the same 1024px breakpoint as the rest of the
   header so phones and tablets share one consistent layout. The orange bar
   becomes a horizontally scrollable strip of plain links. */
@media (max-width: 1024px) {
  /* Compact strip: the links already guarantee a 44px touch target via
     min-height, so the bar itself needs no extra vertical padding. */
  .header-top { padding: var(--space-1) 0; }
  .header-nav__item--has-dropdown:hover > .header-nav-dropdown { display: none; }
  .header-nav__caret { display: none; }
  .header-nav__list {
    gap: var(--space-2);
    overflow-x: auto;
    /* The strip must ONLY pan horizontally. With overflow-x:auto alone,
       overflow-y computes to auto as well, and the few px of vertical
       overflow (hover underline / translateY) made the strip vertically
       scrollable — letters could be dragged half out of view and stick
       there. Hidden blocks user panning; page scroll chains through. */
    overflow-y: hidden;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
    white-space: nowrap;
    /* Fade the right edge to hint that the strip scrolls horizontally. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
  .header-nav__list::-webkit-scrollbar { display: none; }
  .header-nav__item { flex-shrink: 0; }
  /* Hide items that only work via the desktop hover dropdown (e.g. Date type,
     which links to '#') so they aren't dead entries on the mobile strip. */
  .header-nav__item--desktop-only { display: none; }
  .header-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.header-main {
  padding: 15px 0;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-white);
}

.header-main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-8);
}

.mobile-menu-btn {
  display: none;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  cursor: pointer;
}

/* No sticky UA ring after taps / focus-restore on drawer close; keyboard
   users keep a clear brand ring (same pattern as .mobile-menu__close). */
.mobile-menu-btn:focus {
  outline: none;
}

.mobile-menu-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.mobile-menu-btn img { width: 24px; height: 24px; }

.header-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  flex-shrink: 0;
}

.brand__logo {
  width: auto;
  max-width: 200px;
}

/* Mobile/tablet compact header chrome (must come after the base rules
   above to win the cascade): cap the logo height — the skyline artwork
   stays legible at this size — and trim the header band's vertical
   padding so the content below surfaces sooner. Tenant themes that set
   an explicit logo height (e.g. escortservice_xxx) load after this file
   and still win. */
@media (max-width: 1024px) {
  .header-main {
    padding: var(--space-2) 0;
  }

  .brand__logo {
    max-height: 64px;
  }

  /* iOS Safari white-band glitch, mitigation via auto-hide (iteration 4;
     see git history). The header stays FIXED for permanent branding, but
     hides while scrolling down and reveals on scroll-up or near the top
     (script.js initFixedHeader). Why this works: Safari translates
     viewport-anchored layers during rubber-band overscroll, toolbar
     collapse/expand and navigation scroll-jumps, and paints the layer
     background (white) before its content is rasterised. That was the
     blank white band WITHOUT a logo sweeping through the screen. Those
     risky moments all happen while scrolled deep into the page, exactly
     when this pattern has translated the header fully offscreen, so a
     blanked layer has nothing visible left to flash. The
     .site-header-spacer (header partial) replaces the space the fixed
     header no longer occupies in flow; script.js measures the real
     height into --site-header-height. Desktop keeps position:sticky. */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: transform 220ms ease;
  }

  .site-header--hidden {
    /* 110% clears the box-shadow so no hairline stays behind. */
    transform: translateY(-110%);
  }

  /* Iteration 5 — tap-navigation variant of the same Safari glitch: the
     scroll auto-hide above leaves the header VISIBLE when the user taps a
     link (they just scrolled up or stood still). During the navigation
     Safari translates the fixed (viewport-anchored) layer through the
     screen painted blank — the white band sweeping over the cards.
     Fix: UNPIN, never hide. position:absolute makes the layer
     document-anchored (Safari's toolbar/navigation viewport moves cannot
     translate/blank it) and script.js sets an inline top equal to the
     CURRENT scroll offset, so the header stays pixel-exactly where the
     user sees it: at the top it overlays the spacer, revealed mid-page it
     keeps floating in place. Earlier attempts hid it (empty gray gap
     after a logo tap) or parked it at document top (visible header
     vanished when tapped after a scroll-up reveal) — both flashed.
     No transform override: a header hidden by --hidden simply STAYS
     hidden. pageshow re-pins (bfcache back-swipe / cancelled nav). */
  .site-header--navigating {
    position: absolute;
    transition: none;
  }

  /* Field observation (owner, iOS): the band only sweeps when the header
     is HIDDEN at tap time — a visible fixed header never flashes. The
     culprit is therefore the offscreen translateY(-110%) composited
     layer itself: Safari paints exactly that layer blank on intermediate
     positions during the navigation viewport jump (band sweeping bottom
     → top). So when unpinning a hidden header, drop the transform layer
     entirely and hide via visibility instead: still invisible, but no
     composited transform layer is left for Safari to sweep through the
     screen. */
  .site-header--navigating.site-header--hidden {
    transform: none;
    visibility: hidden;
  }

  .site-header-spacer {
    display: block;
    height: var(--site-header-height, 118px);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  margin-left: auto;
  justify-content: flex-end;
}

/* Notification Button (Mobile Only) */
.notification-btn {
  display: none;
  position: relative;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--color-gray-600);
  transition: all var(--transition-fast);
  border-radius: var(--radius-lg);
}

.notification-btn:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-800);
}

/* Bell gets focus back when the inbox overlay closes — suppress the UA
   ring for pointer/script focus, keep the brand ring for keyboard. */
.notification-btn:focus {
  outline: none;
}

.notification-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.notification-badge {
  position: absolute;
  /* Unread sits LEFT, live presence RIGHT — mirrors the overlay tab order
     (Notifications left, Live now right) so the indicators point at the
     tab they belong to. */
  top: 4px;
  left: 4px;
  background: var(--color-red-500);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.2;
}

/* Live-now presence indicator (badge-semantics split): the red badge
   counts UNREAD notifications only; this green dot signals that people
   are online right now. Mirrored via [data-live-indicator] by
   inbox-overlay.js (summary polls) and social-realtime.js (presence). */
.live-presence-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-full);
  box-sizing: content-box;
}

/* Count variant (sticky-menu "Live now" tab): small green pill mirroring
   the .mobile-sticky-menu__badge metrics on the opposite corner. */
.live-presence-dot--count {
  top: -6px;
  right: -10px;
  width: auto;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border: none;
  box-sizing: border-box;
}

/* Realtime-created CRM online dot (social-realtime.js) — mirrors the
   inline-styled dot rendered by customer-row.blade.php so a row whose
   user comes online after page load gets an identical indicator. */
.account-customers-row__online-dot--realtime {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #22c55e;
  border: 2px solid var(--color-white, #fff);
  border-radius: 9999px;
}

/* Logout form in header actions */
.header-logout-form {
  display: inline;
}

/* Language switcher */
.relative {
  position: relative;
}

#langSwitch {
  position: relative;
}

#langBtn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

#langBtn:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
  box-shadow: var(--shadow-md);
}

#langBtn img {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
}

#langMenu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 140px;
  z-index: 1000;
  padding: var(--space-2) 0;
  list-style: none;
  margin: 0;
}

#langMenu li {
  margin: 0;
}

#langMenu button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

#langMenu button:hover {
  background: var(--color-gray-50);
  color: var(--color-gray-900);
}

#langMenu button img {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
}

#langMenu.hidden {
  display: none;
}

.py-2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.hover\:bg-gray-50:hover {
  background-color: var(--color-gray-50);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.inline {
  display: inline;
}

.mr-2 {
  margin-right: var(--space-2);
}

/* Language switcher button styling */
#langBtn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  color: var(--color-gray-700);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

#langBtn:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

#langBtn img {
  width: 20px;
  height: 20px;
  border-radius: 2px;
}

/* Language menu styling */
#langMenu {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  min-width: 160px;
  z-index: 1000;
}

#langMenu button {
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

#langMenu button:hover {
  background: var(--color-gray-50);
}

#langMenu button img {
  width: 20px;
  height: 20px;
  border-radius: 2px;
}

/* ========== Modern Navigation ========== */
.nav-primary {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  position: relative;
  z-index: 50;
}

.nav-primary__list {
  display: flex;
  list-style: none;
  gap: var(--space-1);
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .header-actions { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .nav-primary { display: none; }
}

.nav-primary__item {
  flex-shrink: 0;
}

.nav-primary__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--color-gray-600);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nav-primary__link:hover {
  color: var(--brand-primary);
}

.nav-primary__link.is-active {
  color: var(--brand-primary);
  font-weight: 600;
}

/* Navigation Dropdown */
.nav-primary__item--has-dropdown {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  min-width: 200px;
  padding: var(--space-2);
  list-style: none;
  margin: 0;
  display: none;
  z-index: 1000;
}

/* Invisible bridge to keep hover active across the gap */
.nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.nav-primary__item--has-dropdown:hover > .nav-dropdown,
.nav-primary__item--has-dropdown.is-open > .nav-dropdown {
  display: block;
}

.nav-dropdown li {
  margin: 0;
  padding: 0;
}

.nav-dropdown__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--color-gray-700);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nav-dropdown__link:hover {
  background: var(--brand-primary);
  color: var(--color-white);
}

.nav-dropdown__link.is-active {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}

.nav-dropdown__link i {
  font-size: var(--font-size-sm);
}

/* Mobile Dropdown - simplified version */
@media (max-width: 1024px) {
  /* Since nav-primary is hidden on mobile, dropdown won't show */
  /* Mobile users will use the mobile menu instead */
  .nav-primary__item--has-dropdown {
    display: none;
  }
}

/* ========== Global Search Bar ========== */
.global-search-bar {
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--space-3) 0;
}

.global-search {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.global-search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.global-search__icon {
  position: absolute;
  left: var(--space-4);
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  pointer-events: none;
  z-index: 1;
}

.global-search__input {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 20px + var(--space-2));
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.global-search__input::placeholder {
  color: var(--color-gray-400);
}

.global-search__input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-focus);
}

.global-search__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: var(--space-2);
}

@media (max-width: 1024px) {
  .global-search-bar {
    padding: var(--space-2) 0;
  }
}

/* ========== Secondary Navigation ========== */
.nav-secondary {
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.nav-secondary__list {
  display: flex;
  list-style: none;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-secondary__list::-webkit-scrollbar {
  display: none;
}

.nav-secondary__item {
  flex-shrink: 0;
}

.nav-secondary__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-gray-600);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nav-secondary__link:hover {
  color: var(--color-gray-900);
  background: var(--color-white);
}

/* ========== Modern Button System ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Variants */
.btn--primary {
  background: var(--brand-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.btn--primary:hover:not(:disabled) {
  background: var(--brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn--secondary {
  background: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
}

.btn--secondary:hover:not(:disabled) {
  background: #5a6268;
  color: white;
  border-color: #5a6268;
}

/* Borderless by design: the old 1px green border was invisible on the
   green button itself but leaked through as a green outline wherever a
   more specific rule recolors the background (e.g. the orange
   .cards--list .btn--contact "Chat now"). Elevation comes from the
   shadow, matching the listing-card tiles. */
.btn--chat {
  background: #22c55e;
  color: var(--color-white);
  border: none;
  box-shadow: var(--shadow-md);
}

.btn--chat:hover:not(:disabled) {
  background: #16a34a;
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn--chat:link,
.btn--chat:visited {
  color: var(--color-white);
}

.btn--outline {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
}

.btn--outline:hover:not(:disabled) {
  background: var(--color-gray-200);
  color: var(--color-gray-900);
  border-color: var(--color-gray-400);
}

.btn--ghost {
  background: transparent;
  color: var(--color-gray-600);
  border: 1px solid transparent;
}

.btn--ghost:hover:not(:disabled) {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

/* Destructive button (used for media removal in account UI) */
.btn--danger {
  background: #ef4444;
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.btn--danger:hover:not(:disabled) {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Dashboard + account-type badge wrapper */
.btn-with-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-with-badge--full {
  display: flex;
  width: 100%;
}

.btn-with-badge--full .btn {
  flex: 1 1 auto;
  width: auto;
}

.btn-with-badge--full .btn__badge {
  flex: 0 0 auto;
}

/* Button badge (e.g. account type after "Dashboard") */
.btn__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-200);
}

.btn--primary .btn__badge {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.35);
}

.btn--ghost .btn__badge {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

/* Button Sizes */
.btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
}

.btn--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
}

/* Button States & Interactions */
.btn--revealed {
  background: var(--color-success) !important;
  color: var(--color-white) !important;
  transition: background var(--transition-fast);
}

.btn--revealed:hover {
  background: var(--color-success) !important;
}

/* Like Button States */
.card__like.liked {
  background: rgba(239, 68, 68, 0.9) !important;
  color: var(--color-white) !important;
  transition: background var(--transition-fast);
}

/* Work area links: blend with surrounding text (no blue/purple browser defaults) */
.profile-detail__link,
.profile-detail__link:link,
.profile-detail__link:visited,
.profile-detail__link:hover,
.profile-detail__link:active {
  color: inherit;
  text-decoration: none;
}

.profile-detail__link:hover {
  text-decoration: underline;
}

/* Tile Interactions */
.tile--clicked {
  transform: scale(0.95);
  transition: transform var(--transition-fast);
}

/* Search Animations */
.card--searching {
  opacity: 0.5;
  transition: opacity var(--transition-normal);
}

/* Read More States */
.intro--expanded {
  max-height: none !important;
  overflow: visible !important;
}

/* Animation States */
.animate--hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== Modern Search & Filter System ========== */
.search-section {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.search-header {
  text-align: left;
  margin-bottom: var(--space-6);
}

.search-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.search-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
}

.search-form {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.search-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
  gap: var(--space-3);
  align-items: end;
}

.search-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.search-field__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
}

.search-field__input,
.search-field__select {
  padding: calc(var(--space-3) - 2px) var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}

.search-field__input:focus,
.search-field__select:focus {
  outline: none;
  /* Removed orange border */
  box-shadow: 0 0 0 3px rgba(253, 145, 24, 0.1);
}

.search-actions {
  display: flex;
  align-items: end;
}

.search-actions .btn {
  white-space: nowrap;
  flex-shrink: 0;
  padding: var(--space-3) var(--space-3);
  font-size: var(--font-size-sm);
}

/* ========== Intro Section ========== */
.intro-section {
  margin-bottom: var(--space-8);
}

/* ========== Global Country Hint Banner ========== */
.global-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(253, 145, 24, 0.08);
  border: 1px solid rgba(253, 145, 24, 0.2);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.global-hint__message {
  flex: 1;
  margin: 0;
}

.global-hint__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.global-hint__dismiss:hover {
  color: var(--color-gray-800);
}

.page-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

/* Mobile: keep the intro headline and the worldwide hint subtle — at full
   size the 4xl H1 (3 wrapped lines) and the hint banner dominate small
   viewports and push the actual results below the fold. */
@media (max-width: 768px) {
  .page-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
  }

  .global-hint {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-md);
  }

  .global-hint__dismiss {
    font-size: var(--font-size-xs);
    padding: var(--space-1);
  }

  /* Listing-page mobile decluttering (home + geo hubs): hide the
     breadcrumb trail, the intro text under the H1, and the worldwide hint
     so the filterbar and listings surface within the first viewport.
     Everything stays in the DOM (and the BreadcrumbList JSON-LD stays in
     <head>), so crawlers keep the full heading/breadcrumb/intro context
     under mobile-first indexing. */
  body:is([data-page="home"], [data-page="geo"], [data-page="geo_service"]) .breadcrumbs,
  body:is([data-page="home"], [data-page="geo"], [data-page="geo_service"]) .intro-details,
  body:is([data-page="home"], [data-page="geo"], [data-page="geo_service"]) .intro-section .content-body,
  body:is([data-page="home"], [data-page="geo"], [data-page="geo_service"]) .intro-section .content-subtitle,
  body[data-page="home"] .global-hint {
    display: none;
  }

  /* Keep a compact, single-line H1 visible on mobile listing pages: a
     visible heading carries the primary keyword signal at full weight
     (no hidden-content nuance) while costing one text line above the
     filterbar. The horizontal padding optically aligns the heading with
     the inputs inside the filterbar card below it. */
  body:is([data-page="home"], [data-page="geo"], [data-page="geo_service"]) .intro-section {
    margin-bottom: 0;
  }

  body:is([data-page="home"], [data-page="geo"], [data-page="geo_service"]) .page-title {
    font-size: var(--font-size-sm);
    margin-bottom: 0;
    padding: 0 var(--space-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Tighten the vertical chain around the filterbar (gap above the card,
     card-to-results gap includes main.mt-8 and the results header) so the
     first profile card lands higher in the first viewport. */
  body:is([data-page="home"], [data-page="geo"], [data-page="geo_service"]) #filterBar {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }

  body:is([data-page="home"], [data-page="geo"], [data-page="geo_service"]) main.mt-8 {
    margin-top: var(--space-2);
  }

  body:is([data-page="home"], [data-page="geo"], [data-page="geo_service"]) .results-header {
    padding: var(--space-2) 0;
    margin-bottom: var(--space-4);
  }

  /* Profile-page mobile decluttering: the breadcrumb trail (often two
     wrapped lines for deep GEO paths) pushes the hero down before the
     visitor sees a single profile pixel. Same SEO contract as the listing
     rule above — the trail stays in the DOM and the BreadcrumbList JSON-LD
     stays in <head>. */
  body[data-page="profile"] .breadcrumbs {
    display: none;
  }
}

.intro-text {
  max-height: 4.5rem;
  overflow: hidden;
  transition: max-height var(--transition-normal), overflow var(--transition-normal);
  color: var(--color-gray-700);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

/* ========== Content Sections ========== */
.content-section {
  margin-bottom: var(--space-8);
  padding: var(--space-16) 0;
}

.content-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-6);
}

.content-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-700);
  margin-bottom: var(--space-8);
  max-width: 64rem;
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
}

.content-list {
  color: var(--color-gray-700);
  line-height: 1.6;
}

.content-list li {
  margin-bottom: var(--space-2);
}

.content-text {
  color: var(--color-gray-600);
  line-height: 1.6;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.content-column {
  min-width: 0;
}

.content-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.content-bullet {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--brand-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ========== Link Hub (GEO SEO engine internal linking) ========== */
.link-hub {
  padding: var(--space-8) 0;
  margin-bottom: var(--space-4);
}

/* Collapse doubled vertical gaps: stacked hubs (siblings + nearby on city
   pages) and hubs directly after a content section (homepage), which already
   carries space-16 bottom padding of its own. */
.content-section + .link-hub,
.link-hub + .link-hub {
  padding-top: 0;
}

.link-hub .content-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-4);
}

.link-hub__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .link-hub__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .link-hub__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.link-hub__item {
  min-width: 0;
}

.link-hub__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.link-hub__link:hover {
  background: var(--color-gray-50);
  color: var(--brand-primary);
}

/* Keyboard affordance — same convention as .btn:focus-visible. */
.link-hub__link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.link-hub__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-hub__count {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-gray-600);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  padding: 0 var(--space-2);
  line-height: 1.5rem;
  min-width: 1.5rem;
  text-align: center;
}

/* Collapsible link hubs — CSS-only "show all" toggle for long zones (e.g.
   185 UK counties). Every link stays in the DOM so crawlers always see the
   full zone; only display toggles. The cap in the nth-child rule below MUST
   match GeoDiscoveryLinks::HUB_VISIBLE_LIMIT (24). */
.link-hub--collapsible {
  position: relative;
}

.link-hub__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.link-hub--collapsible .link-hub__toggle:not(:checked) ~ .link-hub__grid .link-hub__item:nth-child(n + 25) {
  display: none;
}

.link-hub__more {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.link-hub__more:hover {
  background: var(--color-gray-50);
  color: var(--brand-primary-hover);
}

/* Keyboard affordance — same convention as .btn:focus-visible. */
.link-hub__toggle:focus-visible ~ .link-hub__more {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.link-hub__toggle:checked ~ .link-hub__more .link-hub__more-show,
.link-hub__toggle:not(:checked) ~ .link-hub__more .link-hub__more-hide {
  display: none;
}

/* Mobile: the desktop section rhythm (64px content-section padding, 32px
   link-hub padding) stacks into huge empty bands between the CMS block and
   the geo link zones. Compact the spacing — the zones themselves stay fully
   visible: they are the GEO SEO internal-link backbone and a navigation
   path to local listings, so they must never be display:none'd on mobile. */
@media (max-width: 768px) {
  .content-section {
    padding: var(--space-6) 0;
    margin-bottom: var(--space-2);
  }

  .link-hub {
    padding: var(--space-4) 0;
    margin-bottom: var(--space-2);
  }

  .content-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
  }

  .link-hub .content-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-3);
  }
}

/* ========== CMS Content Body & Blocks ========== */
.content-body {
  color: var(--color-gray-700);
  line-height: 1.7;
  font-size: var(--font-size-base);
}

.content-body h2,
.content-body h3,
.content-body h4 {
  color: var(--color-gray-900);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.content-body p {
  margin-bottom: var(--space-4);
}

.content-body p:last-child {
  margin-bottom: 0;
}

.content-body a {
  color: var(--brand-primary);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.content-body a:hover {
  color: var(--brand-primary-hover);
}

.content-body ul,
.content-body ol {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
  color: var(--color-gray-700);
}

.content-body li {
  margin-bottom: var(--space-2);
  padding-left: var(--space-1);
}

/* Same intentional markers as .content-block-body — one list language
   across the intro/header block and the CMS cards. */
.content-body li::marker {
  color: var(--brand-primary);
  font-weight: 600;
}

/* Nested lists: tighter rhythm, no doubled top margin. */
.content-body li > ul,
.content-body li > ol {
  margin: var(--space-2) 0 0;
}

.content-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .content-blocks {
    grid-template-columns: 1fr 1fr;
  }

  /* First block always full-width */
  .content-blocks .content-block:first-child {
    grid-column: 1 / -1;
  }

  /* Last block full-width when it would be alone in its row */
  .content-blocks .content-block:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
}

.content-block {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-100);
  transition: box-shadow var(--transition-normal);
}

.content-block:hover {
  box-shadow: var(--shadow-md);
}

.content-block-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--brand-primary);
}

.content-block-body {
  color: var(--color-gray-700);
  line-height: 1.7;
  font-size: var(--font-size-sm);
}

.content-block-body p {
  margin-bottom: var(--space-3);
  color: var(--color-gray-700);
}

.content-block-body p:last-child {
  margin-bottom: 0;
}

.content-block-body a {
  color: var(--brand-primary);
  text-decoration: underline;
}

.content-block-body a:hover {
  color: var(--brand-primary-hover);
}

/* Lists inside CMS blocks: the global reset strips browser padding, which
   left markers hanging outside the card. Indent within the card padding and
   space items on the 8px grid, mirroring .content-body list rhythm. */
.content-block-body ul,
.content-block-body ol {
  margin: var(--space-3) 0;
  padding-left: var(--space-5);
  color: var(--color-gray-700);
}

.content-block-body li {
  margin-bottom: var(--space-2);
  padding-left: var(--space-1);
}

.content-block-body li::marker {
  color: var(--brand-primary);
  font-weight: 600;
}

/* Nested lists: tighter rhythm, no doubled top margin. */
.content-block-body li > ul,
.content-block-body li > ol {
  margin: var(--space-2) 0 0;
}

/* Rich-text headings inside a card body: scale down from the global page
   hierarchy so an editor h2/h3 reads as a card sub-heading, not a section. */
.content-block-body h2,
.content-block-body h3,
.content-block-body h4 {
  color: var(--color-gray-900);
  margin: var(--space-4) 0 var(--space-2);
}

.content-block-body h2 { font-size: var(--font-size-lg); }
.content-block-body h3 { font-size: var(--font-size-base); }
.content-block-body h4 { font-size: var(--font-size-sm); }

.content-block-body h2:first-child,
.content-block-body h3:first-child,
.content-block-body h4:first-child {
  margin-top: 0;
}

/* Whatever the body ends on (p, list, heading) sits flush with the card
   padding — no trailing margin below the last element. */
.content-block-body > :last-child {
  margin-bottom: 0;
}

/* ========== Layout System ========== */
.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
  align-items: start;
}

.layout__main {
  min-width: 0; /* Prevent grid blowout */
}

/* Right column wrapper above the sidebar */
.sidebar-ads-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.results-section {
  min-width: 0;
}

/* ========== Modern 2025 Style Cards ========== */
.cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ========== List View ========== */
.cards--list .card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition-normal);
  border: 1px solid var(--color-gray-100);
  position: relative;
}

/* Removed orange top border */

.cards--list .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

/* Removed orange border on hover */

.cards--list .card__header {
  position: relative;
  background: var(--color-gray-50);
  min-height: 280px;
  overflow: hidden;
  border-right: 1px solid var(--color-gray-200);
}

.cards--list .card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.cards--list .card__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.cards--list .card:hover .card__media {
  transform: scale(1.06);
}

.cards--list .card__badges {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 2;
}

.cards--list .badge {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.7);
}

/* Make SVG icons white */
.cards--list .badge img {
  filter: brightness(0) invert(1);
  width: 20px;
  height: 20px;
}

.cards--list .badge--gold {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.cards--list .badge--blue {
  background: var(--brand-primary);
}

.cards--list .badge--green {
  background: linear-gradient(135deg, #34d399, #10b981);
}

.cards--list .badge--red {
  background: linear-gradient(135deg, #f87171, #ef4444);
}

/* Badge hover effects */
.cards--list .badge:hover {
  transform: scale(1.1);
  transition: all var(--transition-fast);
  opacity: 0.9;
}

.cards--list .badge--green:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
  opacity: 0.9;
}

.cards--list .badge--red:hover {
  background: linear-gradient(135deg, #f87171, #ef4444);
  opacity: 0.9;
}

.cards--list .badge--blue:hover {
  background: var(--brand-primary);
  opacity: 0.9;
}

.cards--grid .badge:hover {
  transform: scale(1.1);
  transition: all var(--transition-fast);
  opacity: 0.9;
}

.cards--grid .badge--green:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
  opacity: 0.9;
}

.cards--grid .badge--red:hover {
  background: linear-gradient(135deg, #f87171, #ef4444);
  opacity: 0.9;
}

.cards--grid .badge--blue:hover {
  background: var(--brand-primary);
  opacity: 0.9;
}

.cards--list .card__like {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all var(--transition-fast);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
}

.cards--list .card__like:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.05);
  /* Removed orange border */
}

.cards--list .btn--website {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  background: var(--color-white);
  color: var(--color-gray-800);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.cards--list .btn--website:hover {
  background: var(--color-white);
  color: var(--brand-primary);
  transform: scale(1.05);
}

/* Make like button icon white */
.cards--list .card__like img {
  filter: brightness(0) invert(1);
  width: 16px;
  height: 16px;
}

.cards--list .card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cards--list .card__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1.2;
}

.cards--list .card__title a {
  color: inherit;
  text-decoration: none;
}

.cards--list .card__title a:hover {
  color: var(--brand-primary);
}

.cards--list .card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.cards--list .card__city,
.cards--list .card__gender,
.cards--list .card__age {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-white);
  color: var(--color-gray-700);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.cards--list .card__city:hover,
.cards--list .card__gender:hover,
.cards--list .card__age:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
  transform: translateY(-1px);
}

.cards--list .card__city img,
.cards--list .card__gender img,
.cards--list .card__age img {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(100%);
}

/* Removed card__separator styling */

.cards--list .card__traits {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.cards--list .trait {
  background: var(--color-white);
  color: var(--color-gray-700);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.cards--list .trait:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
  transform: translateY(-1px);
}

/* Office subtype badge (inline in card__meta, styled as a trait variant) */
.trait--office-subtype {
  background: var(--color-gray-900);
  color: var(--color-white);
  border-color: var(--color-gray-900);
}

.trait--office-subtype:hover {
  background: var(--color-gray-700);
  color: var(--color-white);
  border-color: var(--color-gray-700);
}

.cards--list .card__excerpt {
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: 0;
  font-size: var(--font-size-base);
}

.cards--list .card__actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-200);
}

.cards--list .card__tiles {
  display: flex;
  gap: var(--space-3);
}

.cards--list .tile {
  width: 80px;
  height: 60px;
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.cards--list .tile:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-md);
}

.cards--list .tile__icon {
  width: 24px;
  height: 24px;
  opacity: 0.8;
  transition: all var(--transition-fast);
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(100%);
}
.cards--list .tile__count {
  font-size: var(--font-size-sm);
  font-weight: 700;
  transition: all var(--transition-fast);
}

/* Tile loading animation */
@keyframes tilePulse {
  0% { opacity: 0.7; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.7; transform: scale(0.95); }
}

.cards--list .tile {
  animation: tilePulse 2s ease-in-out infinite;
}

.cards--list .tile:hover {
  animation: none;
}

.cards--list .card__cta {
  margin-left: auto;
}

.cards--list .btn--contact {
  background: var(--brand-primary);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
  min-width: 160px;
  justify-content: center;
}

.cards--list .btn--contact:link,
.cards--list .btn--contact:visited {
  color: var(--color-white);
}

.cards--list .btn--contact:hover {
  background: var(--brand-primary-hover);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.cards--list .btn--contact img {
  filter: brightness(0) invert(1);
}

/* ========== Grid View ==========
   Single consolidated section — this used to exist twice with conflicting
   values (the second block silently overrode parts of the first, and the
   merged left+right anchors stretched the like button across the card). */
.cards--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.cards--grid .card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition-normal);
  border: 1px solid var(--color-gray-100);
  position: relative;
}

/* Brand accent bar on hover */
.cards--grid .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-light));
  opacity: 0;
  transition: opacity var(--transition-normal);
  z-index: 3;
}

.cards--grid .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.cards--grid .card:hover::before {
  opacity: 1;
}

.cards--grid .card__header {
  position: relative;
  background: var(--color-gray-50);
  height: 240px;
  overflow: hidden;
}

.cards--grid .card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.cards--grid .card__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.cards--grid .card:hover .card__media {
  transform: scale(1.05);
}

.cards--grid .card__badges {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 2;
}

.cards--grid .badge {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.7);
}

/* Make SVG icons white */
.cards--grid .badge img {
  filter: brightness(0) invert(1);
  width: 20px;
  height: 20px;
}

.cards--grid .badge--gold {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.cards--grid .badge--blue {
  background: var(--brand-primary);
}

.cards--grid .badge--green {
  background: linear-gradient(135deg, #34d399, #10b981);
}

.cards--grid .badge--red {
  background: linear-gradient(135deg, #f87171, #ef4444);
}

/* Compact favorite pill, bottom-left on the photo (same as list mode).
   Only anchor left — anchoring left AND right (the old duplicate-block bug)
   stretches an absolutely-positioned button into a full-width bar. */
.cards--grid .card__like {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
  z-index: 2;
}

.cards--grid .card__like:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.05);
}

.cards--grid .btn--website {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  background: var(--color-white);
  color: var(--color-gray-800);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.cards--grid .btn--website:hover {
  background: var(--color-white);
  color:var(--brand-primary);
  transform: scale(1.05);
}

.cards--grid .card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.cards--grid .card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
  margin-bottom: var(--space-1);
}

.cards--grid .card__title a {
  color: inherit;
  text-decoration: none;
}

.cards--grid .card__title a:hover {
  color: var(--brand-primary);
}

.cards--grid .card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.cards--grid .card__city,
.cards--grid .card__gender,
.cards--grid .card__age {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-white);
  color: var(--color-gray-700);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.cards--grid .card__city:hover,
.cards--grid .card__gender:hover,
.cards--grid .card__age:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
  transform: translateY(-1px);
}

.cards--grid .card__city img,
.cards--grid .card__gender img,
.cards--grid .card__age img {
  width: 14px;
  height: 14px;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(100%);
}

.cards--grid .card__traits {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cards--grid .trait {
  background: var(--color-white);
  color: var(--color-gray-700);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.cards--grid .trait:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
  transform: translateY(-1px);
}

.cards--grid .card__excerpt {
  color: var(--color-gray-600);
  line-height: 1.4;
  margin: 0;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

.cards--grid .card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}

.cards--grid .card__tiles {
  display: flex;
  gap: var(--space-3);
}

.cards--grid .tile {
  width: 80px;
  height: 60px;
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
  animation: tilePulse 2s ease-in-out infinite;
}

.cards--grid .tile:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-md);
  animation: none;
}

.cards--grid .tile__icon {
  width: 24px;
  height: 24px;
  opacity: 0.8;
  transition: all var(--transition-fast);
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(100%);
}

.cards--grid .tile__count {
  font-size: var(--font-size-sm);
  font-weight: 700;
  transition: all var(--transition-fast);
}

.cards--grid .card__cta {
  flex: 1;
}

.cards--grid .btn--contact {
  background: var(--brand-primary);
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.cards--grid .btn--contact:link,
.cards--grid .btn--contact:visited {
  color: var(--color-white);
}

.cards--grid .btn--contact:hover {
  background: var(--brand-primary-hover);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.cards--grid .btn--contact img {
  filter: brightness(0) invert(1);
}

/* Listing card tiles (photo/video counts) — applies to both list and grid.
   The tile is an <a>, so without an explicit color the count text inherits
   the browser's default link color (blue/purple). Pin it to the neutral
   palette, drop the perpetual tilePulse so the tiles don't read as a
   permanent loading state, and tint icon + count on hover to signal that
   they're interactive. Defined after the per-view rules so it wins the
   cascade without bumping specificity. */
.cards--list .tile,
.cards--list .tile:link,
.cards--list .tile:visited,
.cards--grid .tile,
.cards--grid .tile:link,
.cards--grid .tile:visited {
  color: var(--color-gray-700);
  text-decoration: none;
  animation: none;
}

.cards--list .tile__count,
.cards--grid .tile__count {
  color: var(--color-gray-800);
}

.cards--list .tile:hover .tile__count,
.cards--grid .tile:hover .tile__count {
  color: var(--brand-primary);
}

.cards--list .tile:hover .tile__icon,
.cards--grid .tile:hover .tile__icon {
  opacity: 1;
}

/* Responsive grid adjustments */
@media (max-width: 1200px) {
  .cards--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 1fr;
  }
  
  .cards--grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .sidebar {
    position: static;
    margin-top: var(--space-8);
  }
}

@media (max-width: 768px) {
  .cards--grid {
    grid-template-columns: 1fr;
  }
  
  /* Mobile Layout Improvements */
  .layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .layout__main {
    order: 1;
  }
  
  .sidebar {
    order: 2;
    margin-top: var(--space-6);
  }
  
  /* Mobile Container Adjustments */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  /* Mobile Spacing */
  .mt-8 {
    margin-top: var(--space-6);
  }
}

/* ==========  Sidebar ========== */
.sidebar {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  height: fit-content;
  position: static;
}

.widget {
  margin-bottom: var(--space-8);
}

.widget:last-child {
  margin-bottom: 0;
}

.widget__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-gray-200);
}

/* Maak losse witte kaarten van niet-ad widgets in de sidebar */
.sidebar .widget:not(.sidebar-ad) {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

.widget__content {
  color: var(--color-gray-600);
}

/* ========== Sidebar Ads ========== */

/* ─── Card shell ─────────────────────────────────────────────────────────── */
.sidebar-ad {
  background: var(--color-gray-900);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  margin-bottom: var(--space-5);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.sidebar-ad:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

/* ─── Video area ─────────────────────────────────────────────────────────── */

/* Anchor wrapper around the video — no visual styling, just removes inline gap */
.sidebar-ad__video-link {
  display: block;
  text-decoration: none;
  line-height: 0;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.sidebar-ad__video-wrap {
  position: relative;
  /* Portrait frame, matching the ranking profile cards below. Reels are
     9:16 vertical video — the old 16:9 landscape frame kept only a thin
     horizontal strip of the video visible (heads cut off). 3:4 shows the
     subject properly while staying compact enough for the sidebar. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-gray-800);
  flex-shrink: 0;
}

.sidebar-ad__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.sidebar-ad:hover .sidebar-ad__video {
  transform: scale(1.04);
}

/* Bottom gradient — always-on cinematic overlay, below play button */
.sidebar-ad__video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.75) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ─── Video badge strip (top-LEFT) ────────────────────────────────────
   Top-right is deliberately kept free: reels carry a burned-in tenant logo
   watermark in the top-right corner of the video, and badges there would
   cover it. Duration/HD/rank therefore sit top-left. */
.sidebar-ad__badges {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  z-index: 3;
}

.sidebar-ad__badge {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}

.sidebar-ad__badge--quality {
  background: rgba(253, 145, 24, 0.85);
}

/* Promoted badge — hidden by default; future monetization hook.
   Show via: [data-is-promoted="1"] .sidebar-ad__badge--promoted
   Sits BELOW the top-left badge strip (duration/HD moved there to keep the
   watermark corner clear) — offset instead of overlapping. */
.sidebar-ad__badge--promoted {
  display: none;
  position: absolute;
  top: calc(var(--space-2) + 26px);
  left: var(--space-2);
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: var(--color-gray-900);
  z-index: 3;
}

[data-is-promoted="1"] .sidebar-ad__badge--promoted {
  display: inline-block;
}

/* ─── Ranking profile fallback cards (Top 5 — shown when no reels exist) ──
   Photo cards reusing the sidebar-ad shell: portrait image instead of video,
   rank badge top-left, identity overlay on the bottom gradient. */
.sidebar-ad--profile .sidebar-ad__video-wrap {
  aspect-ratio: 3 / 4; /* portrait photo — matches the 'card' CDN preset (400×533) */
}

.sidebar-ad__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.sidebar-ad:hover .sidebar-ad__image {
  transform: scale(1.04);
}

.sidebar-ad__badge--rank {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--brand-primary);
  z-index: 3;
}

/* Rank badge on reel cards rides the top-left badge strip (next to
   duration/HD); the Featured badge sits on its own row below the strip. */
.sidebar-ad__badges .sidebar-ad__badge--rank {
  position: static;
}

/* ─── Identity overlay (name + reel title on the bottom gradient) ─────── */
.sidebar-ad__overlay {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  pointer-events: none; /* clicks fall through to the video link */
}

.sidebar-ad__overlay .sidebar-ad__title {
  margin: 0;
  font-size: var(--font-size-base);
  -webkit-line-clamp: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.sidebar-ad__overlay .sidebar-ad__description {
  margin: 2px 0 0;
  color: var(--color-gray-200);
  -webkit-line-clamp: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ─── Play button — minimal circle, JS-controlled visibility ───────────────── */
.sidebar-ad__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  transition: opacity var(--transition-fast);
  /* Hide the raw ▶ text — visual circle is drawn via ::before */
  font-size: 0;
  color: transparent;
}

.sidebar-ad__play::before {
  content: '\25B6';
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: var(--color-white);
  font-size: 15px;
  padding-left: 3px; /* optical centering for triangle glyph */
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.sidebar-ad__play:hover::before {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.1);
}

.sidebar-ad__play.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ─── Content block ──────────────────────────────────────────────────────── */
.sidebar-ad__content {
  background: var(--color-gray-900);
  padding: var(--space-3) var(--space-4) var(--space-4);
  color: var(--color-white);
}

/* Fallback header wrapper (used by @empty placeholder cards only) */
.sidebar-ad__header {
  padding: 0 0 var(--space-1) 0;
}

.sidebar-ad__title {
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 700;
  margin: 0 0 var(--space-2) 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-ad__description {
  font-size: var(--font-size-xs);
  line-height: 1.45;
  margin: 0 0 var(--space-3) 0;
  color: var(--color-gray-400);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Action row: reel CTA + profile CTA side by side — two equal-weight tap
   targets instead of a lone repeated button plus a near-invisible link. */
.sidebar-ad__actions {
  display: flex;
  gap: var(--space-2);
}

/* Primary CTA: real button styling */
.sidebar-ad__cta {
  display: block;
  width: 100%;
  background: var(--brand-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: var(--space-2);
  transition: background var(--transition-fast), transform var(--transition-fast);
  letter-spacing: 0.2px;
  box-sizing: border-box;
}

.sidebar-ad__cta:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-1px);
}

.sidebar-ad__actions .sidebar-ad__cta {
  flex: 1;
  margin-bottom: 0;
}

/* Secondary CTA: outline variant on the dark card — the profile is the
   conversion path (contact/chat), so it earns a real button. */
.sidebar-ad__profile {
  flex: 1;
  display: block;
  background: transparent;
  color: var(--color-gray-200);
  border: 1px solid var(--color-gray-600);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.2px;
  box-sizing: border-box;
}

.sidebar-ad__profile:hover {
  color: var(--color-white);
  border-color: var(--color-gray-400);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

/* Secondary text link */
.sidebar-ad__more {
  display: block;
  text-align: center;
  color: var(--color-gray-500);
  text-decoration: none;
  font-size: var(--font-size-xs);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.sidebar-ad__more:hover {
  color: var(--color-gray-200);
}

/* Phone button — kept for @empty placeholder fallback only */
.sidebar-ad__phone {
  width: 100%;
  background: var(--brand-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: var(--space-3);
  transition: all var(--transition-fast);
}

.sidebar-ad__phone:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-1px);
}

/* Meta strip — @empty placeholder fallback only */
.sidebar-ad__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-3);
}

.sidebar-ad__content .meta-dot {
  width: 4px;
  height: 4px;
  background: var(--color-gray-600);
  border-radius: 50%;
  display: inline-block;
}

.sidebar-ad__content .meta-item {
  color: var(--color-gray-400);
}

/* ─── Mobile: vertical stack, full-width video ───────────────────────────── */
@media (max-width: 1024px) {
  /* Reset to vertical block — no horizontal grid */
  .sidebar-ad {
    display: block;
    margin-bottom: var(--space-4);
  }

  /* Full-width portrait video — same 3:4 frame as desktop; a 16:9 reset
     here would crop the 9:16 reels back down to a thin strip on mobile. */
  .sidebar-ad__video-wrap {
    aspect-ratio: 3 / 4;
    height: auto;
    min-height: unset;
    width: 100%;
  }

  /* Disable hover transforms on touch screens */
  .sidebar-ad:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  .sidebar-ad:hover .sidebar-ad__video {
    transform: none;
  }

  /* Tight content block below video */
  .sidebar-ad__content {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  /* Compact single-line title */
  .sidebar-ad__title {
    font-size: var(--font-size-sm);
    -webkit-line-clamp: 1;
    margin-bottom: var(--space-2);
  }

  /* Hide description on mobile — reduces dead space */
  .sidebar-ad__description {
    display: none;
  }

  /* Full-width CTA, standard sizing */
  .sidebar-ad__cta {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-1);
  }
}

.widget__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget__list li {
  margin-bottom: var(--space-2);
}

.widget__list a {
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.widget__list a:hover {
  color: var(--brand-primary);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.tag:hover {
  background: var(--brand-primary);
  color: var(--color-white);
}

.ranking {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ranking__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.ranking__position {
  font-weight: 700;
  color: var(--brand-primary);
  min-width: 30px;
}

.ranking__name {
  font-weight: 600;
  color: var(--color-gray-900);
}

.ranking__city {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  margin-left: auto;
}

/* ========== Pagination ========== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-8) 0;
}

.page-btn {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-700);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 500;
}

.page-btn:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-btn.active {
  background: var(--brand-primary);
  color: var(--color-white);
  /* Removed orange border */
}

.pagination-ellipsis {
  padding: var(--space-2) var(--space-3);
  color: var(--color-gray-500);
}

/* ========== Readmore Button ========== */
.readmore {
  margin-top: var(--space-6);
}

.readmore__btn {
  margin-top: var(--space-2);
  background: none;
  border: 0;
  color: var(--brand-primary);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border-radius: var(--radius-md);
  box-shadow: none;
  text-decoration: underline;
  transition: all var(--transition-fast);
}

.readmore__btn:hover {
  color: var(--brand-primary-hover);
  text-decoration: none;
}

.readmore__btn .readmore__label-less {
  display: none;
}

.readmore__btn[aria-expanded="true"] .readmore__label-less {
  display: inline;
}

.readmore__btn[aria-expanded="true"] .readmore__label-more {
  display: none;
}

.readmore__chev {
  transition: transform var(--transition-fast);
}

.readmore__btn[aria-expanded="true"] .readmore__chev {
  transform: rotate(180deg);
}

/* ========== Quick Filters ========== */
/* Quick filters */
.quick-filters {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.quick-filters__header {
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-gray-200);
  padding-bottom: var(--space-2);
}

.quick-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.quick-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.quick-filter:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  transform: none;
  box-shadow: var(--shadow-sm);
}

.quick-filter__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quick-filter__input:checked + .quick-filter__icon + .quick-filter__label {
  color: var(--color-white);
}

.quick-filter__input:checked ~ .quick-filter__icon {
  background: var(--color-white);
  box-shadow: 0 0 0 2px var(--color-white);
}

.quick-filter:has(.quick-filter__input:checked) {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.quick-filter:has(.quick-filter__input:checked):hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  transform: none;
  box-shadow: var(--shadow-md);
}

.quick-filter__icon {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.quick-filter__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  position: relative;
  z-index: 2;
}

/* Quick Filter Icon Variants */
.quick-filter__icon--premium {
  background: linear-gradient(135deg, #fbbf24, #d97706);
}

.quick-filter__icon--verified {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
}

.quick-filter__icon--video {
  background: linear-gradient(135deg, #f87171, #dc2626);
}

.quick-filter__icon--online {
  background: linear-gradient(135deg, #34d399, #059669);
}

.quick-filter__icon--social {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.quick-filter__icon--pornstar {
  background: linear-gradient(135deg, #f472b6, #db2777);
}

/* Active state icon styling */
.quick-filter[aria-pressed="true"] .quick-filter__icon {
  background: var(--color-white);
  box-shadow: 0 0 0 2px var(--color-white);
}

/* Advanced Filters Panel */
.advanced-filters-panel {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-200);
}

.advanced-filters-divider {
  display: none;
}

.advanced-filters-content {
  margin-top: var(--space-4);
}

.advanced-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
}

.filter-group {
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.filter-group__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-gray-200);
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.filter-option:hover {
  background: var(--color-white);
}

.filter-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-primary);
}

.filter-option span {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

/* ========== Simple Search Section ========== */
.simple-search {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.simple-search__container {
  display: flex;
  align-items: end;
  gap: var(--space-4);
  width: 100%;
}

.simple-search__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.simple-search__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
}

.simple-search__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.simple-search__geo-icon,
.simple-search__search-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--color-gray-400);
  z-index: 2;
  pointer-events: none;
}

.simple-search__input,
.simple-search__select {
  width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 20px + var(--space-2));
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  background: var(--color-white);
  color: var(--color-gray-900);
  transition: all var(--transition-fast);
}

.simple-search__input {
  cursor: text;
}

.simple-search__input::placeholder {
  color: var(--color-gray-400);
}

.simple-search__select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--space-3) center;
  background-repeat: no-repeat;
  background-size: 16px;
}

.simple-search__input:focus,
.simple-search__select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(253, 145, 24, 0.1);
}

.simple-search__input:hover,
.simple-search__select:hover {
  border-color: var(--color-gray-300);
}

.simple-search__button {
  white-space: nowrap;
  flex-shrink: 0;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: 600;
}

/* Responsive Design for Simple Search */
@media (max-width: 768px) {
  .simple-search__container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  
  .simple-search__field {
    flex: none;
  }
  
  .simple-search__button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .simple-search {
    padding: var(--space-4);
  }
  
  .simple-search__container {
    gap: var(--space-2);
  }
}

/* ========== View Toggle Buttons ========== */
.viewtoggles {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left:20px!important;
}

.viewtoggles .btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 600;
  min-width: auto;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-gray-700);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.viewtoggles .btn:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.viewtoggles .btn--primary {
  background: var(--brand-primary);
  color: var(--color-white);
  border-color: var(--brand-primary);
  /* Active view gets a clearly heavier shadow than its inactive siblings
     (shadow-sm) so the current mode reads at a glance. */
  box-shadow: var(--shadow-lg);
}

.viewtoggles .btn--primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xl);
}

.viewtoggles .btn--secondary {
  background: var(--color-white);
  color: var(--color-gray-700);
  border-color: var(--color-gray-200);
}

.view-toggle__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.view-toggle__text {
  font-weight: 600;
  letter-spacing: 0.025em;
}

/* ========== Listings Map View ========== */
.listings-map {
  width: 100%;
  height: 600px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
}

.listings-map .leaflet-container {
  width: 100%;
  height: 100%;
}

/* "Search this area" floating button */
.listings-map__search-btn {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-white);
  background: var(--brand-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.listings-map__search-btn:hover {
  background: var(--brand-primary-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.listings-map__search-btn--visible {
  display: flex;
}

.listings-map__search-btn--loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Filter bar (All / Available now / Service areas) */
.listings-map__filter-bar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-white);
  border-radius: var(--radius-full);
  padding: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--color-gray-200);
  white-space: nowrap;
}

.listings-map__filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-600);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1.4;
}

.listings-map__filter-btn:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.listings-map__filter-btn--active {
  background: var(--color-gray-900);
  color: var(--color-white);
}

.listings-map__filter-btn--active:hover {
  background: var(--color-gray-800);
  color: var(--color-white);
}

.listings-map__filter-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.listings-map__filter-dot--available {
  background: #22c55e;
}

.listings-map__filter-dot--offline {
  background: #e8364f;
}

/* Loading overlay */
.listings-map__loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
}

.listings-map__loading--active {
  display: flex;
}

.listings-map__loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-gray-200);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: listings-map-spin 0.8s linear infinite;
}

@keyframes listings-map-spin {
  to { transform: rotate(360deg); }
}

/* TPS-212 marker-retrieval status: loading progress while the map walks the
   matching batches, then the honest matched-versus-mapped coverage. Sits
   above the filter bar so it never covers the map controls. */
.listings-map__status {
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: min(90%, 420px);
  padding: 6px 14px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--color-gray-700);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.listings-map__status[hidden] {
  display: none;
}

.listings-map__status--error {
  color: var(--color-white);
  background: #e8364f;
  border-color: #e8364f;
}

/* Map popup card */
.listings-map-popup {
  min-width: 220px;
  max-width: 280px;
  font-family: inherit;
}

.listings-map-popup__img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.listings-map-popup__name {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listings-map-popup__meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin-bottom: var(--space-2);
}

.listings-map-popup__meta span + span::before {
  content: ' · ';
}

.listings-map-popup__price {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}

.listings-map-popup__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* Both CTAs render as equal twins: same flex basis (1 1 0 splits the row
   50/50 regardless of label length), same height (inline-flex centering,
   fixed line-height) and no text wrapping — "View profile" used to fold
   onto two lines next to a single-line "Chat now". */
.listings-map-popup__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
  background: var(--brand-primary);
  border: 1px solid transparent;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.listings-map-popup__link,
.listings-map-popup__link:visited,
.listings-map-popup__link:link {
  color: var(--color-white);
}

.listings-map-popup__link:hover {
  background: var(--brand-primary-hover);
  color: var(--color-white);
}

/* Secondary action (View profile next to the Chat now CTA): quiet gray
   with a hairline border so it reads as a button, not a gray slab. */
.listings-map-popup__link--secondary,
.listings-map-popup__link--secondary:visited,
.listings-map-popup__link--secondary:link {
  background: var(--color-gray-50);
  color: var(--color-gray-800);
  border-color: var(--color-gray-200);
}

.listings-map-popup__link--secondary:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

/* Leaflet popup override for our cards */
.listings-map .leaflet-popup-content-wrapper {
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.listings-map .leaflet-popup-content {
  margin: 0;
}

/* Custom cluster marker */
.marker-cluster-custom {
  background: rgba(232, 54, 79, 0.25);
  border-radius: 50%;
}

/* Inner disc fills the divIcon so the JS size tiers (44/52/60) actually
   render as growing clusters instead of a fixed 32px dot. */
.marker-cluster-custom div {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  margin: 4px;
  background: var(--brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Avatar marker for listings map — large enough that the avatar itself is
   recognisable at a glance (the avatar IS the conversion hook). A white
   halo keeps the ring readable on busy map tiles. */
.leaflet-listing-marker {
  width: 52px;
  height: 62px;
  position: relative;
}

.leaflet-listing-marker__ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--brand-primary);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 0 0 2px var(--color-white), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.leaflet-listing-marker__ring--current {
  border-color: #22c55e;
}

.leaflet-listing-marker__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.leaflet-listing-marker__arrow {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--brand-primary);
  margin: -1px auto 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.leaflet-listing-marker__ring--current + .leaflet-listing-marker__arrow {
  border-top-color: #22c55e;
}

/* Availability dot: overlaid top-right on the avatar ring */
.leaflet-listing-marker__availability {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.leaflet-listing-marker__availability--available {
  background: #22c55e;
}

.leaflet-listing-marker__availability--expiring {
  background: #f59e0b;
}

/* Availability-coloured variants of .trait (used on the "Now: City" pill) */
.trait--available {
  background: color-mix(in srgb, #22c55e 15%, transparent);
  color: #14532d;
  border-color: color-mix(in srgb, #22c55e 30%, transparent);
}

.trait--expiring {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #78350f;
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}

/* Live chat presence chips (PG-M6) — distinct from availability traits:
   green = connected to chat right now, amber = seen within 15 minutes. */
.trait--online {
  background: color-mix(in srgb, #22c55e 15%, transparent);
  color: #14532d;
  border-color: color-mix(in srgb, #22c55e 30%, transparent);
}

.trait--recently-online {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #78350f;
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}

/* Bump pill: shown on listing cards for recently updated current location */
.trait--bumped {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: color-mix(in srgb, #34d399 15%, transparent);
  color: #065f46;
  border-color: color-mix(in srgb, #34d399 30%, transparent);
}

.trait--bumped svg {
  flex-shrink: 0;
}

/* Specificity overrides: trait color variants inside .cards--list context */
.cards--list .trait--available,
.card__meta .trait--available {
  background: color-mix(in srgb, #22c55e 15%, transparent);
  color: #14532d;
  border-color: color-mix(in srgb, #22c55e 30%, transparent);
}

.cards--list .trait--expiring,
.card__meta .trait--expiring {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #78350f;
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}

.cards--list .trait--bumped,
.card__meta .trait--bumped {
  background: color-mix(in srgb, #34d399 15%, transparent);
  color: #065f46;
  border-color: color-mix(in srgb, #34d399 30%, transparent);
}

/* Availability pill in map popup */
.listings-map-popup__availability {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-2);
}

.listings-map-popup__availability--available {
  background: color-mix(in srgb, #22c55e 15%, transparent);
  color: #14532d;
}

.listings-map-popup__availability--expiring {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #78350f;
}

/* When map view is active, use full width (hide sidebar) */
.layout--map-active {
  grid-template-columns: 1fr !important;
}

.layout--map-active .sidebar,
.layout--map-active .sidebar-ads-col {
  display: none;
}

/* ========== Fullscreen Map Overlay ==========
   Map mode takes over the whole viewport (Airbnb pattern) on desktop and
   mobile. z-index sits above the sticky header and the mobile bottom nav
   (both 100) but below modals/lightboxes (10000). The compound selector
   keeps it winning from the responsive .listings-map height rules below. */
.listings-map.listings-map--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1200;
  height: 100dvh;
  width: 100%;
  border-radius: 0;
  border: none;
}

/* Lock page scroll behind the overlay. */
body.listings-map-open {
  overflow: hidden;
}

/* Close (×) — top-right, clear of notches via safe-area inset. */
.listings-map__close {
  position: absolute;
  top: calc(var(--space-4) + env(safe-area-inset-top));
  right: var(--space-4);
  z-index: 1001;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-gray-900);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.listings-map__close:hover {
  background: var(--color-gray-100);
  transform: scale(1.05);
}

/* Floating "Show list" pill — bottom-center, the primary exit back to
   the results (conversion path: browse map → return to list → contact). */
.listings-map__show-list-btn {
  position: absolute;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-gray-900);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.listings-map__show-list-btn:hover {
  background: var(--color-gray-800);
  transform: translateX(-50%) scale(1.03);
}

.listings-map__show-list-btn svg {
  flex-shrink: 0;
}

/* In fullscreen, the availability filter bar moves up to make room for
   the "Show list" pill, and the search button clears the notch. */
.listings-map.listings-map--fullscreen .listings-map__filter-bar {
  bottom: calc(96px + env(safe-area-inset-bottom));
}

.listings-map.listings-map--fullscreen .listings-map__search-btn {
  top: calc(var(--space-4) + env(safe-area-inset-top));
}

/* Responsive listings map (non-fullscreen fallback sizes) */
@media (max-width: 768px) {
  .listings-map {
    height: 450px;
  }

  .viewtoggles .view-toggle__text {
    display: none;
  }
}

@media (max-width: 480px) {
  .listings-map {
    height: 350px;
    border-radius: var(--radius-md);
  }
}

/* ========== Results Header ========== */
.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

/* Stack the title and the count vertically so the count sits on its own
   line. This keeps the header tidy even with large totals (e.g. thousands
   of results) instead of crowding/wrapping next to the title. */
.results-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
  min-width: 0;
}

.results-count {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
}

.results-pagination {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Standalone/PWA displays need room for the device home indicator. Keep this
   opt-in separate from normal Safari, where the reported inset can change
   while browser chrome animates during navigation. */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  :root {
    --mobile-bottom-safe-area: env(safe-area-inset-bottom);
  }
}
/* ========== Responsive Design ========== */
@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .sidebar {
    position: static;
    margin-top: var(--space-6);
  }
  .sidebar-ads-col {
    order: 2;
    margin-top: var(--space-6);
  }
}

@media (max-width: 800px) {
  /* Compact marketplace rows: thumbnail left, info right (the Kinky.nl /
     Redlights list pattern). List mode is the "scan and decide" view on
     mobile — 2-3 complete profiles per screen — while Tiles stays the
     visual browse mode. */
  .cards--list {
    gap: var(--space-3);
  }

  .cards--list .card {
    grid-template-columns: 128px 1fr;
    border-radius: var(--radius-xl);
  }

  /* Hover lift is desktop chrome; on touch it only causes tap-jitter. */
  .cards--list .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .cards--list .card__header {
    min-height: 176px;
  }

  /* Absolute-fill so the thumbnail always follows the row height. */
  .cards--list .card__media-link {
    position: absolute;
    inset: 0;
  }

  .cards--list .card__badges {
    top: var(--space-2);
    left: var(--space-2);
    gap: var(--space-1);
  }

  .cards--list .badge {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
  }

  .cards--list .badge img {
    width: 14px;
    height: 14px;
  }

  .cards--list .card__like {
    bottom: var(--space-2);
    left: var(--space-2);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
  }

  .cards--list .card__body {
    padding: var(--space-3);
    gap: var(--space-2);
    min-width: 0;
  }

  .cards--list .card__title {
    font-size: var(--font-size-base);
  }

  .cards--list .card__meta {
    gap: var(--space-1);
  }

  /* Presence/recency chips lead the meta row (Kinky-style hierarchy):
     activity is the strongest conversion signal, so it comes first. */
  .cards--list .card__meta .trait--online,
  .cards--list .card__meta .trait--recently-online,
  .cards--list .card__meta .trait--available,
  .cards--list .card__meta .trait--expiring,
  .cards--list .card__meta .trait--bumped {
    order: -1;
  }

  .cards--list .card__excerpt {
    font-size: var(--font-size-sm);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Row footer: counts left, one primary CTA right (single-CTA converts
     better than competing buttons). */
  .cards--list .card__actions {
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-2);
  }

  .cards--list .card__tiles {
    gap: var(--space-1);
  }

  /* Photo/video counts become quiet inline chips — metadata, not buttons.
     The CTA stays the only coloured element in the row so it keeps its
     conversion pull without shouting. */
  .cards--list .tile {
    width: auto;
    height: auto;
    flex-direction: row;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .cards--list .tile:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
  }

  .cards--list .tile__icon {
    width: 16px;
    height: 16px;
  }

  .cards--list .tile__count {
    font-size: var(--font-size-xs);
  }

  .cards--list .card__cta {
    margin-left: auto;
  }

  /* Compact single-line button (same radius as the view toggles): still
     the clear next step, no longer a block that dominates the card. */
  .cards--list .btn--contact {
    min-width: 0;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .cards--list .btn--contact img {
    width: 16px;
    height: 16px;
  }
}

/* ========== Gradient Backgrounds ========== */
.bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-yellow-400 {
  --tw-gradient-from: #fbbf24;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 191, 36, 0));
}

.to-yellow-600 {
  --tw-gradient-to: #d97706;
}

.from-blue-400 {
  --tw-gradient-from: #60a5fa;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(96, 165, 250, 0));
}

.to-blue-600 {
  --tw-gradient-to: #2563eb;
}

.from-red-400 {
  --tw-gradient-from: #f87171;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248, 113, 113, 0));
}

.to-red-600 {
  --tw-gradient-to: #dc2626;
}

.from-green-400 {
  --tw-gradient-from: #4ade80;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(74, 222, 128, 0));
}

.to-green-600 {
  --tw-gradient-to: #16a34a;
}

/* ========== Additional Utility Classes ========== */
.cursor-pointer {
  cursor: pointer;
}

.text-primary {
  color: var(--brand-primary);
}

.border-gray-300 {
  border-color: var(--color-gray-300);
}

.rounded-md {
  border-radius: var(--radius-md);
}

/* ========== Modern Breadcrumbs ========== */
.breadcrumbs {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--space-6);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.breadcrumbs__item:not(:last-child)::after {
  content: "›";
  color: var(--color-gray-400);
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.breadcrumbs__link {
  color: var(--color-gray-600);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: color var(--transition-fast);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}

.breadcrumbs__link:hover {
  color: var(--color-gray-900);
  background: var(--color-gray-100);
}

.breadcrumbs__current {
  color: var(--color-gray-900);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

/* Mobile: tighten and allow graceful wrapping to prevent horizontal overflow */
@media (max-width: 640px) {
  .breadcrumbs {
    padding: var(--space-2) 0;
    margin-bottom: var(--space-4);
  }
  .breadcrumbs__list {
    gap: var(--space-2);
  }
  .breadcrumbs__item {
    gap: var(--space-2);
  }
  .breadcrumbs__link,
  .breadcrumbs__current {
    font-size: var(--font-size-xs);
    padding: 1px 4px;
  }
  .breadcrumbs__item:not(:last-child)::after {
    font-size: var(--font-size-base);
  }
}
@media (max-width: 360px) {
  .breadcrumbs__link,
  .breadcrumbs__current {
    font-size: 11px;
  }
}

/* ========== Modern Search & Filter System ========== */

/* New sticky filterbar */
#filterBar { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.filterbar {
  position: sticky;
  top: 0; /* header heeft hogere z-index en blijft erboven */
  z-index: 90;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
}

.filterbar__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.filterbar__row + .filterbar__row { margin-top: var(--space-3); }

.filterbar__row--primary { justify-content: space-between; }
.filterbar__search { flex: 1 1 420px; min-width: 240px; }
.filterbar__search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.filterbar__geo-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--color-gray-400);
  z-index: 2;
  pointer-events: none;
}
.filterbar__search input {
  width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 20px + var(--space-2));
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

.filterbar__search-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  padding: var(--space-2);
  max-height: 280px;
  overflow-y: auto;
}

.filterbar__suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.filterbar__suggestion:hover {
  background: var(--color-gray-50);
}
.filterbar__suggestion.is-active {
  background: var(--color-gray-50);
}

.filterbar__suggestion-icon {
  color: var(--color-gray-500);
  flex-shrink: 0;
}

.filterbar__suggestion-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
}

.filterbar__suggestion-subtitle {
  font-size: 12px;
  color: var(--color-gray-500);
}

.filterbar__suggestion-group {
  padding: var(--space-2) var(--space-3);
  margin: 4px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
}

.filterbar__suggestion-empty {
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}
.filterbar__controls { 
  display: flex; 
  gap: var(--space-2); 
  flex-wrap: wrap;
  flex: 1 1 300px;
  min-width: 200px;
}
.filterbar__selectbox {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 160px;
  min-width: 140px;
}
.filterbar__selectbox-input {
  width: 100%;
  padding: var(--space-3) calc(var(--space-3) + 18px) var(--space-3) var(--space-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: var(--font-size-sm);
}
.filterbar__selectbox-input[readonly] {
  cursor: pointer;
}
.filterbar__selectbox-caret {
  position: absolute;
  right: var(--space-3);
  color: var(--color-gray-500);
  pointer-events: none;
  font-size: 12px;
}
.filterbar__selectbox-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  padding: var(--space-2);
  max-height: 280px;
  overflow-y: auto;
}
.filterbar__selectbox-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  /* Buttons do not inherit typography/color — without these, iOS Safari
     renders the options in its default blue system-button style. */
  font-family: inherit;
  color: var(--color-gray-800);
  line-height: 1.4;
}
.filterbar__selectbox-option:hover,
.filterbar__selectbox-option.is-focused {
  background: var(--color-gray-50);
}
.filterbar__selectbox-option.is-selected {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-dark);
  font-weight: 600;
}
.filterbar__selectbox-option.is-selected::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700;
}
.filterbar__selectbox--country {
  flex: 2 1 240px;
  min-width: 200px;
}
.filterbar__selectbox--distance {
  flex: 1 1 160px;
  min-width: 140px;
}

/* Mobile/tablet (same breakpoint as the sticky bottom menu): 16px inputs
   stop iOS Safari from auto-zooming the page when the search field or a
   selectbox trigger receives focus — the zoom is what pushed the open
   dropdown behind the sticky bottom menu. Also cap the dropdown height so
   the option list scrolls within the visible area. */
@media (max-width: 1024px) {
  .filterbar__search input,
  .filterbar__selectbox-input {
    font-size: var(--font-size-base);
  }

  .filterbar__selectbox-dropdown {
    max-height: min(280px, 45vh);
  }

  /* Tighter card padding on small screens — the 16px desktop padding
     wastes vertical space above the search input. */
  .filterbar {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
}
.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; }

/* Pills */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  color: var(--color-gray-800);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}
.filter-pill:hover { background: var(--color-gray-50); border-color: var(--color-gray-400); }
.filter-pill[aria-expanded="true"] { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(253,145,24,.15); }
.filter-pill .pill-label { font-weight: 600; font-size: var(--font-size-sm); }
.filter-pill .pill-count { background: var(--brand-primary); color: #fff; border-radius: var(--radius-full); padding: 0 6px; font-size: 12px; line-height: 18px; height: 18px; display: inline-flex; align-items: center; }
.filter-pill .chev { opacity: .7; }

/* Popovers */
.popover {
  position: absolute;
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  z-index: 1000;
}
.popover .option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.popover .option:hover { background: var(--color-gray-50); }
.popover input { accent-color: var(--brand-primary); }

/* Chips */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--color-gray-100); border: 1px solid var(--color-gray-200); color: var(--color-gray-800); padding: 6px 10px; border-radius: var(--radius-full); font-size: 12px; }
.chip button { background: transparent; border: 0; color: var(--color-gray-600); cursor: pointer; font-weight: 700; }
.chip button:hover { color: var(--color-gray-900); }

.filterbar__more { margin-top: var(--space-2); }
.more-filters { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-gray-200); }

@media (max-width: 768px) {
  .filterbar { border-radius: var(--radius-lg); }
  .filterbar__controls { width: 100%; }
}

/* Accordion layout to match screenshots */
.accordion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
  align-items: start;
}

.accordion-item { 
  background: var(--color-white); 
  border: 1px solid var(--color-gray-200); 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  position: relative;
  z-index: 0;
  overflow: visible;
}

.accordion-item:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-md);
}

.accordion-item[data-expanded="true"] {
  z-index: 2;
  box-shadow: var(--shadow-lg);
}

.accordion-trigger {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--space-4);
  font-weight: 600;
  color: var(--color-gray-800);
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.accordion-trigger:hover {
  color: var(--brand-primary);
}

.accordion-chevron { 
  color: var(--color-gray-500); 
  transition: transform var(--transition-fast);
}

.accordion-trigger[aria-expanded="true"] .accordion-chevron {
  transform: rotate(180deg);
  color: var(--brand-primary);
}

.accordion-panel { 
  padding: 0 var(--space-4) var(--space-4) var(--space-4); 
  border-top: 1px solid var(--color-gray-100);
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.accordion-panel--scroll {
  max-height: 360px;
  overflow-y: auto;
  padding-right: var(--space-3);
}

.accordion-panel .option { 
  display: block; 
  padding: var(--space-2) 0; 
  color: var(--color-gray-700);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.accordion-panel .option-group {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: none;
  color: var(--color-gray-500);
}

.accordion-panel .option-group + .option {
  padding-top: var(--space-1);
}

.accordion-panel .option:hover {
  color: var(--color-gray-900);
}
.filter-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.filter-sliders__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter-sliders input[type="range"] {
  width: 100%;
}

.filter-sliders__values {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-600);
}

.panel-head { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: var(--space-3) 0; 
  border-bottom: 1px solid var(--color-gray-100);
  margin-bottom: var(--space-2);
}

.panel-count { 
  font-weight: 600; 
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.panel-clear { 
  background: var(--color-gray-100); 
  border: 1px solid var(--color-gray-200); 
  border-radius: var(--radius-md); 
  padding: var(--space-1) var(--space-3); 
  cursor: pointer; 
  font-weight: 500;
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  transition: all var(--transition-fast);
}

.panel-clear:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-900);
}

.badge-count { 
  margin-left: var(--space-2); 
  background: var(--brand-primary); 
  color: #fff; 
  font-size: 11px; 
  padding: 0 6px; 
  height: 18px; 
  line-height: 18px; 
  border-radius: var(--radius-full);
  font-weight: 600;
}

.accordion-more { 
  width: 100%; 
  background: var(--color-gray-50); 
  border: 1px solid var(--color-gray-200); 
  padding: var(--space-4); 
  color: var(--color-gray-800); 
  font-weight: 600; 
  display: block; 
  margin: var(--space-4) auto 0 auto;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.accordion-more:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

@media (max-width: 1200px) { 
  .accordion-grid { 
    grid-template-columns: 1fr 1fr; 
  } 
}

@media (max-width: 768px) { 
  .accordion-grid { 
    grid-template-columns: 1fr; 
  } 
}
/* ========== Badge Colors ========== */
.badge--gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.badge--blue { background: linear-gradient(135deg, #fd9118, #e08a00); }
.badge--green { background: linear-gradient(135deg, #34d399, #10b981); }
.badge--red { background: linear-gradient(135deg, #f87171, #ef4444); }

/* ========== Tile Alignment ========== */
.tile--aligned {
  height: 50px !important;
  align-items: center !important;
  justify-content: center !important;
}

.card__tiles--aligned {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ========== Badge Width Adjustments ========== */
.badge--red .badge__text {
  padding: 0 12px !important;
  min-width: 70px !important;
  font-size: 11px !important;
}

/* ========== Notification Popup Actions ========== */
.notification-popup__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.notification-popup__close {
  background: none;
  border: none;
  color: var(--color-gray-500);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.notification-popup__close:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

/* ========== Card Meta (shared) ========== */
.card__city,
.card__gender,
.card__age {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.card__city img,
.card__gender img,
.card__age img {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.6) contrast(0.8);
}

.card__city:hover img,
.card__gender:hover img,
.card__age:hover img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(100%);
}

/* ========== Top 100 Ranking Section ========== */
.ranking-section {
  background: var(--color-gray-900);
  color: var(--color-white);
  padding: var(--space-16) 0;
  margin-top: var(--space-16);
}

/* Modern ranking block */
.ranking-block {
  background: rgba(17, 24, 39, 0.7);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}

.ranking-block__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.ranking-block__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 800;
}

.ranking-block__meta {
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
}

/* Ranking Swiper Container */
.ranking-swiper-container {
  position: relative;
  overflow: hidden;
  margin: var(--space-6) 0;
}

.ranking-swiper {
  overflow: hidden;
  position: relative;
}

.ranking-swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease;
  gap: var(--space-4);
}

.ranking-swiper .ranking-item {
  flex: 0 0 auto;
  width: 320px;
}

/* Desktop: Show 4 items — account for 3 gaps of 16px across 4 items */
@media (min-width: 1200px) {
  .ranking-swiper .ranking-item {
    width: calc((100% - 3 * var(--space-4)) / 4);
  }
}

/* Tablet: Show 3 items — 2 gaps */
@media (max-width: 1199px) and (min-width: 768px) {
  .ranking-swiper .ranking-item {
    width: calc((100% - 2 * var(--space-4)) / 3);
  }
}

/* Mobile: Show 2 items — 1 gap */
@media (max-width: 767px) {
  .ranking-swiper .ranking-item {
    width: calc((100% - var(--space-4)) / 2);
  }
}

/* Very small mobile: one card plus a peek of the next — the visible
   sliver signals "there's more" and invites swiping. */
@media (max-width: 480px) {
  .ranking-swiper .ranking-item {
    width: 85%;
  }
}

/* Single-item ranking (early/sparse tenants): a peek sliver only makes
   sense when a next card exists — center one full-width card instead. */
.ranking-swiper--single .ranking-swiper-wrapper {
  justify-content: center;
}

@media (max-width: 480px) {
  .ranking-swiper--single .ranking-item {
    width: 100%;
  }
}

/* Swiper Navigation */
.ranking-swiper-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.ranking-swiper-btn {
  width: 48px;
  height: 48px;
  background: var(--color-gray-700);
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-white);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ranking-swiper-btn:hover {
  background: var(--color-gray-600);
  transform: scale(1.05);
}

.ranking-swiper-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ranking-item {
  background: var(--color-gray-800);
  border: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  align-items: center;
  text-align: center;
  position: relative;
  transition: all var(--transition-fast);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-height: 280px;
}

.ranking-item:hover { transform: translateY(-2px); }

/* The link wraps the whole card (media + info): kill the UA underline and
   visited-purple bleed-through and keep the card's column layout — the
   entire card is one big tap target. */
.ranking-item__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.ranking-item__media  {
    position: relative;
    width: 100%;
    height: 300px;
    object-fit: cover;
    flex-shrink: 0;
}

@media (max-width: 768px) {
  .ranking-item {
    min-height: auto;
    padding: var(--space-3);
  }

  .ranking-item__media {
    width: 100%;
    height: 260px;
  }
}

@media (max-width: 480px) {
  .ranking-item {
    min-height: auto;
    padding: var(--space-2);
  }

  .ranking-item__media {
    width: 100%;
    height: 240px;
  }
}

.ranking-item__num {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  background: var(--brand-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.ranking-item__delta {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 2;
  border-radius: var(--radius-md);
  padding: 2px 6px;
  font-size: var(--font-size-xs);
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  color: var(--color-white);
}
.ranking-item__delta::after { content: attr(data-delta); }
.ranking-item__delta.up { background: linear-gradient(135deg, #34d399, #10b981); }
.ranking-item__delta.down { background: linear-gradient(135deg, #f87171, #ef4444); }
.ranking-item__delta.new { background: linear-gradient(135deg, #60a5fa, #3b82f6); }

.ranking-item__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

.ranking-item__info { 
  min-width: 0; 
  width: 100%;
}
.ranking-item__name { 
  margin: 0; 
  font-weight: 700; 
  font-size: var(--font-size-lg); 
  line-height: 1.2;
  color: var(--color-white);
}

/* City/age chips — the dark-band variant of the listing-card trait pills,
   so ranking cards share the same visual grammar as the results cards. */
.ranking-item__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ranking-item__chip {
  background: var(--color-gray-700);
  color: var(--color-gray-200);
  border: 1px solid var(--color-gray-600);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
}

/* Click affordance inside the whole-card link: reads as the card's CTA
   and brightens along with the card's hover lift. */
.ranking-item__cta {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  transition: color var(--transition-fast);
}

.ranking-item:hover .ranking-item__cta {
  color: var(--brand-primary-light);
}

@media (max-width: 768px) {
  .ranking-item__name {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 480px) {
  .ranking-item__name {
    font-size: var(--font-size-sm);
  }
}

.ranking-block__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* Mobile: compact the dark band (the 64px paddings dominate small
   screens) and make the CTA a full-width tap target. */
@media (max-width: 768px) {
  .ranking-section {
    padding: var(--space-6) 0;
    margin-top: var(--space-6);
  }

  .ranking-block {
    padding: var(--space-3);
  }

  .ranking-block__header {
    margin-bottom: var(--space-3);
  }

  .ranking-swiper-container {
    margin: var(--space-3) 0;
  }

  .ranking-swiper-nav {
    margin-top: var(--space-4);
  }

  .ranking-block__cta {
    margin-top: var(--space-4);
  }

  .ranking-block__cta .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .ranking-block__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

.ranking-rail {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.ranking-rail__container {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.ranking-rail__container::-webkit-scrollbar {
  display: none;
}

.ranking-rail__controls {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.ranking-rail__btn {
  width: 48px;
  height: 48px;
  background: var(--color-gray-700);
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-white);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ranking-rail__btn:hover {
  background: var(--color-gray-600);
  transform: scale(1.05);
}

.ranking-rail__icon {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

/* ========== Ranking Cards ========== */
.ranking-card {
  background: var(--color-gray-800);
  border: 1px solid var(--color-gray-700);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: all var(--transition-fast);
}

.ranking-card:hover {
  border-color: var(--color-gray-600);
  transform: translateY(-2px);
}

.ranking-card__position {
  background: var(--color-gray-700);
  border-radius: var(--radius-lg);
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  font-size: var(--font-size-2xl);
  font-weight: 800;
}

.ranking-card__name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-white);
  margin: 0;
}

.ranking-card__location {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ranking-card__btn {
  background: var(--color-white);
  color: var(--color-gray-900);
  border: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: auto;
}

.ranking-card__btn:hover {
  background: var(--color-gray-100);
  transform: translateY(-1px);
}

/* ========== Footer (Navigation Engine renderer) ==========
   Markup contract: resources/views/partials/footer/* mirrors this design.
   Regions: trust band -> brand + section grid -> network strip -> bottom bar.
   See warp/NAVIGATION/01-FOOTER.md for the rules behind each region. */
.site-footer {
  background: var(--color-gray-900);
  color: var(--color-gray-300);
  /* No outer margin: the footer sits flush against the content so the
     page background never shows as an empty band above it; the internal
     top padding provides the breathing room. */
  padding: var(--space-16) 0 0;
}

/* --- Trust band: platform trust signals; renders even on Gateway outage --- */
.footer__trust {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) 2fr;
  gap: var(--space-8);
  align-items: center;
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-gray-800);
}

.footer__trust-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 var(--space-2);
}

.footer__trust-title svg {
  color: var(--brand-primary);
  flex-shrink: 0;
}

.footer__trust-statement {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin: 0;
}

.footer__trust-statement--moderation {
  margin-top: var(--space-1);
  color: var(--color-gray-500);
}

.footer__trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3) var(--space-6);
}

.footer__trust-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__trust-link:hover {
  color: var(--color-white);
}

.footer__trust-link svg {
  color: var(--brand-primary);
  flex-shrink: 0;
}

/* Dual-mode entries (report abuse) render as buttons for signed-in users. */
button.footer__trust-link,
button.footer__link-button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

/* Trust entries render as tactile chip cards (link and button variants
   share the look, so this comes after the button reset above) — deliberate
   trust badges instead of loose links floating on the dark band. */
.footer__trust-link,
button.footer__trust-link {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-800);
  border: 1px solid var(--color-gray-700);
  border-radius: var(--radius-lg);
}

.footer__trust-link:hover,
button.footer__trust-link:hover {
  color: var(--color-white);
  background: var(--color-gray-700);
  border-color: var(--color-gray-600);
}

.footer__link-button {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer__link-button:hover {
  color: var(--color-white);
}

/* --- Brand + navigation sections --- */
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-10) var(--space-8);
  padding: var(--space-12) 0;
}

.footer__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__brand {
  max-width: 320px;
}

.footer__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
}

.footer__subtitle {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}

.footer__description {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin: 0;
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__list a {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__list a:hover {
  color: var(--color-white);
}

/* --- Network strip (Tippel Network; hidden until activated) --- */
.footer__network {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-gray-800);
}

.footer__network-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.footer__network-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
}

.footer__network-list a {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__network-list a:hover {
  color: var(--color-white);
}

.footer__network-list a.footer__network-hub {
  color: var(--color-gray-300);
  font-weight: 600;
}

/* --- Newsletter slot (dormant until a double-opt-in flow exists) --- */
.footer__newsletter {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.footer__email {
  flex: 1;
  min-width: 200px;
  padding: var(--space-3);
  border: 1px solid var(--color-gray-600);
  background: var(--color-gray-800);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
}

.footer__email:focus {
  outline: none;
}

.footer__email::placeholder {
  color: var(--color-gray-500);
}

/* --- Bottom bar: legal row, age marks, copyright --- */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-6) 0 var(--space-8);
  border-top: 1px solid var(--color-gray-800);
}

.footer__legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
}

.footer__legal a {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__legal a:hover {
  color: var(--color-white);
}

.footer__marks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 24px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-gray-600);
  border-radius: var(--radius-sm);
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  /* Pills keep their single-line shape; when space runs out the row wraps
     instead of breaking the label text ("Content removal") mid-pill. */
  white-space: nowrap;
  flex-shrink: 0;
}

a.footer__mark:hover {
  color: var(--color-white);
  border-color: var(--color-gray-400);
}

/* VerifyPass badge slot: wraps the SDK-injected shadow-DOM host so the
   badge can move to its own row without squeezing the mark pills. Hidden
   while empty (fail-silent SDK) so it never adds phantom gap. */
.footer__marks-badge {
  display: inline-flex;
  align-items: center;
}

.footer__marks-badge:not(:has([data-verifypass-badge])) {
  display: none;
}

.footer__copyright {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* --- Brand close: light closing band — tenant logo + small print.
       Full-bleed (outside the container); the membership line renders
       the copyright and, when the network is active, the Tippel.com
       membership claim. Colors are theme-tokenized so dark themes
       (e.g. escortservice_xxx) can restyle the band via overrides. --- */
.footer__brandclose {
  background: var(--footer-brandclose-bg, var(--color-gray-100));
  padding: var(--space-8) 0;
  text-align: center;
}

.footer__brandclose-logo {
  display: inline-block;
  max-height: 140px;
  max-width: 400px;
  width: auto;
  height: auto;
}

.footer__brandclose-line {
  margin: var(--space-4) 0 0;
  color: var(--footer-brandclose-fg, var(--color-gray-600));
  font-size: var(--font-size-sm);
}

.footer__brandclose-line a {
  color: var(--footer-brandclose-link, var(--color-gray-800));
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__brandclose-line a:hover {
  color: var(--brand-primary);
}

/* The (R) mark quietly links to the official EUIPO trademark record. It
   must stay visually indistinguishable from a plain (R) character: same
   color/weight as surrounding text, no underline, no hover color change.
   A focus-visible outline is kept for keyboard users. */
.trademark-mark,
.footer__brandclose-line a.trademark-mark,
.footer__network-label a.trademark-mark {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  cursor: pointer;
}

.trademark-mark:hover,
.footer__brandclose-line a.trademark-mark:hover {
  color: inherit;
}

.trademark-mark:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .site-footer {
    padding-top: var(--space-8);
  }

  .footer__trust {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
  }

  .footer__grid {
    padding: var(--space-8) 0;
    gap: var(--space-8) var(--space-6);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Compact screens: the VerifyPass badge takes its own full row below the
     mark pills, so "Content removal" / 18+ / RTA stay on one straight line. */
  .footer__marks-badge {
    flex-basis: 100%;
  }
}

/* ========== Intro Text Styling ========== */
.intro-text {
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.intro-short {
  margin-bottom: 0;
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
}

.intro-full {
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
}

.intro-subtitle {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--brand-primary);
  margin: var(--space-6) 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--brand-primary);
  clear: both;
  display: block;
}

.intro-full p {
  margin-bottom: var(--space-4);
  color: var(--color-gray-700);
  line-height: 1.6;
  font-size: var(--font-size-base);
  display: block !important;
}

.intro-full p:last-child {
  margin-bottom: 0;
}

.intro-full h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

/* ========== Read More Link ========== */
.readmore__btn {
  color: var(--brand-primary);
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--space-4);
}

.readmore__btn:hover {
  color: var(--brand-primary-hover);
}

/* details/summary based Readmore */
.intro-details { margin-top: var(--space-4); }

.intro-summary {
  list-style: none;
  cursor: pointer;
  color: var(--color-gray-800);
}

.intro-summary::-webkit-details-marker { display: none; }

.intro-summary > span:first-child { display: block; }

.intro-details .summary-label {
  position: static;
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--brand-primary);
  text-decoration: underline;
  font-weight: 600;
}

.intro-details[open] .summary-label::after { content: attr(data-less); }
.intro-details:not([open]) .summary-label::after { content: attr(data-more); }

/* TPS-222: when the teaser is an excerpt of the intro itself, hide it once
   the full intro is open so the text never shows twice. */
.intro-details--excerpt[open] .intro-summary > span:first-child { display: none; }
.intro-summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }



/* ========== Notification Popup (Mobile Only) ========== */
.notification-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  z-index: 10000;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: none;
  overflow-y: auto;
}

.notification-popup.is-open {
  transform: translateY(0);
}

.notification-popup__header {
  position: sticky;
  top: 0;
  background: var(--color-white);
  padding: var(--space-6) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

.notification-popup__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

.notification-popup__count {
  color: var(--color-orange-500);
  font-weight: 600;
}

.notification-popup__mark-all {
  background: none;
  border: none;
  color: var(--color-orange-500);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.notification-popup__mark-all:hover {
  background: var(--color-orange-50);
}

.notification-popup__content {
  padding: var(--space-4);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.notification-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-gray-100);
  transition: all var(--transition-fast);
}

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

.notification-item:hover {
  background: var(--color-gray-50);
  margin: 0 calc(-1 * var(--space-4));
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  border-radius: var(--radius-lg);
}

.notification-item__avatar {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.notification-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--color-gray-200);
}

.notification-item__status {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: var(--color-orange-500);
  border-radius: 50%;
  border: 2px solid var(--color-white);
}

.notification-item.read .notification-item__status {
  display: none;
}

.notification-item__content {
  flex: 1;
  min-width: 0;
}

.notification-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-1);
}

.notification-item__name {
  font-weight: 600;
  color: var(--color-orange-500);
  font-size: var(--font-size-sm);
}

.notification-item__time {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  flex-shrink: 0;
  margin-left: var(--space-2);
}

.notification-item__message {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  margin: 0;
  line-height: 1.4;
}

.notification-popup__footer {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
}

.notification-popup__view-all {
  width: 100%;
  background: var(--color-gray-700);
  color: var(--color-white);
  border: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: var(--space-4);
}

.notification-popup__view-all:hover {
  background: var(--color-gray-800);
  transform: translateY(-1px);
}

.notification-popup__credit {
  text-align: center;
}

.notification-popup__credit-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-1) 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.notification-popup__credit-amount {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-orange-500);
  margin: 0 0 var(--space-3) 0;
}

.notification-popup__buy-credit {
  width: 100%;
  background: var(--color-orange-500);
  color: var(--color-white);
  border: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.notification-popup__buy-credit:hover {
  background: var(--color-orange-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* Show notification button only on mobile */
@media (max-width: 768px) {
  .notification-btn {
    display: block;
  }
  
  .notification-popup {
    display: block;
  }
}

/* ========== Mobile Slideout Menu ========== */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.mobile-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 320px;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  background: var(--color-white);
  z-index: 1000;
  /* visibility:hidden while closed: an offscreen-parked fixed white panel
     is a known iOS Safari ghost-paint source — during navigation and
     compositor teardown it can flash briefly even at right:-100%. The
     0s visibility flip is DELAYED by the slide duration on close (drawer
     stays visible while animating out) and instant on open below. Same
     pattern as .mobile-menu-overlay and .inbox-overlay. */
  visibility: hidden;
  transition: right var(--transition-normal), visibility 0s linear 250ms;
  /* Pin the header and let only the content scroll. A single fixed
     overflow container is unreliable on iOS and can leave the last
     section (Language) unreachable. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.mobile-menu.is-open {
  right: 0;
  visibility: visible;
  transition: right var(--transition-normal), visibility 0s linear 0s;
}

/* The drawer container receives programmatic focus on open (tabindex=-1
   in the blade) — never show an outline on the panel itself. */
.mobile-menu:focus {
  outline: none;
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
  flex-shrink: 0;
}

.mobile-menu__logo {
  height: 76px;
  width: auto;
  max-width: 220px;
}

.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--color-gray-600);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.mobile-menu__close:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-900);
}

/* The drawer moves focus to this button on open (a11y). Suppress the
   default UA focus ring for pointer/programmatic focus, but keep a clear
   brand-colored ring for keyboard users. */
.mobile-menu__close:focus {
  outline: none;
}

.mobile-menu__close:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.mobile-menu__content {
  /* Scrollable region; the header stays pinned above it. min-height:0 is
     required so this flex child can actually shrink and scroll. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-3);
  /* Keep the last items (language grid) clear of the iOS home indicator. */
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}

.mobile-menu__section {
  margin-bottom: var(--space-4);
}

.mobile-menu__section:last-child {
  margin-bottom: 0;
}

.mobile-menu__section-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-gray-900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--brand-primary);
}

.mobile-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu__list li {
  margin-bottom: var(--space-1);
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--color-gray-700);
  text-decoration: none;
  border-radius: var(--radius-lg);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.mobile-menu__link:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.mobile-menu__link.is-active {
  background: var(--brand-primary);
  color: var(--color-white);
}

/* Mobile menu sub-items (expandable) */
.mobile-menu__item--has-sub {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.mobile-menu__item--has-sub > .mobile-menu__link {
  flex: 1;
}

.mobile-menu__sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--color-gray-500);
  line-height: 1;
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
}

.mobile-menu__sub-toggle svg {
  transition: transform var(--transition-fast);
}

.mobile-menu__sub-toggle:hover {
  color: var(--color-gray-700);
  background: var(--color-gray-100);
}

/* Suppress the sticky UA focus ring after taps; keep a clear brand ring
   for keyboard users (same pattern as .mobile-menu__close). */
.mobile-menu__sub-toggle:focus {
  outline: none;
}

.mobile-menu__sub-toggle:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.mobile-menu__sub-toggle[aria-expanded="true"] {
  color: var(--brand-primary);
}

.mobile-menu__sub-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mobile-menu__sublist {
  display: none;
  flex: 1 1 100%;
  min-width: 0;
  list-style: none;
  padding: 0 0 0 var(--space-3);
  margin: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 2px solid var(--color-gray-200);
}

.mobile-menu__sublist.is-open {
  display: block;
}

.mobile-menu__link--sub {
  font-size: var(--font-size-sm);
  min-height: 40px;
  padding: var(--space-1) var(--space-3);
  color: var(--color-gray-500);
}

.mobile-menu__link--sub:hover {
  color: var(--brand-primary);
  background: var(--brand-primary-soft);
}

/* Fixed-width icon slot so submenu labels align (e.g. Sex shop items). */
.mobile-menu__sub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.mobile-menu__link--sub:hover .mobile-menu__sub-icon {
  color: var(--brand-primary);
}

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Account identity header (logged-in): avatar initial + name + role. */
.mobile-menu__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.mobile-menu__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--brand-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--font-size-lg);
  line-height: 1;
}

.mobile-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mobile-menu__user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mobile-menu__user-name {
  font-weight: 700;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-menu__user-role {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--brand-primary);
}

/* Provider identity header links through to the own public profile page. */
.mobile-menu__user--link {
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
}

.mobile-menu__user--link:hover,
.mobile-menu__user--link:active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
}

.mobile-menu__user-external {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
}

/* Credits chip → top-up. Value hydrated client-side from the wallet API. */
.mobile-menu__credits {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.mobile-menu__credits:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
}

.mobile-menu__credits-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}

.mobile-menu__credits-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  margin-right: auto;
  min-width: 0;
}

.mobile-menu__credits-value {
  font-weight: 700;
  color: var(--color-gray-900);
}

.mobile-menu__credits-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.mobile-menu__credits-cta {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--brand-primary);
}

.mobile-menu__languages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.mobile-menu__lang-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  color: var(--color-gray-700);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.mobile-menu__lang-btn:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-900);
}

.mobile-menu__lang-btn.active {
  background: var(--brand-primary);
  color: var(--color-white);
  border-color: var(--brand-primary);
}

.mobile-menu__lang-btn img {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
}

/* ========== Mobile Sticky Bottom Menu ========== */
.mobile-sticky-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  display: none;
  z-index: 100;
  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
  /* Keep normal Safari navigation height stable. The safe-area value is
     enabled only for standalone/PWA display modes below. */
  padding-bottom: var(--mobile-bottom-safe-area);
  /* Same iOS compositing promotion as .site-header: keeps the fixed bar
     on its own layer so Safari never repaints it at a stale offset during
     toolbar collapse/expand viewport resizes. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.mobile-sticky-menu__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Compact bar: every extra pixel here is lost scrollable content. Keep
     the whole item tappable (~56px incl. icon + label). */
  padding: var(--space-2) var(--space-1);
  text-decoration: none;
  color: var(--color-gray-600);
  transition: all var(--transition-fast);
  position: relative;
}

.mobile-sticky-menu__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Reset native button styling so a <button> tab (e.g. the guest "Menu"
   trigger) matches the <a> tabs. */
button.mobile-sticky-menu__item {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* While the guest "Nearby" tab waits for the browser geolocation prompt,
   dim it and block repeat taps. */
.mobile-sticky-menu__item.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.mobile-sticky-menu__item:hover {
  color: var(--color-gray-900);
  background: var(--color-gray-50);
}

/* Bottom-bar tabs open the drawer / inbox overlay and get focus restored
   on close — same focus-ring split as the other chrome buttons. */
.mobile-sticky-menu__item:focus {
  outline: none;
}

.mobile-sticky-menu__item:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

.mobile-sticky-menu__item.is-active {
  color: var(--brand-primary);
  background: var(--brand-primary-soft);
}

.mobile-sticky-menu__icon {
  position: relative;
  margin-bottom: 2px;
}

.mobile-sticky-menu__badge {
  position: absolute !important;
  /* Unread LEFT / live RIGHT — mirrors the overlay tab order. */
  top: -6px !important;
  left: -6px !important;
  background: var(--color-error) !important;
  color: var(--color-white) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-full) !important;
  min-width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.mobile-sticky-menu__label {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* Zero-count states: the blade/inbox-overlay.js toggle the `hidden`
   attribute, but these indicators set an explicit display (flex, partly
   !important) which overrides the UA [hidden] rule — that is how "0"
   badges leaked through. The attribute must always win. */
.mobile-sticky-menu__badge[hidden],
.notification-badge[hidden],
.live-presence-dot[hidden] {
  display: none !important;
}

/* Show mobile sticky menu across phones and tablets — aligned to the same
   1024px breakpoint as the rest of the mobile chrome (hamburger drawer). */
@media (max-width: 1024px) {
  .mobile-sticky-menu {
    display: flex;
  }

  /* Reserve the same stable height used by the fixed menu. */
  body {
    padding-bottom: calc(var(--bottom-nav-height) + var(--mobile-bottom-safe-area));
  }
}

/* ========== Responsive Design ========== */

/* ========== Profile Detail Content Styling ========== */

/* Profile Detail Section */
.profile-detail-section {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 100%;
  overflow: hidden;
}

/* Tab Content - Full Width */
.profile-detail-section .profile-tab-content {
  margin-top: var(--space-4);
}

/* Subscription CTA banner (inside info panel) */
.profile-subscription-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.08) 0%, rgba(230, 57, 70, 0.06) 100%);
  border: 1px solid rgba(243, 156, 18, 0.2);
}

.profile-subscription-cta__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.profile-subscription-cta__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.profile-subscription-cta__text {
  font-size: 0.9rem;
  color: var(--color-gray-700);
  line-height: 1.4;
}

.profile-subscription-cta__price {
  display: inline;
  color: var(--color-primary, #e63946);
  font-weight: 600;
  white-space: nowrap;
}

.profile-subscription-cta__btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .profile-subscription-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .profile-subscription-cta__content {
    flex-direction: column;
    gap: 0.5rem;
  }

  .profile-subscription-cta__btn {
    width: 100%;
  }
}

/* Tab Panels */
.profile-detail-section .profile-tab-panel {
  display: none;
  width: 100%;
}

.profile-detail-section .profile-tab-panel.active {
  display: block;
}

/* Tab Panel Content - Vertical Stack Layout */
.profile-detail-section .profile-tab-panel.active {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch;
}

/* Cards now stack vertically - no specific positioning needed */

/* Profile Header */
.profile-detail-section .profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.profile-detail-section .profile-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  /* TPS-39: overflow is visible here (clipping moved to .profile-avatar__frame
     below) so the owner-only camera badge can sit on the circle's edge
     instead of being clipped by the avatar's own circular mask. */
  overflow: visible;
  border: 4px solid var(--brand-primary);
}
.profile-detail-section .profile-avatar__frame {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

/* Live presence: green avatar ring when the profile is online now — hydrated
   client-side together with the presence badge (never from the cached entity
   payload). Mirrors the listing-card / search-dropdown green ring. */
.profile-detail-section .profile-avatar--online {
  border-color: #22c55e;
}

/* Hero-overlap variant: keep the white separation ring and add a soft green
   halo outside it so the online state reads on top of any cover imagery. */
.profile-detail-section .profile-header--overlap .profile-avatar--online {
  box-shadow:
    0 0 0 4px var(--color-white),
    0 0 0 7px rgba(34, 197, 94, 0.4),
    0 6px 20px rgba(0, 0, 0, 0.18);
}

.profile-detail-section .profile-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-detail-section .profile-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-detail-section .profile-name {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--color-gray-900);
  margin: 0;
}

.profile-detail-section .profile-stats {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  justify-content: center;
}

.profile-detail-section .profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-gray-200);
  transition: all var(--transition-fast);
  position: relative;
  text-align: center;
  justify-content: center;
  padding: var(--space-2);
}

.profile-detail-section .profile-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  border-color: var(--brand-primary);
}

.profile-detail-section .profile-stat__value {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-primary);
  line-height: 1;
  margin-bottom: 1px;
}

.profile-detail-section .profile-stat__label {
  font-size: 9px;
  color: var(--color-gray-600);
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.profile-detail-section .profile-stat__trend {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 8px;
  color: #22c55e;
  font-weight: 700;
  background: #dcfce7;
  padding: 2px 4px;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
  min-width: 16px;
  text-align: center;
}

.profile-detail-section .profile-header__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-end;
}

.profile-detail-section .profile-actions {
  display: flex;
  gap: var(--space-2);
}

.profile-detail-section .profile-action {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.profile-detail-section .profile-action:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

.profile-detail-section .profile-action img {
  width: 20px;
  height: 20px;
}

.profile-detail-section .profile-action svg {
  width: 16px;
  height: 16px;
  display: inline-block;
  visibility: visible;
  opacity: 1;
}

.profile-detail-section .profile-navigation {
  display: flex;
  gap: var(--space-2);
}

.profile-detail-section .profile-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-gray-600);
}

.profile-detail-section .profile-nav-btn:hover {
  background: var(--brand-primary);
  color: var(--color-white);
  border-color: var(--brand-primary);
}

.profile-detail-section .profile-nav-btn svg {
  width: 16px;
  height: 16px;
  display: inline-block;
  visibility: visible;
  opacity: 1;
}

/* Cover-edge variant of the prev/next navigation (partials/profile/
   nav-arrows.blade.php renders both wrappers). Hidden on desktop — the
   header keeps its .profile-navigation buttons; ≤768px swaps the two. */
.profile-detail-section .profile-cover__nav {
  display: none;
}

/* Profile Cover (hero band) — replaces the old duplicated main profile image.
   Fallback chain: approved cover → blurred primary photo → brand gradient. */
.profile-detail-section .profile-cover {
  position: relative;
  height: 280px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
  box-shadow: var(--shadow-lg);
}

.profile-detail-section .profile-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* TPS-39: [data-cover-preview] is the in-place update hook for the owner
   editor (account-media.js retargets the img inside it after an upload or
   reposition). It MUST span the full band box: an unstyled auto-height div
   here breaks the percentage-height chain (.profile-cover__zoom and
   .profile-cover__img resolve height:100% against THIS box), so the img
   rendered at its intrinsic height and .profile-cover's overflow:hidden
   always clipped the TOP strip — the saved object-position focal point had
   no visual effect at all on the public band. */
.profile-detail-section .profile-cover > [data-cover-preview] {
  width: 100%;
  height: 100%;
}

/* Fullscreen zoom links: cover + avatar open the shared media lightbox
   (data-lightbox-item, group "hero"). Anchors keep keyboard access; the
   overlay chips (availability, likes, cover nav) sit above the link and
   keep their own taps. */
.profile-detail-section .profile-cover__zoom {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.profile-detail-section .profile-avatar__zoom {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

/* Blurred primary-photo backdrop (no cover uploaded): a treatment, not a
   visible duplicate of the avatar. Slight scale hides blurred edge fringing. */
.profile-detail-section .profile-cover__img--blur {
  filter: blur(22px) saturate(1.05);
  transform: scale(1.12);
}

.profile-detail-section .profile-cover__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.35) 100%);
}

/* Facebook-style overlap: the round avatar rises over the cover bottom edge.
   align-self keeps the offset deterministic inside the centered flex row;
   the white ring separates the brand border from any cover imagery. */
.profile-detail-section .profile-header--overlap .profile-avatar {
  align-self: flex-start;
  margin-top: -72px;
  position: relative;
  z-index: 1;
  background: var(--color-white);
  box-shadow: 0 0 0 4px var(--color-white), 0 6px 20px rgba(0, 0, 0, 0.18);
}

.profile-detail-section .profile-availability {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--brand-primary);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--font-size-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.profile-detail-section .profile-availability--available {
  background: #22c55e;
}

.profile-detail-section .profile-availability--expiring {
  background: #f59e0b;
}

/* Pulsing dot inside the availability badge */
.profile-detail-section .profile-availability__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
  animation: profile-avail-pulse 2s ease-in-out infinite;
}

@keyframes profile-avail-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.profile-detail-section .profile-likes {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  background: rgba(0, 0, 0, 0.7);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 600;
}

/* Owner-only inline cover editor overlay (TPS-39). Same class names and
   behaviour as the account.css version (account.partials.profile-cover-upload),
   just re-scoped under .profile-detail-section since this page uses the
   public layout (layouts.app), not the account layout (body.is-account).

   Anchored TOP-left (not bottom-left): the avatar overlaps the cover's
   BOTTOM-left corner (Facebook-style overlap, margin-top:-72px on
   .profile-avatar below), so a bottom-left overlay here visually collided
   with the avatar circle instead of sitting on the cover band. */
.profile-detail-section .profile-cover-editor__trigger {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: rgba(17, 24, 39, 0.72);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.85);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  z-index: 3;
}
.profile-detail-section .profile-cover-editor__trigger svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.profile-detail-section .profile-cover-editor__trigger:hover,
.profile-detail-section .profile-cover-editor__trigger:focus-visible {
  background: var(--brand-primary);
  outline: none;
}
.profile-detail-section .profile-cover-editor__trigger.is-dragover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.profile-detail-section .profile-cover-editor__trigger.is-uploading {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}
.profile-detail-section .profile-cover-editor__trigger.is-error {
  border-color: #f87171;
}
.profile-detail-section .profile-cover-editor__trigger input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}
.profile-detail-section .profile-cover-editor__reposition {
  position: absolute;
  top: var(--space-4);
  left: calc(var(--space-4) + 42px + var(--space-2));
  display: inline-flex;
  align-items: center;
  background: rgba(17, 24, 39, 0.72);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  z-index: 3;
}
.profile-detail-section .profile-cover-editor__reposition:hover {
  background: var(--brand-primary);
}
.profile-detail-section .profile-cover-editor__reposition:disabled {
  opacity: 0.5;
  cursor: wait;
}
.profile-detail-section .profile-cover [data-media-upload-error]:not([hidden]) {
  position: absolute;
  top: calc(var(--space-4) + 48px);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 3;
}
/* .alert sets display:flex above, which would override the native [hidden]
   behaviour — same fix already applied in account.css for this class. */
.profile-detail-section .reel-upload-zone__error[hidden] {
  display: none !important;
}

/* Compact dark-overlay upload progress row, positioned over the cover band
   (account.css's version assumes a light card background, which does not
   apply here). */
.profile-detail-section .profile-cover .reel-upload-progress {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 3;
}
.profile-detail-section .shop-content-upload__progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(17, 24, 39, 0.85);
  color: var(--color-white);
  font-size: var(--font-size-sm);
}
.profile-detail-section .shop-content-upload__filename {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}
.profile-detail-section .reel-upload-progress__bar {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  overflow: hidden;
  min-width: 60px;
}
.profile-detail-section .reel-upload-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--brand-primary);
  border-radius: var(--radius-full);
  transition: width 0.15s linear;
}
.profile-detail-section .reel-upload-progress__fill.is-pulsing {
  animation: profile-cover-progress-pulse 1.4s ease-in-out infinite;
}
@keyframes profile-cover-progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.profile-detail-section .shop-content-upload__status {
  white-space: nowrap;
}

/* Owner-only avatar camera-icon overlay (TPS-39). DRY: the form this label
   wraps is the SAME shape account-profile.js's initAvatarCropper() already
   scans for on /account/* pages (account.partials.profile-photo-upload's
   $compact=true branch) — no JS changes needed, just a compact presentation
   of the existing avatar upload + crop flow. Sits on the avatar's edge,
   which .profile-avatar__frame (not .profile-avatar itself) now clips. */
.profile-detail-section .profile-avatar-editor__trigger-form {
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 2;
}
.profile-detail-section .profile-avatar-editor__camera-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(17, 24, 39, 0.85);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  cursor: pointer;
}
.profile-detail-section .profile-avatar-editor__camera-btn:hover,
.profile-detail-section .profile-avatar-editor__camera-btn:focus-visible {
  background: var(--brand-primary);
  outline: none;
}
.profile-detail-section .profile-avatar-editor__camera-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.profile-detail-section .profile-avatar-editor__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

/* Media Tabs */
.profile-detail-section .profile-media-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.profile-detail-section .profile-media-tab {
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-100);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.profile-detail-section .profile-media-tab--active {
  background: var(--brand-primary);
  color: var(--color-white);
}

/* Media Gallery */
.profile-detail-section .profile-media-panels {
  margin-bottom: var(--space-6);
}

.profile-detail-section .profile-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
}

.profile-detail-section .profile-media-item {
  display: block;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.profile-detail-section .profile-media-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.profile-detail-section .profile-media-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.profile-detail-section .profile-media-item__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.profile-detail-section .profile-media-item:hover .profile-media-item__overlay {
  opacity: 1;
}

.profile-detail-section .profile-media-item__overlay svg {
  color: var(--color-white);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}

.profile-detail-section .profile-media-item__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.profile-detail-section .profile-media-item__play svg {
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  padding: 10px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.profile-detail-section .profile-media-item--video {
  cursor: pointer;
}

.profile-detail-section .profile-media-item--video:hover .profile-media-item__play svg {
  transform: scale(1.05);
  background: rgba(0, 0, 0, 0.6);
}

.profile-detail-section .profile-media-item__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-gray-900);
  color: rgba(255, 255, 255, 0.85);
}

/* Profile media lightbox — premium immersive overlay */
.modal-overlay.media-lightbox {
  background: rgba(0, 0, 0, 0.92);
  z-index: 2000;
  backdrop-filter: blur(2px);
}

.modal-overlay.media-lightbox .modal {
  max-width: 1100px;
  width: calc(100vw - 16px);
  background: #05070f;
  color: var(--color-white);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: mlb-modal-in 180ms cubic-bezier(0.2, 0, 0, 1);
}

@keyframes mlb-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-overlay.media-lightbox .modal__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255,255,255,0.02);
}

.modal-overlay.media-lightbox .media-lightbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
}

.modal-overlay.media-lightbox .media-lightbox__header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.modal-overlay.media-lightbox .media-lightbox__title {
  color: rgba(255,255,255,0.95);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
}

.modal-overlay.media-lightbox .media-lightbox__counter--header {
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.modal-overlay.media-lightbox .media-lightbox__close {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease;
}

.modal-overlay.media-lightbox .media-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.16);
}

.modal-overlay.media-lightbox .modal__content {
  padding: 0;
}

.media-lightbox__stage {
  position: relative;
  width: 100%;
  height: min(82vh, 720px);
  background: #000;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-lightbox__media {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 160ms ease;
}

.media-lightbox__stage.has-media .media-lightbox__media {
  opacity: 1;
}

.media-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.45);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 3;
}

.media-lightbox__nav:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.65);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-50%) scale(1.02);
}

.media-lightbox__nav:active:not(:disabled) {
  transform: translateY(-50%) scale(0.98);
}

.media-lightbox__nav:disabled {
  opacity: 0.25;
  cursor: default;
}

.media-lightbox__nav--prev {
  left: var(--space-3);
}

.media-lightbox__nav--next {
  right: var(--space-3);
}

/* Larger, easier tap targets on mobile */
@media (max-width: 480px) {
  .media-lightbox__nav {
    width: 52px;
    height: 52px;
  }
  .media-lightbox__nav--prev { left: var(--space-2); }
  .media-lightbox__nav--next { right: var(--space-2); }
  .media-lightbox__hint {
    display: none; /* keep UI clean on tiny screens */
  }
}

/* Bottom gradient + floating caption inside stage (like pro viewers) */
.media-lightbox__overlay-caption {
  position: absolute;
  left: var(--space-4);
  right: auto;
  bottom: var(--space-3);
  max-width: calc(100% - var(--space-4) * 2);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.65) 30%, rgba(0,0,0,0.85) 100%);
  color: rgba(255,255,255,0.95);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 2;
  opacity: 0.95;
}

/* In-stage counter badge (bottom-right, matches screenshot) */
.media-lightbox__stage-counter {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 3;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1;
  letter-spacing: 0.3px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.media-lightbox__hint {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-4);
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.35);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  pointer-events: none;
  z-index: 2;
}

/* Loading spinner */
.media-lightbox__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.4);
  z-index: 4;
  transition: opacity 120ms ease;
}

/* The JS toggles the [hidden] attribute to hide the spinner once the media has
   loaded. Without this rule the `display: grid` above overrides the attribute's
   UA `display:none`, so the spinner would keep spinning over an already-loaded
   image. Higher specificity ([hidden]) ensures it truly hides. */
.media-lightbox__loading[hidden] {
  display: none;
}

.media-lightbox__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: mlb-spin 0.8s linear infinite;
}

@keyframes mlb-spin {
  to { transform: rotate(360deg); }
}

.media-lightbox__footer {
  display: none; /* caption lives inside stage as overlay; keep footer for future if needed */
}

.profile-detail-section .profile-media-empty {
  margin: 0 0 var(--space-4);
  color: var(--color-gray-600);
}

/* About Me Section */
.profile-detail-section .profile-about {
  margin-bottom: var(--space-6);
}

.profile-detail-section .profile-about__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
}

.profile-detail-section .profile-about__text {
  color: var(--color-gray-700);
  line-height: 1.6;
  margin: 0;
}

.profile-detail-section .profile-about__content {
  color: var(--color-gray-700);
  line-height: 1.6;
  margin: 0;
}

.profile-detail-section .profile-about__content p {
  margin: 0 0 var(--space-3);
}

.profile-detail-section .profile-about__content p:last-child {
  margin-bottom: 0;
}

/* Read-more clamp for long bios (progressive disclosure, no layout shift) */
.profile-detail-section .profile-about__content--truncated {
  max-height: 6.4em; /* ~4 lines at 1.6 line-height */
  overflow: hidden;
  position: relative;
}

.profile-detail-section .profile-about__content--truncated::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-white));
  pointer-events: none;
}

.profile-detail-section .profile-about__toggle {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: var(--space-1) 0;
  margin-top: var(--space-1);
  cursor: pointer;
}

.profile-detail-section .profile-about__toggle:hover {
  text-decoration: underline;
}

/* Work At Section */
.profile-detail-section .profile-work {
  margin-bottom: var(--space-6);
}

.profile-detail-section .profile-work__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.profile-detail-section .profile-work__text {
  color: var(--color-gray-700);
  margin: 0;
}

/* Card Styling */
.profile-detail-section .profile-details-card,
.profile-detail-section .profile-services-card,
.profile-detail-section .profile-categories-card,
.profile-detail-section .profile-languages-card,
.profile-detail-section .profile-rates-card {
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
  transition: all var(--transition-fast);
  height: fit-content;
  display: flex;
  flex-direction: column;
}

.profile-detail-section .profile-details-card:hover,
.profile-detail-section .profile-services-card:hover,
.profile-detail-section .profile-categories-card:hover,
.profile-detail-section .profile-languages-card:hover,
.profile-detail-section .profile-rates-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Personal Details Table */
.profile-detail-section .profile-details__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


.profile-detail-section .profile-details__table {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.profile-detail-section .profile-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-detail:last-child {
  border-bottom: none;
}

.profile-detail-section .profile-detail__label {
  font-weight: 600;
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
}

.profile-detail-section .profile-detail__value {
  color: var(--color-gray-900);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

/* "Reachable on" messenger badges (labels only; the number is revealed on click). */
.profile-detail-section .profile-detail__value.profile-reachables {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.profile-detail-section .profile-reachable-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--brand-primary);
  background: var(--color-white);
  border: 1px solid var(--brand-primary);
}

/* Socials & links card: user-supplied outbound links rendered as pill links.
   The template always sets rel="nofollow noopener noreferrer ugc" on these. */
.profile-detail-section .profile-socials__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.profile-detail-section .profile-social-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  text-decoration: none;
  font-size: var(--font-size-sm);
  max-width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.profile-detail-section .profile-social-pill:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.profile-detail-section .profile-social-pill__label {
  font-weight: 700;
  color: var(--color-gray-900);
  white-space: nowrap;
}
.profile-detail-section .profile-social-pill__value {
  color: var(--color-gray-600);
  font-weight: 500;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-detail-section .profile-social-pill svg { color: var(--color-gray-400); flex-shrink: 0; }
.profile-detail-section .profile-social-pill:hover svg { color: var(--brand-primary); }

/* Action Buttons */
.profile-detail-section .profile-actions-main {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.profile-detail-section .profile-actions-main .profile-action-btn {
  flex: 1;
}

.profile-detail-section .profile-actions-secondary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.profile-detail-section .profile-actions-secondary > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.profile-detail-section .profile-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
}

.profile-detail-section .profile-action-btn svg {
  width: 16px;
  height: 16px;
  display: inline-block;
  visibility: visible;
  opacity: 1;
  flex-shrink: 0;
}

.profile-detail-section .profile-action-btn--phone {
  background: var(--brand-primary);
  color: var(--color-white);
  font-weight: 700;
}

/* Profile Tabs */
.profile-detail-section .profile-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-gray-200);
  overflow-x: auto;
}

.profile-detail-section .profile-tab {
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  color: var(--color-gray-600);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.profile-detail-section .profile-tab:hover {
  color: var(--color-gray-900);
}

.profile-detail-section .profile-tab--active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

/* Services Section */
.profile-detail-section .profile-services__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


.profile-detail-section .profile-services__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.profile-detail-section .profile-service {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-service__icon {
  color: var(--brand-primary);
  font-weight: bold;
  font-size: var(--font-size-sm);
}

.profile-detail-section .profile-service span:last-child {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
}

/* Categories Section */
.profile-detail-section .profile-categories__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


.profile-detail-section .profile-categories__list {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.profile-detail-section .profile-category {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-category__icon {
  font-size: var(--font-size-sm);
}

.profile-detail-section .profile-category span:last-child {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
}

/* Languages Section */
.profile-detail-section .profile-languages__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


.profile-detail-section .profile-languages__table {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.profile-detail-section .profile-language {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-language:last-child {
  border-bottom: none;
}

.profile-detail-section .profile-language__name {
  font-weight: 600;
  color: var(--color-gray-900);
  font-size: var(--font-size-sm);
}

.profile-detail-section .profile-language__level {
  color: var(--brand-primary);
  font-weight: 700;
  font-size: var(--font-size-sm);
  background: var(--brand-primary);
  color: var(--color-white);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* Rates Section */
.profile-detail-section .profile-rates__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.profile-detail-section .profile-rates__subtitle {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.profile-detail-section .profile-rates__subtitle:first-of-type {
  margin-top: 0;
}

.profile-detail-section .profile-rates__table {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.profile-detail-section .profile-rate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-rate:last-child {
  border-bottom: none;
}

.profile-detail-section .profile-rate__duration {
  font-weight: 600;
  color: var(--color-gray-900);
  font-size: var(--font-size-sm);
}

.profile-detail-section .profile-rate__price {
  color: var(--brand-primary);
  font-weight: 700;
  font-size: var(--font-size-lg);
  background: var(--brand-primary);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

/* Location Map Section */
.profile-detail-section .profile-location-map {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-100);
}

/* Fullscreen map overlay — toggled by the Leaflet control in
   profile-location-map.js. CSS overlay instead of the native Fullscreen
   API because iOS Safari does not support requestFullscreen().
   Standalone selector (no .profile-detail-section ancestor): the JS
   portals the map element to <body> while fullscreen so no ancestor
   transform/filter can trap the fixed-position overlay. */
.profile-location-map--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 6000; /* above header, sticky bottom menu and inbox overlay */
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  border: none;
}

/* Lock page scroll behind the fullscreen map. */
body.profile-map-scroll-lock {
  overflow: hidden;
}

/* Fullscreen toggle button — rides the Leaflet control chrome (leaflet-bar
   gives the white box + border) with a comfortable 34px touch target. */
.leaflet-bar.profile-map-fullscreen a {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-800);
}

.profile-detail-section .profile-location-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  border: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-location__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
}

.profile-detail-section .profile-location-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.profile-detail-section .profile-location-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  background: var(--color-gray-50, #fafafa);
}

.profile-detail-section .profile-location-legend__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}

.profile-detail-section .profile-location-legend__icon--current {
  background: var(--brand-primary);
  color: var(--color-white);
}

.profile-detail-section .profile-location-legend__icon--coverage {
  background: color-mix(in srgb, var(--brand-primary) 15%, transparent);
  color: var(--brand-primary);
}

.profile-detail-section .profile-location-legend__text {
  flex: 1;
}

.profile-detail-section .profile-location-legend__name {
  font-weight: 600;
  color: var(--color-gray-900);
  font-size: var(--font-size-sm);
}

.profile-detail-section .profile-location-legend__meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.profile-detail-section .profile-location-legend__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-detail-section .profile-location-legend__badge--current {
  background: var(--brand-primary);
  color: var(--color-white);
}

.profile-detail-section .profile-location-legend__badge--coverage {
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  color: var(--brand-primary);
}

/* Availability-aware badge variants */
.profile-detail-section .profile-location-legend__badge--available {
  background: #22c55e;
  color: var(--color-white);
}

.profile-detail-section .profile-location-legend__badge--expiring {
  background: #f59e0b;
  color: var(--color-white);
}

/* Bumped-ago inline line in the location legend */
.profile-detail-section .profile-location-legend__bumped {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-xs);
  color: #065f46;
  font-weight: 600;
  margin-top: 2px;
}

/* Leaflet custom avatar marker pin */
.leaflet-avatar-marker-wrapper {
  background: none !important;
  border: none !important;
}

.leaflet-avatar-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.leaflet-avatar-marker__ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #e8364f;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.leaflet-avatar-marker__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leaflet-avatar-marker__arrow {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #e8364f;
  margin-top: -1px;
}

/* Leaflet dot marker (no-avatar fallback) */
.leaflet-dot-marker-wrapper {
  background: none !important;
  border: none !important;
}

.leaflet-dot-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e8364f;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Availability Section */
.profile-detail-section .profile-availability-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  border: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-availability__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Availability Notes content (paragraph-aware, same treatment as About Me) */
.profile-detail-section .profile-availability-card .profile-about__content {
  color: var(--color-gray-700);
  line-height: 1.6;
}

.profile-detail-section .profile-availability-card .profile-about__content p {
  margin: 0 0 var(--space-3);
}

.profile-detail-section .profile-availability-card .profile-about__content p:last-child {
  margin-bottom: 0;
} 

.profile-detail-section .profile-availability__types {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.profile-detail-section .profile-availability__type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.profile-detail-section .profile-availability__type-badge svg {
  flex-shrink: 0;
}

/* Schedule Grid */
.profile-detail-section .profile-schedule-grid {
  display: flex;
  flex-direction: column;
}

.profile-detail-section .profile-schedule-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
  transition: background-color 0.15s ease;
}

.profile-detail-section .profile-schedule-row:last-child {
  border-bottom: none;
}

.profile-detail-section .profile-schedule-row--today {
  background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
  border-radius: var(--radius-md);
  border-bottom-color: transparent;
}

.profile-detail-section .profile-schedule-row__day {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-gray-900);
  font-size: var(--font-size-sm);
  min-width: 140px;
}

.profile-detail-section .profile-schedule-row__today-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  background: var(--brand-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-detail-section .profile-schedule-row__time {
  font-size: var(--font-size-sm);
  text-align: right;
}

.profile-detail-section .profile-schedule-row__open {
  color: var(--color-gray-900);
  font-weight: 500;
}

.profile-detail-section .profile-schedule-row__closed {
  color: var(--color-gray-400);
  font-style: italic;
}

.profile-detail-section .profile-schedule-row__na {
  color: var(--color-gray-300);
}

/* ── Verified badge next to the profile name (21+ / generic) ───────────── */
.profile-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  margin-left: 10px;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: 0.42em;            /* scales with the (responsive) profile name */
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
}
.profile-verified__icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}
/* 21+ ID verification — stronger, filled trust treatment. */
.profile-verified--id {
  color: var(--color-white);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 35%, transparent);
}

/* ── Live presence badge next to the profile name ──────────────────────
   Hidden by default; hydrated client-side (data-profile-presence). Same
   colors + copy as the listing-card presence traits and the entity-search
   dropdown (PresenceStatus contract). */
/* The badge boots [hidden] until client-side presence hydration; the explicit
   display below would beat the UA [hidden] rule, so re-assert it (same fix as
   the sticky-menu badges). */
.profile-presence[hidden] {
  display: none;
}

.profile-presence {
  display: inline-flex;
  align-items: center;
  /* .profile-info is a flex column (align-items: stretch) — without this
     the badge stretches into a full-width bar instead of a compact pill. */
  align-self: flex-start;
  gap: 0.4rem;
  margin-bottom: var(--space-2);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* Mobile hero is centered (name, stats) — center the pill with it. */
@media (max-width: 768px) {
  .profile-presence {
    align-self: center;
    margin-bottom: 0;
  }
}

.profile-presence__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.profile-presence--online {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.profile-presence--online .profile-presence__dot {
  background: #22c55e;
  animation: entitySearchPresencePulse 1.6s ease-in-out infinite;
}

.profile-presence--recently {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

.profile-presence--recently .profile-presence__dot {
  background: var(--color-warning);
}

/* Responsive Design for Profile Detail */
/* Profile cards now stack vertically on all screen sizes */

@media (max-width: 768px) {
  .profile-detail-section {
    padding: var(--space-4);
    gap: var(--space-3);
    margin: 0 var(--space-2) var(--space-6);
  }
  
  /* IG/FB-compact hero: avatar left over the cover edge, identity right of
     it, stats strip full-width below. */
  .profile-detail-section .profile-header {
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
    text-align: left;
    padding-bottom: var(--space-3);
  }
  
  /* Two-column grid; display:contents promotes the .profile-info children
     (name, presence, stats) to grid items so the stats strip can span both
     columns — no DOM change, desktop keeps its flex layout. */
  .profile-detail-section .profile-header__left {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    align-items: center;
  }

  /* The right column only holds desktop chrome: icon quick-actions (hidden
     below) and the desktop nav arrows (replaced by .profile-cover__nav). */
  .profile-detail-section .profile-header__right {
    display: none;
  }

  .profile-detail-section .profile-avatar {
    width: 104px;
    height: 104px;
    border-width: 3px;
  }

  .profile-detail-section .profile-info {
    display: contents;
  }

  .profile-detail-section .profile-name {
    font-size: var(--font-size-xl);
    text-align: left;
    margin-bottom: 0;
    line-height: 1.2;
  }

  /* Presence pill sits under the name in the identity column. */
  .profile-detail-section .profile-presence {
    justify-self: start;
    align-self: start;
    margin-bottom: 0;
  }

  /* Signature stats on mobile: the desktop circles don't scale down well,
     so phones get the classic profile stat strip instead — one full-width
     row, value over label per column, hairline dividers in between
     (the Instagram/X profile pattern). Desktop keeps the circles. */
  .profile-detail-section .profile-stats {
    display: flex;
    grid-column: 1 / -1; /* full width under avatar + identity */
    width: 100%;
    gap: 0;
    margin-top: var(--space-2);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-3) 0;
  }

  .profile-detail-section .profile-stat {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    padding: var(--space-2) var(--space-1);
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .profile-detail-section .profile-stat + .profile-stat {
    border-left: 1px solid var(--color-gray-200);
  }

  /* The circle hover lift is desktop chrome — pointless on touch and it
     would visually tear the strip apart. */
  .profile-detail-section .profile-stat:hover {
    transform: none;
    box-shadow: none;
  }

  .profile-detail-section .profile-stat__value {
    font-size: 22px;
    /* Equal-width digits so future counts like 19.265 read stable. */
    font-variant-numeric: tabular-nums;
  }

  .profile-detail-section .profile-stat__label {
    font-size: 10px;
    letter-spacing: 0.3px;
    white-space: nowrap;
  }

  .profile-detail-section .profile-stat__trend {
    font-size: 9px;
    padding: 1px 4px;
    top: 0;
    right: 4px;
  }
  
  /* Hide the icon-only quick actions on mobile. Favorite/chat/report are
     already shown as full labelled buttons below the image, so these small
     unlabelled icons are redundant clutter in the hero. */
  .profile-detail-section .profile-actions {
    display: none;
  }
  
  /* Desktop header arrows off — the cover-edge chips take over on mobile. */
  .profile-detail-section .profile-navigation {
    display: none;
  }

  .profile-detail-section .profile-cover__nav {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none; /* only the chips catch taps */
  }

  .profile-detail-section .profile-cover__nav .profile-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    width: 38px;
    height: 38px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--color-white);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .profile-detail-section .profile-cover__nav .profile-nav-btn:first-child {
    left: var(--space-2);
  }

  .profile-detail-section .profile-cover__nav .profile-nav-btn:last-child {
    right: var(--space-2);
  }

  .profile-detail-section .profile-cover__nav .profile-nav-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  
  /* Shorter cover band on mobile; the avatar overlaps its bottom-left edge
     (IG/FB pattern — see the grid rules above). */
  .profile-detail-section .profile-cover {
    height: 180px;
  }

  .profile-detail-section .profile-header--overlap .profile-avatar {
    grid-row: 1 / span 2; /* spans the name + presence rows */
    align-self: start;
    margin-top: -40px;
  }
  
  .profile-detail-section .profile-actions-main {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .profile-detail-section .profile-action-btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-4);
    font-size: var(--font-size-base);
  }
  
  .profile-detail-section .profile-actions-secondary {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  
  .profile-detail-section .profile-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }
  
  .profile-detail-section .profile-tab {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }
  
  .profile-detail-section .profile-tab-panel.active {
    gap: var(--space-3);
  }
  
  .profile-detail-section .profile-details-card,
  .profile-detail-section .profile-services-card,
  .profile-detail-section .profile-categories-card,
  .profile-detail-section .profile-languages-card,
  .profile-detail-section .profile-rates-card,
  .profile-detail-section .profile-availability-card,
  .profile-detail-section .profile-location-card {
    width: 100%;
    max-width: 100%;
    padding: var(--space-4);
  }
  
  .profile-detail-section .profile-location-map {
    height: 280px;
  }
  
  .profile-detail-section .profile-schedule-row {
    padding: var(--space-2) var(--space-3);
  }
  
  .profile-detail-section .profile-schedule-row__day {
    min-width: 100px;
  }
  
  .profile-detail-section .profile-availability__types {
    gap: var(--space-2);
  }
  
  .profile-detail-section .profile-categories__list {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .profile-detail-section .profile-services__list {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  
  .profile-detail-section .profile-details__table {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  
  .profile-detail-section .profile-languages__table {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  
  .profile-detail-section .profile-rates__table {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  /* Keep the <480px hero roomy and consistent with the ≤768px rules instead
     of the previous cramped 1–2px gaps. The signature stat circles inherit
     the responsive (flex + aspect-ratio) sizing from ≤768px so they stay
     large here too; only the inner text is nudged for the narrowest screens. */
  .profile-detail-section {
    padding: var(--space-4);
    margin: 0 var(--space-2) var(--space-6);
  }

  .profile-detail-section .profile-header {
    gap: var(--space-3);
  }

  .profile-detail-section .profile-header__left {
    column-gap: var(--space-2);
  }

  .profile-detail-section .profile-avatar {
    width: 92px;
    height: 92px;
    border-width: 3px;
  }

  .profile-detail-section .profile-name {
    font-size: var(--font-size-lg);
    margin-bottom: 0;
    line-height: 1.2;
  }

  .profile-detail-section .profile-stat__value {
    font-size: 20px;
  }

  .profile-detail-section .profile-stat__label {
    font-size: 9px;
    letter-spacing: 0.2px;
  }

  .profile-detail-section .profile-cover {
    height: 150px;
  }

  .profile-detail-section .profile-tab {
    padding: var(--space-2);
    font-size: var(--font-size-xs);
  }
  
  .profile-detail-section .profile-details-card,
  .profile-detail-section .profile-services-card,
  .profile-detail-section .profile-categories-card,
  .profile-detail-section .profile-languages-card,
  .profile-detail-section .profile-rates-card,
  .profile-detail-section .profile-availability-card,
  .profile-detail-section .profile-location-card {
    width: 100%;
    max-width: 100%;
    padding: var(--space-3);
  }
  
  .profile-detail-section .profile-location-map {
    height: 220px;
  }
  
  .profile-detail-section .profile-about__title {
    font-size: var(--font-size-lg);
  }

  .profile-detail-section .profile-work__title {
    font-size: var(--font-size-base);
  }

  .profile-detail-section .profile-about__content--truncated {
    max-height: 5.2em; /* tighter on tiny screens */
  }
}

/* Tours Styling */
.profile-detail-section .profile-tours__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-detail-section .profile-tour {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-tour__info h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.profile-detail-section .profile-tour__info p {
  color: var(--color-gray-600);
  margin-bottom: var(--space-3);
}

.profile-detail-section .profile-tour__duration,
.profile-detail-section .profile-tour__price {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-right: var(--space-2);
}

.profile-detail-section .profile-tour__duration {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.profile-detail-section .profile-tour__price {
  background: var(--brand-primary);
  color: var(--color-white);
}

/* Reviews Styling */
.profile-detail-section .profile-reviews-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-reviews__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: var(--space-4);
}

/* Rating Summary */
.profile-detail-section .profile-reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-gray-50, #f9fafb);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.profile-detail-section .profile-reviews-summary__score {
  display: flex;
  align-items: baseline;
}

.profile-detail-section .profile-reviews-summary__number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-gray-900);
  line-height: 1;
}

.profile-detail-section .profile-reviews-summary__out-of {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-500);
  margin-left: 2px;
}

.profile-detail-section .profile-reviews-summary__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.profile-detail-section .profile-reviews-summary__stars {
  display: flex;
  gap: 2px;
}

.profile-detail-section .profile-reviews-summary__count {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Review Stars (shared between summary and individual reviews) */
.profile-detail-section .profile-reviews-star {
  flex-shrink: 0;
}

.profile-detail-section .profile-reviews-star--filled {
  color: var(--brand-primary);
}

.profile-detail-section .profile-reviews-star--half {
  color: var(--brand-primary);
  opacity: 0.5;
}

.profile-detail-section .profile-reviews-star--empty {
  color: var(--color-gray-300, #d1d5db);
}

/* Review List */
.profile-detail-section .profile-reviews__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Individual Review Card */
.profile-detail-section .profile-review {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-review__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.profile-detail-section .profile-review__reviewer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.profile-detail-section .profile-review__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.profile-detail-section .profile-review__name {
  font-weight: 600;
  color: var(--color-gray-900);
}

.profile-detail-section .profile-review__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #27ae60;
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  margin-left: var(--space-1);
  vertical-align: middle;
}

.profile-detail-section .profile-review__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.profile-detail-section .profile-review__score {
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
}

.profile-detail-section .profile-review__stars {
  display: flex;
  gap: 1px;
}

.profile-detail-section .profile-review__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2);
}

.profile-detail-section .profile-review__text {
  color: var(--color-gray-700);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}

/* Review Tags */
.profile-detail-section .profile-review__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.profile-detail-section .profile-review__tag {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 500;
}

/* Review Footer */
.profile-detail-section .profile-review__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gray-100, #f3f4f6);
}

.profile-detail-section .profile-review__date {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.profile-detail-section .profile-review__helpfulness {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.profile-detail-section .profile-review__helpful-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-600);
  font-size: var(--font-size-xs, 0.75rem);
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-detail-section .profile-review__helpful-btn:hover {
  background: var(--color-gray-50, #f9fafb);
  border-color: var(--color-gray-300, #d1d5db);
  color: var(--color-gray-900);
}

.profile-detail-section .profile-review__helpful-btn.is-voted {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.profile-detail-section .profile-review__helpful-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.profile-detail-section .profile-review__helpful-count {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Empty State */
.profile-detail-section .profile-reviews-empty {
  text-align: center;
  padding: var(--space-8, 3rem) var(--space-4);
}

.profile-detail-section .profile-reviews-empty svg {
  color: var(--color-gray-300, #d1d5db);
  margin-bottom: var(--space-3);
}

.profile-detail-section .profile-reviews-empty h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2);
}

.profile-detail-section .profile-reviews-empty p {
  color: var(--color-gray-500);
  margin: 0 0 var(--space-4);
}

/* Load More */
.profile-detail-section .profile-reviews-more {
  text-align: center;
  margin-top: var(--space-4);
}

/* Write Review CTA */
.profile-detail-section .profile-reviews-write {
  text-align: center;
  margin-top: var(--space-4);
}

/* Write Review Form */
.profile-detail-section .profile-review-form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
  margin-top: var(--space-4);
}

.profile-detail-section .profile-review-form__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-4);
}

.profile-detail-section .profile-review-form__field {
  margin-bottom: var(--space-3);
}

.profile-detail-section .profile-review-form__field label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--space-1);
}

.profile-detail-section .profile-review-form__field .form-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  background: var(--color-white);
  transition: border-color 0.15s ease;
}

.profile-detail-section .profile-review-form__field .form-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 59, 130, 246), 0.1);
}

.profile-detail-section .profile-review-form__score-input {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.profile-detail-section .profile-review-form__score-input input[type="range"] {
  flex: 1;
  height: 6px;
  accent-color: var(--brand-primary);
}

.profile-detail-section .profile-review-form__score-input span {
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  min-width: 3.5em;
  text-align: center;
}

.profile-detail-section .profile-review-form__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.profile-detail-section .profile-review-form__note {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-gray-500);
  margin-top: var(--space-2);
}

.profile-detail-section .profile-review-form__hint {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-gray-500);
  margin: 0 0 var(--space-2);
}

.profile-detail-section .profile-review-form__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Selectable tags in review form */
.tag--selectable {
  cursor: pointer;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  transition: all var(--transition-fast);
  user-select: none;
}

.tag--selectable:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.tag--selected {
  background: var(--brand-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--brand-primary) !important;
}

/* Blogs Styling */
.profile-detail-section .profile-blogs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-detail-section .profile-blog {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-blog h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.profile-detail-section .profile-blog__excerpt {
  color: var(--color-gray-600);
  margin-bottom: var(--space-3);
}

.profile-detail-section .profile-blog__date {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

/* Timeline Styling */
.profile-detail-section .profile-timeline__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.profile-detail-section .profile-timeline-item {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  border: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.profile-detail-section .profile-timeline__date {
  font-weight: 600;
  color: var(--brand-primary);
  min-width: 120px;
}

.profile-detail-section .profile-timeline-item p {
  color: var(--color-gray-700);
  margin: 0;
}

/* Shop Styling */
.profile-detail-section .profile-shop__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-detail-section .profile-shop-item {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-shop-item h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.profile-detail-section .profile-shop-item p {
  color: var(--color-gray-600);
  margin-bottom: var(--space-3);
}

.profile-detail-section .profile-shop__price {
  background: var(--brand-primary);
  color: var(--color-white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

/* Happy Hour Styling */
.profile-detail-section .profile-happy-hour__offers {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-detail-section .profile-happy-hour__offer {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
}

.profile-detail-section .profile-happy-hour__offer h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.profile-detail-section .profile-happy-hour__offer p {
  color: var(--color-gray-600);
  margin-bottom: var(--space-3);
}

.profile-detail-section .profile-happy-hour__time {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* Location Styling */
.profile-detail-section .profile-location__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.profile-detail-section .profile-location__details h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
}

.profile-detail-section .profile-location__details p {
  color: var(--color-gray-600);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.profile-detail-section .profile-location__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-detail-section .profile-location__features span {
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
}

.profile-detail-section .profile-location__map {
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.profile-detail-section .profile-location__map p {
  color: var(--color-gray-500);
  margin: 0;
}

/* ========================================
   WEBCAM DETAIL PAGE STYLES
   ======================================== */

/* Webcam Detail Section */
.webcam-detail-section {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Webcam Detail Header */
.webcam-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-gray-200);
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
}

.webcam-detail-header__left {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.webcam-detail-header__right {
  display: flex;
  align-items: center;
}

/* Webcam Detail Avatar */
.webcam-detail-avatar {
  position: relative;
  flex-shrink: 0;
}

.webcam-detail-avatar__img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-md);
}

.webcam-detail-avatar__status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--color-white);
}

.webcam-detail-avatar__status--online {
  background: linear-gradient(135deg, #34d399, #10b981);
}

.webcam-detail-avatar__status--offline {
  background: linear-gradient(135deg, #f87171, #ef4444);
}

/* Webcam Detail Info */
.webcam-detail-info {
  flex: 1;
}

.webcam-detail-name {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.2;
}

.webcam-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.webcam-detail-location,
.webcam-detail-age,
.webcam-detail-rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.875rem;
  color: var(--color-gray-600);
  font-weight: 500;
}

.webcam-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.webcam-detail-tag {
  background: var(--brand-primary);
  color: var(--color-white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Webcam Detail Actions */
.webcam-detail-actions {
  display: flex;
  gap: var(--space-2);
}

/* Webcam Detail Content */
.webcam-detail-content {
  padding: var(--space-6);
}

.webcam-detail-main {
  max-width: 800px;
}

/* Webcam Detail Image */
.webcam-detail-image {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-lg);
}

.webcam-detail-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.webcam-detail-image__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4);
}

.webcam-detail-image__badges {
  display: flex;
  gap: var(--space-2);
  align-self: flex-start;
}

.webcam-detail-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.webcam-detail-badge--live {
  background: var(--color-success);
}

.webcam-detail-badge--verified {
  background: var(--brand-primary);
}

.webcam-detail-image__actions {
  display: flex;
  gap: var(--space-2);
  align-self: flex-end;
}

.webcam-detail-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-md);
}

.webcam-detail-action-btn:hover {
  background: var(--color-white);
  transform: scale(1.1);
  color: var(--brand-primary);
}

/* Webcam Detail Stats */
.webcam-detail-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.webcam-detail-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.webcam-detail-stat__icon {
  font-size: 1.25rem;
}

.webcam-detail-stat__text {
  font-size: 0.875rem;
  color: var(--color-gray-600);
  font-weight: 500;
}

.webcam-detail-social {
  display: flex;
  gap: var(--space-2);
}

.webcam-detail-social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-gray-200);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.webcam-detail-social-btn:hover {
  background: var(--brand-primary);
  color: var(--color-white);
  transform: scale(1.1);
}

/* Webcam Detail Chat Button */
.webcam-detail-chat-btn {
  text-align: center;
  margin-bottom: var(--space-6);
}

.webcam-detail-chat-btn .btn {
  min-width: 200px;
  padding: var(--space-4) var(--space-6);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Webcam Detail About */
.webcam-detail-about {
  margin-bottom: var(--space-6);
}

.webcam-detail-about h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--brand-primary);
  padding-bottom: var(--space-2);
}

.webcam-detail-about p {
  color: var(--color-gray-700);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

/* Webcam Detail Details */
.webcam-detail-details {
  margin-top: var(--space-6);
}

.webcam-detail-details h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
}

.webcam-detail-details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.webcam-detail-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.webcam-detail-detail__label {
  font-weight: 500;
  color: var(--color-gray-600);
}

.webcam-detail-detail__value {
  font-weight: 600;
  color: var(--color-gray-900);
}

/* Webcam Detail Welcome */
.webcam-detail-welcome {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary));
  border-radius: var(--radius-lg);
  color: var(--color-white);
}

.webcam-detail-welcome h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-white);
}

.webcam-detail-welcome p {
  color: rgba(255,255,255,0.9);
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .webcam-detail-header {
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
  }
  
  .webcam-detail-header__left {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
  }
  
  /* Compactere avatar op mobiel */
  .webcam-detail-avatar__img {
    width: 90px;
    height: 90px;
    border: 3px solid var(--color-white);
  }
  
  .webcam-detail-avatar__status {
    width: 22px;
    height: 22px;
    bottom: 3px;
    right: 3px;
  }
  
  /* Compactere spacing voor naam en meta info */
  .webcam-detail-name {
    font-size: 2rem;
    margin-bottom: var(--space-2);
  }
  
  .webcam-detail-meta {
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    justify-content: center;
  }
  
  .webcam-detail-location,
  .webcam-detail-age,
  .webcam-detail-rating {
    font-size: 0.9rem;
  }
  
  /* Compactere spacing voor tags */
  .webcam-detail-tags {
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-3);
  }
  
  .webcam-detail-tag {
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
    border-radius: var(--radius-lg);
  }
  
  .webcam-detail-header__right {
    width: 100%;
    justify-content: center;
  }
  
  .webcam-detail-actions {
    width: 100%;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  
  .webcam-detail-actions .btn {
    min-width: 100px;
    padding: var(--space-2) var(--space-3);
  }
  
  .webcam-detail-image {
    height: 350px;
    margin-bottom: var(--space-4);
  }
  
  /* Verbeterde overlay styling voor mobiel */
  .webcam-detail-image__overlay {
    padding: var(--space-5);
  }
  
  /* Grotere badges voor betere leesbaarheid op mobiel */
  .webcam-detail-badge {
    padding: var(--space-2) var(--space-4);
    font-size: 0.813rem;
    font-weight: 700;
  }
  
  .webcam-detail-image__badges {
    gap: var(--space-3);
  }
  
  /* Grotere en beter gepositioneerde action buttons op mobiel */
  .webcam-detail-action-btn {
    width: 48px;
    height: 48px;
    box-shadow: var(--shadow-lg);
  }
  
  .webcam-detail-image__actions {
    gap: var(--space-3);
  }
  
  .webcam-detail-stats {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
  
  .webcam-detail-details__grid {
    grid-template-columns: 1fr;
  }
  
  .webcam-detail-chat-btn .btn {
    width: 100%;
  }
}

/* ========================================
   BLOG STYLES
   ======================================== */

/* Blog Header Section */
.blog-header-section {
  margin-bottom: var(--space-8);
}

.blog-header {
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.blog-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.blog-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Blog Search */
.blog-search {
  margin-bottom: var(--space-6);
}

.blog-search__form {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  gap: var(--space-3);
}

.blog-search__input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
}

.blog-search__input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(253, 145, 24, 0.1);
}

/* Blog Filter Tabs */
.blog-filter-tabs {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.blog-tab {
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-gray-200);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.blog-tab:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.blog-tab--active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--color-white);
}

/* Blog Posts Section */
.blog-posts-section {
  margin-bottom: var(--space-8);
}

.blog-posts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Blog Post Card */
.blog-post {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.blog-post:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.blog-post__content {
  padding: var(--space-6);
}

.blog-post__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.blog-post__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-gray-200);
}

.blog-post__author-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.blog-post__author-name {
  font-weight: 600;
  color: var(--color-gray-800);
  font-size: var(--font-size-sm);
}

.blog-post__author-location {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

a.blog-post__author-location--link {
  color: var(--color-gray-500);
  text-decoration: none;
}

a.blog-post__author-location--link:hover {
  color: var(--brand-primary);
}

.blog-post__main {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.blog-post__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.blog-post__img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.blog-post__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.blog-post__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1.3;
}

.blog-post__excerpt {
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: 0;
}

.blog-post__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2);
}

.blog-post__category {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.blog-post__category a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 600;
}

.blog-post__category a:hover {
  text-decoration: underline;
}

/* Blog Responsive Design */
@media (max-width: 768px) {
  .blog-header {
    padding: var(--space-6);
  }
  
  .blog-title {
    font-size: var(--font-size-3xl);
  }
  
  .blog-search__form {
    flex-direction: column;
  }
  
  .blog-filter-tabs {
    gap: var(--space-1);
  }
  
  .blog-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
  }
  
  .blog-post__main {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .blog-post__image {
    order: -1;
  }
  
  .blog-post__img {
    height: 200px;
  }
  
  .blog-post__meta {
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
  }
  
  .blog-post__category {
    text-align: center;
  }
}

/* ========================================
   FILTER SECTION STYLES
   ======================================== */

/* Filter Section */
.filter-section {
  margin-bottom: var(--space-6);
}

.filter-panel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: none;
  overflow: hidden;
  padding: var(--space-4);
  margin-bottom: 30px;
}

.filter-panel__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

/* Filter Checkboxes */
.filter-checkboxes {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.filter-checkbox:hover {
  background: var(--color-gray-50);
}

.filter-checkbox__input {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-400);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.filter-checkbox__input:checked {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  border-color: var(--brand-primary);
}

.filter-checkbox__input:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.filter-checkbox__input:hover {
  border-color: var(--brand-primary);
  transform: scale(1.05);
}

.filter-checkbox__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-800);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.filter-checkbox:hover .filter-checkbox__label {
  color: var(--color-gray-900);
}

/* Filter Sort */
.filter-sort {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.filter-sort__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-800);
}

.filter-sort__select {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  cursor: pointer;
  min-width: 180px;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.filter-sort__select:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.filter-sort__select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(253, 145, 24, 0.1), var(--shadow-md);
}

.filter-sort__select option {
  padding: var(--space-2);
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .filter-panel {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
  }
  
  .filter-panel__content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  
  /* Compacte checkboxes layout voor mobiel */
  .filter-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start
  }
  
  .filter-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    min-height: 40px;
    width: 100%;
  }
  
  .filter-checkbox:hover {
    background: var(--color-white);
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-sm);
  }
  
  .filter-checkbox__input {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-gray-400);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }
  
  .filter-checkbox__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
    flex: 1;
  }
  
  .filter-checkbox__input:checked {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
  }
  
  .filter-checkbox__input:checked::after {
    font-size: 12px;
  }
  
  /* Compacte sort sectie voor mobiel */
  .filter-sort {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: normal;
    justify-content: space-between;
  }
  
  .filter-sort__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-700);
    flex-shrink: 0;
  }
  
  .filter-sort__select {
    flex: 1;
    min-width: auto;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    min-height: 40px;
  }
  
  .filter-sort__select:hover {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-sm);
  }
}

/* ========================================
   BLOG DETAIL STYLES
   ======================================== */

/* Blog Detail Styles */
.blog-article {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.blog-article__header {
  padding: var(--space-8);
  border-bottom: 1px solid var(--color-gray-200);
}

.blog-article__category {
  margin-bottom: var(--space-4);
}

.blog-article__category-link {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--brand-primary);
  color: var(--color-white);
  text-decoration: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all var(--transition-fast);
}

.blog-article__category-link:hover {
  background: var(--brand-primary-dark);
  transform: translateY(-1px);
}

.blog-article__title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-gray-900);
  line-height: 1.2;
  margin-bottom: var(--space-6);
}

.blog-article__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.blog-article__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.blog-article__author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-gray-200);
}

.blog-article__author-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.blog-article__author-name {
  font-weight: 600;
  color: var(--color-gray-800);
  font-size: var(--font-size-base);
}

.blog-article__author-location {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

a.blog-article__author-location--link {
  color: var(--color-gray-500);
  text-decoration: none;
}

a.blog-article__author-location--link:hover {
  color: var(--brand-primary);
}

.blog-article__details {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.blog-article__featured-image {
  margin-bottom: var(--space-6);
}

.blog-article__featured-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.blog-article__image-caption {
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-50);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-style: italic;
  text-align: center;
}

.blog-article__content {
  padding: var(--space-8);
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-gray-700);
}

.blog-article__excerpt {
  margin-bottom: var(--space-8);
}

.blog-article__excerpt .lead {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-gray-800);
  line-height: 1.6;
  margin: 0;
}

.blog-article__content h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: var(--space-8) 0 var(--space-4) 0;
  line-height: 1.3;
}

.blog-article__content h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-gray-800);
  margin: var(--space-6) 0 var(--space-3) 0;
}

.blog-article__content h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-800);
  margin: var(--space-5) 0 var(--space-2) 0;
}

.blog-article__content h5 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-800);
  margin: var(--space-4) 0 var(--space-2) 0;
}

.blog-article__content h6 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-600);
  margin: var(--space-4) 0 var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.blog-article__content p {
  margin-bottom: var(--space-4);
}

.blog-article__content ul {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
}

.blog-article__content ol {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
  list-style-type: decimal;
}

.blog-article__content li {
  margin-bottom: var(--space-2);
}

.blog-article__content strong {
  font-weight: 600;
  color: var(--color-gray-800);
}

.blog-article__content blockquote {
  background: var(--color-gray-50);
  border-left: 4px solid var(--brand-primary);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-gray-700);
}

.blog-article__quote {
  background: var(--color-gray-50);
  border-left: 4px solid var(--brand-primary);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-gray-700);
}

.blog-article__conclusion {
  background: var(--color-gray-50);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  margin-top: var(--space-8);
}

.blog-article__footer {
  padding: var(--space-6) var(--space-8);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
}

.blog-article__tags h3,
.blog-article__share h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--space-3);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-white);
  color: var(--color-gray-600);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-gray-200);
  transition: all var(--transition-fast);
}

.tag:hover {
  background: var(--brand-primary);
  color: var(--color-white);
  border-color: var(--brand-primary);
}

.share-buttons {
  display: flex;
  gap: var(--space-2);
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--font-size-base);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.share-btn[hidden] { display: none; }

.share-btn--facebook { background: #1877f2; color: white; }
.share-btn--x { background: #000000; color: white; }
.share-btn--linkedin { background: #0077b5; color: white; }
.share-btn--whatsapp { background: #25d366; color: white; }
.share-btn--telegram { background: #229ed9; color: white; }
.share-btn--email { background: var(--color-gray-600); color: white; }
.share-btn--copy { background: var(--color-gray-500); color: white; }
.share-btn--native { background: var(--brand-primary); color: white; }

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Comments Section */
.comments-section {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}

.comments-section__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-6);
}

.comments-list {
  margin-bottom: var(--space-8);
}

.comment {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.comment:last-child {
  border-bottom: none;
}

.comment__avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.comment__content {
  flex: 1;
}

.comment__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.comment__author {
  font-weight: 600;
  color: var(--color-gray-800);
}

.comment__date {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.comment__text {
  margin-bottom: var(--space-3);
  line-height: 1.6;
}

.comment__reply {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.comment__reply:hover {
  color: var(--brand-primary-dark);
}

.comment__reply--danger {
  color: var(--color-error, #dc2626);
}

.comment__actions {
  display: flex;
  gap: var(--space-3);
}

.comment__edit-form {
  margin-bottom: var(--space-3);
}

.comment__edit-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Comment Form */
.comment-form {
  background: var(--color-gray-50);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.comment-form__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--space-4);
}

.comment-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.comment-form__field {
  margin-bottom: var(--space-4);
}

.comment-form__label {
  display: block;
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}

.comment-form__input,
.comment-form__textarea {
  width: 100%;
  padding: var(--space-3);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
}

.comment-form__input:focus,
.comment-form__textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(253, 145, 24, 0.1);
}

.comment-form__textarea {
  resize: vertical;
  min-height: 120px;
}

/* Related Posts */
.related-posts {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}

.related-posts__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-6);
}

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
}

.related-post {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.related-post:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.related-post__image {
  flex-shrink: 0;
  width: 100px;
  height: 80px;
}

.related-post__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.related-post__content {
  flex: 1;
}

.related-post__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.related-post__title a {
  color: var(--color-gray-800);
  text-decoration: none;
}

.related-post__title a:hover {
  color: var(--brand-primary);
}

.related-post__excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}

.related-post__category {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: var(--brand-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* Sidebar Widgets */
.author-widget {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.author-widget__content {
  text-align: center;
}

.author-widget__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-4);
  border: 3px solid var(--color-gray-200);
}

.author-widget__name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--space-3);
}

.author-widget__bio {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.author-widget__avatar-link {
  display: block;
  width: fit-content;
  margin: 0 auto var(--space-4);
}

.author-widget__avatar-link .author-widget__avatar {
  margin-bottom: 0;
}

.author-widget__name-link {
  color: inherit;
  text-decoration: none;
}

.author-widget__name-link:hover .author-widget__name {
  color: var(--brand-primary);
}

.author-widget__location {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-4);
}

a.author-widget__location--link {
  display: block;
  color: var(--color-gray-500);
  text-decoration: none;
  margin-bottom: var(--space-4);
}

a.author-widget__location--link:hover {
  color: var(--brand-primary);
}

.author-widget__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.author-widget__stat {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.newsletter-widget {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.newsletter-widget .widget__title {
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.newsletter-widget__description {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  opacity: 0.9;
}

.newsletter-widget__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.newsletter-widget__input {
  padding: var(--space-3);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

.newsletter-widget__input:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

/* Blog Detail Mobile Responsive */
@media (max-width: 768px) {
  .blog-article__header {
    padding: var(--space-6);
  }
  .blog-article__title {
    font-size: var(--font-size-2xl);
  }
  .blog-article__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .blog-article__details {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .blog-article__content {
    padding: var(--space-6);
  }
  .blog-article__footer {
    flex-direction: column;
    gap: var(--space-4);
  }
  .comment-form__fields {
    grid-template-columns: 1fr;
  }
  .related-posts__grid {
    grid-template-columns: 1fr;
  }
  .related-post {
    flex-direction: column;
  }
  .related-post__image {
    width: 100%;
    height: 150px;
  }
}

/* ========================================
   WEBSHOP STYLES
   ======================================== */

/* Webshop Header */
.webshop-header {
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.webshop-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.webshop-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
  max-width: 600px;
}

.webshop-search {
  max-width: 800px;
}

.webshop-search__form {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

.webshop-search__input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
}

.webshop-search__input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(253, 145, 24, 0.1);
}

.webshop-search__select {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  background: var(--color-white);
  min-width: 200px;
  transition: all var(--transition-fast);
}

.webshop-search__select:focus {
  outline: none;
  border-color: var(--brand-primary);
}

/* Category Navigation */
.category-nav {
  margin-bottom: var(--space-8);
}

.category-nav__tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
}

.category-tab {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.category-tab:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.category-tab__icon {
  width: 60px;
  height: 60px;
  background: var(--brand-primary);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.category-tab__content {
  flex: 1;
}

.category-tab__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.category-tab__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--space-2);
  line-height: 1.5;
}

.category-tab__count {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* Featured Products */
.featured-products {
  margin-bottom: var(--space-8);
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-6);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
}

.product-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.product-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.product-card__image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.product-card:hover .product-card__img {
  transform: scale(1.05);
}

.product-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--brand-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.product-card__badge--artikelen {
  background: var(--color-blue-600);
}

.product-card__badge--videos {
  background: var(--color-purple-600);
}

.product-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.product-card:hover .product-card__overlay {
  opacity: 1;
}

.product-card__preview {
  width: 60px;
  height: 60px;
  background: var(--color-white);
  border: none;
  border-radius: 50%;
  color: var(--brand-primary);
  font-size: var(--font-size-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.product-card__preview:hover {
  background: var(--brand-primary);
  color: var(--color-white);
  transform: scale(1.1);
}

.product-card__content {
  padding: var(--space-6);
}

.product-card__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.product-card__title a {
  color: inherit;
  text-decoration: none;
}

.product-card__title a:hover {
  color: var(--brand-primary);
}

.product-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}

.product-card__category {
  color: var(--brand-primary);
  font-weight: 600;
}

.product-card__seller {
  color: var(--color-gray-500);
}

.product-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-card__price {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
}

/* ============ Product Detail Page ============ */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.product-detail__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
}

.product-detail__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.product-detail__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-detail__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1.2;
}

.product-detail__seller {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

/* Creator attribution chip — shared by the product detail page and
   product cards (shop/partials/creator-chip). Token-based so tenant
   themes restyle it through the existing variables. */
.creator-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  max-width: 100%;
  transition: all var(--transition-fast);
}

a.creator-chip:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

.creator-chip__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.creator-chip__avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
}

.creator-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-chip__cta {
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

a.creator-chip:hover .creator-chip__cta {
  color: var(--brand-primary);
  transform: translateX(2px);
}

.creator-chip--sm {
  gap: var(--space-1);
  padding: 2px var(--space-2) 2px 2px;
}

.creator-chip--sm .creator-chip__avatar {
  width: 20px;
  height: 20px;
}

/* Large "creator card" variant — product detail page (TPS-10 polish).
   Conversion surface: prominent avatar with a live presence dot + status
   line (hydrated client-side from /api/entities/{uuid}/presence, same
   tri-state contract as the profile-page badge) and an explicit
   "View profile" affordance. */
.creator-chip--lg {
  width: 100%;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  font-size: var(--font-size-base);
}

a.creator-chip--lg:hover {
  color: inherit;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.creator-chip__avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.creator-chip--lg .creator-chip__avatar {
  width: 56px;
  height: 56px;
}

.creator-chip--lg .creator-chip__avatar--placeholder {
  font-size: var(--font-size-lg);
}

/* Presence dot on the avatar — hidden until hydration confirms a live
   (online/recently) status. White ring lifts it off the photo. */
.creator-chip__presence-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-white);
}

.creator-chip__presence-dot[hidden] {
  display: none;
}

.creator-chip--presence-online .creator-chip__presence-dot {
  background: #22c55e;
  animation: entitySearchPresencePulse 1.6s ease-in-out infinite;
}

.creator-chip--presence-recently .creator-chip__presence-dot {
  background: var(--color-warning);
}

.creator-chip__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.creator-chip--lg .creator-chip__name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
}

a.creator-chip--lg:hover .creator-chip__name {
  color: var(--brand-primary);
}

/* Presence status line under the name (same tri-state copy/colors as the
   profile-page badge — PresenceStatus contract). */
.creator-chip__status {
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
}

.creator-chip__status[hidden] {
  display: none;
}

.creator-chip--presence-online .creator-chip__status {
  color: #16a34a;
}

.creator-chip--presence-recently .creator-chip__status {
  color: #b45309;
}

/* Explicit "View profile" affordance; fills with the brand color on hover. */
.creator-chip__view {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--color-white));
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

a.creator-chip--lg:hover .creator-chip__view {
  background: var(--brand-primary);
  color: var(--color-white);
}

.creator-chip__view .fa-chevron-right {
  font-size: var(--font-size-xs);
}

/* Tiny screens: keep the chevron affordance, drop the CTA text. */
@media (max-width: 480px) {
  .creator-chip__view-text {
    display: none;
  }

  .creator-chip__view {
    padding: var(--space-2);
  }
}

.product-detail__price-block {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.product-detail__price {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--color-gray-900);
}

.product-detail__credits {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.product-detail__description {
  color: var(--color-gray-700);
  line-height: 1.6;
}

.product-detail__meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.product-detail__actions {
  margin-top: auto;
}

.product-detail__subscribers-notice {
  background: rgba(251, 191, 36, .1);
  border: 1px solid rgba(251, 191, 36, .3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: #92400e;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

/* Purchased content gallery */
.purchased-content {
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-gray-200);
  padding-top: var(--space-6);
}

.purchased-content__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
}

.purchased-content__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.purchased-content__item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-100);
  box-shadow: var(--shadow-sm);
}

.purchased-content__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.purchased-content__item img:hover {
  opacity: .85;
}

.purchased-content__item video {
  width: 100%;
  display: block;
  background: #000;
}

.purchased-content__item-actions {
  padding: var(--space-2) var(--space-3);
  display: flex;
  justify-content: flex-end;
}

.purchased-content__loading,
.purchased-content__error {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-gray-500);
}

.purchased-content__error {
  color: #dc2626;
}

@media (max-width: 768px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .purchased-content__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* Cart Widget */
.cart-widget {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: var(--color-white);
}

.cart-widget .widget__title {
  color: var(--color-white);
}

.cart-empty {
  text-align: center;
  padding: var(--space-4);
}

.cart-empty p {
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.cart-empty small {
  opacity: 0.8;
}

/* Subscribe Modal */
.subscribe-modal .modal {
  max-width: 480px;
}

.subscribe-modal__description {
  text-align: center;
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin: 0 0 var(--space-5);
}

.subscribe-modal__tiers {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: var(--space-5);
}

.subscribe-modal__loading,
.subscribe-modal__empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.subscribe-tier-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.subscribe-tier-card:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

.subscribe-tier-card.is-selected {
  border-color: var(--color-primary, #e63946);
  background: rgba(230, 57, 70, 0.04);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
}

.subscribe-tier-card__radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-gray-300);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: border-color 0.15s;
}

.subscribe-tier-card.is-selected .subscribe-tier-card__radio {
  border-color: var(--color-primary, #e63946);
}

.subscribe-tier-card.is-selected .subscribe-tier-card__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-primary, #e63946);
}

.subscribe-tier-card__body {
  flex: 1;
  min-width: 0;
}

.subscribe-tier-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.subscribe-tier-card__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-gray-900);
}

.subscribe-tier-card__price {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary, #e63946);
  white-space: nowrap;
}

.subscribe-tier-card__period {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-gray-500);
}

.subscribe-tier-card__benefits {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.subscribe-tier-card__benefits li {
  font-size: 0.8rem;
  color: var(--color-gray-600);
  padding: 0.15rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.subscribe-tier-card__benefits li i {
  color: var(--color-success, #38a169);
  font-size: 0.7rem;
}

.subscribe-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.subscribe-modal__confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.subscribe-modal__cancel {
  color: var(--color-gray-500);
}

/* Login Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform var(--transition-normal);
}

.modal-overlay.is-open .modal {
  transform: scale(1);
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-gray-200);
}

.modal__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

.modal__close {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--color-gray-100);
  border-radius: 50%;
  color: var(--color-gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.modal__close:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-900);
}

.modal__content {
  padding: var(--space-6);
}

.login-info {
  text-align: center;
  margin-bottom: var(--space-6);
}

.login-info__icon {
  width: 60px;
  height: 60px;
  background: var(--color-orange-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  color: var(--brand-primary);
  font-size: var(--font-size-xl);
}

.login-info__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.login-info__description {
  color: var(--color-gray-600);
  line-height: 1.5;
}

.login-form {
  margin-bottom: var(--space-6);
}

.form-group {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(253, 145, 24, 0.1);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-primary);
}

.checkbox__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.forgot-password {
  font-size: var(--font-size-sm);
  color: var(--brand-primary);
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

.login-divider {
  text-align: center;
  margin: var(--space-6) 0;
  position: relative;
}

.login-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-gray-200);
}

.login-divider span {
  background: var(--color-white);
  padding: 0 var(--space-4);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.login-actions {
  margin-bottom: var(--space-6);
}

.login-benefits {
  background: var(--color-gray-50);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.login-benefits h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--space-3);
}

.login-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.login-benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.login-benefits li:last-child {
  margin-bottom: 0;
}

.login-benefits li i {
  color: var(--color-green-600);
  font-size: var(--font-size-xs);
}

       /* Category Header Styles */
       .category-header {
         background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
         border-radius: var(--radius-2xl);
         padding: var(--space-8);
         margin-bottom: var(--space-8);
         box-shadow: var(--shadow-lg);
       }

       .category-header__content {
         display: flex;
         align-items: center;
         gap: var(--space-6);
       }

       .category-header__icon {
         width: 80px;
         height: 80px;
         background: var(--brand-primary);
         border-radius: var(--radius-2xl);
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--color-white);
         font-size: var(--font-size-2xl);
         flex-shrink: 0;
       }

       .category-header__title {
         font-size: var(--font-size-3xl);
         font-weight: 800;
         color: var(--color-gray-900);
         margin-bottom: var(--space-2);
         line-height: 1.2;
       }

       .category-header__description {
         font-size: var(--font-size-lg);
         color: var(--color-gray-600);
         line-height: 1.6;
         margin: 0;
       }

       /* Filter Section Styles */
       .filter-section {
         margin-bottom: var(--space-8);
       }

       .filter-bar {
         background: var(--color-white);
         border-radius: var(--radius-xl);
         padding: var(--space-6);
         box-shadow: var(--shadow-md);
         margin-bottom: var(--space-6);
       }

       .filter-bar__form {
         display: flex;
         gap: var(--space-4);
         margin-bottom: var(--space-6);
       }

       .filter-bar__input,
       .filter-bar__select {
         flex: 1;
         padding: var(--space-3) var(--space-4);
         border: 2px solid var(--color-gray-200);
         border-radius: var(--radius-lg);
         font-size: var(--font-size-base);
         transition: all var(--transition-fast);
       }

       .filter-bar__input:focus,
       .filter-bar__select:focus {
         outline: none;
         border-color: var(--brand-primary);
         box-shadow: 0 0 0 4px rgba(253, 145, 24, 0.1);
       }

       .filter-tabs {
         display: flex;
         gap: var(--space-2);
         flex-wrap: wrap;
       }

       .filter-tab {
         padding: var(--space-2) var(--space-4);
         border: 2px solid var(--color-gray-200);
         background: var(--color-white);
         border-radius: var(--radius-lg);
         font-size: var(--font-size-sm);
         font-weight: 600;
         color: var(--color-gray-600);
         cursor: pointer;
         transition: all var(--transition-fast);
         text-decoration: none;
       }

       .filter-tab:hover {
         border-color: var(--brand-primary);
         color: var(--brand-primary);
       }

       .filter-tab--active {
         background: var(--brand-primary);
         border-color: var(--brand-primary);
         color: var(--color-white);
       }

       /* Photo Card Styles */
       .photo-card {
         background: var(--color-white);
         border-radius: var(--radius-xl);
         box-shadow: var(--shadow-md);
         overflow: hidden;
         transition: all var(--transition-normal);
       }

       .photo-card:hover {
         box-shadow: var(--shadow-xl);
         transform: translateY(-4px);
       }

       .photo-card__image {
         position: relative;
         height: 200px;
         overflow: hidden;
       }

       .photo-card__img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform var(--transition-normal);
       }

       .photo-card:hover .photo-card__img {
         transform: scale(1.05);
       }

       .photo-card__badge {
         position: absolute;
         top: var(--space-3);
         left: var(--space-3);
         padding: var(--space-1) var(--space-3);
         background: var(--brand-primary);
         color: var(--color-white);
         border-radius: var(--radius-lg);
         font-size: var(--font-size-xs);
         font-weight: 600;
         text-transform: uppercase;
       }

       .photo-card__badge--hot {
         background: var(--color-red-600);
       }

       .photo-card__badge--premium {
         background: var(--color-purple-600);
       }

       .photo-card__badge--exclusive {
         background: var(--color-yellow-600);
         color: var(--color-gray-900);
       }

       .photo-card__overlay {
         position: absolute;
         inset: 0;
         background: rgba(0, 0, 0, 0.5);
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         transition: opacity var(--transition-fast);
       }

       .photo-card:hover .photo-card__overlay {
         opacity: 1;
       }

       .photo-card__preview {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: var(--space-2);
         padding: var(--space-4);
         background: var(--color-white);
         border: none;
         border-radius: var(--radius-xl);
         color: var(--brand-primary);
         font-size: var(--font-size-sm);
         font-weight: 600;
         cursor: pointer;
         transition: all var(--transition-fast);
       }

       .photo-card__preview:hover {
         background: var(--brand-primary);
         color: var(--color-white);
         transform: scale(1.1);
       }

       .photo-card__preview i {
         font-size: var(--font-size-xl);
       }

       .photo-card__content {
         padding: var(--space-6);
       }

       .photo-card__title {
         font-size: var(--font-size-lg);
         font-weight: 600;
         color: var(--color-gray-900);
         margin-bottom: var(--space-3);
         line-height: 1.3;
       }

       .photo-card__title a {
         color: inherit;
         text-decoration: none;
       }

       .photo-card__title a:hover {
         color: var(--brand-primary);
       }

       .photo-card__description {
         font-size: var(--font-size-sm);
         color: var(--color-gray-600);
         line-height: 1.5;
         margin-bottom: var(--space-4);
       }

       .photo-card__meta {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: var(--space-4);
       }

       .photo-card__stats {
         display: flex;
         gap: var(--space-4);
         font-size: var(--font-size-sm);
         color: var(--color-gray-500);
       }

       .photo-card__stat {
         display: flex;
         align-items: center;
         gap: var(--space-1);
       }

       .photo-card__model {
         display: flex;
         align-items: center;
         gap: var(--space-2);
       }

       .photo-card__model-avatar {
         width: 24px;
         height: 24px;
         border-radius: 50%;
         object-fit: cover;
       }

       .photo-card__model-name {
         font-size: var(--font-size-sm);
         font-weight: 500;
         color: var(--color-gray-700);
       }

       .photo-card__footer {
         display: flex;
         justify-content: space-between;
         align-items: center;
       }

       .photo-card__price {
         font-size: var(--font-size-xl);
         font-weight: 700;
         color: var(--color-gray-900);
       }

       /* Video Card Styles */
       .video-card {
         background: var(--color-white);
         border-radius: var(--radius-xl);
         box-shadow: var(--shadow-md);
         overflow: hidden;
         transition: all var(--transition-normal);
       }

       .video-card:hover {
         box-shadow: var(--shadow-xl);
         transform: translateY(-4px);
       }

       .video-card__image {
         position: relative;
         height: 200px;
         overflow: hidden;
       }

       .video-card__img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform var(--transition-normal);
       }

       .video-card:hover .video-card__img {
         transform: scale(1.05);
       }

       .video-card__badge {
         position: absolute;
         top: var(--space-3);
         left: var(--space-3);
         padding: var(--space-1) var(--space-3);
         background: var(--brand-primary);
         color: var(--color-white);
         border-radius: var(--radius-lg);
         font-size: var(--font-size-xs);
         font-weight: 600;
         text-transform: uppercase;
       }

       .video-card__badge--hot {
         background: var(--color-red-600);
       }

       .video-card__badge--live {
         background: var(--color-green-600);
         animation: pulse 2s infinite;
       }

       .video-card__badge--exclusive {
         background: var(--color-yellow-600);
         color: var(--color-gray-900);
       }

       @keyframes pulse {
         0% { opacity: 1; }
         50% { opacity: 0.7; }
         100% { opacity: 1; }
       }

       .video-card__duration {
         position: absolute;
         bottom: var(--space-3);
         right: var(--space-3);
         padding: var(--space-1) var(--space-2);
         background: rgba(0, 0, 0, 0.8);
         color: var(--color-white);
         border-radius: var(--radius-md);
         font-size: var(--font-size-xs);
         font-weight: 600;
       }

       .video-card__overlay {
         position: absolute;
         inset: 0;
         background: rgba(0, 0, 0, 0.5);
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         transition: opacity var(--transition-fast);
       }

       .video-card:hover .video-card__overlay {
         opacity: 1;
       }

       .video-card__play {
         width: 60px;
         height: 60px;
         background: var(--color-white);
         border: none;
         border-radius: 50%;
         color: var(--brand-primary);
         font-size: var(--font-size-xl);
         cursor: pointer;
         transition: all var(--transition-fast);
         display: flex;
         align-items: center;
         justify-content: center;
       }

       .video-card__play:hover {
         background: var(--brand-primary);
         color: var(--color-white);
         transform: scale(1.1);
       }

       .video-card__content {
         padding: var(--space-6);
       }

       .video-card__title {
         font-size: var(--font-size-lg);
         font-weight: 600;
         color: var(--color-gray-900);
         margin-bottom: var(--space-3);
         line-height: 1.3;
       }

       .video-card__title a {
         color: inherit;
         text-decoration: none;
       }

       .video-card__title a:hover {
         color: var(--brand-primary);
       }

       .video-card__description {
         font-size: var(--font-size-sm);
         color: var(--color-gray-600);
         line-height: 1.5;
         margin-bottom: var(--space-4);
       }

       .video-card__meta {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: var(--space-4);
       }

       .video-card__stats {
         display: flex;
         gap: var(--space-4);
         font-size: var(--font-size-sm);
         color: var(--color-gray-500);
       }

       .video-card__stat {
         display: flex;
         align-items: center;
         gap: var(--space-1);
       }

       .video-card__model {
         display: flex;
         align-items: center;
         gap: var(--space-2);
       }

       .video-card__model-avatar {
         width: 24px;
         height: 24px;
         border-radius: 50%;
         object-fit: cover;
       }

       .video-card__model-name {
         font-size: var(--font-size-sm);
         font-weight: 500;
         color: var(--color-gray-700);
       }

       .video-card__footer {
         display: flex;
         justify-content: space-between;
         align-items: center;
       }

       .video-card__price {
         font-size: var(--font-size-xl);
         font-weight: 700;
         color: var(--color-gray-900);
       }

       /* Pagination Styles */
       .pagination {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: var(--space-2);
         margin-top: var(--space-8);
       }

       .page-btn {
         padding: var(--space-2) var(--space-4);
         border: 2px solid var(--color-gray-200);
         background: var(--color-white);
         border-radius: var(--radius-lg);
         font-size: var(--font-size-sm);
         font-weight: 600;
         color: var(--color-gray-600);
         cursor: pointer;
         transition: all var(--transition-fast);
       }

       .page-btn:hover {
         border-color: var(--brand-primary);
         color: var(--brand-primary);
       }

       .page-btn--active {
         background: var(--brand-primary);
         border-color: var(--brand-primary);
         color: var(--color-white);
       }

       .page-numbers {
         display: flex;
         gap: var(--space-1);
       }

       /* Model and Seller List Styles */
       .model-list,
       .seller-list {
         list-style: none;
         padding: 0;
         margin: 0;
       }

       .model-item,
       .seller-item {
         display: flex;
         align-items: center;
         gap: var(--space-3);
         padding: var(--space-3) 0;
         border-bottom: 1px solid var(--color-gray-200);
       }

       .model-item:last-child,
       .seller-item:last-child {
         border-bottom: none;
       }

       .model-item__avatar {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         object-fit: cover;
         flex-shrink: 0;
       }

       .model-item__info,
       .seller-item__info {
         display: flex;
         flex-direction: column;
         gap: var(--space-1);
         flex: 1;
       }

       .model-item__name,
       .seller-item__name {
         font-size: var(--font-size-sm);
         font-weight: 600;
         color: var(--color-gray-800);
       }

       .model-item__count {
         font-size: var(--font-size-xs);
         color: var(--color-gray-500);
       }

       .seller-item__rating {
         font-size: var(--font-size-xs);
         color: var(--color-yellow-600);
       }

       .seller-item__count {
         font-size: var(--font-size-xs);
         color: var(--color-gray-500);
         flex-shrink: 0;
       }

       /* Widget List Styles */
       .widget__list {
         list-style: none;
         padding: 0;
         margin: 0;
       }

       .widget__list li {
         margin-bottom: var(--space-2);
       }

       .widget__list li:last-child {
         margin-bottom: 0;
       }

       .widget__list a {
         display: flex;
         align-items: center;
         gap: var(--space-3);
         padding: var(--space-2) var(--space-3);
         border-radius: var(--radius-lg);
         text-decoration: none;
         color: var(--color-gray-600);
         font-size: var(--font-size-sm);
         transition: all var(--transition-fast);
       }

       .widget__list a:hover,
       .widget__list a.is-active {
         background: var(--brand-primary);
         color: var(--color-white);
       }

       .widget__list .count {
         margin-left: auto;
         font-size: var(--font-size-xs);
         opacity: 0.7;
       }

       /* Webshop Mobile Responsive */
       @media (max-width: 768px) {
         .webshop-header {
           padding: var(--space-6);
         }

         .webshop-title {
           font-size: var(--font-size-3xl);
         }

         .webshop-search__form {
           flex-direction: column;
         }

         .webshop-search__select {
           min-width: auto;
         }

         .category-nav__tabs {
           grid-template-columns: 1fr;
         }

         .category-tab {
           flex-direction: column;
           text-align: center;
         }

         .category-tab__icon {
           align-self: center;
         }

         .products-grid {
           grid-template-columns: 1fr;
         }

         .product-card__footer {
           flex-direction: column;
           gap: var(--space-3);
           align-items: stretch;
         }

         .modal {
           width: 95%;
           margin: var(--space-4);
         }

         .modal__content {
           padding: var(--space-4);
         }

         .category-header {
           padding: var(--space-6);
         }

         .category-header__content {
           flex-direction: column;
           text-align: center;
           gap: var(--space-4);
         }

         .category-header__icon {
           align-self: center;
         }

         .filter-bar {
           padding: var(--space-4);
         }

         .filter-bar__form {
           flex-direction: column;
           gap: var(--space-3);
         }

         .filter-tabs {
           gap: var(--space-1);
         }

         .filter-tab {
           padding: var(--space-2) var(--space-3);
           font-size: var(--font-size-xs);
         }

         .photo-card__meta,
         .video-card__meta {
           flex-direction: column;
           gap: var(--space-3);
           align-items: flex-start;
         }

         .photo-card__stats,
         .video-card__stats {
           flex-direction: column;
           gap: var(--space-2);
           width: 100%;
         }

         .photo-card__stat,
         .video-card__stat {
           justify-content: flex-start;
         }

         .photo-card__footer,
         .video-card__footer {
           flex-direction: column;
           gap: var(--space-3);
           align-items: stretch;
         }

         .pagination {
           flex-wrap: wrap;
           gap: var(--space-1);
         }

        .page-numbers {
          order: 2;
          width: 100%;
          justify-content: center;
        }
      }

/* ========================================
   MARKETPLACE STYLES
   (extends the webshop design system above)
   ======================================== */

/* Card image placeholder: listings without a photo keep the same card
   silhouette as photo cards so the grid never staggers. */
.marketplace-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
}

.marketplace-card__placeholder i {
  font-size: var(--font-size-2xl);
}

/* show_in_card attribute chips on listing cards */
.product-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.product-card__chip {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  border-radius: var(--radius-lg);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

/* Sidebar category tree: subcategories hang indented under their parent;
   links inherit .widget__list a styling via the descendant selector. */
.widget__sublist {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0 0 0 var(--space-6);
}

.widget__sublist li {
  margin-bottom: var(--space-1);
}

/* Detail media: thumbnail strip under the primary image; every image is a
   lightbox item. */
.marketplace-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.marketplace-detail__thumb-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.marketplace-detail__thumb-img:hover {
  opacity: 0.85;
}

.product-detail__media a {
  display: block;
  cursor: pointer;
}

/* Detail placeholder: keeps the media column's 16:9 footprint. */
.marketplace-detail__placeholder {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
}

/* Detail meta row: city / posted / expires with icons */
.marketplace-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.marketplace-detail__meta i {
  color: var(--brand-primary);
  margin-right: var(--space-1);
}

/* Detail category chips reuse the .tag pill */
.marketplace-detail__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Contact block inside the info column */
.marketplace-detail__contact {
  margin-bottom: var(--space-4);
}

.marketplace-detail__contact .content-title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
}

/* Key facts: responsive two-column definition list */
.marketplace-detail__facts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2) var(--space-6);
}

.marketplace-detail__facts-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.marketplace-detail__facts-list strong {
  color: var(--color-gray-800);
}

/* ========== REGISTRATION PAGES STYLES ========== */

/* Registration Hero Section */
.register-hero {
  text-align: center;
  padding: 4rem 0;
  background: #f8f9fa;
  border-radius: 1rem;
  margin-bottom: 3rem;
}

.register-hero__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.register-hero__description {
  font-size: 1.2rem;
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
}

/* Registration Options Grid */
.register-options {
  margin-bottom: 4rem;
}

.register-options__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Compact variant: smaller min width so 2 kolommen passen binnen smallere containers */
.register-options__grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.register-card {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.register-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--brand-primary);
}

.register-card__icon {
  width: 4rem;
  height: 4rem;
  background: var(--brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: white;
  font-size: 1.5rem;
}

.register-card__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.register-card__description {
  color: #6c757d;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.register-card__features {
  list-style: none;
  margin-bottom: 2rem;
}

.register-card__features li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  color: #495057;
}

.register-card__features i {
  color: #28a745;
  margin-right: 0.5rem;
  width: 1rem;
}

/* Registration Benefits */
.register-benefits {
  background: #f8f9fa;
  padding: 4rem 0;
  border-radius: 1rem;
  margin-bottom: 3rem;
}

.register-benefits__title {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 3rem;
}

.register-benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.benefit-item {
  text-align: center;
  padding: 1.5rem;
}

.benefit-item__icon {
  width: 3rem;
  height: 3rem;
  background: var(--brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: white;
  font-size: 1.2rem;
}

.benefit-item__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.benefit-item__description {
  color: #6c757d;
  line-height: 1.6;
}

/* FAQ Section */
.register-faq {
  margin-bottom: 3rem;
}

.register-faq__title {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 3rem;
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
  margin: 0;
}

.faq-item {
  background: white;
  border-radius: 0.5rem;
  margin-bottom: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

@media (min-width: 768px) {
  .faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.faq-question {
  width: 100%;
  padding: 1.5rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 500;
  color: #2c3e50;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background: #f8f9fa;
}

.faq-item.is-open .faq-question {
  background: var(--brand-primary);
  color: white;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.is-open .faq-answer {
  max-height: 200px;
}

.faq-answer p {
  padding: 1.5rem;
  color: #6c757d;
  line-height: 1.6;
}

/* Registration Form Styles */
.register-form-container {
  max-width: 100%;
  margin: 0 auto;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.register-progress {
  display: flex;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 2rem;
  border-bottom: 2px solid #dee2e6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.register-progress__step {
  flex: 1;
  text-align: center;
  position: relative;
}

.register-progress__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1rem;
  right: -50%;
  width: 100%;
  height: 2px;
  background: #dee2e6;
  z-index: 1;
}

.register-progress__step--completed:not(:last-child)::after {
  background: #28a745;
}

.register-progress__number {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #dee2e6;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin: 0 auto 0.5rem;
  position: relative;
  z-index: 2;
}

.register-progress__step--active .register-progress__number {
  background: var(--brand-primary);
  color: white;
}

.register-progress__step--completed .register-progress__number {
  background: #28a745;
  color: white;
}

.register-progress__label {
  font-size: 0.9rem;
  color: #495057;
  font-weight: 600;
}

.register-progress__step--active .register-progress__label {
  color: var(--brand-primary);
  font-weight: 700;
}

.register-progress__step--completed .register-progress__label {
  color: #28a745;
  font-weight: 600;
}

/* Registration Steps */
.register-step {
  display: none;
  padding: 3rem;
}

.register-step--active {
  display: block;
}

.register-step__header {
  text-align: center;
  margin-bottom: 3rem;
}

.register-step__title {
  font-size: 2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.register-step__description {
  color: #6c757d;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Account Type Selector */
.account-type-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.office-type-section {
  margin-top: 2.5rem;
}

.account-type-option {
  position: relative;
  cursor: pointer;
}

.account-type-option input[type="radio"],
.account-type-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.account-type-content {
  display: block;
  padding: 2rem;
  border: 2px solid #dee2e6;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.account-type-option:hover .account-type-content {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(253, 145, 24, 0.2);
}

.account-type-option input[type="radio"]:checked + .account-type-content,
.account-type-option input[type="checkbox"]:checked + .account-type-content {
  border-color: var(--brand-primary);
  background: #fff5f5;
  box-shadow: 0 4px 12px rgba(253, 145, 24, 0.3);
}

/* Location Step */
.location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.location-card {
  background: var(--color-white);
  border-radius: 1rem;
  border: 2px solid #dee2e6;
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.location-card--wide {
  grid-column: 1 / -1;
}

.location-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.location-card__description {
  color: #6c757d;
  margin-bottom: 1rem;
}

.location-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.location-help {
  color: #6c757d;
}

.range-field {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.range-field input[type="range"] {
  flex: 1;
  min-width: 220px;
}

.range-value {
  font-weight: 600;
  color: #2c3e50;
}

.location-work {
  margin-top: 1.5rem;
}

.account-type-icon {
  width: 3rem;
  height: 3rem;
  background: var(--brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: white;
  font-size: 1.2rem;
}

.account-type-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.account-type-description {
  color: #6c757d;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.account-type-features {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-type-features li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  color: #495057;
  font-size: 0.9rem;
}

.account-type-features i {
  color: #28a745;
  margin-right: 0.5rem;
  width: 1rem;
}

/* Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.form-group--full {
  grid-column: 1 / -1;
}

.form-label {
  display: block;
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.form-input,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #dee2e6;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(253, 145, 24, 0.1);
}

.form-input--error {
  border-color: #dc3545;
}

/* Alerts */
.alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-800);
}

.alert--error {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

.alert--warning {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.12);
}

.alert--success {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.12);
}

.alert ul {
  margin-left: 1.25rem;
}

.alert li {
  color: var(--color-gray-700);
}

/* Flash-message block (partials/flash-messages.blade.php, $wrap = true):
   breathing room between the breadcrumbs and the page content, plus
   consistent spacing when multiple alerts stack. */
.flash-messages {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 1.75rem;
}

/* Verification Section */
.verification-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 0 auto;
}

.verification-item {
  background: #f8f9fa;
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
}

.verification-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.verification-item__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
}

.verification-item__required {
  background: #dc3545;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  font-weight: 500;
}

.verification-item__optional {
  background: #6c757d;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  font-weight: 500;
}

.verification-item__description {
  color: #6c757d;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* File Upload */
.file-upload {
  position: relative;
  background: #f8f9fa;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  border: 2px dashed #dee2e6;
  transition: all 0.3s ease;
}

.file-upload:hover {
  border-color: var(--brand-primary);
  background: #fff;
}

.file-upload__icon {
  width: 4rem;
  height: 4rem;
  background: var(--brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: white;
  font-size: 1.5rem;
}

.file-upload__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.file-upload__description {
  color: #6c757d;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.file-upload input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.file-upload__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.file-upload__label {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--brand-primary);
  color: white;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.file-upload__label:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(253, 145, 24, 0.3);
}

.file-upload__label i {
  margin-right: 0.5rem;
}

/* Completion Section */
.completion-section {
  max-width: 600px;
  margin: 0 auto;
}

.summary-card {
  background: #f8f9fa;
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 2rem;
}

.summary-card__title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1.5rem;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dee2e6;
}

.summary-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.summary-label {
  font-weight: 500;
  color: #6c757d;
}

.summary-value {
  font-weight: 600;
  color: #2c3e50;
}

.terms-section {
  background: white;
  border-radius: 1rem;
  padding: 1rem;
  border: 2px solid #dee2e6;
}

.checkbox-group {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.checkbox-input {
  margin-right: 0.75rem;
  width: 18px;
  height: 18px;
  accent-color: var(--brand-primary);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  line-height: 1.5;
}

.checkbox-label .link {
  margin: 0 0.25rem;
}

.link {
  color: var(--brand-primary);
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

/* Form Navigation */
.form-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3rem;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
}

/* Form Actions */
.form-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 3rem;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
}

.form-actions .btn {
  min-width: 260px;
}

.form-actions--split {
  justify-content: space-between;
  gap: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn--full {
  width: 100%;
  justify-content: center;
}

.btn--primary {
  background: var(--brand-primary);
  color: white;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(253, 145, 24, 0.3);
}

.btn--secondary {
  background: #6c757d;
  color: white;
}

.btn--secondary:hover {
  background: #5a6268;
  color: white;
  transform: translateY(-2px);
}

.btn i {
  margin: 0 0.5rem;
}

/* Responsive Design */
/* Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
  .account-type-selector {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .register-step {
    padding: 2rem;
  }
  
  .verification-section {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .register-hero__title {
    font-size: 2rem;
  }
  .register-hero__description {
    font-size: 1rem;
    padding: 0 1rem;
  }
  .register-step {
    padding: 1.5rem;
  }
  .register-card {
    padding: 1.25rem;
  }
  .register-progress {
    padding: 1rem;
  }
  .register-progress__number {
    width: 1.75rem;
    height: 1.75rem;
  }
  
  .register-options__grid {
    grid-template-columns: 1fr;
  }
  .register-card__title {
    font-size: 1.25rem;
  }
  .register-card__description {
    font-size: 0.95rem;
  }
  
  .register-benefits__grid {
    grid-template-columns: 1fr;
  }
  
  .account-type-selector {
    grid-template-columns: 1fr;
  }

  .location-grid {
    grid-template-columns: 1fr;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-label { font-size: 0.95rem; }
  .form-input, .form-select { font-size: 1rem; padding: 0.75rem 0.9rem; }
  
  .verification-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .file-upload {
    padding: 1.5rem;
  }
  
  .completion-section {
    padding: 0;
  }
  
  .summary-card,
  .terms-section {
    padding: 1rem;
  }
  
  .register-progress {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  
  .register-progress__step {
    min-width: 120px;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
  
  .register-progress__step:not(:last-child)::after {
    display: block;
    width: 30px;
    left: calc(50% + 60px);
  }
  
  .register-progress__label {
    font-size: 0.75rem;
    white-space: nowrap;
  }
  
  .register-progress__number {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.85rem;
  }
  
  .form-navigation {
    flex-direction: column;
    gap: 1rem;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }

  .form-actions--split {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Sticky form navigation on small screens */
@media (max-width: 768px) {
  .form-navigation--sticky {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
    background: #ffffffcc; /* translucent for subtlety */
    backdrop-filter: saturate(140%) blur(6px);
    box-shadow: 0 -8px 24px rgba(0,0,0,.12);
    z-index: 40;
  }
  .checkbox-label {
    display: block;
  }
}

/* ========== Onboarding Handle Step ========== */
.handle-input {
  position: relative;
  display: flex;
  align-items: stretch;
}

.handle-input__prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.85rem;
  font-weight: 600;
  color: var(--color-gray-600);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-size: 1rem;
  user-select: none;
}

.handle-input__field {
  flex: 1;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.handle-status {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  border-radius: var(--radius-full, 9999px);
  min-height: 1.6rem;
  line-height: 1.1rem;
}

.handle-status--idle,
.handle-status:empty {
  background: transparent;
  color: transparent;
  padding: 0;
  min-height: 0;
}

.handle-status--checking {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.handle-status--available {
  background: #e7f5ee;
  color: #1f7a4d;
}

.handle-status--taken,
.handle-status--error {
  background: #fdecea;
  color: #b3261e;
}

.handle-status--reserved {
  background: #fff4e5;
  color: #8a5a00;
}

.handle-permanent {
  /* Override .alert's default flex layout — the permanent-warning block
     needs a vertical column (title, body, consent-checkbox) instead of
     a horizontal row. */
  display: block;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
}

.handle-permanent > strong {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  color: var(--color-gray-900);
}

.handle-permanent > p {
  margin: 0 0 0.75rem 0;
  color: var(--color-gray-700);
  font-size: 0.9rem;
  line-height: 1.45;
}

.handle-permanent .checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(245, 158, 11, 0.25);
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-gray-800);
}

.handle-permanent .checkbox-field input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--brand-primary);
}

.handle-permanent .checkbox-field span {
  flex: 1;
  line-height: 1.4;
}

/* Generic checkbox row — labels default to inline, which makes stacked
   consent/declaration checkboxes flow into one messy line. Every
   .checkbox-field is a block-level flex row: checkbox left, copy right. */
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--color-gray-800);
}

.checkbox-field input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--brand-primary);
}

.checkbox-field span {
  flex: 1;
  line-height: 1.45;
}

/* WS4 — content declarations checklist (My Shop submit step). Each
   declaration is a bordered row so the blocking legal checks read as a
   proper checklist instead of floating checkboxes. */
.declaration-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.declaration-list .checkbox-field {
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.declaration-list .checkbox-field:hover {
  border-color: var(--color-gray-300);
}

.declaration-list .checkbox-field:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--color-white);
}

.declaration-list .form-error {
  margin: -0.35rem 0 0 0.25rem;
}

.form-error {
  margin-top: 0.4rem;
  color: #b3261e;
  font-size: 0.85rem;
}

.form-help {
  color: var(--color-gray-600);
  font-size: 0.85rem;
}

/* ========== Reviews Page Styles ========== */
.reviews-header {
  background: transparent;
  border-radius: 0;
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: none;
}

.reviews-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  text-align: center;
}

.reviews-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  text-align: center;
  margin-bottom: var(--space-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.reviews-search {
  max-width: 600px;
  margin: 0 auto;
}

.reviews-search__form {
  display: flex;
  gap: var(--space-3);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
}

.reviews-search__input {
  flex: 1;
  padding: var(--space-3);
  border: none;
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
}

.reviews-search__input::placeholder {
  color: var(--color-gray-500);
}

.reviews-search__select {
  padding: var(--space-3);
  border: none;
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  border-left: 1px solid var(--color-gray-200);
  padding-left: var(--space-4);
}

/* Entity search results dropdown */
.entity-search-results {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 400px;
  overflow-y: auto;
  margin-top: var(--space-2);
}

.entity-search-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.1s ease;
  border-bottom: 1px solid var(--color-gray-100);
}

.entity-search-result:last-child {
  border-bottom: none;
}

.entity-search-result:hover,
.entity-search-result.is-active {
  background: var(--color-gray-50, #f9fafb);
}

.entity-search-result__avatar {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.entity-search-result__avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* Presence ring + status dot — same visual contract as the inbox Live-now
   cards (inbox-overlay.css .inbox-live-card__avatar): green ring (2px white
   gap + 2px green) with a pulsing dot for "online now", amber dot for
   "recently online" (≤15 min). Values derive from PresenceStatus. */
.entity-search-result__avatar--online {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px #22c55e;
}

.entity-search-result__status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: var(--radius-full);
  background: #22c55e;
  border: 2.5px solid var(--color-white);
}

.entity-search-result__avatar--online .entity-search-result__status {
  animation: entitySearchPresencePulse 1.6s ease-in-out infinite;
}

.entity-search-result__avatar--recently .entity-search-result__status {
  background: var(--color-warning);
}

@keyframes entitySearchPresencePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Presence label leading the meta line — same green as the Live-now card's
   "Online" text (.inbox-live-card__online), amber for recently online. */
.entity-search-result__presence {
  font-weight: 600;
}

.entity-search-result__presence--online {
  color: #16a34a;
}

.entity-search-result__presence--recently {
  color: var(--color-warning);
}

.entity-search-result__info {
  flex: 1;
  min-width: 0;
}

.entity-search-result__name {
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-search-result__meta {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Entity search modal */
.entity-search-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh var(--space-4) var(--space-4);
}

.entity-search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.entity-search-modal__dialog {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,.1));
}

.entity-search-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.entity-search-modal__header h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

.entity-search-modal__close {
  background: none;
  border: none;
  color: var(--color-gray-500);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  transition: all 0.15s;
}

.entity-search-modal__close:hover {
  color: var(--color-gray-900);
  background: var(--color-gray-100);
}

.reviews-stats {
  margin-bottom: var(--space-12);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-200);
  transition: var(--transition-normal);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stat-card__icon {
  --stat-icon-size: 64px;
  width: var(--stat-icon-size);
  height: var(--stat-icon-size);
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
  color: var(--color-white);
  font-size: var(--font-size-xl);
}

.stat-card__content {
  display: flex;
  flex-direction: column;
}

.stat-card__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-1);
}

.stat-card__description {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.recent-reviews {
  margin-bottom: var(--space-12);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-gray-900);
}

.section-actions {
  display: flex;
  gap: var(--space-3);
}

/* TPS-209: a fixed two-column desktop grid, filled by even-sized batches
   (ReviewsController::PER_PAGE); the mobile override below keeps one column. */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

[data-reviews-load-more].is-loading {
  opacity: 0.7;
  pointer-events: none;
  cursor: progress;
}

.review-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-200);
  transition: var(--transition-normal);
}

.review-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.review-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.review-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.review-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-card__name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-1);
}

.review-card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.stars {
  display: flex;
  gap: var(--space-1);
  color: var(--brand-primary);
}

.review-card__date {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.review-card__content {
  margin-bottom: var(--space-4);
}

.review-card__provider {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.review-card__text {
  color: var(--color-gray-700);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.review-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.review-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-200);
}

.review-card__helpful {
  display: flex;
  gap: var(--space-2);
}

.helpful-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-100);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.helpful-btn:hover {
  background: var(--color-gray-200);
}

.helpful-btn.is-voted {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
}

.helpful-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.review-card__verified {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-success);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.reviews-actions {
  text-align: center;
  margin-top: var(--space-8);
}

/* ========== FAQ Page Styles ========== */
.faq-header {
  background: transparent;
  border-radius: 0;
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: none;
}

.faq-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  text-align: center;
}

.faq-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  text-align: center;
  margin-bottom: var(--space-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.faq-search {
  max-width: 500px;
  margin: 0 auto;
}

.faq-search__form {
  display: flex;
  gap: var(--space-3);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
}

.faq-search__input {
  flex: 1;
  padding: var(--space-3);
  border: none;
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
}

.faq-search__input::placeholder {
  color: var(--color-gray-500);
}

.faq-categories {
  margin-bottom: var(--space-12);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
}

.category-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-200);
  transition: var(--transition-normal);
  text-decoration: none;
  color: inherit;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  color: inherit;
}

.category-card__icon {
  --category-icon-size: 64px;
  width: var(--category-icon-size);
  height: var(--category-icon-size);
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
  color: var(--color-white);
  font-size: var(--font-size-xl);
}

.category-card__content {
  display: flex;
  flex-direction: column;
}

.category-card__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-1);
}

.category-card__description {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

.category-card__count {
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.faq-sections {
  margin-bottom: var(--space-12);
}

.faq-section {
  margin-bottom: var(--space-12);
}

.faq-section .section-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-gray-200);
}

.faq-question__text {
  flex: 1;
  text-align: left;
}

.faq-question__icon {
  transition: var(--transition-normal);
}

.faq-answer__content {
  padding: var(--space-6);
  color: var(--color-gray-700);
  line-height: 1.6;
}

.faq-contact {
  margin-bottom: var(--space-12);
}

.contact-card {
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-200);
  text-align: center;
}

.contact-card__icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  margin: 0 auto var(--space-4);
}

.contact-card__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.contact-card__description {
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
}

.contact-card__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .categories-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-card {
    flex-direction: column;
    text-align: center;
  }
  
  .faq-header {
    padding: var(--space-6);
  }
  
  .faq-title {
    font-size: var(--font-size-3xl);
  }
  
  .faq-subtitle {
    font-size: var(--font-size-base);
  }

  .reviews-header {
    padding: var(--space-6);
  }
  
  .reviews-title {
    font-size: var(--font-size-3xl);
  }
  
  .reviews-subtitle {
    font-size: var(--font-size-base);
  }
  
  .stat-card__icon {
    width: 56px;
    height: 56px;
  }
  
  .contact-card__actions {
    flex-direction: column;
  }
  
  .section-header {
    flex-direction: column;
    gap: var(--space-4);
    align-items: stretch;
  }
  
  .reviews-search__form {
    flex-direction: column;
  }
  
  .faq-search__form {
    flex-direction: column;
  }
}

/* ============ Auth-Required Modal (global, public pages) ============ */
body.is-auth-modal-open { overflow: hidden; }

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.auth-modal[hidden] { display: none; }

.auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(4px);
}

.auth-modal__dialog {
  position: relative;
  width: min(440px, 100%);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
  animation: authModalIn 200ms ease-out;
}

@keyframes authModalIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  transition: all var(--transition-fast);
  z-index: 1;
}

.auth-modal__close:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.auth-modal__body {
  padding: var(--space-8) var(--space-6) var(--space-4);
  text-align: center;
}

.auth-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover, var(--brand-primary)));
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.auth-modal__title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2);
}

.auth-modal__message {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin: 0;
}

.auth-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.auth-modal__btn {
  width: 100%;
  text-align: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--font-size-base);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: block;
}

.auth-modal__btn.btn--primary {
  background: var(--brand-primary);
  color: var(--color-white);
  border: none;
}

.auth-modal__btn.btn--primary:hover {
  background: var(--brand-primary-hover, var(--brand-primary));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.auth-modal__btn.btn--primary:link,
.auth-modal__btn.btn--primary:visited {
  color: var(--color-white);
}

.auth-modal__btn.btn--secondary {
  background: var(--color-white);
  color: var(--color-gray-800);
  border: 1px solid var(--color-gray-300);
}

.auth-modal__btn.btn--secondary:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.auth-modal__btn.btn--secondary:link,
.auth-modal__btn.btn--secondary:visited {
  color: var(--color-gray-800);
}

.auth-modal__btn--cancel {
  background: none;
  border: none;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  padding: var(--space-2);
}

.auth-modal__btn--cancel:hover {
  color: var(--color-gray-700);
}

/* ============ Report-Abuse Modal (authenticated users) ============ */
body.is-report-modal-open { overflow: hidden; }

.report-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.report-modal[hidden] { display: none; }

.report-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(4px);
}

.report-modal__dialog {
  position: relative;
  width: min(480px, 100%);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
  animation: authModalIn 200ms ease-out;
}

.report-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  transition: all var(--transition-fast);
  z-index: 1;
}

.report-modal__close:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.report-modal__body {
  padding: var(--space-6) var(--space-6) var(--space-2);
  text-align: center;
}

.report-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.report-modal__title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2);
}

.report-modal__message {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin: 0;
}

.report-modal__form {
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.report-modal__field {
  margin-bottom: var(--space-4);
  text-align: left;
}

.report-modal__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--space-1);
}

.report-modal__select,
.report-modal__textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-gray-900);
  transition: border-color var(--transition-fast);
}

.report-modal__select:focus,
.report-modal__textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.report-modal__textarea {
  resize: vertical;
  min-height: 60px;
}

.report-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.report-modal__btn {
  width: 100%;
  text-align: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.report-modal__btn--cancel {
  background: none;
  border: none;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  padding: var(--space-2);
}

.report-modal__btn--cancel:hover {
  color: var(--color-gray-700);
}

.report-modal__feedback {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.report-modal__feedback--success {
  background: var(--color-green-50, #f0fdf4);
  color: var(--color-green-700, #15803d);
}

.report-modal__feedback--error {
  background: var(--color-red-50, #fef2f2);
  color: var(--color-red-700, #b91c1c);
}

/* Active state styling for favorite / follow toggle buttons */
[data-favorite-toggle].is-active,
[data-follow-toggle].is-active {
  border-color: var(--color-gray-400);
  background: var(--color-gray-200);
  color: var(--color-gray-900);
  font-weight: 700;
}

/* ============ Profile Toast Notification ============ */
.profile-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  max-width: 90vw;
  white-space: nowrap;
}

.profile-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.profile-toast--success {
  background: #16a34a;
}

.profile-toast--error {
  background: #dc2626;
}

.profile-toast__icon {
  font-size: var(--font-size-lg);
  line-height: 1;
}

/* ============ Account List Grid (favorites / following pages) ============ */
.account-list-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.account-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.account-list-item:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}

.account-list-item__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  flex: 1;
}

.account-list-item__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  flex-shrink: 0;
}

/* Initials placeholder shown when the entity has no avatar_url. Brand-coloured
   circle with a single uppercase letter, mirroring .team-member-card__avatar-placeholder. */
.account-list-item__avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
  border-color: transparent;
}

.account-list-item__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

/* Top line: display name + verified shield. */
.account-list-item__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.account-list-item__name {
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-list-item__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-info, #3b82f6);
  flex-shrink: 0;
}

/* Second line: subtype · age · city. Inline so the dots align with text baseline. */
.account-list-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.3;
}

.account-list-item__meta-item { white-space: nowrap; }

.account-list-item__meta-dot {
  color: var(--color-gray-400);
  font-weight: 700;
  padding: 0 2px;
}

/* Third line: tiny stats with leading SVG icons. */
.account-list-item__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.account-list-item__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.account-list-item__stat svg {
  flex-shrink: 0;
  color: var(--color-gray-400);
}

/* Legacy single-line layout fallback (kept for any caller still passing the
   old type field directly). */
.account-list-item__type {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.account-list-item__action {
  flex-shrink: 0;
  align-self: center;
}

/* Mobile: stack action below the info column so the row doesn’t squeeze.
   The button keeps its natural size (no full-width stretch) and aligns to the
   end so it visually anchors to the same edge as the desktop layout. */
@media (max-width: 540px) {
  .account-list-item {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
  .account-list-item__action {
    margin-left: auto;
  }
}

.account-empty-state {
  text-align: center;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  padding: var(--space-8) var(--space-4);
}

/* ── Toolbar (search + sort) shown above the list ──────────────────────────
   Used on /account/favorites and /account/following. Auto-collapses to two
   stacked rows on narrow screens. */
.account-list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

/* Search field with a leading magnifier icon (background SVG). */
.account-list-toolbar__search {
  flex: 1 1 260px;
  min-width: 0;
  display: block;
  position: relative;
}
.account-list-toolbar__search input[type="search"] {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 22px);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--space-3) center;
  background-size: 16px 16px;
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.account-list-toolbar__search input[type="search"]:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(253, 145, 24, 0.15);
}
/* Hide the native clear button on WebKit — the input is already clearable via blur,
   and the native button collides visually with our padded layout. */
.account-list-toolbar__search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.account-list-toolbar__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  margin-left: auto;
}
.account-list-toolbar__sort-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-weight: 600;
  white-space: nowrap;
}
.account-list-toolbar__sort select {
  min-width: 170px;
  padding: var(--space-2) calc(var(--space-3) + 18px) var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px 12px;
  font-size: var(--font-size-sm);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.account-list-toolbar__sort select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(253, 145, 24, 0.15);
}

/* Mobile: stack search above the sort row. */
@media (max-width: 600px) {
  .account-list-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  /* In column flex, `flex: 1 1 260px` would let the search label grow vertically
     and create a huge gap before the sort row. Pin it to its natural height. */
  .account-list-toolbar__search { flex: 0 0 auto; width: 100%; }
  .account-list-toolbar__sort { margin-left: 0; justify-content: space-between; flex: 0 0 auto; }
  .account-list-toolbar__sort select { flex: 1 1 auto; min-width: 0; }
}

/* ── No-matches hint (shown when search yields zero results) ─────────────── */
.account-list-no-matches {
  text-align: center;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  padding: var(--space-6) var(--space-4);
  margin: 0;
}

/* ── Remove animation (slide out + fade) ──────────────────────────────────
   Applied when the user confirms unfavorite/unfollow. The JS waits for the
   transitionend event before pulling the node from the DOM. */
.account-list-item {
  transition: background var(--transition-fast),
              opacity 200ms ease,
              transform 200ms ease,
              max-height 200ms ease,
              padding 200ms ease,
              margin 200ms ease,
              border-color 200ms ease;
}
/* Honour the [hidden] attribute on items — the JS toggles `item.hidden` during
   search filtering, but `.account-list-item { display: flex }` would otherwise
   override the UA `[hidden] { display: none }` rule because they have equal
   specificity. */
.account-list-item[hidden] { display: none !important; }
.account-list-item--removing {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  border-color: transparent;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .account-list-item,
  .account-list-item--removing { transition: none; }
}

/* ============ Top 100 Page ============ */

/* Hero Section */
.top100-hero {
  background: linear-gradient(135deg, #111827 0%, #1e293b 50%, #0f172a 100%);
  color: var(--color-white);
  padding: var(--space-10) var(--space-4) var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.top100-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(253, 145, 24, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.top100-hero__inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.top100-hero__text {
  text-align: left;
  flex: 1;
}

.top100-hero__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-3xl);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  line-height: 1.2;
}

.top100-hero__icon {
  color: var(--brand-primary);
  flex-shrink: 0;
}

.top100-hero__subtitle {
  margin: 0;
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  max-width: 420px;
}

.top100-hero__last-update {
  text-align: center;
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  margin: var(--space-4) auto 0;
  position: relative;
}

/* Countdown Timer */
.top100-countdown {
  flex-shrink: 0;
  text-align: center;
}

.top100-countdown__label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-300);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.top100-countdown__timer {
  display: flex;
  gap: var(--space-2);
}

.top100-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  min-width: 60px;
}

.top100-countdown__num {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
}

.top100-countdown__tag {
  font-size: var(--font-size-xs);
  color: var(--color-gray-300);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .top100-hero__inner {
    flex-direction: column;
    text-align: center;
  }

  .top100-hero__text {
    text-align: center;
  }

  .top100-hero__title {
    justify-content: center;
    font-size: var(--font-size-2xl);
  }

  .top100-hero__subtitle {
    max-width: none;
  }

  .top100-countdown__unit {
    min-width: 46px;
    padding: var(--space-2);
  }

  .top100-countdown__num {
    font-size: var(--font-size-2xl);
  }
}

/* Ranking list */
.top100-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-12);
}

.top100-entry {
  display: grid;
  grid-template-columns: 72px 64px 96px 1fr 220px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-gray-100);
  transition: background var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.top100-entry:first-child {
  border-top: 1px solid var(--color-gray-100);
}

.top100-entry:hover {
  background: var(--color-gray-50);
}

.top100-entry--podium {
  background: linear-gradient(90deg, rgba(253, 145, 24, 0.04), transparent);
  border-bottom-color: rgba(253, 145, 24, 0.15);
}

.top100-entry--podium:first-child {
  border-top-color: rgba(253, 145, 24, 0.15);
}

.top100-entry--podium:hover {
  background: linear-gradient(90deg, rgba(253, 145, 24, 0.08), rgba(253, 145, 24, 0.02));
}

/* Rank number */
.top100-entry__rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.top100-entry__medal {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.top100-entry__pos {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--color-gray-400);
  line-height: 1.2;
}

.top100-entry--podium .top100-entry__pos {
  color: var(--brand-primary);
}

/* Delta column */
.top100-entry__delta-col {
  display: flex;
  justify-content: center;
}

.top100-entry__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: 3px 10px;
  white-space: nowrap;
}

.top100-entry__delta.up {
  color: #059669;
  background: #d1fae5;
}

.top100-entry__delta.down {
  color: #dc2626;
  background: #fee2e2;
}

.top100-entry__delta.new {
  color: #7c3aed;
  background: #ede9fe;
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
}

.top100-entry__delta.neutral {
  color: var(--color-gray-400);
  background: transparent;
}

.top100-entry__arrow {
  font-size: 11px;
  line-height: 1;
}

/* Avatar — presence-aware. Sized up so the toplist doubles as a "who's
   active right now" surface. The live ring mirrors the inbox Live-now
   cards (2px white gap + 2px status color, drawn with box-shadow) but
   keeps the rounded-square avatar shape of the list. */
.top100-entry__avatar {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.top100-entry__img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  display: block;
  border: 2px solid var(--color-gray-100);
}

.top100-entry--podium .top100-entry__img {
  border-color: var(--brand-primary-light);
}

/* Online (green) / recently online (amber) ring around the avatar. */
.top100-entry__avatar--online .top100-entry__img,
.top100-entry__avatar--recently .top100-entry__img {
  border-color: transparent;
}

.top100-entry__avatar--online .top100-entry__img {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px #22c55e;
}

.top100-entry__avatar--recently .top100-entry__img {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px #f59e0b;
}

/* Status dot overlapping the bottom-right avatar corner; the green
   variant pulses (same treatment as the profile-page presence badge). */
.top100-entry__presence-dot {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #22c55e;
  border: 2.5px solid var(--color-white);
}

.top100-entry__avatar--online .top100-entry__presence-dot {
  animation: entitySearchPresencePulse 1.6s ease-in-out infinite;
}

.top100-entry__avatar--recently .top100-entry__presence-dot {
  background: #f59e0b;
}

.top100-entry__img--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-gray-200), var(--color-gray-100));
  color: var(--color-gray-500);
  font-weight: 700;
  font-size: var(--font-size-2xl);
}

/* Info */
.top100-entry__info {
  min-width: 0;
}

.top100-entry__name {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-gray-900);
}

.top100-entry:hover .top100-entry__name {
  color: var(--brand-primary);
}

.top100-entry__meta {
  margin: 4px 0 0;
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  gap: 4px;
}

.top100-entry__meta-icon {
  flex-shrink: 0;
  opacity: 0.6;
}

/* Presence line under the meta row — actual-data signal (PresenceStatus
   colors match the profile-page badge + listing-card traits). */
.top100-entry__presence {
  margin: 5px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.top100-entry__presence--online {
  color: #16a34a;
}

.top100-entry__presence--recently {
  color: #b45309;
}

.top100-entry__presence--last-seen {
  color: var(--color-gray-500);
  font-weight: 500;
}

.top100-entry__presence-ind {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

/* Score bar */
.top100-entry__score {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.top100-entry__score-bar {
  flex: 1;
  height: 10px;
  background: var(--color-gray-100);
  border-radius: 99px;
  overflow: hidden;
}

.top100-entry__score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-primary), #f59e0b);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.top100-entry__score-value {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-gray-500);
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Mobile responsive. The delta pill moves to row two (under the rank
   number) so the first row keeps its width for the name/meta/presence
   block; the score bar aligns with the avatar + info columns instead of
   running edge-to-edge under the rank. */
@media (max-width: 768px) {
  .top100-entry {
    grid-template-columns: 44px 68px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .top100-entry__rank {
    grid-row: 1;
    grid-column: 1;
  }

  .top100-entry__delta-col {
    grid-row: 2;
    grid-column: 1;
  }

  .top100-entry__delta {
    font-size: var(--font-size-xs);
    padding: 2px 6px;
  }

  .top100-entry__avatar {
    grid-row: 1;
    grid-column: 2;
    width: 68px;
    height: 68px;
  }

  .top100-entry__info {
    grid-row: 1;
    grid-column: 3;
  }

  .top100-entry__score {
    grid-row: 2;
    grid-column: 2 / -1;
  }

  .top100-entry__presence-dot {
    width: 13px;
    height: 13px;
    border-width: 2px;
  }

  .top100-entry__pos {
    font-size: var(--font-size-xl);
  }

  .top100-entry__name {
    font-size: var(--font-size-base);
  }

  .top100-entry__meta {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .top100-entry {
    grid-template-columns: 34px 56px 1fr;
  }

  .top100-entry__avatar {
    width: 56px;
    height: 56px;
  }

  /* Keep the NEW pill inside the narrow rank column. */
  .top100-entry__delta.new {
    letter-spacing: 0.2px;
    padding: 2px 5px;
  }
}

/* Weekly Movers */
.top100-movers {
  margin-top: var(--space-4);
  margin-bottom: var(--space-10);
}

.top100-movers__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin: 0 0 var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-gray-700);
}

.top100-movers__title svg {
  width: 28px;
  height: 28px;
  color: var(--brand-primary);
}

.top100-movers__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .top100-movers__grid {
    grid-template-columns: 1fr;
  }
}

.top100-movers__col {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

.top100-movers__col--up {
  border-top: 3px solid #10b981;
}

.top100-movers__col--down {
  border-top: 3px solid #ef4444;
}

.top100-movers__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: 700;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
}

.top100-movers__heading--up { color: #059669; }
.top100-movers__heading--down { color: #dc2626; }

.top100-movers__arrow {
  font-size: 14px;
}

.top100-movers__arrow.up { color: #10b981; }
.top100-movers__arrow.down { color: #ef4444; }

.top100-mover {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  margin: 0 calc(-1 * var(--space-3));
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

a.top100-mover:hover {
  background: var(--color-gray-50);
}

.top100-mover + .top100-mover {
  border-top: 1px solid var(--color-gray-50);
}

.top100-mover__rank {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-gray-400);
  min-width: 36px;
}

.top100-mover__avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.top100-mover__avatar img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  display: block;
}

.top100-mover__avatar--letter {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  font-weight: 700;
  font-size: var(--font-size-base);
}

.top100-mover__info {
  flex: 1;
  min-width: 0;
}

.top100-mover__name {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top100-mover__name a {
  color: inherit;
  text-decoration: none;
}

.top100-mover__name a:hover {
  color: var(--brand-primary);
}

.top100-mover__delta {
  font-size: var(--font-size-base);
  font-weight: 700;
  white-space: nowrap;
}

.top100-mover__delta.up {
  color: #059669;
}

.top100-mover__delta.down {
  color: #dc2626;
}

.top100-movers__empty {
  margin: 0;
  padding: var(--space-4) 0;
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* Phone flag badge (revealed phone number) */
.phone-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  line-height: 1;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.profile-action-btn--phone .phone-flag {
  font-size: 1.15rem;
  width: 1.55em;
  height: 1.55em;
}

/* Empty state */
.top100-empty {
  text-align: center;
  padding: var(--space-16) var(--space-4);
  color: var(--color-gray-500);
}

.top100-empty h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-700);
  margin: 0 0 var(--space-2);
}

.top100-empty p {
  margin: 0;
  font-size: var(--font-size-base);
}

/* ========== Timeline Page Styles ========== */
.timeline-header {
  background: transparent;
  padding: var(--space-8);
  margin-bottom: var(--space-4);
}

.timeline-header__content {
  text-align: center;
}

.timeline-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
}

.timeline-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  max-width: 600px;
  margin: 0 auto;
}

/* Filter Pills */
.timeline-filters {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-100);
}

.timeline-filters::-webkit-scrollbar {
  display: none;
}

.timeline-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.timeline-filter:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.timeline-filter--active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--color-white);
}

.timeline-filter--active:hover {
  color: var(--color-white);
  opacity: 0.9;
}

/* Create Post */
.timeline-create {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
}

.timeline-create--guest {
  text-align: center;
}

.timeline-create__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  color: var(--color-gray-500);
  font-size: var(--font-size-base);
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  width: 100%;
  justify-content: center;
}

.timeline-create__cta:hover {
  color: var(--brand-primary);
}

.timeline-create__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.timeline-create__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.timeline-create__entity-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
}

.timeline-create__entity-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.timeline-create__entity-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  background: var(--color-white);
}

.timeline-create__textarea {
  width: 100%;
  border: none;
  resize: none;
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  outline: none;
  min-height: 60px;
  font-family: inherit;
  line-height: 1.5;
}

.timeline-create__textarea::placeholder {
  color: var(--color-gray-400);
}

.timeline-create__media-preview {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.timeline-create__media-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.timeline-create__media-preview-item img,
.timeline-create__media-preview-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-create__media-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.timeline-create__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-gray-100);
  padding-top: var(--space-3);
}

.timeline-create__tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.timeline-create__tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all 0.15s;
  font-size: var(--font-size-lg);
}

.timeline-create__tool:hover {
  background: var(--color-gray-50);
  color: var(--brand-primary);
}

.timeline-create__visibility-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  background: var(--color-white);
}

.timeline-create__submit-area {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.timeline-create__char-count {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
}

/* Location Panel in Post Creation */
.timeline-create__location-toggle {
  position: relative;
  background: none;
  border: none;
}

.timeline-create__location-toggle--active {
  color: var(--brand-primary) !important;
}

.timeline-create__location-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  background: var(--brand-primary);
  color: var(--color-white);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.timeline-create__location-panel {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.timeline-create__location-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--space-3);
}

.timeline-create__location-panel-header i {
  color: var(--brand-primary);
  margin-right: 4px;
}

.timeline-create__location-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: 0 var(--space-1);
  line-height: 1;
}

.timeline-create__location-close:hover {
  color: var(--color-gray-700);
}

.timeline-create__location-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.timeline-create__location-field .form-label--sm {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-gray-600);
  margin-bottom: 4px;
}

.timeline-create__location-row {
  display: flex;
  gap: var(--space-3);
}

.timeline-create__location-field--flex {
  flex: 1;
  min-width: 0;
}

.timeline-create__location-select {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  background: var(--color-white);
}

.range-field--compact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.range-field--compact input[type="range"] {
  flex: 1;
  min-width: 0;
}

/* Feed */
.timeline-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 680px;
  margin: 0 auto;
}

/* Post Card */
.timeline-post {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
  transition: var(--transition-normal);
}

.timeline-post:hover {
  box-shadow: var(--shadow-md);
}

.timeline-post__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.timeline-post__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.timeline-post__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Live presence ring — highlights an avatar whose owner is currently
   online (TPS-34). Shares the same green as the existing name-row
   presence dot. box-shadow renders on the element's own border box, so
   it is unaffected by this element's own overflow:hidden (which only
   clips the <img>/initials content). */
.timeline-post__avatar--online {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px #22c55e;
}

.timeline-post__meta {
  flex: 1;
  min-width: 0;
}

.timeline-post__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.timeline-post__name {
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.timeline-post__name:hover {
  color: var(--brand-primary);
}

/* @mention highlight inside comment bodies (MentionHighlighter / JS mirror). */
.timeline-comment__text .mention {
  color: var(--brand-primary);
  font-weight: 600;
}

/* "Who to follow" suggestions card (social growth pack). */
.timeline-suggestions {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  padding: var(--space-4) var(--space-5);
}

.timeline-suggestions__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-gray-500);
}

.timeline-suggestions__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-600);
  margin: 0;
}

.timeline-suggestions__list {
  display: flex;
  flex-direction: column;
}

.timeline-suggestions__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.timeline-suggestions__item + .timeline-suggestions__item {
  border-top: 1px solid var(--color-gray-100);
}

.timeline-suggestions__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-gray-100);
}

.timeline-suggestions__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-suggestions__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  color: var(--color-gray-500);
}

.timeline-suggestions__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.timeline-suggestions__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.timeline-suggestions__name:hover {
  color: var(--brand-primary);
}

.timeline-suggestions__meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* Live presence dot next to the author name (gateway user.is_online). */
.timeline-post__presence {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
  flex-shrink: 0;
  display: inline-block;
}

.timeline-post__badge {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
}

.timeline-post__badge--followers {
  color: var(--brand-primary);
}

.timeline-post__badge--pinned {
  color: #f59e0b;
}

.timeline-post__time {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Timestamp links to the post detail page (SEO permalink). */
.timeline-post__time-link {
  color: inherit;
  text-decoration: none;
}

.timeline-post__time-link:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* Post detail page: back-to-timeline link above the post card. */
.timeline-detail__back {
  display: flex;
  align-items: center;
}

.timeline-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.timeline-detail__back-link:hover {
  color: var(--brand-primary);
}

.timeline-post__edited {
  color: var(--color-gray-400);
  font-style: italic;
}

.timeline-post__location {
  font-size: var(--font-size-xs);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.timeline-post__location i {
  font-size: 0.7em;
}

.timeline-post__distance {
  font-size: var(--font-size-xs);
  color: #059669;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-weight: 600;
}

.timeline-post__distance i {
  font-size: 0.7em;
}

.timeline-post__follow-btn {
  flex-shrink: 0;
  width: auto;
}

/* Post Menu (3-dot dropdown) */
.timeline-post__menu {
  position: relative;
  flex-shrink: 0;
}

.timeline-post__menu-btn {
  background: none;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: all 0.15s;
}

.timeline-post__menu-btn:hover {
  background: var(--color-gray-50);
  color: var(--color-gray-700);
}

.timeline-post__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 160px;
  z-index: 20;
  overflow: hidden;
}

.timeline-post__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.timeline-post__dropdown-item:hover {
  background: var(--color-gray-50);
}

.timeline-post__dropdown-item--danger {
  color: #dc2626;
}

.timeline-post__dropdown-item--danger:hover {
  background: #fef2f2;
}

/* Post Body */
.timeline-post__body {
  padding: 0 var(--space-5) var(--space-4);
}

.timeline-post__text {
  font-size: var(--font-size-base);
  color: var(--color-gray-800);
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.timeline-post__read-more {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-top: var(--space-1);
}

.timeline-post__read-more:hover {
  text-decoration: underline;
}

/* Post Media Grid */
.timeline-post__media {
  display: grid;
  gap: 2px;
  max-height: 500px;
  overflow: hidden;
}

.timeline-post__media--1 {
  grid-template-columns: 1fr;
}

.timeline-post__media--2 {
  grid-template-columns: 1fr 1fr;
}

.timeline-post__media--3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.timeline-post__media--3 .timeline-post__media-item:first-child {
  grid-row: span 2;
}

.timeline-post__media--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.timeline-post__media-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-gray-100);
}

.timeline-post__media-item img,
.timeline-post__media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 180px;
  max-height: 500px;
}

.timeline-post__media-item--video {
  position: relative;
}

.timeline-post__play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  transition: background 0.15s;
}

.timeline-post__media-item--video:hover .timeline-post__play-icon {
  background: rgba(0, 0, 0, 0.5);
}

/* Reel post card — navigates to the reel player on click. */
.timeline-post__media-item--reel {
  display: block;
  text-decoration: none;
  background: #000;
}

.timeline-post__media-item--reel:hover .timeline-post__play-icon {
  background: rgba(0, 0, 0, 0.55);
}

.timeline-post__reel-badge {
  position: absolute;
  top: var(--space-2, 8px);
  left: var(--space-2, 8px);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  background: var(--brand-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border-radius: var(--radius-sm, 4px);
  pointer-events: none;
  line-height: 1.4;
}

.timeline-post__media-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-white);
  font-size: var(--font-size-3xl);
  font-weight: 700;
}

/* System auto-post cards (blog / shop) + profile-media captions.
   Rendered by partials/timeline-post.blade.php and timeline.js in sync. */
.timeline-post__system-caption {
  padding: 0 var(--space-5) var(--space-2);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: 0.45em;
}

.timeline-post__source-card {
  display: block;
  margin: 0 var(--space-5) var(--space-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--color-white);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.timeline-post__source-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.timeline-post__source-card-media {
  position: relative;
  background: var(--color-gray-100);
}

.timeline-post__source-card-media img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}

.timeline-post__source-card-body {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline-post__source-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  align-self: flex-start;
  background: var(--brand-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border-radius: var(--radius-sm, 4px);
  line-height: 1.4;
}

.timeline-post__source-card-title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.35;
}

.timeline-post__source-card-excerpt {
  margin: 0;
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.timeline-post__source-card-price {
  font-weight: 700;
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
}

.timeline-post__source-card-cta {
  color: var(--brand-primary);
  font-weight: 600;
  font-size: var(--font-size-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* Review auto-post card: star row + reviewer attribution. */
.timeline-post__review-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  color: #f59e0b;
  font-size: var(--font-size-sm);
}

.timeline-post__review-score {
  margin-left: 0.4em;
  color: var(--color-gray-700);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.timeline-post__review-author {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  font-style: italic;
}

/* Post Actions */
.timeline-post__actions {
  display: flex;
  border-top: 1px solid var(--color-gray-100);
  padding: 0 var(--space-2);
}

.timeline-post__action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: none;
  border: none;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 0;
}

.timeline-post__action:hover {
  background: var(--color-gray-50);
  color: var(--color-gray-700);
}

.timeline-post__action--liked {
  color: #ef4444;
}

.timeline-post__action--liked:hover {
  color: #dc2626;
}

.timeline-post__action-count {
  font-variant-numeric: tabular-nums;
}

/* Comments Section */
.timeline-post__comments {
  border-top: 1px solid var(--color-gray-100);
  padding: var(--space-3) var(--space-5) var(--space-4);
}

.timeline-post__comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.timeline-comment {
  display: flex;
  gap: var(--space-2);
}

.timeline-comment__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.timeline-comment__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Live presence ring for commenter avatars — see .timeline-post__avatar--online. */
.timeline-comment__avatar--online {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px #22c55e;
}

.timeline-post__initials,
.timeline-comment__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--brand-primary, #6366f1);
  color: var(--color-white, #fff);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
}

.timeline-comment__content {
  flex: 1;
  min-width: 0;
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
}

.timeline-comment__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
}

/* Shared identity handle chip — muted mono "@handle" rendered next to
   display names (CRM customer rows, timeline comments, inbox actors).
   Emitted by the <x-identity.name-row> Blade component and timeline.js. */
.identity-handle {
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
  font-weight: 400;
  color: var(--color-gray-500, #6b7280);
}

.timeline-comment__handle {
  margin-left: var(--space-1);
}

.timeline-comment__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

.timeline-comment__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
  padding-left: var(--space-1);
}

.timeline-comment__time {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
}

.timeline-comment__action {
  background: none;
  border: none;
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  cursor: pointer;
  padding: 0;
}

.timeline-comment__action:hover {
  color: var(--brand-primary);
}

.timeline-comment__action--liked {
  color: #ef4444;
}

/* Comment body wrap (holds content + meta + menu) */
.timeline-comment__body-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Comment like button */
.timeline-comment__like-btn {
  background: none;
  border: none;
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: color 0.15s;
}

.timeline-comment__like-btn:hover {
  color: var(--brand-primary);
}

.timeline-comment__like-btn--liked {
  color: var(--brand-primary);
}

.timeline-comment__like-count {
  font-variant-numeric: tabular-nums;
}

/* Comment menu (3-dot) */
.timeline-comment__menu {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
}

.timeline-comment__menu-btn {
  background: none;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: 2px 4px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.timeline-comment__menu-btn:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.timeline-comment__dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 130px;
  z-index: 50;
  padding: var(--space-1) 0;
}

.timeline-comment__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.timeline-comment__dropdown-item:hover {
  background: var(--color-gray-50);
}

.timeline-comment__dropdown-item--danger {
  color: #ef4444;
}

.timeline-comment__dropdown-item--danger:hover {
  background: #fef2f2;
}

/* Comment edit form */
.timeline-comment__edit-form {
  width: 100%;
}

.timeline-comment__edit-textarea {
  width: 100%;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  font-size: var(--font-size-sm);
  font-family: inherit;
  resize: vertical;
  min-height: 50px;
  outline: none;
}

.timeline-comment__edit-textarea:focus {
  border-color: var(--brand-primary);
}

.timeline-comment__edit-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-1);
}

/* Comment Form */
.timeline-post__comment-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.timeline-post__comment-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  background: var(--color-gray-50);
  outline: none;
  transition: border-color 0.15s;
}

.timeline-post__comment-input:focus {
  border-color: var(--brand-primary);
  background: var(--color-white);
}

.timeline-post__comment-input--guest {
  cursor: pointer;
  text-align: left;
}

.timeline-post__comment-submit {
  background: none;
  border: none;
  color: var(--brand-primary);
  cursor: pointer;
  padding: var(--space-2);
  font-size: var(--font-size-base);
  transition: opacity 0.15s;
}

.timeline-post__comment-submit:hover {
  opacity: 0.7;
}

/* Edit Mode (inline) */
.timeline-post__edit-form {
  padding: 0 var(--space-5) var(--space-4);
}

.timeline-post__edit-textarea {
  width: 100%;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--font-size-base);
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  outline: none;
}

.timeline-post__edit-textarea:focus {
  border-color: var(--brand-primary);
}

.timeline-post__edit-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-2);
}

/* Empty State */
.timeline-empty {
  text-align: center;
  padding: var(--space-16) var(--space-4);
  color: var(--color-gray-500);
}

.timeline-empty h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-700);
  margin: 0 0 var(--space-2);
}

.timeline-empty p {
  margin: 0;
  font-size: var(--font-size-base);
}

/* Emoji Picker */
.emoji-picker-panel {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 100;
  width: 280px;
  max-height: 220px;
  overflow-y: auto;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

.emoji-picker-item {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-align: center;
  transition: background 0.1s;
}

.emoji-picker-item:hover {
  background: var(--color-gray-100);
}

/* Comment emoji button */
.timeline-comment-emoji-btn {
  background: none;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: var(--space-1);
  font-size: var(--font-size-base);
  transition: color 0.15s;
  position: relative;
}

.timeline-comment-emoji-btn:hover {
  color: var(--brand-primary);
}

/* Infinite Scroll Sentinel */
.timeline-sentinel {
  padding: var(--space-8) 0;
  text-align: center;
}

.timeline-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.timeline-loader__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-200);
  border-top-color: var(--brand-primary);
  border-radius: var(--radius-full);
  animation: timeline-spin 0.6s linear infinite;
}

@keyframes timeline-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Timeline Responsive */
@media (max-width: 768px) {
  .timeline-title {
    font-size: var(--font-size-2xl);
  }

  .timeline-subtitle {
    font-size: var(--font-size-base);
  }

  .timeline-post__header {
    padding: var(--space-3) var(--space-4);
  }

  .timeline-post__body {
    padding: 0 var(--space-4) var(--space-3);
  }

  .timeline-post__comments {
    padding: var(--space-3) var(--space-4);
  }

  .timeline-post__avatar {
    width: 40px;
    height: 40px;
  }

  .timeline-post__media-item img,
  .timeline-post__media-item video {
    min-height: 140px;
  }

  .timeline-create {
    padding: var(--space-3) var(--space-4);
  }

  .timeline-create__bottom {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }

  .timeline-create__submit-area {
    justify-content: flex-end;
  }

  .timeline-filters {
    padding: var(--space-2) 0;
  }
}

/* Confirm Modal (timeline) */
.timeline-confirm {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-confirm[hidden] {
  display: none;
}

.timeline-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.timeline-confirm__dialog {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  max-width: 380px;
  width: 90%;
  text-align: center;
  animation: timeline-confirm-in 0.15s ease-out;
}

@keyframes timeline-confirm-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.timeline-confirm__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2);
}

.timeline-confirm__message {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0 0 var(--space-5);
  line-height: 1.5;
}

.timeline-confirm__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.timeline-confirm__actions .btn {
  min-width: 100px;
}

.btn--danger {
  background: #dc2626;
  color: #fff;
  border: none;
}

.btn--danger:hover {
  background: #b91c1c;
}

/* Media Lightbox */
.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-lightbox[hidden] {
  display: none;
}

.media-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 0;
}

.media-lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 2rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: background 0.15s;
}

.media-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.media-lightbox__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
}

.media-lightbox__image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  user-select: none;
}

.media-lightbox__video {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-md);
  background: #000;
}

.media-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: var(--color-white);
  font-size: 1.25rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: background 0.15s;
}

.media-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.media-lightbox__nav--prev {
  left: var(--space-4);
}

.media-lightbox__nav--next {
  right: var(--space-4);
}

.media-lightbox__nav[hidden] {
  display: none;
}

.media-lightbox__counter {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: rgba(0, 0, 0, 0.5);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

.media-lightbox__counter[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .media-lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .media-lightbox__nav--prev {
    left: var(--space-2);
  }

  .media-lightbox__nav--next {
    right: var(--space-2);
  }

  .media-lightbox__close {
    top: var(--space-2);
    right: var(--space-2);
  }
}

/* ============ Global Toasts (account-ui.js) ============ */
.account-toast-region {
  position: fixed;
  top: var(--space-5, 1.25rem);
  right: var(--space-5, 1.25rem);
  z-index: 10001;
  display: grid;
  gap: .5rem;
  width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}

.account-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  align-items: start;
  border-radius: var(--radius-lg, .5rem);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1));
  padding: .75rem .9rem;
  background: var(--color-white, #fff);
  color: var(--color-gray-900, #111827);
  animation: account-toast-in 180ms ease-out;
}

.account-toast.is-hiding {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 250ms ease, transform 250ms ease;
}

.account-toast__message {
  font-size: var(--font-size-sm, .875rem);
  line-height: 1.35;
  color: inherit;
}

.account-toast__close {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md, .375rem);
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-toast--error {
  border-color: rgba(239, 68, 68, .25);
  background: #fef2f2;
  color: #991b1b;
}

.account-toast--info {
  border-color: rgba(59, 130, 246, .25);
  background: #eff6ff;
  color: #1e40af;
}

.account-toast--success {
  border-color: rgba(16, 185, 129, .25);
  background: #ecfdf5;
  color: #065f46;
}

@keyframes account-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== Review body readability ========== */
/* Preserve the writer's line breaks (bodies are stored as plain text with
   \n) and keep long words/URLs from blowing out the card layout. Applies
   to every review surface: /reviews, profile reviews tab, /account/reviews. */
.review-card__text,
.profile-review__text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Generic long-text clamp with a Read more / Read less toggle.
   Elements with [data-clamp-text] get this class from script.js
   (initTextClamps); the toggle button is only injected when the
   content actually overflows the clamped box. */
.clamp-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp-lines, 6);
  overflow: hidden;
}

.clamp-text.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.clamp-text__toggle {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.clamp-text__toggle:hover,
.clamp-text__toggle:focus-visible {
  text-decoration: underline;
}

/* Inline cooldown notice under the (disabled) Write a Review button. */
.profile-reviews-cooldown {
  margin: .5rem 0 0;
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

/* ========================================
   ACTIVITY SIGNALS (platform-wide layer)
   Shared badge vocabulary rendered by
   partials/activity-badges.blade.php - see
   warp/ACTIVITY/SIGNALS.md for the contract.
   ======================================== */
.activity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
}

.activity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* Pulsing live dot (shared by the online badge, activity lines and
   strip headers). */
.activity-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  flex-shrink: 0;
  display: inline-block;
  animation: activity-pulse 2s ease-in-out infinite;
}

@keyframes activity-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25); }
  50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .activity-badge__dot { animation: none; }
}

.activity-badge--online-now {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.activity-badge--fast-responder {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.activity-badge--trending {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-dark);
}

.activity-badge--new-today {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.activity-badge--active-today {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* ========================================
   MARKETPLACE LANDING HUB
   (realtime social marketplace homepage)
   ======================================== */

/* Hero activity line: live counters under the webshop subtitle. */
.mk-activity-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.mk-activity-line__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Inline post CTA under the hero search. */
.mk-hero-cta {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
}

/* ── Popular categories rail (scroll-snap + arrow buttons) ── */
.mk-rail {
  margin-bottom: var(--space-8);
}

.mk-rail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.mk-rail__header .section-title {
  margin-bottom: var(--space-4);
}

.mk-rail__nav {
  display: flex;
  gap: var(--space-2);
}

.mk-rail__btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mk-rail__btn:hover:not(:disabled) {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.mk-rail__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.mk-rail__track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mk-rail__track::-webkit-scrollbar {
  display: none;
}

/* Category tile inside the rail. */
.mk-tile {
  flex: 0 0 180px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.mk-tile:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.mk-tile__media {
  display: block;
  height: 110px;
  background: var(--color-gray-100);
  position: relative;
}

.mk-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mk-tile__letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary-dark) 100%);
}

.mk-tile__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
}

.mk-tile__name {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-tile__count {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.mk-tile__online {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #047857;
}

/* ── Listing row (timeline suggestions pattern) ── */
.mk-row {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.mk-row:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

.mk-row__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  text-decoration: none;
}

.mk-row__thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.mk-row__thumb--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-white);
  background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary-dark) 100%);
}

.mk-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mk-row__title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.mk-row__meta i {
  color: var(--brand-primary);
  margin-right: 2px;
}

/* ── Activity strips (available now / trending) ── */
.mk-strip {
  margin-bottom: var(--space-8);
}

.mk-strip .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mk-strip__dot {
  width: 10px;
  height: 10px;
}

.mk-strip__flame {
  color: var(--brand-primary);
}

.mk-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 767px) {
  .mk-strip__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Per-category blocks (pornomarkt pattern) ── */
.mk-blocks-section {
  margin-bottom: var(--space-8);
}

.mk-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .mk-blocks {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mk-block {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.mk-block__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.mk-block__title {
  font-size: var(--font-size-lg);
  margin: 0;
}

.mk-block__title a {
  color: var(--color-gray-900);
  text-decoration: none;
}

.mk-block__title a:hover {
  color: var(--brand-primary);
}

.mk-block__all {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
  white-space: nowrap;
}

.mk-block__all:hover {
  text-decoration: underline;
}

.mk-block__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mk-block__subs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gray-100);
}

.mk-block__sub {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.mk-block__sub:hover {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-dark);
}

.mk-block__sub-count {
  color: var(--color-gray-400);
}

/* ── Results head: title + sort chips ── */
.mk-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.mk-results-head .section-title {
  margin-bottom: var(--space-4);
}

.mk-sort {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.mk-sort__chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.mk-sort__chip:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.mk-sort__chip.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--color-white);
}

/* ── RC polish: category tiles as marketplace entry points ── */
/* Slightly wider tiles with a media zoom on hover, an online dot pinned
   to the photo and a count pill — the rail should read as "doors into
   the marketplace", not as thumbnails. */
.mk-tile {
  flex-basis: 200px;
}

.mk-tile__media {
  overflow: hidden;
}

.mk-tile__media img {
  transition: transform var(--transition-normal);
}

.mk-tile:hover .mk-tile__media img {
  transform: scale(1.06);
}

.mk-tile__body {
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-4);
}

.mk-tile__count {
  font-weight: 600;
}

/* ── RC polish: keyboard focus affordance (same convention as .btn) ── */
.mk-tile:focus-visible,
.mk-row__link:focus-visible,
.mk-sort__chip:focus-visible,
.mk-block__sub:focus-visible,
.mk-block__all:focus-visible,
.mk-block__title a:focus-visible,
.mk-rail__btn:focus-visible,
.category-tab:focus-visible,
.product-card__preview:focus-visible,
.product-card__title a:focus-visible,
.marketplace-detail__categories .tag:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ── RC polish: chips — consistent pills, comfortable touch targets ── */
.mk-sort__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
}

.product-card__chip {
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-200);
}

.mk-block__sub {
  padding: var(--space-1) var(--space-3);
  min-height: 28px;
}

/* ── Marketplace search form: reuse the shared homepage filterbar ── */
body[data-page="marketplace-landing"] .webshop-search {
  max-width: none;
}

body[data-page="marketplace-landing"] .mk-search-form {
  display: block;
  width: 100%;
}

body[data-page="marketplace-landing"] .mk-search-form .filterbar {
  position: relative;
  top: auto;
  z-index: 20;
  padding: var(--space-3);
  border: 1px solid var(--color-gray-200);
  box-shadow: none;
}

body[data-page="marketplace-landing"] .mk-search-form .filterbar__row--primary {
  align-items: stretch;
}

body[data-page="marketplace-landing"] .mk-search-form .filterbar__search {
  flex: 1 1 240px;
  min-width: min(240px, 100%);
}
body[data-page="marketplace-landing"] .mk-search-form .filterbar__search input {
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 20px + var(--space-2));
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

body[data-page="marketplace-landing"] .mk-search-form__submit {
  min-height: 44px;
  align-self: stretch;
  white-space: nowrap;
}

body[data-page="marketplace-landing"] .mk-search-form .filterbar__more {
  margin-top: var(--space-3);
}

body[data-page="marketplace-landing"] .mk-search-form .accordion-more {
  margin-top: 0;
  padding: var(--space-3);
}

body[data-page="marketplace-landing"] .mk-search-form .more-filters {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

body[data-page="marketplace-landing"] .mk-search-form .accordion-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: 0;
}

body[data-page="marketplace-landing"] .mk-search-form .search-field,
body[data-page="marketplace-landing"] .mk-search-form .form-fancy-select {
  min-width: 0;
  width: 100%;
}

body[data-page="marketplace-landing"] .mk-search-form .form-fancy-select {
  position: relative;
  flex: 0 0 auto;
}

body[data-page="marketplace-landing"] .mk-search-form .form-fancy-select .filterbar__selectbox-input {
  cursor: pointer;
}
body[data-page="marketplace-landing"] .mk-search-form .filterbar__selectbox-option.is-active {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-dark);
  font-weight: 600;
}

body[data-page="marketplace-landing"] .mk-search-form .filterbar__selectbox-option.is-active::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700;
}

body[data-page="marketplace-landing"] .mk-search-form .form-fancy-select:has(select:focus-visible) .filterbar__selectbox-input {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(253, 145, 24, 0.2);
}

body[data-page="marketplace-landing"] fieldset.mk-search-form__range {
  margin: 0;
  padding: 0;
  border: 0;
}
body[data-page="marketplace-landing"] fieldset.mk-search-form__range .filterbar__controls {
  min-width: 0;
  width: 100%;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

body[data-page="marketplace-landing"] .mk-search-form__num {
  min-width: 0;
  width: 0;
  max-width: none;
  flex: 1 1 0;
}

body[data-page="marketplace-landing"] .filter-bar {
  padding: 0;
  background: transparent;
  box-shadow: none;
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  body[data-page="marketplace-landing"] .mk-search-form .accordion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body[data-page="marketplace-landing"] .webshop-header {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-xl);
  }

  body[data-page="marketplace-landing"] .webshop-title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-2xl);
  }

  body[data-page="marketplace-landing"] .webshop-subtitle {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-base);
  }

  body[data-page="marketplace-landing"] .mk-search-form .filterbar {
    padding: var(--space-2);
  }

  body[data-page="marketplace-landing"] .mk-search-form .filterbar__row--primary {
    gap: var(--space-2);
  }
  body[data-page="marketplace-landing"] .mk-search-form .filterbar__search input,
  body[data-page="marketplace-landing"] .mk-search-form .filterbar__selectbox-input {
    font-size: var(--font-size-base);
  }

  body[data-page="marketplace-landing"] .mk-search-form .filterbar__search,
  body[data-page="marketplace-landing"] .mk-search-form__submit {
    flex: 1 1 100%;
    width: 100%;
  }

  body[data-page="marketplace-landing"] .mk-search-form .accordion-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="marketplace-landing"] .mk-hero-cta {
    margin-top: var(--space-3);
  }
  body[data-page="marketplace-landing"] .filter-section {
    margin-bottom: var(--space-4);
  }

  body[data-page="marketplace-landing"] .filter-bar,
  body[data-page="marketplace-landing"] .breadcrumbs {
    margin-bottom: 0;
  }

  body[data-page="marketplace-landing"] main.container.mt-8 {
    margin-top: var(--space-4);
  }
}

/* ── RC polish: results empty state (conversion point, not a dead end) ── */
.mk-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--color-white);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-xl);
}

.mk-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--brand-primary-soft, rgba(253, 145, 24, 0.12));
  color: var(--brand-primary);
}

.mk-empty__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

.mk-empty__body {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  margin: 0;
  max-width: 420px;
}

/* ── RC polish: detail action row (was inline styles) ── */
.marketplace-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ── RC polish: sidebar post CTA spacing (was an inline style) ── */
.mk-post-btn {
  margin-top: var(--space-3);
}

/* ── RC polish: honor reduced-motion for marketplace lift/zoom effects ── */
@media (prefers-reduced-motion: reduce) {
  .mk-tile,
  .mk-tile__media img,
  .mk-row,
  .product-card,
  .product-card__img,
  .category-tab {
    transition: none;
  }

  .mk-tile:hover,
  .product-card:hover,
  .category-tab:hover {
    transform: none;
  }

  .mk-tile:hover .mk-tile__media img,
  .product-card:hover .product-card__img {
    transform: none;
  }
}

/* ========== TPS-212: guest audience chooser ("Wie wil je zien?") ========== */
.audience-chooser {
  margin-top: var(--space-6);
}

.audience-chooser__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-3);
}

.audience-chooser__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Slightly larger than the list/grid/map toggles (.btn--sm). */
.audience-chooser__option {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-base);
  border-radius: var(--radius-lg);
  min-height: 44px;
}

/* Inactive: white, subtle light-grey border, dark text - same language as
   the list/grid/map toggles (.viewtoggles .btn--secondary). Scoped so the
   generic grey .btn--secondary rules never apply here. */
.audience-chooser__option.btn--secondary {
  background: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}

.audience-chooser__option.btn--secondary:hover:not(:disabled) {
  background: var(--color-gray-50);
  color: var(--color-gray-900);
  border-color: var(--color-gray-400);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Selected: orange background, white text. */
.audience-chooser__option.btn--primary,
.audience-chooser__option.is-selected {
  background: var(--brand-primary);
  color: var(--color-white);
  border: 1px solid var(--brand-primary);
}

.audience-chooser__option.btn--primary:hover:not(:disabled) {
  background: var(--brand-primary-hover);
  color: var(--color-white);
  border-color: var(--brand-primary-hover);
}

.audience-chooser__option:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.audience-chooser[aria-busy="true"] .audience-chooser__option {
  cursor: progress;
}

@media (max-width: 640px) {
  .audience-chooser {
    margin-top: var(--space-4);
  }

  .audience-chooser__title {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-2);
  }

  /* Three equal columns; Stellen and Alles take normal cells on the second
     row (same width as the first three, never stretched). */
  .audience-chooser__options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .audience-chooser__option {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    min-width: 0;
    white-space: normal;
  }
}

/* TPS-215: creator-image label on shop previews. Shown when a product has no
   preview of its own and the creator's public profile cover is used, so it is
   never mistaken for a product preview. */
.product-detail__media {
  position: relative;
}

.shop-preview-label {
  position: absolute;
  left: var(--space-2, 0.5rem);
  bottom: var(--space-2, 0.5rem);
  z-index: 2;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-md, 0.375rem);
  background: rgba(17, 24, 39, 0.72);
  color: var(--color-white);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.3;
  pointer-events: none;
}