/* =====================================================================
   VizianagaramDirectory.in — Design System
   One stylesheet, CSS-variable theming per vertical (default / restaurant /
   hospital / hall). Fonts: Poppins (display) + Inter (body), Google Fonts.
   ===================================================================== */

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ---- Design tokens ---------------------------------------------------- */
:root{
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --ink: #101828;
  --ink-soft: #475467;
  --ink-faint: #98a2b3;
  --paper: #ffffff;
  --surface: #f7f8fb;
  --border: #e4e7ec;

  --brand-pin: #e11d2e;

  /* default / home theme */
  --primary: #16224a;
  --primary-dark: #0b1329;
  --accent: #e11d2e;
  --accent-dark: #b8121f;
  --accent-soft: #fdeceb;
  --on-primary: #ffffff;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08), 0 12px 32px -8px rgba(16,24,40,.12);
  --shadow-lg: 0 20px 48px -12px rgba(16,24,40,.28);
  --container: 1200px;
}

/* Restaurant theme — warm, dark, appetite-driven */
body.theme-restaurant{
  --primary: #241512;
  --primary-dark: #150c0a;
  --accent: #e2231a;
  --accent-dark: #b81a13;
  --accent-soft: #fdece9;
  --on-primary: #fff8f2;
}

/* Hospital theme — clean, trustworthy teal */
body.theme-hospital{
  --primary: #0d3b40;
  --primary-dark: #082a2e;
  --accent: #0f8b8d;
  --accent-dark: #0b6e70;
  --accent-soft: #e6f6f6;
  --on-primary: #ffffff;
}

/* Function-halls theme — celebratory royal purple */
body.theme-hall{
  --primary: #3b0f6b;
  --primary-dark: #26073f;
  --accent: #7c3aed;
  --accent-dark: #6023c0;
  --accent-soft: #f2ebfd;
  --on-primary: #ffffff;
}

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .font-display{ font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section{ padding: 64px 0; }
.section--tight{ padding: 40px 0; }
.section--surface{ background: var(--surface); }

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

/* ---- Buttons ---------------------------------------------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{ background: var(--accent); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn--primary:hover{ background: var(--accent-dark); }
.btn--dark{ background: var(--primary); color: #fff; }
.btn--dark:hover{ background: var(--primary-dark); }
.btn--outline{ background: transparent; border-color: var(--accent); color: var(--accent); }
.btn--outline:hover{ background: var(--accent-soft); }
.btn--light{ background: #fff; color: var(--primary); }
.btn--outline-light{ background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn--outline-light:hover{ background: rgba(255,255,255,.12); }
.btn--block{ width: 100%; }
.btn--sm{ padding: 9px 16px; font-size: 13px; }
.btn[disabled]{ opacity: .55; cursor: not-allowed; transform: none; }

/* ---- Header / Nav ---------------------------------------------------- */
.site-header{ position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--border); }
/* Wider than the site's normal 1200px .container — the header packs a logo,
   8 nav links and a phone pill into one row, which needs more breathing
   room than a content column does. Without this, the row is just barely
   too tight at the standard container width and the last couple of nav
   items (Hot Deals, Jobs, Contact Us) crowd or clip against the phone pill
   even on a full-width desktop screen. */
.site-header .container{ max-width: 1360px; }
.site-header__inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.brand{ display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--primary); }
.brand__pin{ color: var(--brand-pin); display: inline-flex; }
.brand__accent{ color: var(--brand-pin); }
.brand--footer{ color: #fff; }
.brand--footer .brand__accent{ color: #ff6b6b; }

/* Nav items must always sit side by side on one line — never stack their
   own label text into two lines. white-space:nowrap stops that; flex-shrink:0
   stops the flexbox from squeezing an item's box narrower than its text
   (which is what forces the wrap in the first place); overflow-x:auto is a
   safety net so that if the full nav genuinely doesn't fit a given viewport,
   it scrolls sideways instead of wrapping or overlapping other header items.
   The scrollbar itself is hidden (still scrollable via trackpad/drag/arrow
   keys) so it doesn't look like a stray UI element on desktop. */
.main-nav{
  display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: 14.5px; color: var(--ink-soft);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.main-nav::-webkit-scrollbar{ display: none; }
.main-nav a{ white-space: nowrap; flex: 0 0 auto; }
.main-nav a.active,
.main-nav a:hover{ color: var(--accent); }

.site-header__actions{ display: flex; align-items: center; gap: 14px; flex: none; }
.phone-pill{ display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--primary); white-space: nowrap; }
.phone-pill svg{ color: var(--accent); flex: none; }

/* Between the mobile hamburger breakpoint (680px) and desktop, the nav has
   the least room — reclaim space by dropping the phone number's text (the
   dialable pill icon stays) before the nav is ever forced to scroll. */
@media (max-width: 1240px){
  .main-nav{ gap: 16px; font-size: 13.5px; }
  .phone-pill__text{ display: none; }
  .phone-pill{ padding: 10px 12px; }
}

.nav-toggle{ display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; }
.nav-toggle span{ display: block; width: 22px; height: 2px; background: var(--primary); border-radius: 2px; }

/* ---- Flash messages ---------------------------------------------------- */
.flash-stack{ margin-top: 16px; display: grid; gap: 8px; }
.flash{ position: relative; padding: 14px 40px 14px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; }
.flash--success{ background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.flash--error{ background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.flash--info{ background: #eff8ff; color: #175cd3; border: 1px solid #b2ddff; }
.flash__close{ position: absolute; right: 10px; top: 8px; background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; opacity: .6; }

/* ---- Hero + booking/search widget layout ------------------------------ */
.hero{ position: relative; background: var(--primary); color: #fff; overflow: hidden; }
.hero::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0,0,0,.55), rgba(0,0,0,.15)); }
.hero__bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }

/* ---- Hero carousel (homepage) ------------------------------------------- */
.hero--carousel .hero__slide{ opacity: 0; transition: opacity 1.4s ease; z-index: 0; }
.hero--carousel .hero__slide.is-active{ opacity: .55; z-index: 1; }
.hero__dots{ position: absolute; left: 50%; bottom: 18px; z-index: 3; display: flex; gap: 8px; transform: translateX(-50%); }
.hero--carousel .hero__dots{ bottom: 78px; }
.hero__dot{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; padding: 0; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.hero__dot:hover{ background: rgba(255,255,255,.7); }
.hero__dot.is-active{ background: #fff; transform: scale(1.15); }

/* Decorative graphic layer — soft floating accent shapes + a wave divider
   at the base, so the hero reads as a designed illustration rather than a
   plain photo-with-overlay banner. Purely decorative (aria-hidden), sits
   between the photo/overlay and the headline text in the stacking order. */
.hero__blob{ position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 32% 32%, rgba(255,255,255,.5), rgba(255,255,255,0) 72%); }
.hero__blob--1{ width: 260px; height: 260px; top: -80px; left: -60px; opacity: .5; }
.hero__blob--2{ width: 180px; height: 180px; bottom: 60px; right: 6%; opacity: .35; }
.hero__blob--3{ width: 100px; height: 100px; top: 30%; right: 20%; opacity: .3; background: radial-gradient(circle at 32% 32%, var(--accent), rgba(255,255,255,0) 72%); }
.hero__wave{ position: absolute; left: 0; right: 0; bottom: -2px; z-index: 2; line-height: 0; pointer-events: none; }
.hero__wave svg{ display: block; width: 100%; height: 64px; }

@media (max-width: 640px){
  .hero__blob--1{ width: 160px; height: 160px; }
  .hero__blob--2{ width: 120px; height: 120px; }
  .hero__blob--3{ display: none; }
  .hero__wave svg{ height: 40px; }
  .hero--carousel .hero__dots{ bottom: 54px; }
}

/* ---- Hero side cards (homepage) -----------------------------------------
   Left: a tilted "poster card" carousel of local Vizianagaram photos.
   Right: the top Featured (or Sponsored) ad, promoted into the hero itself.
   Both float, absolutely positioned, over the hero photo/overlay — same
   treatment the live site uses. Hidden on narrower screens (where there
   isn't room beside the centered headline) rather than squeezed down;
   the section below the hero still shows the remaining ads either way. */
.hero-poster,
.hero-ad-card{ display: none; }

/* Mobile/tablet fallback for the hero ad card above — same card content,
   but simple and static (no absolute positioning, no rotation animation)
   so the ad isn't invisible below the 1300px breakpoint where the fancy
   version doesn't have room to sit beside the hero's own text. Sits in
   normal document flow right after the hero's headline/widget content;
   scrolls horizontally if there's more than one ad rather than growing
   the page's height. Hidden once the desktop version takes over — see
   the >=1300px media query below. */
.hero-ad-strip{
  position: relative; z-index: 3; display: flex; gap: 14px; overflow-x: auto;
  padding: 4px 0 6px; margin: 0 auto; max-width: var(--container);
  scrollbar-width: none; -ms-overflow-style: none;
}
.hero-ad-strip::-webkit-scrollbar{ display: none; }
.hero-ad-strip__card{
  flex: 0 0 auto; width: min(78vw, 300px); display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.3);
  text-decoration: none; background: var(--primary);
}
.hero-ad-strip__head{ flex: none; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-align: center; padding: 9px 12px; }
.hero-ad-strip__media-wrap{ flex: none; background: #fff; }
.hero-ad-strip__media{ width: 100%; aspect-ratio: 4 / 3.4; object-fit: contain; display: block; }
.hero-ad-strip__body{ flex: 1; padding: 14px 16px 18px; color: #fff; text-align: center; }
.hero-ad-strip__body h4{ color: #fff; font-size: 15.5px; line-height: 1.3; margin: 0 0 4px; }
.hero-ad-strip__body p{ color: rgba(255,255,255,.75); font-size: 12.5px; margin: 0 0 12px; }
.hero-ad-strip__body .btn{ width: 100%; pointer-events: none; }

/* Slow, continuous "Ken Burns" zoom — used on the ad photo always, and on
   the poster photo when there's only one (nothing to crossfade between). */
@keyframes heroImageZoom{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}

/* The poster carousel's per-slide animation is defined inline in
   templates/home.php (see heroPosterCycle) because its keyframe percentages
   depend on how many photos exist — computed there, not fixed here. */

@media (min-width: 1300px){
  :root{
    --hero-poster-w: clamp(220px, 19vw, 320px);
    --hero-ad-w: clamp(260px, 22vw, 400px);
    --hero-card-inset: 26px;
    --hero-card-gap: 20px;
  }
  /* Guarantee the hero is always tall enough to fit the side card(s) fully
     centered, with clearance on both edges — without this, a shorter
     headline (fewer wrapped lines on a very wide screen, or a different
     ad's title/tagline length) shrinks the available space and the
     vertically-centered cards spill past the top/bottom edge and get cut
     off by overflow:hidden. 840px comfortably fits the tallest card
     (the ad card, ~600px including its rotation) with room to spare,
     even with the extra upward bias below that pulls both cards a bit
     higher so they clear the widget-card row underneath the headline.
     Scoped to .hero--has-poster/.hero--has-ad (added only on the pages
     that actually place one of these absolutely-positioned cards) rather
     than the bare ".hero > .container" — that unscoped selector used to
     out-specificity ".hero__inner"'s own "display:grid" on every OTHER
     page sharing the same .hero + .container markup (restaurants,
     hospitals, function halls, deals, jobs, categories), silently forcing
     their two-column hero (headline + widget) into a single stacked
     column at exactly this breakpoint. */
  .hero--has-poster > .container,
  .hero--has-ad > .container{
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero--has-poster.hero--has-ad{ min-height: 840px; }
  .hero--has-poster.hero--has-ad > .container{
    min-height: 840px;
    padding-left: calc(var(--hero-card-inset) + var(--hero-poster-w) + var(--hero-card-gap));
    padding-right: calc(var(--hero-card-inset) + var(--hero-ad-w) + var(--hero-card-gap));
  }
  /* A page with only the ad card (no poster) needs less reserved height —
     the ad card alone is ~580-650px tall including its rotation, not the
     840px home needs to fit two side-by-side cards. */
  .hero--has-ad:not(.hero--has-poster){ min-height: 660px; }
  .hero--has-ad:not(.hero--has-poster) > .container{
    min-height: 660px;
    padding-right: calc(var(--hero-card-inset) + var(--hero-ad-w) + var(--hero-card-gap));
  }
  /* The absolute rotating card has taken over — the in-flow mobile strip
     is no longer needed (and would otherwise show both at once). */
  .hero-ad-strip{ display: none; }

  /* Restaurants/Hospitals/Function Halls/Shops all keep their own
     two-column .hero__inner grid (headline+stats on the left, the search
     widget-card on the right) — unlike .hero--has-ad above, which is only
     safe on a hero with no .hero__inner (home's centered layout), forcing
     display:flex here would re-break that grid the same way the old
     unscoped ".hero > .container" rule once did (see the long comment
     above). So this is a separate modifier: it leaves .hero__inner's own
     display:grid alone and only reserves right-edge padding + height for
     the floating ad card beside the widget-card. */
  .hero--has-ad-side{ min-height: 660px; }
  .hero--has-ad-side > .hero__inner{
    min-height: 660px;
    padding-right: calc(var(--hero-card-inset) + var(--hero-ad-w) + var(--hero-card-gap));
  }

  .hero-poster{
    display: block; position: absolute; z-index: 4; top: 50%; left: var(--hero-card-inset);
    width: var(--hero-poster-w); transform: translateY(-64%) rotate(-6deg);
  }
  .hero-poster__frame{
    position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 20px;
    overflow: hidden; background: var(--primary); border: 8px solid #fff;
    box-shadow: 0 26px 52px rgba(0,0,0,.38);
  }
  .hero-poster__slide{
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; animation-name: heroPosterCycle; animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
  .hero-poster__slide.is-static{ opacity: 1; animation: heroImageZoom 8s ease-in-out infinite; }
  .hero-poster__tag{
    position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%) rotate(5deg);
    background: #fff; color: var(--ink); font-size: 14px; font-weight: 700;
    padding: 7px 16px; border-radius: 999px; box-shadow: 0 10px 22px rgba(0,0,0,.25);
    white-space: nowrap;
  }

  /* Featured Advertisement card — rotates through up to 3 active ads (see
     routes/home.php) using the same pure-CSS crossfade as the poster
     carousel. .hero-ad-card is just the sized/positioned box; each
     .hero-ad-card__slide is a full card stacked on top of the others. */
  .hero-ad-card{
    display: block; position: absolute; z-index: 4; top: 50%; right: var(--hero-card-inset);
    width: var(--hero-ad-w); aspect-ratio: 3 / 4.35; transform: translateY(-64%) rotate(4deg);
  }
  .hero-ad-card__slide{
    position: absolute; inset: 0; display: flex; flex-direction: column;
    border-radius: 20px; overflow: hidden; box-shadow: 0 26px 52px rgba(0,0,0,.38);
    text-decoration: none; opacity: 0; animation-name: heroAdCycle;
    animation-iteration-count: infinite; animation-timing-function: ease-in-out;
  }
  .hero-ad-card__slide.is-static{ opacity: 1; animation: none; }
  .hero-ad-card__head{
    flex: none; background: var(--accent); color: #fff; font-size: 14px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 13px 14px;
  }
  .hero-ad-card__body{
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    background: var(--primary); color: #fff; padding: 18px 18px 20px; text-align: center;
  }
  /* object-fit: contain (not cover) — an ad graphic is usually a flyer
     with its own header/logo and text laid out edge-to-edge, so cropping
     to fill the box (as a photo would tolerate) can slice off exactly the
     part that matters. White background so any letterboxed edge blends
     in with a typical white-background flyer instead of showing a gap. */
  .hero-ad-card__media-wrap{ flex: none; overflow: hidden; border-radius: 10px; margin-bottom: 14px; background: #fff; }
  .hero-ad-card__media{
    width: 100%; aspect-ratio: 4 / 3.75; object-fit: contain; display: block;
    animation: heroImageZoom 6s ease-in-out infinite;
  }
  .hero-ad-card__body h4{
    flex: none; color: #fff; font-size: 19px; line-height: 1.3; margin: 0 0 6px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .hero-ad-card__body p{
    flex: none; color: rgba(255,255,255,.75); font-size: 13.5px; margin: 0 0 14px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .hero-ad-card__body .btn{ flex: none; width: 100%; pointer-events: none; font-size: 14px; padding: 12px 16px; margin-top: auto; }
}

.hero__inner{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 72px 0; }
.hero__eyebrow{ text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--accent); }
.hero h1{ color: #fff; font-size: clamp(32px, 4vw, 48px); line-height: 1.12; margin: 14px 0 18px; }
.hero h1 em{ font-style: normal; color: var(--accent); }
.hero p{ color: rgba(255,255,255,.85); font-size: 17px; max-width: 46ch; margin-bottom: 26px; }
.hero__stats{ display: flex; gap: 28px; flex-wrap: wrap; margin-top: 34px; }
.hero-stat{ display: flex; align-items: center; gap: 10px; }
.hero-stat__icon{ width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
.hero-stat strong{ display: block; font-size: 14px; color: #fff; }
.hero-stat span{ font-size: 12px; color: rgba(255,255,255,.7); }

.widget-card{ background: #fff; color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 30px; }
.widget-card h3{ display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: 20px; color: var(--primary); }
.widget-card h3 svg{ color: var(--accent); }

/* ---- Browse-all-categories page ---------------------------------------- */
.category-card{
  display: block; text-align: center; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 32px 24px;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.category-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.category-card__icon{ font-size: 2.4rem; margin-bottom: 14px; }
.category-card__title{ font-size: 17px; margin-bottom: 8px; }
.category-card__desc{ font-size: 13.5px; color: var(--ink-soft); margin-bottom: 14px; }
.category-card__count{
  display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); padding: 5px 14px; border-radius: 999px;
}
.category-card--soon{ opacity: .7; cursor: default; }
.category-card__count--soon{ color: var(--ink-faint); background: var(--surface); }
.field{ position: relative; margin-bottom: 14px; }
.field label{ display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field-icon{ position: absolute; left: 14px; top: 38px; color: var(--ink-faint); pointer-events: none; }
.field input, .field select, .field textarea{
  width: 100%; padding: 13px 14px 13px 40px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 14.5px; transition: border-color .15s, box-shadow .15s;
}
.field textarea{ padding-left: 14px; resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field--no-icon input, .field--no-icon select{ padding-left: 14px; }
.field small.field-error{ color: #b42318; display: block; margin-top: 4px; font-size: 12px; }

/* ---- Section headings -------------------------------------------------- */
.section-head{ text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-head h2{ font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; }
.section-head p{ color: var(--ink-soft); font-size: 15.5px; }
.section-head__rule{ width: 64px; height: 3px; background: var(--accent); margin: 14px auto 0; border-radius: 2px; }
.section-head--split{ display: flex; align-items: flex-end; justify-content: space-between; text-align: left; max-width: none; margin-bottom: 28px; }

.load-more-wrap{ display: flex; justify-content: center; margin-top: 28px; }
.load-more-wrap .btn[disabled]{ opacity: .6; cursor: default; }

/* ---- Grids & Cards ------------------------------------------------------ */
.grid{ display: grid; gap: 24px; }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }

.card{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; display: flex; flex-direction: column; }
.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card__media{ position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface); }
.card__media img{ width: 100%; height: 100%; object-fit: cover; }
.card__badge{ position: absolute; top: 12px; left: 12px; background: rgba(16,24,40,.75); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.card__badge--open{ background: #16a34a; }
.card__badge--closed{ background: #b42318; }
.card__fav{ position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.card__body{ padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__title{ font-size: 17px; font-weight: 700; }
.card__meta{ font-size: 13.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.card__tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.tag{ background: var(--surface); border: 1px solid var(--border); font-size: 12px; padding: 4px 10px; border-radius: 999px; color: var(--ink-soft); }
.card__price{ font-weight: 700; color: var(--primary); }
.card__price span{ font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.card__footer{ margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.stars{ display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13.5px; color: #f59e0b; }
.star-icon{ width: 14px; height: 14px; fill: #f59e0b; }
.review-count{ color: var(--ink-faint); font-weight: 500; font-size: 13px; }

/* ---- Feature / trust strip ---------------------------------------------- */
.feature-strip{ background: var(--surface); border-radius: var(--radius-lg); padding: 40px; }
.feature-item{ display: flex; align-items: center; gap: 16px; }
.feature-item__icon{ width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.feature-item strong{ display: block; font-size: 15px; }
.feature-item span{ font-size: 13px; color: var(--ink-soft); }

/* ---- Icon-circle used in hero stats / feature grids -------------------- */
.icon-circle{ width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); margin: 0 auto 10px; }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band{ background: var(--primary); color: #fff; }
.cta-band__inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 46px 0; flex-wrap: wrap; }
.cta-band h2{ color: #fff; font-size: 24px; margin-bottom: 6px; }
.cta-band p{ color: rgba(255,255,255,.75); max-width: 52ch; }
.cta-band__actions{ display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Footer ---------------------------------------------------------- */
.site-footer{ background: #0b1329; color: rgba(255,255,255,.75); }
.footer-grid{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0 32px; }
.footer-about p{ font-size: 13.5px; margin: 14px 0 18px; color: rgba(255,255,255,.55); }
.footer-social{ display: flex; gap: 10px; }
.footer-social a{ width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.footer-col h4{ color: #fff; font-size: 14px; margin-bottom: 16px; }
.footer-col{ display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.footer-col a:hover{ color: #fff; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.45); }

/* ---- Tabs (category landing type switch) --------------------------------- */
.pill-tabs{ display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 4px; }
.pill-tabs a{ padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.pill-tabs a.active{ background: var(--accent); color: #fff; }

/* ---- Filter bar ------------------------------------------------------- */
.filter-bar{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm); }
.filter-bar select, .filter-bar input{ padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; }
.filter-bar .btn{ margin-left: auto; }

/* ---- Breadcrumb --------------------------------------------------------- */
.breadcrumb{ font-size: 13px; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }
.breadcrumb a:hover{ color: var(--accent); }

/* ---- Detail / shop page layout ------------------------------------------ */
.detail-hero{ position: relative; border-radius: var(--radius-lg); overflow: hidden; height: 320px; margin-bottom: -70px; }
.detail-hero img{ width: 100%; height: 100%; object-fit: cover; }
.detail-hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65)); }
.detail-card{ position: relative; z-index: 2; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px; margin: 0 24px; }
.detail-layout{ display: grid; grid-template-columns: 2fr 1fr; gap: 32px; margin-top: 40px; align-items: start; }
.detail-info h1{ font-size: 26px; margin-bottom: 8px; }
.detail-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.detail-chip{ display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border); padding: 8px 12px; border-radius: 999px; }
.detail-chip svg{ color: var(--accent); }
.gallery{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.gallery img{ border-radius: var(--radius-sm); aspect-ratio: 1/1; object-fit: cover; }

.side-panel{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 26px; position: sticky; top: 96px; }
.side-panel h3{ font-size: 17px; margin-bottom: 18px; }
.price-highlight{ background: var(--accent-soft); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; }
.price-highlight span{ display: block; font-size: 12px; color: var(--ink-soft); }
.price-highlight strong{ font-size: 22px; color: var(--primary); }

/* ---- Menu (restaurant detail) ------------------------------------------- */
.menu-block{ margin-bottom: 30px; }
.menu-block h3{ font-size: 18px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--accent-soft); }
.menu-item{ display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--border); }
.menu-item:last-child{ border-bottom: none; }
.menu-item__name{ display: flex; align-items: center; gap: 8px; font-weight: 600; }
.veg-dot{ width: 12px; height: 12px; border: 1.5px solid #16a34a; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.veg-dot::after{ content:""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.veg-dot--nonveg{ border-color: #b42318; }
.veg-dot--nonveg::after{ background: #b42318; }
.menu-item__desc{ font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.menu-item__price{ font-weight: 700; white-space: nowrap; }
.bestseller-tag{ font-size: 10.5px; background: #fff7ed; color: #c2410c; padding: 2px 8px; border-radius: 999px; font-weight: 700; margin-left: 6px; }

.slot-btn{ background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.slot-btn:hover{ border-color: var(--accent); color: var(--accent); }
.slot-btn.is-active{ background: var(--accent); border-color: var(--accent); color: var(--on-primary); }

.menu-tabs{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.menu-tab{ background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.menu-tab:hover{ border-color: var(--accent); color: var(--accent); }
.menu-tab.is-active{ background: var(--accent); border-color: var(--accent); color: var(--on-primary); }

.menu-items-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 18px; }
.menu-item-card{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.menu-item-card img{ width: 100%; height: 130px; object-fit: cover; }
.menu-item-card__body{ padding: 14px 16px; }
.menu-item-card__top{ display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.menu-item-card__top strong{ font-size: 14.5px; }
.menu-item-card p{ font-size: 12.5px; color: var(--ink-soft); margin: 0 0 8px; line-height: 1.5; }
.menu-item-card__price{ display: block; font-weight: 800; color: var(--accent-dark); font-size: 15px; }

.veg-dot{ width: 12px; height: 12px; border: 1.5px solid; border-radius: 3px; flex: none; display: inline-block; position: relative; }
.veg-dot::after{ content: ''; position: absolute; inset: 2px; border-radius: 50%; }
.veg-dot--veg{ border-color: #16a34a; }
.veg-dot--veg::after{ background: #16a34a; }
.veg-dot--nonveg{ border-color: #dc2626; }
.veg-dot--nonveg::after{ background: #dc2626; }

.order-links{ display: grid; gap: 10px; }
.order-link{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-radius: var(--radius-sm); font-weight: 700; color: #fff; box-shadow: var(--shadow-sm); }
.order-link--swiggy{ background: #fc8019; }
.order-link--zomato{ background: #e23744; }
.order-link:hover{ filter: brightness(1.05); transform: translateY(-1px); }

/* ---- Booking widget (hospital/hall) ------------------------------------- */
.booking-steps{ display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.booking-step{ width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: var(--ink-faint); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.booking-step.active{ background: var(--accent); color: #fff; }
.slot-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.slot{ border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 6px; text-align: center; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--surface); }
.slot:hover{ border-color: var(--accent); }
.slot.selected{ background: var(--accent); border-color: var(--accent); color: #fff; }
.slot.disabled{ opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* ---- Doctor list --------------------------------------------------------- */
.quick-stats{ display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.quick-stat{ display: flex; align-items: center; gap: 10px; }
.quick-stat__icon{ width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.quick-stat strong{ display: block; font-size: 14px; }
.quick-stat span{ display: block; font-size: 12px; color: var(--ink-soft); }

.doctor-row{ display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; }
.doctor-avatar{ width: 54px; height: 54px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex: none; }
.doctor-row__info{ flex: 1; }
.doctor-row__info strong{ font-size: 15px; }
.doctor-row__info div{ font-size: 13px; color: var(--ink-soft); }

/* ---- Amenity icons row ---------------------------------------------------- */
.amenity-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.amenity{ text-align: center; padding: 16px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.amenity svg{ color: var(--accent); margin: 0 auto 8px; }

/* ---- Hall availability calendar ------------------------------------------- */
.hall-calendar{ display: flex; flex-wrap: wrap; gap: 8px; }
.hall-calendar__day{ width: 56px; padding: 8px 4px; border-radius: var(--radius-sm); text-align: center; font-size: 12px; font-weight: 700; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; cursor: default; }
.hall-calendar__date{ font-size: 15px; }
.hall-calendar__month{ font-size: 10px; font-weight: 600; text-transform: uppercase; opacity: .7; }
.hall-calendar__day--available{ background: #e8f8ee; border-color: #b6e8c8; color: #1c7a3f; }
.hall-calendar__day--tentative{ background: #fff6e0; border-color: #f3d98a; color: #92680a; }
.hall-calendar__day--booked{ background: #fdecec; border-color: #f3b8b8; color: #ad2626; }

/* ---- Ticker bar ------------------------------------------------------------ */
.ticker-bar{ background: var(--primary-dark); color: #fff; overflow: hidden; white-space: nowrap; padding: 8px 0; }
.ticker-bar__track{ display: inline-flex; gap: 48px; padding-left: 100%; animation: ticker-scroll 32s linear infinite; }
.ticker-bar__item{ font-size: 13px; font-weight: 500; }
.ticker-bar__label{ display: inline-block; background: var(--accent); color: var(--on-primary); font-weight: 800; font-size: 10px; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; margin-right: 8px; text-transform: uppercase; }
@keyframes ticker-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-bar__track{ animation: none; padding-left: 16px; } }

/* ---- Sponsored ad cards ----------------------------------------------------- */
.ad-card{ position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; min-height: 200px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-md); background: var(--primary); }
.ad-card img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.82)); }
.ad-card__body{ position: relative; z-index: 1; padding: 20px; }
.ad-card__body h3{ color: #fff; font-size: 17px; margin: 4px 0; }
.ad-card__body p{ color: rgba(255,255,255,.82); font-size: 13px; margin: 0 0 10px; }

/* ---- Promo card — Featured/Sponsored ad grids + the mobile ad strip ----
   Most ads here are a flyer/poster graphic with its own text and logo
   baked in (a real estate flyer, a business card design), not a plain
   photo — so unlike .card/.ad-card, the image is letterboxed on white
   (object-fit: contain) rather than cropped to fill the box. Cropping a
   flyer cuts off exactly the part that matters, and stacking more text on
   top of a graphic that already has text produces the double-caption mess
   this replaces. This is the same treatment the homepage hero's rotating
   ad card uses — kept as one shared look sitewide. */
.promo-card{ display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); text-decoration: none; background: var(--primary); transition: transform .15s ease, box-shadow .15s ease; }
.promo-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.promo-card__head{ flex: none; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-align: center; padding: 11px 14px; }
.promo-card__media-wrap{ flex: none; background: #fff; }
.promo-card__media{ width: 100%; aspect-ratio: 4 / 3.1; object-fit: contain; display: block; }
.promo-card__body{ flex: 1; display: flex; flex-direction: column; padding: 18px 20px 22px; color: #fff; text-align: center; }
.promo-card__body h3{ color: #fff; font-size: 16.5px; margin: 0 0 6px; }
.promo-card__body p{ color: rgba(255,255,255,.75); font-size: 13px; margin: 0 0 12px; }
.promo-card__discount{ display: inline-block; background: #fff; color: var(--accent-dark); align-self: center; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.promo-card__body .btn{ margin-top: auto; pointer-events: none; }

/* ---- Promo marquee — home page's Featured/Sponsored, scrolling ----------
   Pure CSS, no JS timer (same reasoning as the hero cycles above): the
   track holds the ad list twice back-to-back and slides left by exactly
   one set's width (-50%), so the seam is invisible and it loops forever.
   Paused on hover/focus so a visitor actually has time to click a card
   instead of chasing it sideways. */
.promo-marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.promo-marquee__track{ display: flex; gap: 22px; width: max-content; animation: promoMarquee linear infinite; }
.promo-marquee:hover .promo-marquee__track,
.promo-marquee:focus-within .promo-marquee__track{ animation-play-state: paused; }
.promo-marquee .promo-card{ width: min(82vw, 300px); flex: none; }
@keyframes promoMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .promo-marquee__track{ animation: none; }
  .promo-marquee{ overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---- Deals ---------------------------------------------------------------- */
.deal-card{ position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 220px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-md); }
.deal-card img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deal-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.8)); }
.deal-card__body{ position: relative; z-index: 1; padding: 22px; }
.deal-card__discount{ display: inline-block; background: var(--accent); padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; margin-bottom: 8px; }

/* ---- Jobs ---------------------------------------------------------------- */
.job-row{ display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 14px; background: #fff; }
.job-row:hover{ box-shadow: var(--shadow-sm); }
.job-row h3{ font-size: 17px; margin-bottom: 6px; }
.job-row__meta{ display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ink-soft); }
.job-type-badge{ background: var(--accent-soft); color: var(--accent-dark); font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.job-type-badge--shop{ background: #e6f6ee; color: #0f8b5c; }
.job-type-badge--walkin{ background: #e8f0fe; color: #1d4ed8; }
.job-type-badge--job_mela{ background: #fff1e0; color: #b5650a; }
.job-type-badge--drive{ background: var(--accent-soft); color: var(--accent-dark); }
.job-type-badge--campus_drive{ background: #f1e9fe; color: #6d28d9; }
.job-type-badge--government{ background: #e0f2fe; color: #0369a1; }

/* Jobs hero carousel — shows the actual poster/flyer image for postings
   that have one (campus drives, walk-in melas, government notices),
   rotating 3-5 at a time. Image sits beside a text panel rather than
   behind it, since these posters are usually dense with their own text
   and would be unreadable under an overlay. */
.jobs-hero{ position: relative; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; overflow: hidden; }

/* The job-poster carousel + its ad card share one row: the carousel
   (poster + details panel) takes 3/4 of the width, a real visible ad
   card takes the remaining 1/4 -- see templates/jobs.php. An earlier
   version tried a small corner badge instead of a real column, but that
   read as too easy to miss for a paid placement, so it's a full card
   now, sized to match. When there's no ad at all, the row simply has
   one column (see --no-ad below) and the carousel uses the full width. */
.jobs-hero__row{ display: grid; grid-template-columns: 3fr 1fr; gap: 28px; align-items: stretch; max-width: var(--container); margin: 0 auto; padding: 36px 32px 64px; }
.jobs-hero__row--no-ad{ grid-template-columns: 1fr; }
.jobs-hero__slides{ position: relative; min-width: 0; }
.jobs-hero__slide{ display: none; }
.jobs-hero__slide.is-active{ display: grid; grid-template-columns: minmax(300px, 560px) 1fr; gap: 32px; align-items: center; }
.jobs-hero__media{ background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; padding: 12px; height: 460px; }
.jobs-hero__media img{ width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.jobs-hero__panel{ display: flex; flex-direction: column; min-width: 0; }
.jobs-hero__tag{ align-self: flex-start; background: rgba(255,255,255,.14); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.jobs-hero__panel h2{ color: #fff; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.22; margin-bottom: 14px; }
.jobs-hero__meta{ display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: rgba(255,255,255,.85); margin-bottom: 32px; }
.jobs-hero__footer{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: auto; }
.jobs-hero__source{ background: rgba(0,0,0,.28); font-size: 12px; padding: 6px 12px; border-radius: 999px; color: rgba(255,255,255,.85); }
.jobs-hero__ctas{ display: flex; gap: 10px; flex-wrap: wrap; }
.jobs-hero__cta{ background: #1fae5a; color: #fff; }
.jobs-hero__cta:hover{ background: #189049; }
.jobs-hero .hero__dots{ bottom: 14px; }

/* The 1/4-width ad card -- full-height so it visually balances the
   poster+panel column beside it, using the same "white media background,
   object-fit: contain" treatment as every other ad card sitewide so a
   flyer-style graphic never gets cropped. .jobs-hero__ad-col is just the
   sized/positioned box; when there's more than one Featured/Sponsor ad,
   each .jobs-hero__ad-col__slide is a full card stacked on top of the
   others and pure-CSS crossfades through them (hero_cycle_css() in
   helpers.php) -- the same rotation every other page's hero ad card uses,
   so this one isn't the odd static one out. With just 1 ad it sits still
   (.is-static), same as everywhere else. */
.jobs-hero__ad-col{ position: relative; min-width: 0; height: 100%; }
.jobs-hero__ad-col__slide{
  position: absolute; inset: 0; display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; text-decoration: none; opacity: 0;
  background: var(--primary); box-shadow: 0 20px 40px rgba(0,0,0,.35);
  animation-iteration-count: infinite; animation-timing-function: ease-in-out;
}
.jobs-hero__ad-col__slide.is-static{ opacity: 1; animation: none; }
.jobs-hero__ad-col-head{
  flex: none; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; text-align: center; padding: 11px 12px;
}
.jobs-hero__ad-col-media-wrap{ flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.jobs-hero__ad-col-media{ width: 100%; height: 100%; object-fit: contain; display: block; animation: heroImageZoom 6s ease-in-out infinite; }
.jobs-hero__ad-col-body{ flex: none; padding: 14px 16px 18px; color: #fff; text-align: center; }
.jobs-hero__ad-col-body h4{
  color: #fff; font-size: 15px; line-height: 1.3; margin: 0 0 8px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.jobs-hero__ad-col-body p{
  color: rgba(255,255,255,.75); font-size: 12.5px; margin: 0 0 12px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.jobs-hero__ad-col-body .btn{ width: 100%; pointer-events: none; font-size: 13px; padding: 10px 14px; }

@media (max-width: 980px){
  .jobs-hero__row{ grid-template-columns: 2.2fr 1fr; gap: 20px; }
  .jobs-hero__slide.is-active{ grid-template-columns: minmax(260px, 400px) 1fr; gap: 24px; }
  .jobs-hero__media{ height: 360px; }
}

@media (max-width: 760px){
  .jobs-hero__row{ grid-template-columns: 1fr; padding: 28px 20px 56px; gap: 20px; }
  .jobs-hero__slide.is-active{ grid-template-columns: 1fr; }
  .jobs-hero__media{ height: 300px; }
  .jobs-hero__ad-col{ height: 260px; }
}

/* Category filter pills + results grid */
.jobs-filter-label{ font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.jobs-count{ font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); border-top: 1px solid var(--border); padding-top: 18px; margin-top: 6px; }
.jobs-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.job-card{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s ease, transform .2s ease; }
.job-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.job-card__top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.job-card__top h3{ font-size: 16px; line-height: 1.35; }
.job-card__employer{ font-size: 13.5px; color: var(--ink-soft); }
.job-card__meta{ display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-soft); }
.job-card__footer{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; }
.job-card__contact{ font-size: 13px; font-weight: 600; color: var(--ink); }

@media (max-width: 640px){
  .jobs-hero__footer{ flex-direction: column; align-items: flex-start; }
  .jobs-hero__ctas{ margin-left: 0; width: 100%; }
  .jobs-hero__ctas .btn{ flex: 1; }
}

/* ---- 404 ---------------------------------------------------------------- */
.error-404{ text-align: center; padding: 100px 24px; }
.error-404__code{ font-size: 96px; font-weight: 800; color: var(--accent-soft); font-family: var(--font-display); margin: 0; line-height: 1; }
.error-404 h1{ margin: 10px 0 12px; }
.error-404__actions{ display: flex; gap: 12px; justify-content: center; margin-top: 26px; }

/* ---- Empty state ---------------------------------------------------------- */
.empty-state{ text-align: center; padding: 60px 20px; color: var(--ink-soft); }

/* ---- Admin shell ---------------------------------------------------------- */
.admin-body{ background: var(--surface); font-family: var(--font-body); }
.admin-shell{ display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-sidebar{ background: #0b1329; color: #fff; padding: 24px 18px; display: flex; flex-direction: column; }
.admin-brand{ font-family: var(--font-display); font-weight: 800; font-size: 16px; margin-bottom: 30px; }
.admin-brand span.brand-pin{ margin-right: 4px; }
.admin-nav{ display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-nav a{ padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); }
.admin-nav a:hover, .admin-nav a.active{ background: rgba(255,255,255,.08); color: #fff; }
.admin-nav a.admin-logout{ margin-top: 12px; color: #fca5a5; }
.admin-user{ font-size: 12px; color: rgba(255,255,255,.5); padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.admin-main{ padding: 32px 40px; overflow-x: auto; }
.admin-main--full{ display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.admin-flash{ padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13.5px; font-weight: 600; }
.admin-flash--success{ background: #ecfdf3; color: #067647; }
.admin-flash--error{ background: #fef3f2; color: #b42318; }
.admin-card{ background: #fff; border-radius: var(--radius-md); border: 1px solid var(--border); padding: 24px; margin-bottom: 24px; }
.admin-table{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th, .admin-table td{ text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.admin-table th{ color: var(--ink-soft); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.status-pill{ font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.status-pill--active{ background: #ecfdf3; color: #067647; }
.status-pill--inactive{ background: #f2f4f7; color: #667085; }
.admin-form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.login-card{ width: 100%; max-width: 400px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 36px; }
.login-card h1{ font-size: 22px; margin-bottom: 6px; }
.login-card p{ color: var(--ink-soft); font-size: 13.5px; margin-bottom: 24px; }
.stat-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 26px; }
.stat-tile{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
.stat-tile strong{ display: block; font-size: 26px; }
.stat-tile span{ font-size: 12.5px; color: var(--ink-soft); }

/* ---- Utility ---------------------------------------------------------- */
.text-center{ text-align: center; }
.mt-0{ margin-top: 0; }
/* .reveal starts fully visible (correct with no/blocked JS, and for
   crawlers that don't run scripts). JS opts elements into the fade-in by
   adding .js-armed *before* the page has painted; only armed elements ever
   go to opacity:0, and only until .is-visible is added back. */
.reveal.js-armed{ opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.js-armed.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal.js-armed{ opacity: 1; transform: none; transition: none; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 960px){
  .hero__inner{ grid-template-columns: 1fr; padding: 40px 0; }
  .grid--4{ grid-template-columns: repeat(2, 1fr); }
  .grid--3{ grid-template-columns: repeat(2, 1fr); }
  .detail-layout{ grid-template-columns: 1fr; }
  .side-panel{ position: static; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-sidebar{ display: none; }
  .stat-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 680px){
  .main-nav{ position: absolute; top: 76px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: flex-start; padding: 20px 24px; border-bottom: 1px solid var(--border); gap: 16px; display: none; }
  .main-nav.is-open{ display: flex; }
  .nav-toggle{ display: flex; }
  .phone-pill span{ display: none; }
  .grid--4, .grid--3, .grid--2{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .cta-band__inner{ flex-direction: column; align-items: flex-start; }
  .amenity-grid{ grid-template-columns: repeat(2, 1fr); }
  .admin-form-grid{ grid-template-columns: 1fr; }
  .detail-card{ margin: 0 12px; padding: 20px; }
}

/* =====================================================================
   Static content pages — About / Contact / List Your Business
   Built with the same tokens as the rest of the site (--primary, --accent,
   --surface, --border, --radius-*, --shadow-*) so they read as one site,
   not a bolted-on page.
   ===================================================================== */
.page-hero p{ color: rgba(255,255,255,.82); max-width: 56ch; margin: 0 auto; }

.info-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 24px; }
.info-card{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 30px 26px; transition: transform .15s ease, box-shadow .15s ease; }
.info-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.info-card__icon{ font-size: 2.2rem; margin-bottom: 14px; }
.info-card__title{ font-size: 17px; margin-bottom: 8px; }
.info-card__desc{ font-size: 14px; color: var(--ink-soft); line-height: 1.7; }

.stat-band{ background: var(--primary); border-radius: var(--radius-lg); padding: 36px 24px; display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; text-align: center; }
.stat-band__item strong{ display: block; font-size: 30px; color: #fff; font-family: var(--font-display); }
.stat-band__item span{ font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); }

.value-list{ display: grid; gap: 14px; }
.value-item{ display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; }
.value-item__icon{ font-size: 1.4rem; flex: none; }
.value-item strong{ display: block; margin-bottom: 3px; }
.value-item span{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; }

.faq-list{ display: grid; gap: 12px; }
.faq-item{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 20px; cursor: pointer; }
.faq-item:hover{ border-color: var(--accent); }
.faq-q{ display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; font-size: 14.5px; }
.faq-q::after{ content: '+'; font-size: 20px; color: var(--accent); flex: none; line-height: 1; }
.faq-item.is-open .faq-q::after{ content: '\2212'; }
.faq-a{ display: none; font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin-top: 10px; }
.faq-item.is-open .faq-a{ display: block; }

.contact-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; }
.contact-card{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px 18px; text-align: center; transition: transform .15s ease, box-shadow .15s ease; display: block; }
.contact-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.contact-card__icon{ font-size: 2rem; margin-bottom: 10px; }
.contact-card__label{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 4px; }
.contact-card__value{ font-weight: 700; color: var(--primary); font-size: 14.5px; }
.contact-card__sub{ font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

.two-col{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.map-card{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
.map-card iframe{ width: 100%; height: 260px; border: none; display: block; }
.map-card__body{ padding: 16px 18px; }
.map-card__body h4{ font-size: 15px; margin-bottom: 4px; }
.map-card__body p{ font-size: 13px; color: var(--ink-soft); }

.form-card{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px; }
.form-card h3{ font-size: 20px; margin-bottom: 4px; }
.form-card > p{ font-size: 13.5px; color: var(--ink-soft); margin-bottom: 22px; }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .field--full{ grid-column: 1 / -1; }

.success-banner{ display: none; background: #ecfdf3; border: 1.5px solid #4ade80; border-radius: var(--radius-lg); padding: 24px; text-align: center; margin-top: 20px; }
.success-banner.is-shown{ display: block; }
.success-banner strong{ display: block; color: #067647; margin-bottom: 6px; font-size: 16px; }
.success-banner span{ color: #166534; font-size: 13.5px; }

.steps-list{ display: grid; gap: 14px; }
.step-item{ display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; }
.step-num{ width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); }
.step-item strong{ display: block; margin-bottom: 2px; }
.step-item span{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }

.whatsapp-callout{ margin-top: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
.whatsapp-callout p{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin-top: 4px; }

@media (max-width: 900px){
  .two-col{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr; }
  .stat-band{ gap: 28px; }
  .form-card{ padding: 22px 18px; }
}