/* ==========================================================
   GMABS Business Directory — Modern Greek Island theme
   Mobile-first, minimalist, powerful
   ========================================================== */

:root {
  /* Aegean palette */
  --aegean-900: #0a2540;
  --aegean-800: #0d3a6b;
  --aegean-700: #0d47a1;
  --aegean-600: #1565c0;
  --aegean-500: #1e88e5;
  --aegean-400: #5e92f3;
  --aegean-100: #e3f0fb;
  --aegean-50:  #f4f9fd;

  --whitewash:  #ffffff;
  --shell:      #faf7f2;
  --sand:       #f3ede4;

  --ink:        #0a1f3d;
  --ink-soft:   #44546a;
  --muted:      #8a96a8;
  --line:       #e6ecf3;
  --line-soft:  #f1f4f8;

  --gold:       #c9a55a;
  --coral:      #e8736a;
  --leaf:       #2f9e7a;

  --shadow-sm:  0 1px 2px rgba(10,37,64,.06);
  --shadow-md:  0 6px 20px -8px rgba(10,37,64,.18);
  --shadow-lg:  0 24px 48px -20px rgba(10,37,64,.25);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --container: 1180px;
  --header-h:  64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--whitewash);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  /* MOBILE BLEED PROTECTION: prevents any element from forcing the page wider than the viewport */
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* Fixed header takes the element out of flow — push body content down to compensate */
body {
  padding-top: var(--header-h);
}
/* Smooth scroll for anchor jumps so they don't get hidden behind the fixed header */
html {
  scroll-padding-top: calc(var(--header-h) + 12px);
}

html { width: 100%; }
body { min-width: 100%; }

/* Headers and footers always span the full viewport, edge-to-edge */
.site-header,
.site-footer,
.bottom-nav {
  width: 100%;
  max-width: 100vw;
  left: 0;
  right: 0;
}

img { max-width: 100%; display: block; }
a { color: var(--aegean-700); text-decoration: none; }
a:hover { color: var(--aegean-600); }

/* ==========================================================
   GLOBAL MOBILE BLEED PROTECTION
   Belt-and-braces rules to ensure NOTHING overflows on phones.
   ========================================================== */

/* Word-break long unbroken strings (URLs, IDs, etc.) on mobile */
@media (max-width: 720px) {
  p, span, strong, td, th, li, h1, h2, h3, h4, label {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* All wide tables become horizontally scrollable INSIDE their container,
     instead of forcing the page wider. User can swipe-scroll the table. */
  .admin-table,
  .dash-card table,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }
  /* Add a subtle visual hint that table scrolls */
  .admin-table::after {
    content: '';
    display: block;
    width: 1px;
    height: 1px;
  }

  /* Any KPI / stat grids: stack to single column when tight */
  .kpi-grid,
  .impact-grid,
  .team-grid,
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Container padding tighter on small screens */
  .container { padding-left: 16px; padding-right: 16px; }

  /* Safety: dash-side and dash-main can never exceed viewport width on mobile */
  .dash-shell,
  .dash-layout,
  .dash-side,
  .dash-main,
  .dash-panel {
    max-width: 100%;
    min-width: 0;
  }

  /* Dashboard hero: tighter padding, smaller heading, force buttons to stack on small screens */
  .dash-hero {
    padding: 22px 18px 24px !important;
    border-radius: 18px !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .dash-hero h2 {
    font-size: 1.4rem !important;
    line-height: 1.25;
  }
  .dash-hero p {
    font-size: .88rem !important;
    line-height: 1.45;
  }
  .dash-hero .actions {
    flex-direction: column !important;
    align-items: stretch;
    width: 100%;
  }
  .dash-hero .actions .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    font-size: .88rem;
    padding: 10px 14px;
  }

  /* Site header on tight screens: avoid wrapping to second line for the brand */
  .site-header .brand small {
    font-size: .68rem;
    letter-spacing: .04em;
  }
  .site-header .container.nav {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Dash cards: tighter padding so content has more breathing room */
  .dash-card {
    padding: 18px !important;
    border-radius: 16px !important;
  }
  .dash-card h3 { font-size: 1.05rem !important; }

  /* Approval cards (Needs your attention): stack to single column on mobile */
  .approval-card {
    grid-template-columns: 50px 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
    align-items: start !important;
  }
  .approval-card .thumb {
    width: 50px !important;
    height: 50px !important;
  }
  .approval-card .acts {
    grid-column: 1 / -1 !important;
    margin-top: 6px;
    flex-direction: row;
    gap: 6px;
  }
  .approval-card .acts .btn {
    flex: 1;
    min-width: 0;
    padding: 8px 10px !important;
    font-size: .78rem !important;
    white-space: nowrap;
  }

  /* Dash hero: kill the decorative ::after circle on small screens
     (it's positioned absolutely with right: -60px which can cause layout issues) */
  .dash-hero::after {
    display: none;
  }

  /* KPI grid: when we have an oddly-sized parent, ensure even spacing */
  .kpi-grid {
    gap: 10px !important;
  }
  .kpi {
    padding: 14px !important;
  }
  .kpi .num {
    font-size: 1.6rem !important;
    line-height: 1.1;
  }
  .kpi .lbl {
    font-size: .72rem !important;
  }
  .kpi .delta {
    font-size: .72rem !important;
  }

  /* All quick action button rows stack vertically and full-width */
  .dash-card .btn {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  /* Even tighter — single-column stat grids on small phones */
  .kpi-grid,
  .impact-grid,
  .team-grid {
    grid-template-columns: 1fr !important;
  }
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 5.5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; color: var(--ink-soft); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aegean-600);
  font-weight: 600;
  margin-bottom: 14px;
}

/* ===== Greek key meander (subtle accent) ===== */
.meander {
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' fill='none'><path d='M0 13h6V3h6v6h-3v1h6V3h6v6h-3v1h6V3h6v6h-3v1h6V3h6v6h-3v1h6V13' stroke='%231565c0' stroke-width='1' opacity='.35'/></svg>");
  background-repeat: repeat-x;
  background-size: 60px 14px;
  opacity: .8;
}

/* ============== Header / Nav ============== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--aegean-600), var(--aegean-800));
  display: grid; place-items: center;
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: .95rem;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
.brand small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-top: -2px;
}

.nav-links {
  display: none;
  gap: 32px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 500;
  position: relative;
}
.nav-links a:hover { color: var(--aegean-600); }
.nav-links a.active { color: var(--aegean-700); }
.nav-links a.active::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px; background: var(--aegean-600);
  border-radius: 2px;
}

.nav-actions { display: flex; align-items: center; gap: 8px; }

.menu-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: none; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
  color: var(--ink);
}
.menu-toggle svg { width: 20px; height: 20px; }

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-h); left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 16px 20px 24px;
  z-index: 55;
  box-shadow: var(--shadow-lg);
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; padding: 0; margin: 0 0 16px; }
.mobile-menu li a {
  display: block;
  padding: 14px 4px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu .btn { width: 100%; justify-content: center; }

@media (min-width: 880px) {
  .nav-links { display: flex; }
  .menu-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ============== Buttons ============== */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--aegean-600);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(13,71,161,.55);
}
.btn-primary:hover { background: var(--aegean-700); color: #fff; transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--aegean-600); color: var(--aegean-700); }
.btn-light {
  background: #fff;
  color: var(--aegean-700);
  border-color: var(--line);
}
.btn-light:hover { border-color: var(--aegean-600); }
.btn-lg { padding: 14px 26px; font-size: 1rem; }

/* ============== Hero ============== */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,37,64,.45) 0%, rgba(10,37,64,.65) 100%),
    url("https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?w=1800&q=80&auto=format&fit=crop") center/cover no-repeat,
    linear-gradient(180deg, var(--aegean-500), var(--aegean-800));
  z-index: -1;
}
.hero-inner {
  padding: 80px 0 100px;
  text-align: center;
  width: 100%;
}
.hero h1 {
  color: #fff;
  margin-bottom: 18px;
  text-shadow: 0 4px 24px rgba(0,0,0,.25);
}
.hero h1 em {
  font-style: italic;
  color: #ffe9b8;
}
.hero-sub {
  color: rgba(255,255,255,.92);
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: 620px;
  margin: 0 auto 36px;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
}

/* Search strip */
.search-strip {
  background: #fff;
  border-radius: 18px;
  padding: 10px;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.search-strip .field {
  display: flex; align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--shell);
}
.search-strip .field svg { width: 18px; height: 18px; color: var(--aegean-600); flex-shrink: 0; }
.search-strip input,
.search-strip select {
  border: none; outline: none;
  background: transparent;
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.search-strip select { cursor: pointer; }
.search-strip .btn { width: 100%; justify-content: center; padding: 13px 24px; }

@media (min-width: 720px) {
  .search-strip {
    grid-template-columns: 1.4fr 1fr 1fr auto;
    padding: 8px;
  }
  .search-strip .field { background: transparent; padding: 6px 14px; }
  .search-strip .field + .field { border-left: 1px solid var(--line); }
  .search-strip .btn { width: auto; padding: 12px 24px; }
}

/* ============== Sections ============== */
section { padding: 64px 0; }
@media (min-width: 768px) { section { padding: 88px 0; } }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.section-head p { font-size: 1.05rem; }

.bg-shell { background: var(--shell); }
.bg-aegean {
  background: linear-gradient(160deg, var(--aegean-700), var(--aegean-900));
  color: #fff;
}
.bg-aegean h2, .bg-aegean h3 { color: #fff; }
.bg-aegean p { color: rgba(255,255,255,.85); }
.bg-aegean .eyebrow { color: #ffe9b8; }

/* ============== Category grid ============== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .cat-grid { grid-template-columns: repeat(8, 1fr); } }

.cat-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: var(--ink);
}
.cat-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--aegean-400);
  color: var(--aegean-700);
}
.cat-tile .ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--aegean-50);
  color: var(--aegean-700);
  border-radius: 12px;
}
.cat-tile .ico svg { width: 22px; height: 22px; }
.cat-tile .label { font-size: .85rem; font-weight: 600; }

/* ============== Listing cards ============== */
.listings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) { .listings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .listings-grid { grid-template-columns: repeat(3, 1fr); } }

.listing-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--aegean-400);
}
.listing-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
  background-color: var(--aegean-100);
}
.listing-badges {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 6px;
}
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .03em;
  background: rgba(255,255,255,.95);
  color: var(--aegean-800);
  backdrop-filter: blur(4px);
}
.badge.featured { background: var(--gold); color: #4d3a09; }
.badge.online { background: var(--leaf); color: #fff; }
.bookmark-btn {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: none; cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink-soft);
  transition: color .2s ease, transform .15s ease;
}
.bookmark-btn:hover { color: var(--coral); transform: scale(1.08); }
.bookmark-btn.active { color: var(--coral); }
.bookmark-btn svg { width: 18px; height: 18px; }

.listing-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.listing-cat {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.listing-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; font-weight: 600;
  margin: 6px 0 4px;
  color: var(--ink);
}
.listing-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: .82rem; color: var(--ink-soft);
  margin-bottom: 10px;
}
.listing-meta .star { color: var(--gold); }
.listing-desc {
  font-size: .9rem; color: var(--ink-soft);
  margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.listing-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: .82rem; color: var(--muted);
}

/* ============== Stats strip ============== */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: center;
}
@media (min-width: 720px) { .stats-strip { grid-template-columns: repeat(4, 1fr); } }
.stat .num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  color: #fff;
}
.stat .lbl {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* ============== Filters / Directory ============== */
.directory-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 32px 0 80px;
}
@media (min-width: 960px) {
  .directory-layout { grid-template-columns: 280px 1fr; gap: 36px; padding-top: 40px; }
}
.filters {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.filter-group { margin-bottom: 22px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group h4 {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 600;
}
.checks { display: flex; flex-direction: column; gap: 10px; }
.check {
  display: flex; align-items: center; gap: 10px;
  font-size: .92rem; color: var(--ink); cursor: pointer;
}
.check input { accent-color: var(--aegean-600); width: 16px; height: 16px; }
.check .count { margin-left: auto; color: var(--muted); font-size: .8rem; }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.toolbar .count { color: var(--ink-soft); font-size: .92rem; }
.toolbar select {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: .88rem;
  color: var(--ink);
  cursor: pointer;
}

.toggle-filters {
  display: inline-flex;
  gap: 6px; align-items: center;
}
@media (min-width: 960px) { .toggle-filters { display: none; } }
@media (max-width: 959px) {
  .filters { display: none; position: relative; top: 0; }
  .filters.open { display: block; }
}

/* ============== Business detail ============== */
.detail-hero {
  position: relative;
  height: 280px;
  background-size: cover; background-position: center;
  background-color: var(--aegean-100);
}
.detail-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,37,64,0) 40%, rgba(10,37,64,.55));
}
.detail-head {
  position: relative;
  margin-top: -60px;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-md);
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .detail-head { grid-template-columns: 1fr auto; align-items: center; padding: 32px; }
}
.detail-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: .9rem; color: var(--ink-soft); margin-top: 6px; }
.detail-meta .dot { color: var(--muted); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.detail-grid {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  margin-top: 36px;
}
@media (min-width: 960px) { .detail-grid { grid-template-columns: 1fr 360px; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.card h3 { margin-top: 0; }

.info-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .95rem;
}
.info-row:last-child { border-bottom: none; }
.info-row .ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--aegean-50); color: var(--aegean-700);
  display: grid; place-items: center; flex-shrink: 0;
}
.info-row .ico svg { width: 18px; height: 18px; }
.info-row .lbl { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.info-row .val { color: var(--ink); }

#map { height: 280px; border-radius: var(--radius); overflow: hidden; }

/* Reviews */
.reviews-summary {
  display: flex; align-items: center; gap: 24px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.reviews-summary .big {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--ink);
}
.review {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.review:last-of-type { border-bottom: none; }
.review-head {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 8px;
}
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--aegean-100);
  color: var(--aegean-800);
  display: grid; place-items: center;
  font-weight: 600; font-size: .9rem;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
/* Larger avatars used in dash-side / shopper-account profile blocks */
.dash-side .avatar,
.who .avatar {
  width: 44px; height: 44px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
.review-author { font-weight: 600; color: var(--ink); }
.review-date { color: var(--muted); font-size: .82rem; }
.stars { color: var(--gold); font-size: .9rem; letter-spacing: 2px; }

.owner-reply {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--aegean-50);
  border-left: 3px solid var(--aegean-600);
  border-radius: 8px;
  font-size: .9rem;
}
.owner-reply strong { color: var(--aegean-800); display: block; margin-bottom: 4px; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }

.review-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.review-form textarea,
.review-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: inherit;
  font-size: .95rem;
  background: #fff;
  color: var(--ink);
  margin-bottom: 12px;
}
.review-form textarea { min-height: 100px; resize: vertical; }
.star-input { display: flex; gap: 4px; margin-bottom: 14px; font-size: 1.4rem; color: var(--line); cursor: pointer; }
.star-input span:hover, .star-input span.active { color: var(--gold); }

/* ============== Pricing ============== */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 760px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 32px 26px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.price-card.featured {
  background: linear-gradient(180deg, var(--aegean-700) 0%, var(--aegean-900) 100%);
  color: #fff;
  border: none;
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.price-card.featured h3, .price-card.featured .price { color: #fff; }
.price-card.featured .price-list li { color: rgba(255,255,255,.92); }
.price-card.featured .price-list li::before { color: #ffe9b8; }

.price-tag-pop {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold); color: #4d3a09;
  font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}

.price-card .name {
  font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.price-card.featured .name { color: #ffe9b8; }
.price-card .tier {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  margin: 0 0 4px;
}
.price-card .tagline {
  font-size: .9rem;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.price-card.featured .tagline { color: rgba(255,255,255,.82); }
.price-card .price {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.price-card .price small {
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}
.price-card.featured .price small { color: rgba(255,255,255,.7); }

.price-list {
  list-style: none; padding: 0; margin: 22px 0 28px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: .92rem;
  color: var(--ink-soft);
}
.price-list li {
  position: relative; padding-left: 26px;
}
.price-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--aegean-600); font-weight: 700;
}
.price-card .btn { margin-top: auto; width: 100%; }

.billing-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 36px;
}
.billing-toggle button {
  border: none; background: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
}
.billing-toggle button.active {
  background: var(--aegean-600);
  color: #fff;
}

/* ============== About ============== */
.about-hero {
  background: linear-gradient(160deg, var(--aegean-700), var(--aegean-900));
  color: #fff;
  padding: 80px 0 60px;
  text-align: center;
}
.about-hero h1 { color: #fff; }
.about-hero p { color: rgba(255,255,255,.88); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }

.about-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}
@media (min-width: 880px) { .about-section { grid-template-columns: 1fr 1fr; gap: 60px; } }
.about-section.reverse > :first-child { order: 2; }
@media (max-width: 879px) { .about-section.reverse > :first-child { order: 0; } }

.about-img {
  aspect-ratio: 4 / 5;
  background-size: cover; background-position: center;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.impact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 28px;
}
@media (min-width: 720px) { .impact-grid { grid-template-columns: repeat(3, 1fr); } }
.impact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-align: center;
}
.impact-card .num {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--aegean-700);
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}
.impact-card .lbl { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.impact-card p { margin: 12px 0 0; font-size: .92rem; }

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 36px;
}
@media (min-width: 720px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }

.team-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-align: center;
}
.team-card .photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--aegean-100), var(--aegean-400));
  display: grid; place-items: center;
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--aegean-800);
  font-weight: 600;
}
.team-card .name { font-family: 'Playfair Display', serif; font-size: 1.15rem; margin: 0 0 4px; color: var(--ink); }
.team-card .role { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--aegean-600); font-weight: 600; }
.team-card p { margin-top: 12px; font-size: .9rem; }

/* ============== Footer ============== */
.site-footer {
  background: var(--aegean-900);
  color: #cfd8e4;
  padding: 60px 0 30px;
  margin-top: 0;
}
.site-footer h4 {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
.footer-grid a { color: #cfd8e4; }
.footer-grid a:hover { color: #fff; }
.footer-grid p { color: #97a4b6; font-size: .9rem; }
.footer-grid .brand { color: #fff; }
.footer-grid .brand small { color: #97a4b6; }
.footer-bot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: .82rem;
  color: #97a4b6;
  text-align: center;
}
@media (min-width: 720px) { .footer-bot { flex-direction: row; justify-content: space-between; text-align: left; } }

/* ============== Forms (signup) ============== */
.auth-wrap {
  max-width: 520px;
  margin: 60px auto;
  padding: 0 20px;
}
.auth-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 36px 30px;
  box-shadow: var(--shadow-md);
}
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: inherit;
  font-size: .95rem;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--aegean-500);
  box-shadow: 0 0 0 3px rgba(30,136,229,.15);
}
.form-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.help { font-size: .8rem; color: var(--muted); margin-top: 4px; }

.steps {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  font-size: .8rem;
  color: var(--muted);
}
.steps .step {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  border-bottom: 2px solid var(--line);
}
.steps .step.active { color: var(--aegean-700); border-bottom-color: var(--aegean-600); font-weight: 600; }

/* ============== Toast ============== */
.toast {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: .9rem;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  transition: transform .3s ease;
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ============== Dashboard ============== */
.dash-shell {
  background: var(--shell);
  min-height: calc(100vh - var(--header-h));
  padding: 24px 0 80px;
}
.dash-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 960px) {
  .dash-layout { grid-template-columns: 240px 1fr; gap: 32px; }
}

/* Side nav */
.dash-side {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  align-self: start;
}
.dash-side .who {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.dash-side .who .avatar {
  width: 44px; height: 44px;
  font-size: 1rem;
}
.dash-side .who strong { display: block; font-size: .95rem; }
.dash-side .who span { font-size: .78rem; color: var(--muted); }
.dash-nav {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-nav::-webkit-scrollbar { display: none; }
@media (min-width: 960px) {
  .dash-nav { flex-direction: column; gap: 2px; overflow: visible; }
}
.dash-nav button {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 10px;
  text-align: left;
  font-family: inherit;
  font-size: .9rem;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.dash-nav button:hover { background: var(--aegean-50); color: var(--aegean-700); }
.dash-nav button.active { background: var(--aegean-600); color: #fff; font-weight: 600; }
.dash-nav button.active svg { color: #fff; }
.dash-nav svg { width: 18px; height: 18px; color: var(--aegean-600); flex-shrink: 0; }
.dash-nav button .badge-tiny {
  margin-left: auto;
  font-size: .7rem;
  background: var(--coral);
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.dash-nav button.active .badge-tiny { background: rgba(255,255,255,.25); }

.dash-main { min-width: 0; } /* prevent grid blowout */
.dash-panel { display: none; }
.dash-panel.active { display: block; }

.dash-hero {
  background: linear-gradient(160deg, var(--aegean-700), var(--aegean-900));
  color: #fff;
  padding: 28px 28px 32px;
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.dash-hero::after {
  content: ""; position: absolute;
  right: -60px; top: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,233,184,.18), transparent 70%);
}
@media (min-width: 720px) { .dash-hero { grid-template-columns: 1fr auto; } }
.dash-hero h2 {
  color: #fff;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 0 0 6px;
}
.dash-hero p { color: rgba(255,255,255,.85); margin: 0; font-size: .95rem; }
.dash-hero .plan-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.18);
  color: #ffe9b8;
  width: fit-content;
  margin-bottom: 10px;
}
.dash-hero .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.kpi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-bottom: 24px;
}
@media (min-width: 720px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.kpi {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.kpi .lbl { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kpi .num {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem; font-weight: 700;
  margin: 6px 0 4px;
  color: var(--ink);
  line-height: 1;
}
.kpi .delta { font-size: .8rem; font-weight: 600; }
.kpi .delta.up { color: var(--leaf); }
.kpi .delta.down { color: var(--coral); }

.dash-cols {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 1100px) { .dash-cols { grid-template-columns: 2fr 1fr; } }

.dash-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.dash-card h3 { margin: 0 0 4px; font-size: 1.15rem; }
.dash-card .sub { font-size: .85rem; color: var(--muted); margin: 0 0 16px; }
.dash-card + .dash-card { margin-top: 24px; }

.review-item {
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
}
.review-item:first-of-type { border-top: none; padding-top: 0; }
.review-item .review-head { margin-bottom: 8px; }
.reply-box {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.reply-box textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .9rem;
  resize: vertical;
  min-height: 60px;
}
.reply-box .row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.reply-box .meta { font-size: .8rem; color: var(--muted); }

/* mini bar chart */
.bars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 140px; margin: 8px 0 4px;
}
.bars .bar {
  flex: 1;
  background: linear-gradient(180deg, var(--aegean-500), var(--aegean-700));
  border-radius: 6px 6px 0 0;
  min-height: 8px;
  position: relative;
  transition: opacity .2s ease;
}
.bars .bar:hover { opacity: .85; }
.bars-x {
  display: flex; justify-content: space-between;
  font-size: .7rem; color: var(--muted);
  letter-spacing: .04em;
}

/* photo manager grid */
.photo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 720px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.photo-tile {
  aspect-ratio: 1 / 1;
  background-size: cover; background-position: center;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.photo-tile.add {
  border: 2px dashed var(--line);
  background: var(--shell);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--muted);
  transition: border-color .2s, color .2s;
}
.photo-tile.add:hover { border-color: var(--aegean-500); color: var(--aegean-700); }
.photo-tile.add svg { width: 28px; height: 28px; }

/* subscription card */
.sub-card {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 720px) { .sub-card { grid-template-columns: 1fr auto; } }
.sub-card .meta { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.sub-card .price-now {
  font-family: 'Playfair Display', serif;
  font-size: 2rem; font-weight: 700;
  color: var(--aegean-700);
}

/* ============== Utility ============== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 16px; }
.mt-4 { margin-top: 32px; }

/* ============== Modal ============== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 31, 61, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  animation: fadeIn .2s ease;
}
.modal-backdrop.open { display: flex; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.modal {
  background: #fff;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp .25s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.modal-head {
  padding: 22px 24px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.modal-head h3 {
  margin: 0;
  font-size: 1.25rem;
  font-family: 'Playfair Display', serif;
}
.modal-head p { margin: 4px 0 0; font-size: .88rem; color: var(--ink-soft); }

.modal-close {
  width: 36px; height: 36px;
  border: none;
  background: var(--shell);
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: background .15s;
}
.modal-close:hover { background: var(--line); color: var(--ink); }

.modal-body { padding: 22px 24px; }
.modal-foot {
  padding: 14px 24px 22px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.gate-card {
  background: var(--aegean-50);
  border: 1px solid var(--aegean-100);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.gate-card .ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--aegean-600);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-weight: 700;
}
.gate-card strong { display: block; margin-bottom: 4px; color: var(--aegean-900); }
.gate-card p { margin: 0 0 10px; font-size: .88rem; }

/* ============== Bookmark nudge ============== */
.nudge-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  max-width: 460px;
  width: calc(100% - 40px);
  transition: transform .35s cubic-bezier(.2,.9,.2,1.1);
}
.nudge-banner.show { transform: translateX(-50%) translateY(0); }
.nudge-banner .heart {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), #e84d59);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.nudge-banner strong { display: block; font-size: .92rem; }
.nudge-banner p { margin: 2px 0 0; font-size: .8rem; color: var(--ink-soft); }
.nudge-banner .btn { white-space: nowrap; padding: 8px 14px; font-size: .85rem; flex-shrink: 0; }
.nudge-banner .close-x {
  border: none; background: none; cursor: pointer; color: var(--muted); padding: 0 0 0 4px; font-size: 1.2rem;
}

/* ============== Messaging ============== */
.thread-list {
  border-right: 1px solid var(--line-soft);
  max-height: 600px;
  overflow-y: auto;
}
.thread {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background .15s;
}
.thread:hover { background: var(--shell); }
.thread.active { background: var(--aegean-50); }
.thread.unread strong { color: var(--ink); }
.thread.unread::before {
  content: ""; width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aegean-600);
  margin-left: -4px;
  flex-shrink: 0;
}
.thread .avatar { flex-shrink: 0; }
.thread .preview { flex: 1; min-width: 0; }
.thread .preview strong { font-size: .9rem; display: block; margin-bottom: 2px; color: var(--ink-soft); }
.thread .preview p { margin: 0; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread .time { font-size: .72rem; color: var(--muted); flex-shrink: 0; }

.message-pane {
  display: flex;
  flex-direction: column;
  height: 600px;
  background: #fff;
}
.message-pane-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; gap: 12px; align-items: center;
}
.message-pane-body {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  background: var(--shell);
}
.message-pane-foot {
  padding: 12px 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.message-pane-foot textarea {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: .92rem;
  resize: none;
  min-height: 42px;
  max-height: 140px;
}
.bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 16px;
  margin-bottom: 8px;
  font-size: .9rem;
  line-height: 1.45;
  position: relative;
}
.bubble.them { background: #fff; color: var(--ink); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.bubble.me { background: var(--aegean-600); color: #fff; border-bottom-right-radius: 4px; margin-left: auto; }
.bubble + .bubble { margin-top: 0; }
.bubble .time { font-size: .7rem; opacity: .7; margin-top: 4px; display: block; }

.messages-layout {
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 760px) {
  .messages-layout { grid-template-columns: 320px 1fr; }
}
@media (max-width: 759px) {
  .thread-list { max-height: 240px; border-right: none; border-bottom: 1px solid var(--line-soft); }
  .message-pane { height: 480px; }
}

/* ============== Admin dashboard extras ============== */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.admin-table th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 600;
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
}
.admin-table td {
  padding: 14px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.admin-table td.tier {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-table td.tier.basic { color: var(--ink-soft); }
.admin-table td.tier.premium { color: var(--aegean-700); }
.admin-table td.tier.elite { color: var(--gold); }
.admin-table td.status .pill {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
}
.admin-table .pill.active { background: #d4f3e7; color: #0d6c4a; }
.admin-table .pill.pending { background: #fef0d4; color: #8a5a00; }
.admin-table .pill.suspended { background: #fbe4e1; color: #a14237; }
.admin-table .pill.trial { background: var(--aegean-100); color: var(--aegean-800); }
.admin-table tr:hover { background: var(--shell); }

.approval-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  align-items: center;
}
.approval-card .thumb {
  width: 64px; height: 64px;
  border-radius: 12px;
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.approval-card strong { display: block; margin-bottom: 2px; }
.approval-card span { font-size: .82rem; color: var(--ink-soft); }
.approval-card .acts { display: flex; gap: 6px; flex-wrap: wrap; }

.aux-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.aux-tabs button {
  border: none;
  background: none;
  padding: 12px 16px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.aux-tabs button.active { color: var(--aegean-700); border-bottom-color: var(--aegean-600); font-weight: 600; }

/* Saved businesses empty state */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink-soft);
}
.empty-state .ico {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--aegean-50);
  color: var(--aegean-700);
  display: grid; place-items: center;
  margin: 0 auto 14px;
  font-size: 1.6rem;
}

/* ============== MOBILE OPTIMISATION ============== */

/* iPhone safe-area handling */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* Larger tap targets on small screens */
@media (max-width: 720px) {
  .btn { padding: 12px 22px; min-height: 44px; }
  .btn-ghost, .btn-light, .btn-primary { min-height: 44px; }
  .nav-links a, .mobile-menu li a { padding-top: 16px; padding-bottom: 16px; }
  h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
  .hero-inner { padding: 60px 0 70px; }
  .hero { min-height: 70vh; }
  section { padding: 48px 0; }
  .container { padding: 0 16px; }
  /* Reduce shell radius on mobile so cards feel more native */
  .listing-card, .dash-card, .auth-card, .price-card { border-radius: 18px; }
}

/* ============== Mobile bottom nav ============== */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-top: 1px solid var(--line);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  z-index: 70;
  box-shadow: 0 -4px 20px -8px rgba(10,37,64,.12);
}
.bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 600px;
  margin: 0 auto;
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 4px;
  font-size: .68rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  position: relative;
}
.bottom-nav a svg {
  width: 22px; height: 22px;
  stroke-width: 1.8;
  transition: transform .15s ease;
}
.bottom-nav a.active {
  color: var(--aegean-700);
  font-weight: 600;
}
.bottom-nav a.active::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 3px;
  background: var(--aegean-600);
  border-radius: 0 0 4px 4px;
}
.bottom-nav a.active svg {
  color: var(--aegean-600);
  transform: scale(1.05);
}
.bottom-nav .badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  border: 2px solid #fff;
}
@media (max-width: 760px) {
  .bottom-nav { display: block; }
  /* Push content up so it doesn't get covered */
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  /* Hide ALL header CTAs on mobile (List your business, Sign in, Sign out, My account etc.)
     — the hamburger menu and bottom nav provide alternative paths */
  .site-header .nav-actions .btn { display: none; }
  /* Compact site header on mobile */
  .site-header { backdrop-filter: saturate(160%) blur(18px); }
  /* Brand text never wraps — keeps the header tidy */
  .site-header .brand > span:not(.brand-mark) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
  }
  .site-header .brand small {
    white-space: nowrap;
  }
}

/* ============== Map view on directory ============== */
.view-toggle {
  display: inline-flex;
  gap: 0;
  background: var(--shell);
  border-radius: 999px;
  padding: 4px;
  margin-left: auto;
}
.view-toggle button {
  border: none;
  background: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.view-toggle button.active {
  background: #fff;
  color: var(--aegean-700);
  box-shadow: var(--shadow-sm);
}
.view-toggle button svg { width: 14px; height: 14px; }

#directoryMap {
  height: 70vh;
  min-height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--aegean-50);
}
.map-popup {
  width: 240px;
}
.map-popup img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 8px;
}
.map-popup strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.map-popup .meta { font-size: .8rem; color: var(--ink-soft); margin-bottom: 8px; }

/* ============== Notification bell ============== */
.notif-wrap { position: relative; }
.notif-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink);
  position: relative;
}
.notif-btn:hover { border-color: var(--aegean-500); color: var(--aegean-700); }
.notif-btn svg { width: 18px; height: 18px; }
.notif-btn .dot {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--coral);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: grid; place-items: center;
  border: 2px solid #fff;
}
.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 80;
  display: none;
  overflow: hidden;
}
.notif-panel.open { display: block; animation: slideUp .2s ease; }
.notif-panel-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notif-panel-head strong { font-size: .95rem; }
.notif-panel-head a { font-size: .8rem; color: var(--aegean-700); }
.notif-panel-list { max-height: 380px; overflow-y: auto; }
.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background .12s ease;
}
.notif-item:hover { background: var(--shell); }
.notif-item.unread { background: var(--aegean-50); }
.notif-item.unread:hover { background: var(--aegean-100); }
.notif-item .ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.notif-item .body strong { display: block; font-size: .88rem; margin-bottom: 2px; }
.notif-item .body p { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.notif-item .body .when { font-size: .72rem; color: var(--muted); margin-top: 4px; }

/* ============== Elite polish ============== */
.elite-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg, var(--gold), #e0b96a);
  color: #4d3a09;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(201,165,90,.35);
}
.elite-badge::before { content: "★"; }
.elite-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--aegean-700);
  font-weight: 600;
}
.elite-verified svg { width: 16px; height: 16px; color: var(--gold); }

.video-header {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--aegean-900);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 18px;
}
.video-header iframe,
.video-header video {
  width: 100%; height: 100%;
  border: none;
  display: block;
}
.video-header .video-fallback {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  display: grid; place-items: center;
}
.video-header .play {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--aegean-900);
  border: none;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.video-header .play svg { width: 26px; height: 26px; margin-left: 3px; }

.accent-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.accent-swatch {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, border-color .15s ease;
}
.accent-swatch:hover { transform: scale(1.08); }
.accent-swatch.active { border-color: var(--ink); }
.accent-swatch.active::after {
  content: "✓";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

/* ============== Chat polish ============== */
.online-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  background: var(--leaf);
  border: 2px solid #fff;
  border-radius: 50%;
}
.thread .avatar, .message-pane-head .avatar { position: relative; }

.typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  padding: 12px 16px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
}
.typing-bubble span {
  width: 6px; height: 6px;
  background: var(--muted);
  border-radius: 50%;
  animation: typingDot 1.2s infinite;
}
.typing-bubble span:nth-child(2) { animation-delay: .15s; }
.typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.bubble.me .receipt {
  font-size: .68rem;
  opacity: .8;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bubble.me .receipt svg { width: 12px; height: 12px; }
.receipt.read { color: #a4d6f5; }

/* ============== Message delete + retention notice ============== */
.bubble {
  position: relative;
}
.bubble .msg-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--coral);
  font-size: 0.78rem;
  z-index: 2;
}
.bubble.me .msg-delete { right: auto; left: -6px; }
.bubble:hover .msg-delete { display: flex; }
.bubble .msg-delete:hover { background: var(--coral); color: #fff; }
.bubble .msg-delete svg { width: 12px; height: 12px; }

.thread { position: relative; }
.thread-actions {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  gap: 4px;
}
.thread:hover .thread-actions { display: flex; }
.thread-actions button {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink-soft);
  transition: all .15s ease;
}
.thread-actions button:hover {
  border-color: var(--coral);
  background: var(--coral);
  color: #fff;
}
.thread-actions button svg { width: 12px; height: 12px; }

/* Retention notice band */
.retention-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--aegean-50);
  border-bottom: 1px solid var(--aegean-100);
  font-size: .78rem;
  color: var(--aegean-800);
}
.retention-notice svg {
  width: 14px; height: 14px;
  color: var(--aegean-600);
  flex-shrink: 0;
}
.retention-notice strong { font-weight: 600; }

/* Bubble fade-out animation when deleted */
.bubble.deleting {
  opacity: 0;
  transform: scale(.85);
  transition: all .2s ease;
}
.thread.deleting {
  opacity: 0;
  transform: translateX(-30px);
  transition: all .25s ease;
}

/* ============== GMABS Verified tick ==============
   Small blue circle with white checkmark — appears next to every business name
   on listing cards and on the business detail page hero. Signals "this listing has
   been reviewed and approved by GMABS admin." Universal trust mark across the directory. */
.verified-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--aegean-600);
  color: #fff;
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.25);
  position: relative;
  top: -1px;
  cursor: help;
}
.verified-tick.lg {
  width: 24px; height: 24px;
}
.verified-tick.lg svg {
  width: 18px; height: 18px;
}

/* ============== Business logo (every tier gets one) ============== */
.biz-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: .92rem;
  color: #fff;
  letter-spacing: .04em;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.biz-logo.lg {
  width: 72px; height: 72px;
  font-size: 1.4rem;
  border-radius: 16px;
}
.listing-thumb .biz-logo {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  border: 2px solid rgba(255,255,255,.95);
}
.detail-head-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}