/* ==========================================================================
   Osun Tourismpreneur, public site design system
   ========================================================================== */

:root {
  /* Public-sector site: one consistent light theme for every visitor. */
  color-scheme: light;

  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #94a3b8;
  --paper: #ffffff;
  --paper-tint: #f8faf9;
  --surface: #ffffff;        /* cards, panels, any raised surface */
  --surface-alt: #f8faf9;    /* alternating band sections */
  --line: #e2e8e6;
  --primary: #0f766e;
  --primary-dark: #0b544e;
  --primary-tint: #e6f4f2;
  --accent: #f59e0b;
  --accent-tint: #fef3e2;
  --danger: #dc2626;
  --danger-tint: #fee2e2;
  --success: #16a34a;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .10);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .16);
  --header-h: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 15px/1.6 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper-tint);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; color: var(--ink-soft); }

/* Long-form article/guide body (blog.php): the global `a { text-decoration:
   none; color: inherit }` reset leaves in-text links with no visual
   distinction at all, so give them one here without touching links
   anywhere else on the site. */
.prose { font-size: 16px; line-height: 1.75; }
.prose h2 { font-size: 22px; margin-top: 1.6em; }
.prose h3 { font-size: 18px; margin-top: 1.4em; }
.prose p { color: var(--ink); margin-bottom: 1.2em; }
.prose a { color: var(--primary-dark); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; font-weight: 600; }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; color: var(--ink); }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--radius-md); margin: 1.5em 0; }
.prose strong { color: var(--ink); }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--primary); color: #fff;
  padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- buttons */
/*
 * One button system, used everywhere. Buttons are rectangular with a small
 * radius (not pills) so a row of them lines up cleanly regardless of label
 * length: appropriate for a public-sector service. A fixed min-height keeps
 * every variant on the same baseline; icons are sized and aligned by the
 * shared .icon rule below rather than per-button.
 */
.btn {
  --btn-h: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 0 18px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font: 600 14.5px/1 inherit; font-family: inherit; text-align: center;
  cursor: pointer; white-space: nowrap; vertical-align: middle;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.btn--accent { background: var(--accent); color: #1a1200; border-color: var(--accent); }
.btn--accent:hover { filter: brightness(.95); }

.btn--outline { background: var(--surface); color: var(--primary-dark); border-color: var(--primary); }
.btn--outline:hover { background: var(--primary-tint); }

/* Neutral/secondary: visible border so it never floats unanchored in a row. */
.btn--ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-tint); }

.btn--danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn--danger:hover { filter: brightness(.94); }

/* Quiet text button, for low-emphasis inline actions. */
.btn--link { background: none; border-color: transparent; color: var(--primary-dark); padding: 0 6px; min-height: 0; }
.btn--link:hover { text-decoration: underline; }

.btn--sm { --btn-h: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
.btn--lg { --btn-h: 50px; padding: 0 26px; font-size: 15.5px; }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: var(--btn-h); }        /* square icon-only button */
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* A row of actions: consistent gaps, wraps cleanly, no stray alignment. */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn-row--end { justify-content: flex-end; }

/* ------------------------------------------------------------------ icons */
.icon { flex: 0 0 auto; display: inline-block; vertical-align: -0.15em; }
.btn .icon { margin-inline-start: -2px; }              /* optical balance */
.btn--icon .icon { margin: 0; }
/* Icons sitting in body text/meta rows inherit colour but stay muted. */
.icon-muted { color: var(--ink-faint); }

/* Pressed/saved state for a favourite toggle. */
.btn.is-active { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-dark); }
.btn.is-active .icon { fill: currentColor; }

/* ----------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 22px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
.brand__mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; display: grid; place-items: center; font-weight: 800; }
.brand__text strong { color: var(--primary); }
.main-nav { display: flex; gap: 18px; margin-right: auto; }
.main-nav a {
  font-weight: 600; font-size: 14px; color: var(--ink-soft); padding: 8px 0;
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px;
}
.main-nav a .icon { color: var(--ink-faint); transition: color .15s ease; }
.main-nav a:hover .icon { color: var(--primary); }
.main-nav a:hover { color: var(--primary); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto;
  flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
/* Mobile drawer: slides in over the page rather than pushing it down, so the
   page never reflows and the menu is always legible on its own surface. */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(8, 20, 18, .55); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .22s ease;
}
body.nav-open .nav-backdrop { opacity: 1; }

.mobile-nav {
  position: fixed; top: 0; right: 0; z-index: 200;
  width: min(330px, 86vw); height: 100dvh;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -18px 0 46px rgba(15, 23, 42, .18);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Kept out of the layout entirely while closed: an off-screen but laid-out
     panel widens the document and lets the page scroll sideways. */
  display: none;
}
body.nav-open .mobile-nav { display: flex; transform: translateX(0); }

.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.mobile-nav__close {
  width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); border-radius: var(--radius-sm);
  display: grid; place-items: center; cursor: pointer;
}
.mobile-nav__close:hover { border-color: var(--primary); color: var(--primary-dark); }

.mobile-nav__scroll { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px; -webkit-overflow-scrolling: touch; }
.mobile-nav__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); margin: 14px 10px 6px;
}
.mobile-nav__scroll > .mobile-nav__label:first-child { margin-top: 4px; }
.mobile-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 15px; color: var(--ink);
}
.mobile-nav a:hover, .mobile-nav a:focus-visible { background: var(--primary-tint); color: var(--primary-dark); }
.mobile-nav a .icon { color: var(--ink-faint); flex: 0 0 auto; }
.mobile-nav a:hover .icon { color: var(--primary); }

.mobile-nav__foot {
  flex: 0 0 auto; padding: 14px 16px 18px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px; background: var(--paper-tint);
}

/* Hamburger morphs into a cross while the drawer is open. */
.nav-toggle span { transition: transform .22s ease, opacity .18s ease; transform-origin: center; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Lock the page behind the drawer. */
body.nav-open { overflow: hidden; }

/* Belt and braces: nothing should ever scroll the page sideways. */
html { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .nav-backdrop, .nav-toggle span { transition: none; }
}

.avatar-chip { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-tint); color: var(--primary-dark); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.account-menu { position: relative; }
.account-menu__toggle { background: none; border: 0; cursor: pointer; padding: 0; }
.account-menu__panel { display: none; position: absolute; right: 0; top: calc(100% + 10px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 220px; padding: 8px; }
.account-menu.is-open .account-menu__panel { display: block; }
.account-menu__who { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-weight: 600; }
.account-menu__who small { color: var(--ink-faint); font-weight: 400; }
.account-menu__panel a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; font-size: 14px; }
.account-menu__panel a .icon { color: var(--ink-faint); }
.account-menu__panel a:hover { background: var(--paper-tint); }

.flash-banner { padding: 12px 0; text-align: center; font-weight: 600; }
.flash-banner--success { background: var(--primary-tint); color: var(--primary-dark); }
.flash-banner--error { background: var(--danger-tint); color: var(--danger); }

/* --------------------------------------------------------------- error page */
.error-page { min-height: min(620px, calc(100vh - var(--header-h))); display: grid; place-items: center; padding: 72px 0; background: radial-gradient(circle at 75% 20%, var(--primary-tint), transparent 38%), var(--paper-tint); }
.error-page__inner { width: 100%; max-width: 760px; text-align: center; }
.error-page__code { color: var(--primary); font-size: clamp(76px, 16vw, 170px); font-weight: 800; line-height: .9; letter-spacing: -.08em; opacity: .16; margin-bottom: -12px; }
.error-page .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-dark); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.error-page h1 { font-size: clamp(30px, 5vw, 52px); margin-top: 10px; }
.error-page__lead { max-width: 560px; margin: 0 auto 28px; font-size: 17px; }
.error-page__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------- hero */
.hero { position: relative; padding: 64px 0 90px; overflow: hidden; isolation: isolate;
  background: var(--primary-tint); }
/* Osun State backdrop: Osun-Osogbo Sacred Grove, ends where the hero ends */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: image-set(url('../img/osun-hero-1200.jpg') 1x, url('../img/osun-hero.jpg') 2x);
  background-image: -webkit-image-set(url('../img/osun-hero-1200.jpg') 1x, url('../img/osun-hero.jpg') 2x);
  background-size: cover; background-position: center 42%;
  filter: blur(1px); opacity: .94; transform: scale(1.04); animation: heroDrift 26s ease-in-out infinite alternate; }
/* Strong scrim gives the hero copy a stable reading surface without hiding the scene. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,18,25,.72) 0%, rgba(5,34,36,.48) 43%, rgba(8,45,42,.18) 78%, rgba(8,20,25,.08) 100%),
    linear-gradient(180deg, rgba(4,20,25,.08) 0%, rgba(4,20,25,.24) 72%, rgba(4,20,25,.46) 100%); }
@keyframes heroDrift { from { transform: scale(1.04) translate3d(0,0,0); }
                       to   { transform: scale(1.10) translate3d(-1.2%,-1%,0); } }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
.hero__credit { position: absolute; right: 12px; bottom: 8px; z-index: 1; font-size: 10.5px;
  color: var(--ink-faint); opacity: .75; }
.hero__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero__credit:hover { opacity: 1; }
.hero__inner { max-width: 720px; position:relative; z-index:1; color:#fff; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--primary-dark); margin-bottom: 20px; }
.hero h1 { font-size: clamp(32px, 5vw, 52px); color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.3); }
.hero p.lead { font-size: 17px; max-width: 560px; color:rgba(255,255,255,.9); text-shadow:0 1px 10px rgba(0,0,0,.35); }

.search-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px; margin-top: 30px; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto; gap: 10px; }
@media (max-width: 1080px) { .search-card { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .search-card .btn { grid-column: 1 / -1; }
  .search-field:nth-child(2) { border-right: 0; } }
.search-field { display: flex; flex-direction: column; gap: 4px; padding: 6px 14px; border-radius: var(--radius-md); }
.search-field:not(:last-child) { border-right: 1px solid var(--line); }
.search-field label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.search-field input, .search-field select { border: 0; font: inherit; font-size: 14.5px; padding: 4px 0; background: transparent; width: 100%; color: var(--ink); }
.search-field input::placeholder, .map-searchbar input::placeholder { color: #64748b; opacity: 1; }
.search-field select option, .map-searchbar select option { background: var(--surface); color: var(--ink); }
.search-field input:focus, .search-field select:focus { outline: none; }
.search-card .btn { align-self: center; padding: 14px 26px; }

.hero-stats { display: flex; gap: 36px; margin-top: 34px; flex-wrap: wrap; }
.hero-stats div strong { display: block; font-size: 26px; color: #fff; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.hero-stats div span { font-size: 13px; color: rgba(255,255,255,.82); }

/* --------------------------------------------------------------- sections */
.section { padding: 56px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.section-head h2 { font-size: 28px; }
.section-head p { margin: 0; max-width: 520px; }
.section--tint { background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------- categories */
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.category-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; transition: box-shadow .15s ease, transform .15s ease; }
.category-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.category-card__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-tint); color: var(--primary-dark); display: grid; place-items: center; margin-bottom: 14px; font-size: 20px; }
.category-card h3 { font-size: 15.5px; margin-bottom: 4px; }
.category-card span { font-size: 13px; color: var(--ink-faint); }

/* ---------------------------------------------------------------- listing */
.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.listing-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; position: relative; }
.listing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.listing-card__media { position: relative; aspect-ratio: 16/10; background: var(--surface-alt); overflow: hidden; display: block; }
.listing-card__media img { width: 100%; height: 100%; object-fit: cover; }
.listing-card__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); }
.badge--featured { background: var(--accent); color: #1a1200; }
.badge--verified { background: var(--primary); color: #fff; }
.fav-btn { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); border: 0; display: grid; place-items: center; cursor: pointer; }
.listing-card__body { padding: 16px; }
.listing-card__cat { font-size: 12px; color: var(--primary-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.listing-card h3 { font-size: 16.5px; margin: 4px 0 6px; }
.listing-card__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.stars { color: #e2e8e6; display: inline-flex; gap: 1px; }
.stars .star { width: 13px; height: 13px; display: inline-block; background: currentColor; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars .star.is-full, .stars .star.is-half { color: var(--accent); }
.listing-card__location { font-size: 13px; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------------- CTA */
.cta-band { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-radius: var(--radius-lg); padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: rgba(255,255,255,.85); margin: 0; max-width: 480px; }
.cta-band .btn--primary { background: #fff; color: var(--primary-dark); }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--paper-tint); color: var(--ink-soft); padding: 56px 0 0; margin-top: 60px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 40px; }
.footer-brand p { color: var(--ink-soft); font-size: 13.5px; }
.footer-contact a { color: var(--primary-dark); font-weight: 600; }
.footer-col h3 { color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.footer-col a { display: block; padding: 6px 0; font-size: 14px; color: var(--ink-soft); }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--line); padding: 20px 0; font-size: 13px; color: var(--ink-faint); }

/* ------------------------------------------------------------------ forms */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; max-width: 480px; margin: 40px auto; box-shadow: var(--shadow-sm); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.form-group .hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }
.form-control {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 14.5px; background: var(--surface); color: var(--ink);
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.form-error { color: var(--danger); font-size: 12.5px; margin-top: 4px; }
.form-row { display: flex; gap: 14px; }
.form-row .form-group { flex: 1; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; margin: 0 0 20px; }
legend { font-weight: 700; padding: 0 8px; }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; }
.alert--error { background: var(--danger-tint); color: var(--danger); }
.alert--success { background: var(--primary-tint); color: var(--primary-dark); }
.alert--info { background: #eef2ff; color: #3730a3; }

/* -------------------------------------------------------- filter sidebar */
.directory-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.filter-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; position: sticky; top: calc(var(--header-h) + 16px); }
.filter-panel h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin: 18px 0 10px; }
.filter-panel h4:first-child { margin-top: 0; }
.filter-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-tint); color: var(--primary-dark); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.chip button { background: none; border: 0; cursor: pointer; color: inherit; font-weight: 700; }
.results-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.view-toggle { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.view-toggle a, .view-toggle button {
  background: var(--surface); border: 0; padding: 9px 16px; cursor: pointer;
  font-weight: 600; font-size: 13px; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.view-toggle a.is-active, .view-toggle button.is-active { background: var(--primary); color: #fff; }

.listing-list { display: flex; flex-direction: column; gap: 16px; }
.listing-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.listing-row:hover { box-shadow: var(--shadow-md); border-color: #cbd5d1; }
.listing-row__media { position: relative; display: block; background: var(--surface-alt); }
.listing-row__media img { width: 100%; height: 100%; object-fit: cover; min-height: 170px; }
.listing-row__body { padding: 18px 20px 18px 0; display: flex; flex-direction: column; gap: 8px; }
.listing-row__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.listing-row__head h3 { font-size: 17.5px; margin: 4px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.listing-row__summary { margin: 0; font-size: 14px; color: var(--ink-soft); }
.listing-row__sep { color: var(--ink-faint); }
.listing-row__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.listing-row__price { font-weight: 700; color: var(--primary-dark); font-size: 14.5px; }
.fav-btn--inline-row {
  position: static; width: 34px; height: 34px; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-faint);
  border-radius: var(--radius-sm); display: grid; place-items: center; cursor: pointer;
}
.fav-btn--inline-row:hover, .fav-btn--inline-row.is-active { border-color: var(--primary); color: var(--primary); }
.fav-btn--inline-row.is-active .icon { fill: currentColor; }

.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); font-weight: 600; font-size: 13.5px; }
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

.empty-state { text-align: center; padding: 60px 20px; }
.empty-state h3 { font-size: 20px; }
.data-table .empty-row td { padding: 0; }
.data-table .empty-row .empty-state { padding: 42px 20px; }
.data-table .empty-row .empty-state .icon { display:block; margin:0 auto 12px; color:var(--primary); }
.data-table tbody tr:not(.empty-row):has(td[colspan]:only-child) td { padding:0; text-align:center; font-size:0; }
.data-table tbody tr:not(.empty-row):has(td[colspan]:only-child) td::before { content:'Nothing to show'; display:block; padding:42px 20px 10px; color:var(--ink); font-size:15px; font-weight:700; }

/* --------------------------------------------------------------- listing detail */
.listing-hero { position: relative; height: 380px; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: -60px; }
.listing-hero img { width: 100%; height: 100%; object-fit: cover; }
.listing-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); }
.listing-detail-card { position: relative; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin: 0 40px; padding: 26px 30px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.listing-actions { flex: 0 0 auto; }
.fav-btn-inline .icon { transition: transform .15s ease; }
.fav-btn-inline:hover .icon { transform: scale(1.1); }
.listing-detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; margin-top: 40px; }
.detail-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; margin-bottom: 20px; }
.detail-block h2 { font-size: 19px; }
.sidebar-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; margin-bottom: 20px; position: sticky; top: calc(var(--header-h) + 16px); }
.contact-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.contact-row a { color: var(--primary-dark); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.contact-row a:hover { text-decoration: underline; }
.contact-row span { min-width: 0; }

.amenity-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; color: var(--ink-soft); }
.amenity-item .icon { color: var(--primary); }

.meta-pin { display: inline-flex; align-items: center; gap: 4px; }
.contact-row:last-child { border-bottom: 0; }
.hours-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.hours-row.is-today { font-weight: 700; color: var(--primary-dark); }

.review-item { border-bottom: 1px solid var(--line); padding: 18px 0; }
.review-item:last-child { border-bottom: 0; }
.review-item__head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.reviewer { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.enquiry-block { background: #fff; }
.enquiry-form { max-width: 640px; }
.enquiry-form .form-group { margin-bottom: 16px; }
.enquiry-form .form-control { display: block; box-sizing: border-box; }

/* ------------------------------------------------------------------- map */
.map-hero { position: relative; }
#map-canvas { width: 100%; height: 520px; background: var(--surface-alt); z-index: 1; }
.map-hero .map-searchbar {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 500; width: min(1100px, calc(100% - 40px));
  background: var(--surface); border-radius: 999px; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1.35fr 1.25fr 1fr 1fr 1fr auto; gap: 0; padding: 8px 8px 8px 4px;
  align-items: center;
}
.map-searchbar__field { padding: 4px 18px; border-right: 1px solid var(--line); }
.map-searchbar__field:last-of-type { border-right: 0; }
.map-searchbar input, .map-searchbar select {
  width: 100%; border: 0; background: transparent; font: inherit; font-size: 14.5px;
  color: var(--ink); padding: 8px 0;
}
.map-searchbar input:focus, .map-searchbar select:focus { outline: none; }
.map-searchbar .btn { border-radius: 999px; padding: 13px 30px; }

/* Leaflet pins/popups */
.osun-pin { background: none; border: 0; }
.osun-pin svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.map-popup { font: 13.5px/1.5 inherit; min-width: 170px; }
.map-popup strong { font-size: 14.5px; }
.map-popup__image { display: block; width: 100%; height: 92px; object-fit: cover; border-radius: 7px; margin: 0 0 8px; background: var(--surface-alt); }
.map-popup__badge { background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
.map-popup a { color: var(--primary); font-weight: 600; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
.map-location-help { margin: 10px 0 0; color: var(--ink-soft); font-size: 13px; }

/* Account enquiry inbox keeps the list and conversation comfortably usable
   on desktop while the global dashboard breakpoint stacks them on mobile. */
.account-enquiries { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); }
.account-enquiries__list { max-height: 70vh; overflow-y: auto; padding: 0; }
.account-enquiries__list .diff-row { display: block; }
.account-enquiries__list .diff-row.is-active { background: var(--primary-tint); }
.account-enquiries__list .diff-row span { font-size: 12px; color: var(--ink-faint); }
.account-enquiries__thread { min-width: 0; }
.enquiries-empty { max-width: 620px; margin-top: 24px; text-align: center; padding: 56px 32px; }
.enquiries-empty__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary-dark); }
.enquiries-empty h2 { font-size: 20px; margin-bottom: 8px; }
.enquiries-empty p { max-width: 430px; margin: 0 auto 22px; color: var(--ink-soft); }
.owner-review-card { padding: 0; overflow: hidden; }
.owner-review-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 26px; background: var(--paper-tint); border-bottom: 1px solid var(--line); }
.owner-review-card__identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.owner-review-card__identity strong, .owner-review-card__identity span { display: block; }
.owner-review-card__identity strong { font-size: 14px; }
.owner-review-card__identity div span { margin-top: 3px; color: var(--ink-soft); font-size: 13px; }
.owner-review-card__rating { flex: 0 0 auto; color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.owner-review-card__rating span { color: var(--accent); font-size: 18px; }
.owner-review-card__content { padding: 24px 26px 22px; }
.owner-review-card__content h2 { margin: 0 0 8px; font-size: 19px; }
.owner-review-card__content p { margin: 0; color: var(--ink-soft); line-height: 1.65; }
.owner-review-card__content .owner-review-card__date { margin-top: 16px; color: var(--ink-faint); font-size: 12.5px; }
.owner-review-response { padding: 20px 26px 24px; background: var(--surface-alt); border-top: 1px solid var(--line); }
.owner-review-response label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.owner-review-response .form-control { background: var(--surface); }
.owner-review-response__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.owner-review-response__footer span { color: var(--ink-faint); font-size: 12px; }
.reviews-empty { max-width: 620px; margin-top: 24px; text-align: center; padding: 56px 32px; }
.reviews-empty__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary-dark); }
.reviews-empty h2 { font-size: 20px; margin-bottom: 8px; }
.reviews-empty p { max-width: 430px; margin: 0 auto 22px; color: var(--ink-soft); }

.map-fallback { display: grid; place-items: center; height: 100%; padding: 40px; text-align: center; color: var(--ink-faint); }

/* Location map on a listing detail page */
#listing-map { width: 100%; height: 200px; border-radius: var(--radius-sm); margin-top: 12px; background: var(--surface-alt); z-index: 0; }
.owner-location-map { width: 100%; height: clamp(280px, 42vw, 430px); min-height:280px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); z-index: 0; }
.location-map-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 12px}.location-map-actions .hint{margin:0}
.social-field label{display:flex;align-items:center;gap:8px}.social-field__icon{width:26px;height:26px;border-radius:7px;display:inline-grid;place-items:center;background:var(--primary-tint);color:var(--primary-dark);font-size:14px;font-weight:800}.social-field__icon--instagram{font-size:22px}.social-field__icon--youtube{font-size:11px}.social-field__icon--linkedin{font-size:12px}

/* Split map/list layout (used by any future split view) */
.map-shell { display: grid; grid-template-columns: 420px 1fr; height: calc(100vh - var(--header-h)); }
.map-list { overflow-y: auto; border-right: 1px solid var(--line); padding: 16px; background: var(--surface); }
.map-list .listing-card { margin-bottom: 14px; }

/* -------------------------------------------------------------- dashboard */
.dash-shell { display: grid; grid-template-columns: 240px 1fr; gap: 0; min-height: calc(100vh - var(--header-h)); }
/* Portal pages (account/owner dashboards) already have their own sidebar
   nav, so includes/header.php sets $portal_mode to drop the public site's
   top menu there and nowhere else. The header's own .wrap still caps at
   max-width, which pinned the logo and avatar to the edges of a centred
   1240px box instead of the real viewport edges — spread it edge to edge
   only in this state. */
.portal-mode.site-header .wrap { max-width: none; }
.portal-mode .site-header__inner { justify-content: space-between; }
.portal-mode .header-actions { margin-left: 0; }
.dash-sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: 24px 16px; }
.dash-sidebar a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--ink-soft); margin-bottom: 2px; }
.dash-sidebar a.is-active, .dash-sidebar a:hover { background: var(--primary-tint); color: var(--primary-dark); }
/* Collapsible group of related sidebar links (e.g. Bookings + Booking
   Options), built on <details>/<summary> so it needs no JS and stays
   keyboard/screen-reader accessible. */
.dash-sidebar details { margin-bottom: 2px; }
.dash-sidebar summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--ink-soft); cursor: pointer; list-style: none; }
.dash-sidebar summary::-webkit-details-marker { display: none; }
.dash-sidebar summary:hover { background: var(--paper-tint); }
.dash-sidebar summary .chev { margin-left: auto; color: var(--ink-faint); transition: transform .15s ease; }
.dash-sidebar details[open] summary .chev { transform: rotate(180deg); }
.dash-sidebar details.has-active summary { color: var(--primary-dark); }
.dash-sidebar .dash-sidebar__sub { display: flex; flex-direction: column; padding: 2px 0 4px 14px; }
.dash-sidebar .dash-sidebar__sub a { font-size: 13.5px; padding: 9px 14px; }
.dash-main { padding: 28px 32px; }
.profile-settings-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:22px;align-items:start}.profile-card{margin:0;padding:24px}.profile-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line)}.profile-card__head h2{margin:2px 0 0;font-size:18px}.profile-card__badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:var(--primary-tint);color:var(--primary-dark);font-size:11px;font-weight:700;white-space:nowrap}.profile-avatar-row{display:flex;align-items:center;gap:16px;padding:0 0 22px;border-bottom:1px solid var(--line);margin-bottom:22px}.profile-avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--primary-tint);color:var(--primary-dark);font-size:22px;font-weight:800;flex:0 0 72px}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-avatar-row>div:last-child{flex:1}.profile-avatar-row label{display:block;font-weight:700;margin-bottom:7px}.profile-avatar-row input{padding:8px}.form-hint{display:block;color:var(--ink-faint);font-size:12px;margin-top:6px}.profile-password-card .form-group:last-of-type{margin-bottom:20px}.profile-form-note{margin:18px 0 0;color:var(--ink-faint);font-size:12px;line-height:1.5}.profile-danger{grid-column:1/-1;border-color:#f3c4c4;background:#fffafa}.profile-danger h2{margin:2px 0 0;color:var(--danger);font-size:18px}.profile-danger p{margin:10px 0 18px;color:var(--ink-soft);font-size:13.5px}
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; }
  .owner-listing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:12px}.owner-listing-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 8px 22px rgba(15,23,42,.05)}.owner-listing-card__media{height:150px;background:linear-gradient(135deg,var(--primary-tint),var(--paper-tint));position:relative;display:grid;place-items:center;overflow:hidden}.owner-listing-card__media img{width:100%;height:100%;object-fit:cover}.owner-listing-card__media>span:first-child{font-size:48px;color:var(--primary);font-weight:800}.owner-listing-card__media .status-pill{position:absolute;top:12px;right:12px}.owner-listing-card__body{padding:18px}.owner-listing-card__body h3{margin:3px 0 8px;font-size:18px}.owner-listing-card__meta{color:var(--ink-soft);font-size:13px;margin:0 0 16px}.owner-listing-card__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.owner-listing-card__actions form{margin:0}.owner-add-card{border-style:dashed;color:inherit;text-decoration:none;display:block;transition:box-shadow .15s ease,transform .15s ease}.owner-add-card:hover,.owner-add-card:focus-visible{box-shadow:var(--shadow-md);transform:translateY(-2px)}.owner-add-card:focus-visible{outline:3px solid var(--primary-tint);outline-offset:2px}.owner-add-card .owner-listing-card__media>span:first-child{font-size:48px}.listing-editor-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(260px,1fr);gap:22px;align-items:start}.listing-editor-form{max-width:none}.listing-live-preview{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px;position:sticky;top:24px}.listing-live-preview__image{height:150px;background:var(--paper-tint);border-radius:var(--radius-sm);display:grid;place-items:center;overflow:hidden;color:var(--ink-faint);font-size:13px}.listing-live-preview__image img{width:100%;height:100%;object-fit:cover}.listing-live-preview h2{font-size:21px;margin:4px 0 8px}.listing-live-preview p:not(.eyebrow){color:var(--ink-soft);font-size:14px;min-height:38px}.listing-live-preview__footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;color:var(--ink-faint);font-size:12px}
.stat-card strong { display: block; font-size: 26px; color: var(--primary-dark); }
.stat-card span { font-size: 13px; color: var(--ink-soft); }
.account-welcome { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.account-welcome h1 { margin:2px 0 6px; font-size:28px; }
.account-welcome p:not(.eyebrow) { margin:0; max-width:620px; color:var(--ink-soft); }
.account-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.account-stat-card { position:relative; display:block; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); color:var(--ink); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.account-stat-card:hover { transform:translateY(-2px); border-color:var(--primary); box-shadow:var(--shadow-sm); }
.account-stat-card__icon { display:grid; place-items:center; width:34px; height:34px; margin-bottom:16px; border-radius:10px; background:var(--primary-tint); color:var(--primary-dark); }
.account-stat-card strong,.account-stat-card>span:not(.account-stat-card__icon),.account-stat-card small { display:block; }
.account-stat-card strong { font-size:27px; color:var(--primary-dark); }
.account-stat-card>span:not(.account-stat-card__icon) { margin-top:2px; font-size:13px; font-weight:700; }
.account-stat-card small { margin-top:8px; color:var(--ink-faint); font-size:12px; }
.account-verification { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.account-verification__icon { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:9px; background:rgba(255,255,255,.55); }
.account-verification strong,.account-verification span:not(.account-verification__icon) { display:block; }
.account-verification span:not(.account-verification__icon) { margin-top:2px; font-size:13px; }
.account-dashboard-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }
.account-panel { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.account-panel__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px 16px; border-bottom:1px solid var(--line); }
.account-panel__head h2 { margin:2px 0 0; font-size:17px; }
.account-panel__head>a { color:var(--primary-dark); font-size:13px; font-weight:700; }
.account-booking { display:flex; align-items:center; gap:12px; padding:15px 22px; color:var(--ink); border-bottom:1px solid var(--line); }
.account-booking:last-child,.account-notification:last-child { border-bottom:0; }
.account-booking:hover { background:var(--paper-tint); }
.account-booking__icon { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:9px; color:var(--primary-dark); background:var(--primary-tint); }
.account-booking>span:nth-child(2) { min-width:0; flex:1; }.account-booking strong,.account-booking small { display:block; }.account-booking strong { font-size:13.5px; }.account-booking small { margin-top:3px; color:var(--ink-faint); font-size:12px; }
.account-panel__empty { padding:34px 22px 38px; text-align:center; }.account-panel__empty>span { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 12px; border-radius:50%; color:var(--primary-dark); background:var(--primary-tint); }.account-panel__empty strong { display:block; font-size:14px; }.account-panel__empty p { margin:5px auto 16px; max-width:260px; color:var(--ink-soft); font-size:13px; }
.account-notification { display:flex; gap:12px; padding:15px 22px; border-bottom:1px solid var(--line); }.account-notification__dot { flex:0 0 8px; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--accent); }.account-notification strong,.account-notification p,.account-notification small { display:block; }.account-notification strong { font-size:13.5px; }.account-notification p { margin:4px 0; color:var(--ink-soft); font-size:13px; }.account-notification small { color:var(--ink-faint); font-size:11.5px; }
.account-quick-links { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:20px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--paper-tint); }.account-quick-links h2 { margin:2px 0 0; font-size:17px; }.account-quick-links .btn { margin-left:6px; }
.account-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }.account-page-heading h1 { margin:2px 0 6px; font-size:28px; }.account-page-heading p:not(.eyebrow) { margin:0; color:var(--ink-soft); }.account-empty-panel { max-width:620px; text-align:center; padding:56px 28px; }.account-empty-panel__icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 16px; border-radius:50%; background:var(--primary-tint); color:var(--primary-dark); }.account-empty-panel h2 { margin-bottom:8px; font-size:20px; }.account-empty-panel p { max-width:390px; margin:0 auto 20px; color:var(--ink-soft); }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.data-table th, .data-table td { padding: 12px 16px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.data-table th { background: var(--paper-tint); font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; color: var(--ink-faint); }
.status-pill { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-pill--published, .status-pill--approved, .status-pill--active, .status-pill--successful, .status-pill--paid, .status-pill--confirmed { background: #dcfce7; color: #166534; }
.status-pill--pending_review, .status-pill--pending, .status-pill--pending_payment, .status-pill--payment_required, .status-pill--initiated { background: #fef3c7; color: #92400e; }
.status-pill--draft, .status-pill--archived { background: #e2e8f0; color: #475569; }
.status-pill--rejected, .status-pill--suspended, .status-pill--failed, .status-pill--cancelled, .status-pill--expired { background: var(--danger-tint); color: var(--danger); }
.status-pill--changes_requested { background: #dbeafe; color: #1e40af; }

/* ------------------------------------------------- responsive grid utils */
/* auto-fit grids: never overflow, no media query needed. Use these instead of
   inline grid-template-columns, which a media query cannot override. */
.grid-auto      { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-auto--sm  { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grid-auto--lg  { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------------------------------------------------------------- utility */
.hide-mobile { display: inline-flex; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.progress-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-bar__fill { height: 100%; background: var(--primary); }
.step-indicator { display: flex; gap: 8px; margin-bottom: 30px; }
.step-indicator span { flex: 1; height: 4px; border-radius: 999px; background: var(--line); }
.step-indicator span.is-done, .step-indicator span.is-active { background: var(--primary); }

/* ------------------------------------------------------------- responsive */
.listing-live-preview__description{line-height:1.55}.listing-live-preview__details{display:grid;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:14px 0}.listing-live-preview__details div{display:flex;justify-content:space-between;gap:10px;font-size:12px}.listing-live-preview__details span{color:var(--ink-soft);text-align:right}
@media (max-width: 980px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .hide-mobile { display: none !important; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .listing-grid { grid-template-columns: repeat(2, 1fr); }
  .directory-layout, .listing-detail-layout, .map-shell, .dash-shell { grid-template-columns: 1fr; }
  .account-enquiries { grid-template-columns: 1fr; }
  .account-enquiries__list { max-height: 300px; }
  .listing-row { grid-template-columns: 1fr; }
  .listing-row__media img { min-height: 190px; aspect-ratio: 16/9; }
  .listing-row__body { padding: 16px 18px; }
  .owner-listing-grid { grid-template-columns: 1fr; }
  .filter-panel, .sidebar-card { position: static; }
  .search-card { grid-template-columns: 1fr; }
  .search-field:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--line); }
  .listing-detail-card { margin: 0 16px; flex-direction: column; }
  .map-shell { height: auto; }
  .map-list { max-height: 50vh; }
  #map-canvas { height: 380px; }
  .map-hero .map-searchbar {
    position: static; transform: none; width: auto; margin: -28px 16px 0;
    border-radius: var(--radius-lg); grid-template-columns: 1fr; padding: 12px;
  }
  .map-searchbar__field { border-right: 0; border-bottom: 1px solid var(--line); padding: 4px 12px; }
  .map-searchbar__field:last-of-type { border-bottom: 0; }
  .map-searchbar .btn { width: 100%; margin-top: 8px; }
  .dash-main { padding: 24px 20px; }
  .account-stat-grid { grid-template-columns:repeat(2,1fr); }
  .account-dashboard-grid { grid-template-columns:1fr; }
  .owner-location-map{height:clamp(260px,65vw,360px);min-height:260px}.location-map-actions{align-items:stretch}.location-map-actions .btn{width:100%}
  .listing-editor-layout{grid-template-columns:1fr}.listing-live-preview{position:static;grid-row:1}.listing-editor-form{grid-row:2}
  .profile-settings-grid{grid-template-columns:1fr;gap:16px}.profile-danger{grid-column:auto}.profile-card{padding:20px}.profile-card__head{align-items:flex-start}.profile-avatar-row{align-items:flex-start;flex-direction:column;gap:12px}.profile-avatar-row>div:last-child{width:100%}
  .data-table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .category-grid, .listing-grid, .stat-grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; text-align: center; padding: 32px 24px; }
  .form-row { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-header__inner { gap: 12px; }
  .brand { min-width: 0; }
  .brand__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .form-card { margin: 24px 16px; padding: 24px 20px; }
  .listing-detail-card { padding: 22px 20px; }
  .detail-block, .sidebar-card { padding: 18px; }
  .results-toolbar { align-items: stretch; }
  .results-toolbar > div { width: 100%; flex-wrap: wrap; }
  .results-toolbar #use-location { margin-left: 0 !important; }
  .results-toolbar .form-control { flex: 1 1 150px; min-width: 0; }
  .error-page { min-height: calc(100vh - var(--header-h)); padding: 48px 0; }
  .error-page__lead { font-size: 15px; }
}

@media (max-width: 420px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
.site-header__inner { height: 60px; }
  .brand__mark { width: 30px; height: 30px; }
  .brand { font-size: 13px; gap: 7px; }
  .header-actions { gap: 4px; }
  .nav-toggle { padding: 7px 4px; }
  .hero { padding-top: 42px; padding-bottom: 58px; }
  .hero h1 { font-size: clamp(29px, 10vw, 38px); }
  .hero p.lead { font-size: 15px; }
  .search-card { padding: 12px; margin-top: 22px; }
  .search-card .btn, .cta-band .btn, .error-page__actions .btn { width: 100%; }
  .section { padding: 42px 0; }
  .section-head h2 { font-size: 24px; }
  .listing-card__body { padding: 14px; }
  .dash-main { padding: 20px 12px; }
  .account-welcome { align-items:flex-start; flex-direction:column; gap:14px; }
  .account-welcome h1 { font-size:24px; }
  .account-welcome .btn { width:100%; justify-content:center; }
  .account-page-heading { align-items:flex-start; flex-direction:column; gap:14px; }
  .account-page-heading h1 { font-size:24px; }
  .account-page-heading .btn { width:100%; justify-content:center; }
  .account-stat-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .account-stat-card { padding:14px; }
  .account-stat-card__icon { margin-bottom:12px; }
  .account-quick-links { align-items:flex-start; flex-direction:column; }
  .account-quick-links>div:last-child { width:100%; display:flex; flex-wrap:wrap; gap:6px; }
  .account-quick-links .btn { margin:0; }
  .dash-sidebar { padding: 16px 12px; }
}


/* ======================================================================
   Auth pages (sign in / create account / password reset)
   ====================================================================== */
.auth-shell { display: grid; grid-template-columns: minmax(340px, 42%) 1fr; min-height: 100vh; }

.auth-aside {
  background: linear-gradient(160deg, var(--primary-dark), #0a3f3a 55%, #072e2a);
  color: #e8f5f3; padding: 40px 44px; display: flex; flex-direction: column; gap: 32px;
  position: relative; overflow: hidden;
}
.auth-aside::after {
  content: ""; position: absolute; inset: auto -80px -120px auto;
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.brand--light .brand__text, .brand--light .brand__text strong { color: #fff; }
.brand--light .brand__mark { background: rgba(255,255,255,.16); }
.auth-aside__body { margin-top: auto; position: relative; }
.auth-aside__body h2 { font-size: 26px; color: #fff; margin-bottom: 20px; line-height: 1.25; }
.auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.88); }
.auth-points .icon { flex: 0 0 auto; margin-top: 2px; color: #7fd8cc; }
.auth-aside__foot { margin: auto 0 0; font-size: 12.5px; color: rgba(255,255,255,.55); position: relative; }

.auth-main {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; background: var(--paper-tint);
}
.auth-card {
  width: 100%; max-width: 460px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 34px 30px; box-shadow: var(--shadow-sm);
}
.auth-card__head { margin-bottom: 22px; }
.auth-card__head h1 { font-size: 24px; margin-bottom: 6px; }
.auth-card__head p { margin: 0; font-size: 14.5px; }
.auth-foot { margin: 20px 0 0; font-size: 14px; text-align: center; color: var(--ink-soft); }
.auth-foot a { color: var(--primary-dark); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }

/* Field with a leading icon */
.field { margin-bottom: 16px; }
.field > label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.field__control { position: relative; display: flex; align-items: center; }
.field__control > .icon {
  position: absolute; left: 13px; color: var(--ink-faint); pointer-events: none;
}
.field__control .form-control { padding-left: 40px; }
.field__control .form-control:focus ~ .icon { color: var(--primary); }
.field .hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }
.field .form-error { margin-top: 5px; }

/* Password visibility toggle */
.field__toggle {
  position: absolute; right: 8px; background: none; border: 0; cursor: pointer;
  color: var(--ink-faint); padding: 6px; border-radius: 6px; display: grid; place-items: center;
}
.field__toggle:hover { color: var(--primary-dark); background: var(--paper-tint); }

/* Account-type chooser */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.choice {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start;
  transition: border-color .15s ease, background .15s ease;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:hover { border-color: var(--primary); }
.choice__icon { color: var(--ink-faint); margin-top: 1px; }
.choice__text strong { display: block; font-size: 14px; }
.choice__text span { font-size: 12.5px; color: var(--ink-faint); }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.choice:has(input:checked) .choice__icon { color: var(--primary-dark); }
.choice:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Consent row */
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); margin: 4px 0 18px; }
.consent input { margin-top: 3px; flex: 0 0 auto; }
.consent a { color: var(--primary-dark); font-weight: 600; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; color: var(--ink-faint); font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; min-height: 0; }
  .auth-aside { padding: 22px 20px; gap: 16px; }
  .auth-aside__body { margin-top: 0; }
  .auth-aside__body h2 { font-size: 20px; margin-bottom: 12px; }
  .auth-points { display: none; }
  .auth-aside__foot { display: none; }
  .auth-aside::after { display: none; }
  .auth-main { padding: 26px 16px 48px; }
  .auth-card { padding: 24px 20px; border: 0; box-shadow: none; background: transparent; }
  .choice-grid { grid-template-columns: 1fr; }
}


/* ======================================================================
   Page head + contact page
   ====================================================================== */
.page-head { background: linear-gradient(180deg, var(--primary-tint), transparent); padding: 44px 0 28px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: 32px; margin-bottom: 8px; }
.page-head p { max-width: 620px; margin: 0; font-size: 15.5px; }

.contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: start; }

.contact-details { display: flex; flex-direction: column; gap: 14px; }
.contact-card {
  display: flex; gap: 14px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--primary);
  border-radius: var(--radius-md); padding: 20px;
  transition: border-left-color .15s ease, box-shadow .15s ease;
}
.contact-card:hover { border-left-color: var(--accent); box-shadow: var(--shadow-sm); }
.contact-card__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  background: var(--primary-tint); color: var(--primary-dark);
  display: grid; place-items: center;
}
.contact-card h2 { font-size: 15px; margin-bottom: 4px; }
.contact-card p { margin: 0 0 6px; font-size: 14.5px; }
.contact-card a:not(.btn) { color: var(--primary-dark); font-weight: 600; }
.contact-card a:not(.btn):hover { text-decoration: underline; }
.contact-card__note { font-size: 13px; color: var(--ink-faint); }

.contact-form-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px;
}
.contact-form-panel h2 { font-size: 20px; margin-bottom: 18px; }

.contact-success { text-align: center; padding: 30px 10px; }
.contact-success__icon {
  width: 60px; height: 60px; border-radius: 50%; background: var(--primary-tint);
  color: var(--primary-dark); display: grid; place-items: center; margin: 0 auto 16px;
}
.contact-success h2 { margin-bottom: 6px; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  /* Sending a message is the primary task on a phone, so the form leads and
     the reference details follow it. */
  .contact-form-panel { order: 1; padding: 22px 18px; }
  .contact-details     { order: 2; }
  .page-head { padding: 30px 0 22px; }
  .page-head h1 { font-size: 26px; }
}