/* =====================================================================
   Accra Find — Design System
   Modern aesthetic: immersive photography, clean sans-serif display
   type, softly rounded cards, generous white space. No build step —
   plain CSS, safe for any GoDaddy shared hosting account.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------- */
:root {
    /* Brand palette, sampled from the Accra Find reference design */
    --forest-900: #101f18;
    --forest-800: #16281f;
    --forest-700: #1c3a2b;
    --forest-600: #244937;
    --forest-500: #2f5c46;

    --cream-100: #fdfbf6;
    --cream-200: #f8f3e8;
    --cream-300: #efe8d8;

    --coral-600: #c9573c;
    --coral-500: #dd6b4c;
    --coral-400: #e58467;

    --mustard-500: #f0c744;
    --mustard-400: #f3d876;

    /* Section-accent colors for the four Discover/Find/Events/Assistance
       pillar cards and the Popular Categories tiles on the homepage —
       kept separate from the core brand palette above (forest/coral/
       mustard), used only as small icon-chip backgrounds, never as large
       surfaces. */
    --accent-green: #2f9e5c;
    --accent-blue: #2f6fed;
    --accent-purple: #7c5cf5;
    --accent-orange: #e8823a;
    --accent-red: #e0473e;
    --accent-teal: #1fa2a6;
    --accent-pink: #e0459c;

    /* Dark navy footer, matching the homepage concept design — distinct
       from --forest-900 (which is used for header/CTA dark-green sections). */
    --navy-900: #0b1b2e;
    --navy-800: #12233a;

    --ink-900: #16211b;
    --ink-700: #3c463f;
    --ink-500: #6b756e;
    --ink-300: #a9b0aa;
    --ink-100: #e3e6e2;

    --white: #ffffff;

    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;
    --radius-btn: 10px;

    --shadow-sm: 0 2px 8px rgba(16, 31, 24, 0.06);
    --shadow-md: 0 8px 24px rgba(16, 31, 24, 0.10);
    --shadow-lg: 0 20px 48px rgba(16, 31, 24, 0.16);

    --container-width: 1240px;
    --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: hidden on html/body stops any single element that's a hair
   wider than the viewport (an unconstrained image, an absolutely-positioned
   decorative card, a fixed-width panel inside a mobile media query, etc.)
   from opening up horizontal scroll room on the page. Without this, a phone's
   touch-scroll gesture can drag the whole layout a few pixels sideways as
   well as up/down, which reads as "the screen moves all over the place"
   instead of a clean, locked vertical scroll. Body keeps no explicit height,
   so this does not create a second nested scroll container and does not
   interfere with the sticky header/sidebar elsewhere in this file. */
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink-900);
    background: var(--cream-100);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
input, select, textarea { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
p { margin: 0; }

/* ---------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------- */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--cream { background: var(--cream-100); }
.section--beige { background: var(--cream-300); }
.section--forest { background: var(--forest-800); color: var(--cream-100); }
.section--coral { background: var(--coral-500); color: var(--white); }

.eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--coral-500);
    margin-bottom: 14px;
}
.section--forest .eyebrow,
.section--coral .eyebrow { color: var(--mustard-500); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.section-head__aside { color: var(--ink-500); font-size: 15px; max-width: 320px; }
.section--forest .section-head__aside { color: var(--ink-100); }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 980px) {
    .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
    .grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .grid--2, .grid--3, .grid--4, .grid--5, .grid--6 { grid-template-columns: 1fr; }
    .section { padding: 56px 0; }
}

.section--gray { background: #f6f7f8; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: var(--radius-btn);
    font-weight: 700;
    font-size: 15px;
    border: 1px solid transparent;
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--coral { background: var(--coral-500); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--coral:hover { background: var(--coral-600); box-shadow: var(--shadow-md); }

.btn--forest { background: var(--forest-700); color: var(--cream-100); }
.btn--forest:hover { background: var(--forest-800); }

/* WhatsApp brand green — used specifically for "WhatsApp" contact buttons
   on listing/event/assistance pages, distinct from the site's own coral
   accent, so it reads instantly as the WhatsApp action. */
.btn--whatsapp { background: #25D366; color: var(--white); box-shadow: var(--shadow-sm); }
.btn--whatsapp:hover { background: #1DA851; box-shadow: var(--shadow-md); }

.btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.btn--outline:hover { background: rgba(255, 255, 255, 0.08); }

.btn--outline-dark { background: transparent; border-color: var(--ink-900); color: var(--ink-900); }
.btn--outline-dark:hover { background: var(--ink-900); color: var(--white); }

.btn--ghost { background: rgba(255,255,255,0.12); color: inherit; }
.btn--ghost:hover { background: rgba(255,255,255,0.2); }

.btn--sm { padding: 9px 18px; font-size: 13px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------------
   Header / Nav
   --------------------------------------------------------------------- */
.site-header {
    background: var(--forest-800);
    color: var(--cream-100);
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; gap: 20px; }

.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.brand__mark {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--mustard-500); color: var(--forest-900);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; font-family: var(--font-body);
}

.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav a { font-size: 15px; font-weight: 500; opacity: 0.9; transition: opacity var(--transition); }
.main-nav a:hover { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.header-actions .btn { padding: 11px 20px; }

.nav-toggle { display: none; background: none; border: none; color: var(--cream-100); font-size: 22px; }

@media (max-width: 900px) {
    .main-nav { display: none; }
    .nav-toggle { display: block; }

    /* The hamburger toggles this class on .main-nav via JS (initMobileNav()
       in main.js) — without this rule the button did nothing, since
       .main-nav stayed display:none regardless. Turn it into a full-width
       dropdown panel anchored under the sticky header. */
    .main-nav--open {
        display: flex; flex-direction: column; align-items: flex-start; gap: 0;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--forest-800); padding: 8px 24px 18px; box-shadow: var(--shadow-md);
    }
    .main-nav--open a { padding: 12px 0; width: 100%; }
}

/* ---------------------------------------------------------------------
   Public site header (site-header--public) — a separate, scoped white/
   light reskin matching the new homepage concept design. Deliberately
   scoped to this modifier class (not the bare .site-header) so the
   business-owner/sales-rep/admin dashboard top bar in layouts/dashboard.php
   — which reuses the plain .site-header + .brand classes on a dark
   background — is completely unaffected.
   --------------------------------------------------------------------- */
.site-header--public {
    background: var(--white);
    color: var(--ink-900);
    box-shadow: 0 1px 0 rgba(16,31,24,0.07);
    transition: background var(--transition), box-shadow var(--transition);
}

/* Homepage-only: the header starts fully transparent, floating directly
   over the hero photo (which already fades to white/light at its own
   top edge, so the dark nav text stays legible) — then becomes solid
   white with a shadow once the page is scrolled past the hero, via the
   .is-scrolled class toggled in main.js (initHeaderShadow). Every other
   page keeps the plain solid-white header at all times, since they don't
   have a photo directly behind it. */
body.page-home .site-header--public { background: transparent; box-shadow: none; }
body.page-home .site-header--public.is-scrolled {
    background: var(--white); box-shadow: 0 4px 16px rgba(16,31,24,0.12);
}

/* On every other page .site-header is position:sticky (see base rule),
   which reserves its own space in normal flow above the page content —
   correct there, since those pages have no image to float over. On the
   homepage specifically it needs to be position:fixed instead, so it
   floats directly on top of the hero photo with zero reserved space,
   letting that photo start at the very top of the viewport. */
body.page-home .site-header--public { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.site-header--public .brand { color: var(--ink-900); }
.site-header--public .brand__pin {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex: none;
}
.site-header--public .brand__find { color: var(--accent-green); }

.site-header--public .main-nav a {
    font-size: 13.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-700);
    opacity: 1; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition);
}
.site-header--public .main-nav a:hover { color: var(--ink-900); }
.site-header--public .main-nav a.is-active { color: var(--accent-green); border-bottom-color: var(--accent-green); }

.header-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
    color: var(--ink-700); font-size: 18px; background: transparent; border: none; transition: background var(--transition);
}
.header-icon-btn:hover { background: var(--cream-300); }
/* Logged-in account link — widens into a pill so "Hi, Name" can sit beside
   the icon, instead of the plain circular icon-only button guests see. */
.header-icon-btn--account {
    width: auto; border-radius: var(--radius-full); padding: 0 14px 0 8px; gap: 6px; font-size: 16px;
}
.header-icon-btn--account__greeting { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
    .header-icon-btn--account__greeting { display: none; }
}

.site-header--public .nav-toggle { color: var(--ink-900); }

@media (max-width: 900px) {
    .site-header--public .main-nav--open { background: var(--white); }
}

/* ---------------------------------------------------------------------
   Hero — rebuilt to match the "AccraFind" homepage concept design. The
   supplied hero photo is rendered as a plain <img> at its own native
   aspect ratio (NOT a cropped/stretched CSS background — the client was
   explicit that the photo must show exactly as supplied), so the section's
   height is simply whatever height that image renders at. The headline,
   search bar and trust badge are layered on top via an absolutely
   positioned overlay that doesn't add any extra height of its own.
   Current photo (hero-bg-v5.jpg) is a wide 2.65:1 banner (Independence
   Arch + coastline) that fades from white on the LEFT edge to full colour
   on the right — a different fade direction than the earlier 1.5:1 photo,
   so it's noticeably shorter at every viewport width. --------------------------------------------------------------------- */
.hero { position: relative; color: var(--ink-900); overflow: hidden; background: var(--white); }
.hero__bg { display: block; width: 100%; height: auto; }
/* Scoped to the hero's own container instance only (not the global
   .container helper) so this overlay — and .trust-badge, an absolutely
   positioned child of it — sit on top of the image without affecting
   the section's height, and anchor to the readable content column's
   edges rather than the raw viewport edge on ultra-wide screens. */
/* padding-top is vw-based (not a fixed px) so it scales proportionally
   with the image's own rendered height (which is itself width:100vw-driven
   via .hero__bg) — a fixed px value looked fine on very wide monitors but
   ate a much bigger share of the (shorter) image at laptop widths. Base
   proportion for this photo works out to ~4.5vw (100/2.65 * 0.12); bumped
   up twice per explicit request to sit closer to the vertical middle of
   the (short) photo band instead of hugging its top edge. */
.hero .container { position: absolute; inset: 0; padding-top: 9vw; }
.hero__grid { width: 100%; max-width: 640px; }
.hero__title { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; line-height: 1.12; margin: 14px 0 16px; color: var(--ink-900); }
.hero__title em { font-style: normal; color: var(--accent-green); font-weight: 800; }
.hero__lede { font-size: 16px; font-weight: 500; color: var(--ink-700); max-width: 460px; margin-bottom: 26px; }

.search-bar {
    display: flex;
    align-items: stretch;
    background: var(--white);
    border-radius: var(--radius-full);
    padding: 6px;
    box-shadow: var(--shadow-lg);
    gap: 6px;
    max-width: 660px;
}
.search-bar__field { display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex: 1; color: var(--ink-900); min-width: 0; }
/* Fixed narrower column on desktop only — a bare inline flex-basis here would
   silently become a fixed HEIGHT once the mobile media query switches the
   bar to flex-direction:column, leaving a tall blank gap under the field. */
.search-bar__field--area { flex: 0 0 200px; }
.search-bar__field input, .search-bar__field select {
    border: none; outline: none; background: transparent; width: 100%; font-size: 14px; color: var(--ink-900);
}
.search-bar__divider { width: 1px; background: var(--ink-100); margin: 8px 0; }
.search-bar .btn { border-radius: var(--radius-full); }

/* Reused by events/index.php's own hero (section--forest) for its date
   preset pill row — kept even though the homepage hero no longer uses it. */
.hero__pill-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-100); }
.pill {
    display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--radius-full);
    background: rgba(255,255,255,0.08); font-size: 13px; font-weight: 500; color: var(--cream-100);
    border: 1px solid rgba(255,255,255,0.12); transition: background var(--transition);
}
a.pill:hover, .pill--clickable:hover { background: rgba(255,255,255,0.18); }
.pill--active { background: var(--mustard-500); color: var(--forest-900); border-color: transparent; }

.hero__wave {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; background: var(--mustard-500);
    clip-path: polygon(0 60%, 100% 0, 100% 100%, 0% 100%);
}

@media (max-width: 980px) {
    .search-bar { flex-direction: column; border-radius: var(--radius-md); }
    .search-bar__divider { display: none; }
    .search-bar__field, .search-bar__field--area { flex: 0 0 auto; width: 100%; }
}

/* ---------------------------------------------------------------------
   Trust badge ("Your City. Your Connection.") — floating card positioned
   right next to the search-bar content column rather than pinned to the
   hero's far-right edge. `left` is a fixed px value keyed to the content
   column's own box (.hero__grid's max-width:640px, itself sitting 24px in
   from .hero .container's left edge per the base .container padding) plus
   a small gap — not a percentage — since the column's width is a fixed
   640px cap, not viewport-relative, so this stays snug against it at
   every desktop width instead of drifting. `top` is a PERCENTAGE (not vw/
   px) so it stays proportional to the photo's own rendered height at
   every viewport width — tuned from an actual laptop screenshot so the
   badge's vertical center lines up with the search bar's row.
   --------------------------------------------------------------------- */
.trust-badge {
    position: absolute; left: 700px; top: 63%; z-index: 3; background: rgba(11,27,46,0.88); color: var(--cream-100);
    border-radius: var(--radius-md); padding: 20px 22px; width: 240px; box-shadow: var(--shadow-lg);
    backdrop-filter: blur(6px);
}
.trust-badge__title { font-family: var(--font-display); font-weight: 800; font-size: 16px; margin-bottom: 12px; color: var(--mustard-500); line-height: 1.3; }
.trust-badge__list { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; }
.trust-badge__list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cream-100); font-weight: 600; }
.trust-badge__check {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent-green); color: var(--white); font-size: 11px; font-weight: 800; flex: none;
}

/* Below ~980px the source photo (native aspect ratio, shown unstretched)
   gets too short to hold the full headline + search bar + badge as an
   overlay without everything colliding — so the overlay drops out of
   absolute positioning and stacks in normal flow below the image instead.
   The image itself is still never cropped or distorted, only where the
   text sits relative to it changes. */
@media (max-width: 980px) {
    .hero .container { position: static; padding: 20px 24px 32px; }
    .trust-badge { position: static; width: 100%; margin-top: 20px; top: auto; left: auto; }
}

/* ---------------------------------------------------------------------
   Hero overlap wrap — the pillar cards + stats row are part of the hero
   cluster (sit directly under the photo), not a separate section further
   down the page. Earlier photos faded to white across their own bottom
   edge, so this used to sit as a normal-flow sibling pulled UP with a
   negative margin to overlap that fade with no visible seam. The current
   photo (hero-bg-v5.jpg) instead fades left-to-right — its bottom-right
   two-thirds is full-colour road/foliage, not white — so overlapping it
   the same way would show a dark strip through this section's own
   (background-less) gaps. Kept as a normal-flow sibling (still safe
   against .hero's overflow:hidden) but only pulled up a small amount, just
   enough to read as "attached" to the photo without cutting into its
   non-white area.
   --------------------------------------------------------------------- */
.hero-overlap {
    position: relative;
    z-index: 2;
    margin-top: clamp(12px, 1.5vw, 28px);
    padding-bottom: 32px;
}

@media (max-width: 980px) {
    .hero-overlap { margin-top: 24px; }
}

/* ---------------------------------------------------------------------
   Pillar cards (Discover / Find / Events / Assistance)
   Layout columns come from the existing .grid.grid--4 helper (which
   already collapses responsively) — these rules only add icon colors
   and card styling on top of it.
   --------------------------------------------------------------------- */
.pillar-card {
    background: var(--white); border-radius: var(--radius-lg); padding: 26px; border: 1px solid var(--ink-100);
    display: flex; flex-direction: column; gap: 14px; position: relative;
    transition: transform var(--transition), box-shadow var(--transition);
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar-card__icon {
    width: 46px; height: 46px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--white);
}
.pillar-card--discover .pillar-card__icon { background: var(--accent-green); }
.pillar-card--find .pillar-card__icon { background: var(--accent-blue); }
.pillar-card--events .pillar-card__icon { background: var(--accent-purple); }
.pillar-card--assistance .pillar-card__icon { background: var(--accent-orange); }
.pillar-card__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.pillar-card__desc { font-size: 14px; color: var(--ink-500); line-height: 1.5; }
.pillar-card__arrow { position: absolute; top: 24px; right: 24px; font-size: 15px; font-weight: 700; transition: transform var(--transition); }
.pillar-card--discover .pillar-card__arrow { color: var(--accent-green); }
.pillar-card--find .pillar-card__arrow { color: var(--accent-blue); }
.pillar-card--events .pillar-card__arrow { color: var(--accent-purple); }
.pillar-card--assistance .pillar-card__arrow { color: var(--accent-orange); }
.pillar-card:hover .pillar-card__arrow { transform: translate(3px, -3px); }

/* ---------------------------------------------------------------------
   Stats row (layout columns from .grid.grid--4) — icon to the left,
   label + number stacked to the right, vertical dividers between
   columns, matching the homepage concept exactly.
   --------------------------------------------------------------------- */
.stats-row { text-align: left; }
.stat { display: flex; align-items: center; gap: 12px; padding-left: 4px; border-left: 1px solid var(--ink-100); }
.stat:first-child { border-left: none; padding-left: 0; }
.stat__icon { font-size: 26px; flex: none; line-height: 1; }
.stat__label { font-size: 13px; color: var(--ink-500); }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 2vw, 24px); color: var(--ink-900); margin-top: 2px; }

@media (max-width: 980px) {
    .stat { border-left: none; padding-left: 0; }
}

/* ---------------------------------------------------------------------
   Mood tiles ("What are you in the mood for?")
   --------------------------------------------------------------------- */
.mood-grid { grid-template-columns: repeat(6, 1fr); }
.mood-tile {
    background: var(--white); border-radius: var(--radius-md); padding: 20px;
    border: 1px solid var(--ink-100); transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    display: flex; flex-direction: column; gap: 24px; min-height: 148px; position: relative;
}
.mood-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mood-tile__icon { font-size: 26px; }
.mood-tile__name { font-weight: 700; font-size: 15px; }
.mood-tile__count { font-size: 12px; color: var(--ink-500); }
.mood-tile__arrow { position: absolute; top: 18px; right: 18px; opacity: 0.4; font-size: 13px; }
.mood-tile--active { background: var(--forest-800); color: var(--cream-100); border-color: var(--forest-800); }
.mood-tile--active .mood-tile__count { color: var(--ink-100); }

@media (max-width: 980px) { .mood-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .mood-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------------
   Listing cards
   --------------------------------------------------------------------- */
.listing-grid { grid-template-columns: repeat(3, 1fr); }
.listing-card {
    background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
    border: 1px solid var(--ink-100); transition: transform var(--transition), box-shadow var(--transition);
    display: flex; flex-direction: column; height: 100%;
}
.listing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.listing-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-100); }
.listing-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.listing-card:hover .listing-card__media img { transform: scale(1.04); }
.listing-card__badge {
    position: absolute; top: 12px; left: 12px; background: var(--white); color: var(--ink-900); font-size: 11px;
    font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-full);
}
.listing-card__fav {
    position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.92);
    display: flex; align-items: center; justify-content: center; border: none; font-size: 16px; color: var(--coral-500);
    transition: transform var(--transition);
}
.listing-card__fav:hover { transform: scale(1.08); }
.listing-card__fav.is-active { background: var(--coral-500); color: var(--white); }
.listing-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.listing-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.listing-card__category { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-500); }
.listing-card__rating { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.listing-card__rating .stars { color: var(--mustard-500); letter-spacing: -1px; font-size: 12px; }
.listing-card__title { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.listing-card__desc { font-size: 13.5px; color: var(--ink-500); flex: 1; }
.listing-card__foot { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-500); margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--ink-100); }
.listing-card__price { font-weight: 700; color: var(--ink-900); }

@media (max-width: 980px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .listing-grid { grid-template-columns: 1fr; } }

.reset-link { font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* "VERIFIED" badge — green, top-right, used on the homepage Featured
   Listings strip (see .listing-card__badge above for the default
   white/top-left variant used elsewhere). */
.listing-card__badge--verified {
    left: auto; right: 12px; background: var(--accent-green); color: var(--white);
}

/* ---------------------------------------------------------------------
   Popular Categories tiles (homepage) — light icon-only cards, distinct
   from the colored-square pillar cards above them.
   --------------------------------------------------------------------- */
.category-tile {
    background: var(--white); border-radius: var(--radius-md); padding: 18px 16px;
    border: 1px solid var(--ink-100); display: flex; align-items: center; gap: 12px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.category-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.category-tile__icon { font-size: 22px; flex: none; }
.category-tile__label { font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--ink-900); }

/* ---------------------------------------------------------------------
   Upcoming Events + Assistance Programs (homepage two-column section)
   --------------------------------------------------------------------- */
.event-row {
    display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ink-100);
}
.event-row:last-child { border-bottom: none; }
.event-row__date {
    flex: none; width: 54px; height: 54px; border-radius: var(--radius-md); border: 1px solid var(--ink-100);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.event-row__date-month { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-green); }
.event-row__date-day { font-size: 17px; font-weight: 800; color: var(--ink-900); line-height: 1.1; }
.event-row__thumb { flex: none; width: 64px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; background: var(--ink-100); }
.event-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.event-row__body { flex: 1; min-width: 0; }
.event-row__title { font-weight: 700; font-size: 14.5px; color: var(--ink-900); }
.event-row__meta { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.event-row__bookmark { flex: none; font-size: 16px; color: var(--ink-300); }

.program-row {
    display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--ink-100); border-radius: var(--radius-md);
    margin-bottom: 12px; background: var(--white);
}
.program-row:last-child { margin-bottom: 0; }
.program-row__icon {
    flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.program-row__title { font-weight: 700; font-size: 14.5px; color: var(--ink-900); }
.program-row__org { font-size: 12.5px; color: var(--ink-500); margin-top: 1px; }
.program-row__desc { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }

.view-all-btn { display: block; width: 100%; text-align: center; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--accent-green); color: var(--accent-green); font-weight: 700; font-size: 14px; margin-top: 16px; transition: background var(--transition); }
.view-all-btn:hover { background: rgba(47,158,92,0.08); }

/* ---------------------------------------------------------------------
   "Be Part of a Stronger Accra" CTA banner
   --------------------------------------------------------------------- */
.cta-banner {
    position: relative; overflow: hidden; border-radius: var(--radius-lg);
    background: linear-gradient(120deg, var(--forest-700) 0%, var(--accent-green) 100%);
    color: var(--white); padding: 40px 44px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-banner__watermark {
    position: absolute; right: 24px; bottom: -10px; font-size: 130px; opacity: 0.12; line-height: 1; pointer-events: none;
}
.cta-banner h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; }
.cta-banner p { font-size: 15px; opacity: 0.92; max-width: 480px; }
.cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-banner .btn--white { background: var(--white); color: var(--forest-800); }
.cta-banner .btn--outline-white { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.6); }
.cta-banner .btn--outline-white:hover { background: rgba(255,255,255,0.12); }

@media (max-width: 640px) {
    .cta-banner { padding: 32px 24px; }
}

/* ---------------------------------------------------------------------
   Neighbourhoods
   --------------------------------------------------------------------- */
.neighbourhood-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.neighbourhood-split h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 16px; }
.neighbourhood-split p { color: var(--ink-500); max-width: 440px; margin-bottom: 24px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    padding: 9px 18px; border-radius: var(--radius-full); border: 1px solid var(--ink-100); font-size: 14px; font-weight: 600;
    transition: all var(--transition); background: var(--white);
}
.chip:hover, .chip.is-active { background: var(--forest-800); color: var(--cream-100); border-color: var(--forest-800); }

.map-graphic { position: relative; height: 380px; display: flex; align-items: center; justify-content: center; }
.map-graphic svg { width: 100%; height: 100%; }
.map-pin {
    position: absolute; background: var(--coral-500); color: var(--white); font-size: 12px; font-weight: 700;
    padding: 6px 12px; border-radius: var(--radius-full); box-shadow: var(--shadow-md); white-space: nowrap;
}
.map-pin--alt { background: var(--forest-800); }

@media (max-width: 900px) { .neighbourhood-split { grid-template-columns: 1fr; } .map-graphic { height: 260px; } }

/* ---------------------------------------------------------------------
   Pricing
   --------------------------------------------------------------------- */
.pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.pricing-card {
    background: var(--cream-100); color: var(--ink-900); border-radius: var(--radius-lg); padding: 32px 28px;
    display: flex; flex-direction: column; gap: 18px; position: relative; border: 1px solid rgba(255,255,255,0.06);
}
.pricing-card--featured { background: var(--white); box-shadow: var(--shadow-lg); transform: translateY(-8px); border: 2px solid var(--coral-500); }
.pricing-card__badge {
    position: absolute; top: -14px; right: 24px; background: var(--mustard-500); color: var(--forest-900);
    font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-full);
}
.pricing-card__name { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.pricing-card__tagline { font-size: 13.5px; color: var(--ink-500); }
.pricing-card__price { font-size: 40px; font-weight: 800; font-family: var(--font-display); }
.pricing-card__price .pricing-card__period { font-size: 14px; font-weight: 500; color: var(--ink-500); font-family: var(--font-body); margin-left: 2px; }

.billing-interval-toggle { display: inline-flex; gap: 4px; background: rgba(255,255,255,0.08); padding: 4px; border-radius: var(--radius-sm); }
.billing-interval-toggle__opt { border: none; background: transparent; padding: 9px 16px; border-radius: calc(var(--radius-sm) - 2px); font-size: 14px; font-weight: 600; color: var(--cream-100); cursor: pointer; }
.billing-interval-toggle__opt.is-active { background: var(--mustard-500); color: var(--forest-900); }
.billing-interval-toggle__save { font-size: 11px; font-weight: 600; opacity: .75; margin-left: 4px; }

/* On light pricing-card / plan-pick-card backgrounds the default light-on-dark
   toggle styling would be invisible — flip to dark text on a pale field. */
.billing-interval-toggle--card { background: var(--ink-100); flex-wrap: wrap; }
.billing-interval-toggle--card .billing-interval-toggle__opt { color: var(--ink-700); font-size: 12.5px; padding: 7px 11px; }
.billing-interval-toggle--card .billing-interval-toggle__opt.is-active { background: var(--forest-800); color: var(--cream-100); }
.pricing-card__features { display: flex; flex-direction: column; gap: 10px; font-size: 14px; padding: 18px 0; border-top: 1px solid var(--ink-100); flex: 1; }
.pricing-card__features li { display: flex; gap: 8px; align-items: flex-start; }
.pricing-card__features li::before { content: '✓'; color: var(--coral-500); font-weight: 800; }

@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-card--featured { transform: none; } }

/* ---------------------------------------------------------------------
   CTA band
   --------------------------------------------------------------------- */
.cta-split { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-split h2 { font-size: clamp(26px, 3.2vw, 36px); max-width: 480px; }
.cta-split p { max-width: 420px; opacity: 0.92; margin-top: 12px; }

/* ---------------------------------------------------------------------
   Footer — dark navy, 4-column layout matching the homepage concept
   design (Quick Links / For Users / For Businesses / Contact Us),
   replacing the previous single-row forest-green footer.
   --------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: var(--cream-100); padding: 56px 0 24px; }
.site-footer .brand { color: var(--white); }
.site-footer .brand__find { color: var(--accent-green); }

.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
.footer-about__tagline { font-size: 13.5px; color: var(--ink-300); margin: 14px 0 18px; max-width: 260px; line-height: 1.5; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); color: var(--cream-100);
    display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background var(--transition), border-color var(--transition);
}
.footer-social a:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }

.footer-col h4 { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 16px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 13.5px; color: var(--ink-300); transition: color var(--transition); }
.footer-col a:hover { color: var(--mustard-500); }
.footer-col li { font-size: 13.5px; color: var(--ink-300); display: flex; align-items: flex-start; gap: 8px; }

.footer-bottom {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px;
    padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: var(--ink-300); text-align: center;
}
.footer-legal__owner { font-size: 12px; color: var(--ink-300); opacity: 0.8; }
.footer-legal__links { display: flex; gap: 18px; font-size: 12px; color: var(--ink-300); }
.footer-legal__links a:hover { color: var(--mustard-500); }

@media (max-width: 980px) {
    .footer-top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .footer-top { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Forms (auth, contact, dashboard, reviews)
   --------------------------------------------------------------------- */
/* min-height uses both 100vh and 100dvh: vh is a fixed fallback for older
   browsers, dvh ("dynamic viewport height") tracks the *current* visible
   viewport on mobile, where the browser's address bar hides/shows as you
   scroll. With only vh, this box's height snaps taller/shorter every time
   the address bar toggles mid-scroll, which feels like the page jumping.
   Browsers that don't know dvh ignore that line and keep the vh value. */
.form-page { display: flex; min-height: calc(100vh - 76px); min-height: calc(100dvh - 76px); align-items: center; justify-content: center; padding: 56px 24px; background: var(--cream-200); }
.form-card { background: var(--white); border-radius: var(--radius-lg); padding: 44px; width: 100%; max-width: 460px; box-shadow: var(--shadow-md); }
.form-card h1 { font-size: 28px; margin-bottom: 8px; }
.form-card__sub { color: var(--ink-500); font-size: 14.5px; margin-bottom: 28px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 12px 15px; border-radius: var(--radius-sm); border: 1.5px solid var(--ink-100);
    outline: none; transition: border-color var(--transition); background: var(--white); font-size: 14.5px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--coral-500); }
.field--checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.field--checkbox input { width: auto; }
.field-error { color: var(--coral-600); font-size: 12.5px; margin-top: 5px; }
.field-hint { color: var(--ink-500); font-size: 12.5px; margin-top: 5px; }

.form-alert { padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 20px; }
.form-alert--error { background: #fbe9e5; color: var(--coral-600); }
.form-alert--success { background: #e6f2ea; color: #276b47; }

.form-card__foot { text-align: center; margin-top: 20px; font-size: 14px; color: var(--ink-500); }
.form-card__foot a { font-weight: 700; color: var(--coral-500); }

.role-switch { display: flex; gap: 10px; margin-bottom: 26px; }
.role-switch a { flex: 1; text-align: center; padding: 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--ink-100); font-size: 13.5px; font-weight: 600; }
.role-switch a.is-active { background: var(--forest-800); color: var(--cream-100); border-color: var(--forest-800); }

/* ---------------------------------------------------------------------
   Search / discovery page
   --------------------------------------------------------------------- */
.search-layout { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: flex-start; }
.filters-panel {
    background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 26px 24px;
    position: sticky; top: 96px;
}
.filters-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.filters-panel__head h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.filters-panel__clear { font-size: 12.5px; font-weight: 700; color: var(--coral-500); background: none; border: none; cursor: pointer; padding: 4px 0; }
.filters-panel__clear:hover { text-decoration: underline; }

.filters-panel h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 800;
    margin: 24px 0 12px; color: var(--ink-900);
}
.filters-panel h3:first-of-type { margin-top: 18px; }
.filter-section { padding-top: 18px; border-top: 1px solid var(--ink-100); }
.filter-section:first-of-type { border-top: none; padding-top: 0; }

.filter-group { display: flex; flex-direction: column; gap: 2px; }
.filter-check {
    display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer;
    padding: 8px 10px; border-radius: var(--radius-sm); margin: 0 -10px; transition: background var(--transition);
}
.filter-check:hover { background: var(--cream-200); }
.filter-check:has(input:checked) { background: rgba(221,107,76,0.09); font-weight: 600; color: var(--coral-600); }
.filter-check input { width: 17px; height: 17px; accent-color: var(--coral-500); flex-shrink: 0; }

.price-toggle { display: flex; gap: 8px; }
.price-toggle button {
    flex: 1; padding: 10px 0; border-radius: var(--radius-sm); border: 1.5px solid var(--ink-100); background: var(--white);
    font-weight: 700; font-size: 14px; transition: all var(--transition); color: var(--ink-700);
}
.price-toggle button:hover { border-color: var(--ink-300); }
.price-toggle button.is-active { background: var(--forest-800); color: var(--cream-100); border-color: var(--forest-800); }

.rating-filter { display: flex; flex-direction: column; gap: 2px; }
.rating-filter label {
    display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer;
    padding: 8px 10px; border-radius: var(--radius-sm); margin: 0 -10px; transition: background var(--transition);
}
.rating-filter label:hover { background: var(--cream-200); }
.rating-filter label:has(input:checked) { background: rgba(221,107,76,0.09); font-weight: 600; }
.rating-filter .stars { color: var(--mustard-500); letter-spacing: 1px; }

/* Collapsible filter groups (native <details>, zero JS) — keeps the long
   amenity/hours/payment checklists tidy instead of one long childish wall
   of checkboxes. Open by default so nothing feels hidden. */
.filter-accordion { border-top: 1px solid var(--ink-100); padding-top: 4px; margin-top: 18px; }
.filter-accordion:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.filter-accordion summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 800; color: var(--ink-900);
    padding: 14px 0 12px;
}
.filter-accordion summary::-webkit-details-marker { display: none; }
.filter-accordion summary::after { content: '\2303'; transform: rotate(180deg); color: var(--ink-500); font-size: 12px; transition: transform var(--transition); }
.filter-accordion[open] summary::after { transform: rotate(0deg); }

.search-results-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.search-results-head h1 { font-size: 24px; }
.sort-select select { padding: 10px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--ink-100); font-size: 14px; }
.active-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.active-filter-chip {
    display: inline-flex; align-items: center; gap: 6px; background: var(--cream-300); padding: 6px 12px;
    border-radius: var(--radius-full); font-size: 13px; font-weight: 600;
}
.active-filter-chip button { border: none; background: none; color: var(--ink-500); font-size: 14px; }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    border: 1.5px solid var(--ink-100); font-size: 14px; font-weight: 600;
}
.pagination a:hover { background: var(--cream-300); }
.pagination .is-active { background: var(--forest-800); color: var(--cream-100); border-color: var(--forest-800); }

.empty-state { text-align: center; padding: 64px 24px; color: var(--ink-500); }
.empty-state h3 { color: var(--ink-900); margin-bottom: 10px; font-size: 22px; }

@media (max-width: 980px) {
    .search-layout { grid-template-columns: 1fr; }
    .filters-panel { position: static; }
}

/* ---------------------------------------------------------------------
   Listing detail (digital storefront)
   --------------------------------------------------------------------- */
.listing-hero-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 460px; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 40px; }
.listing-hero-gallery img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.listing-hero-gallery a:first-child { grid-row: 1 / 3; }
/* Graceful fallback for listings with fewer than 5 photos (e.g. new listings
   before the Phase 2 gallery uploader ships more content). */
.listing-hero-gallery:has(a:only-child) { grid-template-columns: 1fr; height: 380px; }
.listing-hero-gallery:has(a:only-child) a:first-child { grid-row: auto; }
.listing-hero-gallery:has(a:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; height: 380px; }
.listing-hero-gallery:has(a:nth-child(2):last-child) a:first-child { grid-row: auto; }
.gallery-more { position: relative; }
.gallery-more::after {
    content: attr(data-more); position: absolute; inset: 0; background: rgba(16,31,24,0.55); color: var(--white);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}

.listing-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 32px 0 24px; flex-wrap: wrap; }
.listing-header__crumb { font-size: 13px; color: var(--ink-500); margin-bottom: 10px; }
.listing-header__crumb a { text-decoration: underline; text-underline-offset: 3px; }
.listing-header h1 { font-size: clamp(30px, 4vw, 44px); }
.listing-header__meta { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 14.5px; color: var(--ink-500); flex-wrap: wrap; }
.listing-header__meta .stars { color: var(--mustard-500); }
.listing-header__actions { display: flex; gap: 10px; }

.listing-body { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: flex-start; padding-bottom: 80px; }
.listing-section { padding: 32px 0; border-top: 1px solid var(--ink-100); }
.listing-section:first-child { border-top: none; padding-top: 0; }
.listing-section h2 { font-size: 22px; margin-bottom: 16px; }
.listing-section p { color: var(--ink-700); }

.amenity-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.amenity-item { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 12px 14px; background: var(--cream-200); border-radius: var(--radius-sm); }

.hours-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hours-table td { padding: 8px 0; border-bottom: 1px solid var(--ink-100); }
.hours-table td:last-child { text-align: right; color: var(--ink-500); }
.hours-table tr.is-today td { font-weight: 700; color: var(--ink-900); }

.menu-block { margin-bottom: 28px; }
.menu-block h3 { font-size: 17px; margin-bottom: 14px; }
.menu-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--ink-100); }
.menu-item__name { font-weight: 700; font-size: 14.5px; }
.menu-item__desc { font-size: 13px; color: var(--ink-500); margin-top: 3px; }
.menu-item__price { font-weight: 700; white-space: nowrap; }

.review-card { padding: 20px 0; border-top: 1px solid var(--ink-100); }
.review-card:first-child { border-top: none; padding-top: 0; }
.review-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.review-card__author { font-weight: 700; font-size: 14.5px; }
.review-card__date { font-size: 12.5px; color: var(--ink-500); }
.review-card .stars { color: var(--mustard-500); font-size: 14px; }
.review-card__title { font-weight: 700; margin: 6px 0 4px; }
.review-card__reply { margin-top: 12px; padding: 14px; background: var(--cream-200); border-radius: var(--radius-sm); font-size: 13.5px; }
.review-card__reply strong { color: var(--coral-500); }

.faq-item { border-top: 1px solid var(--ink-100); padding: 16px 0; }
.faq-item:first-child { border-top: none; }
.faq-item summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; color: var(--coral-500); }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin-top: 10px; color: var(--ink-700); font-size: 14.5px; }

.promo-banner { background: var(--mustard-500); color: var(--forest-900); border-radius: var(--radius-md); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.promo-banner strong { display: block; font-size: 15px; }
.promo-banner code { background: rgba(16,31,24,0.1); padding: 3px 8px; border-radius: 6px; font-weight: 700; }

.contact-card { background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 26px; position: sticky; top: 96px; box-shadow: var(--shadow-sm); }
.contact-card__row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ink-100); font-size: 14.5px; }
.contact-card__row:last-of-type { border-bottom: none; }
.contact-card__row a { font-weight: 600; }
.contact-card .btn { margin-top: 16px; }
.mini-map { height: 160px; border-radius: var(--radius-sm); overflow: hidden; margin-top: 16px; background: var(--cream-200); }

@media (max-width: 980px) {
    .listing-body { grid-template-columns: 1fr; }
    .listing-hero-gallery { grid-template-columns: 1fr 1fr; height: auto; grid-auto-rows: 160px; }
    .listing-hero-gallery a:first-child { grid-row: auto; grid-column: 1 / 3; }
    .amenity-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-card { position: static; }
}

/* ---------------------------------------------------------------------
   Dashboard placeholder (Phase 2 notice)
   --------------------------------------------------------------------- */
.dash-shell { min-height: calc(100vh - 76px); min-height: calc(100dvh - 76px); background: var(--cream-200); padding: 64px 24px; }
.dash-card { max-width: 640px; margin: 0 auto; background: var(--white); border-radius: var(--radius-lg); padding: 48px; text-align: center; box-shadow: var(--shadow-md); }
.dash-card__icon { font-size: 40px; margin-bottom: 18px; }
.dash-card h1 { font-size: 26px; margin-bottom: 12px; }
.dash-card p { color: var(--ink-500); margin-bottom: 24px; }
.dash-card ul { text-align: left; display: inline-flex; flex-direction: column; gap: 8px; margin: 0 auto 28px; font-size: 14.5px; }
.dash-card ul li::before { content: '→ '; color: var(--coral-500); font-weight: 700; }

/* ---------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------- */
.badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.badge--verified { background: #e6f2ea; color: #276b47; }
.badge--featured { background: var(--mustard-500); color: var(--forest-900); }

.stars { color: var(--mustard-500); letter-spacing: -1px; }

.fade-in-up { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--forest-800); color: var(--white); padding: 12px 18px; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }

.error-page { min-height: calc(100vh - 76px); min-height: calc(100dvh - 76px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.error-page h1 { font-size: 72px; color: var(--coral-500); }
.error-page p { color: var(--ink-500); margin: 12px 0 24px; }

/* =====================================================================
   Dashboards (business owner / sales rep / admin)
   ===================================================================== */
.dash-wrap { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 76px); min-height: calc(100dvh - 76px); background: var(--cream-200); }
.dash-sidebar { background: var(--forest-800); color: var(--cream-100); padding: 28px 0; }

/* Logo sits directly above the sidebar as its own column, matching the
   sidebar's width so the two stack into one continuous panel; the rest of
   the top bar (role pill, view site, log out) runs alongside it. */
.dash-topheader { display: flex; align-items: stretch; min-height: 84px; padding: 0; }
.dash-topheader__logo {
    width: 240px; flex-shrink: 0; display: flex; align-items: center;
    padding: 22px; background: var(--forest-900);
}
.dash-topheader__bar { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 22px 32px; min-width: 0; }

/* Admin/Super Admin: give the top bar its own color so it reads as a
   distinct "app chrome" strip from the sidebar navigation below it,
   instead of the two blending into one solid green block. The logo panel
   stays on the sidebar's own color so it still reads as part of it. */
.dash-role-admin .site-header,
.dash-role-super_admin .site-header { background: var(--ink-900); }
.dash-role-admin .dash-topheader__logo,
.dash-role-super_admin .dash-topheader__logo { background: var(--forest-900); }
.dash-sidebar__label { padding: 0 22px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-300); margin: 18px 0 8px; }
.dash-nav a {
    display: flex; align-items: center; gap: 10px; padding: 11px 22px; font-size: 14.5px; font-weight: 500;
    color: var(--cream-100); opacity: .78; border-left: 3px solid transparent; transition: all var(--transition);
}
.dash-nav a:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.dash-nav a.is-active { opacity: 1; background: rgba(255,255,255,0.1); border-left-color: var(--mustard-500); font-weight: 700; }

.dash-content { padding: 36px 40px; max-width: 1180px; }
.dash-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.dash-topbar h1 { font-size: 24px; }
.dash-topbar p { color: var(--ink-500); font-size: 14px; margin-top: 4px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 32px; }
.stat-card { background: var(--white); border-radius: var(--radius-md); padding: 20px; border: 1px solid var(--ink-100); }
.stat-card__label { font-size: 12.5px; color: var(--ink-500); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-card__value { font-family: var(--font-display); font-size: 30px; font-weight: 700; margin-top: 6px; }
.stat-card__meta { font-size: 12.5px; color: var(--ink-500); margin-top: 4px; }

.dash-panel { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--ink-100); padding: 26px; margin-bottom: 24px; }
.dash-panel h2 { font-size: 17px; margin-bottom: 16px; }
.dash-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); padding: 10px 12px; border-bottom: 2px solid var(--ink-100); }
.data-table td { padding: 12px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--cream-200); }

.status-pill { display: inline-flex; padding: 4px 10px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.status-pill--green { background: #e6f2ea; color: #276b47; }
.status-pill--amber { background: #fdf1de; color: #a15c07; }
.status-pill--red { background: #fbe9e5; color: var(--coral-600); }
.status-pill--grey { background: var(--ink-100); color: var(--ink-700); }

.tab-row { display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--ink-100); flex-wrap: wrap; }
.tab-row a { padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--ink-500); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-row a.is-active { color: var(--ink-900); border-bottom-color: var(--coral-500); }

.icon-btn { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--ink-500); padding: 6px; border-radius: 6px; }
.icon-btn:hover { background: var(--cream-200); color: var(--coral-500); }
.icon-btn--danger:hover { color: var(--coral-600); }

.inline-form { display: inline; }
.dash-empty { padding: 40px 20px; text-align: center; color: var(--ink-500); }

.plan-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan-pick-card { border: 2px solid var(--ink-100); border-radius: var(--radius-md); padding: 20px; cursor: pointer; transition: all var(--transition); }
.plan-pick-card.is-selected { border-color: var(--coral-500); background: #fef6f3; }
.plan-pick-card h3 { font-size: 16px; margin-bottom: 4px; }
.plan-pick-card .price { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 8px 0; }

.upload-drop {
    border: 2px dashed var(--ink-100); border-radius: var(--radius-md); padding: 28px; text-align: center; color: var(--ink-500);
    font-size: 14px; background: var(--cream-200);
}

/* Emoji picker, injected by initEmojiPickers() around any
   input[data-emoji-picker] — a click-to-insert palette so admins don't
   need to know an OS emoji-keyboard shortcut to fill in an icon field. */
.emoji-picker { position: relative; display: flex; gap: 8px; align-items: center; }
.emoji-picker input { flex: 1; }
.emoji-picker__trigger {
    padding: 9px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--ink-100);
    background: var(--white); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.emoji-picker__trigger:hover { background: var(--cream-200); }
.emoji-picker__panel {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(16,31,24,0.16); padding: 10px; width: 260px;
    grid-template-columns: repeat(6, 1fr); gap: 2px; max-height: 220px; overflow-y: auto;
}
.emoji-picker__panel.is-open { display: grid; }
.emoji-picker__option {
    background: none; border: none; font-size: 20px; line-height: 1; padding: 7px;
    border-radius: 6px; cursor: pointer; transition: background var(--transition);
}
.emoji-picker__option:hover { background: var(--cream-200); }

/* Upload progress bar, injected by initAjaxUploadForms() into any
   form[data-ajax-upload]. Hidden until a submit is in flight. */
.upload-progress { display: none; margin-top: 14px; grid-column: 1 / -1; }
.upload-progress.is-active { display: block; }
.upload-progress__track { width: 100%; height: 8px; border-radius: var(--radius-full); background: var(--ink-100); overflow: hidden; }
.upload-progress__bar { height: 100%; width: 0%; background: var(--coral-500); border-radius: var(--radius-full); transition: width 0.15s ease; }
.upload-progress__label { margin-top: 6px; font-size: 13px; color: var(--ink-500); font-weight: 600; }
.upload-progress__error { margin-top: 12px; }
.thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.thumb-card { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; }
.thumb-card img { width: 100%; height: 100%; object-fit: cover; }
.thumb-card__remove { position: absolute; top: 6px; right: 6px; background: rgba(16,31,24,0.7); color: #fff; border: none; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; }

@media (max-width: 980px) {
    .dash-wrap { grid-template-columns: 1fr; }
    .dash-sidebar { display: flex; overflow-x: auto; padding: 12px 0; }
    .dash-nav { display: flex; }
    .dash-nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
    .dash-nav a.is-active { border-left: none; border-bottom-color: var(--mustard-500); }
    .dash-sidebar__label { display: none; }
    .dash-topheader__logo { width: auto; padding: 0 16px; }
    .dash-topheader__bar { padding: 0 16px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .plan-picker { grid-template-columns: 1fr; }
    .thumb-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-content { padding: 24px 18px; }
}

/* ---------------------------------------------------------------------
   Lightbox — click any [data-lightbox] image (banner previews, uploaded
   photos, cover images) to see it full-size. One overlay is created once
   and reused for every image; see initLightbox() in main.js.
   --------------------------------------------------------------------- */
[data-lightbox] { cursor: zoom-in; }
.lightbox-overlay {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(16,31,24,0.92); padding: 40px 24px;
    align-items: center; justify-content: center;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay__img {
    max-width: min(1100px, 100%); max-height: 100%; width: auto; height: auto;
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg); cursor: default;
    object-fit: contain;
}
.lightbox-overlay__close {
    position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.12); color: var(--white); border: none; font-size: 22px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition);
}
.lightbox-overlay__close:hover { background: rgba(255,255,255,0.22); }

@media (max-width: 640px) {
    .lightbox-overlay { padding: 20px 14px; }
    .lightbox-overlay__close { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 18px; }
}