/* ==========================================================================
   Seerua Appliance Care — Design tokens
   Palette pulled from the logo: signal blue + service sky blue
   ========================================================================== */
:root {
  --blue-900: #0f2a43;
  --blue-700: #14508a;
  --blue-600: #1b6fb0;
  --blue-500: #2586d1;
  --blue-100: #e7f1fa;
  --accent-600: #0284c7;
  --accent-500: #0ea5e9;
  --accent-100: #e0f2fe;
  --ink: #0a0a0a;
  --slate: #2a333c;
  --mist: #f4f7fa;
  --line: #e1e8ee;
  --white: #ffffff;
  --green: #1f9d55;
  --red: #d64545;
  --amber: #c98a00;

  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(15, 42, 67, 0.06);
  --shadow-md: 0 12px 32px rgba(15, 42, 67, 0.12);
  --shadow-lg: 0 24px 60px rgba(15, 42, 67, 0.16);
  --shadow-tag: 0 10px 24px rgba(2, 132, 199, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --icon-blue-bg: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  --icon-accent-bg: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  --icon-green-bg: linear-gradient(135deg, #29b86a, #1a7a45);
  --icon-navy-bg: linear-gradient(135deg, var(--blue-900), var(--blue-700));

  /* Premium accents — used sparingly on the primary CTA, the hero, and a
     couple of hover states, not scattered everywhere. */
  --gradient-btn: linear-gradient(135deg, var(--accent-500), var(--blue-600));
  --gradient-btn-hover: linear-gradient(135deg, var(--accent-600), var(--blue-700));
  --gradient-hero: radial-gradient(120% 100% at 100% 0%, #e0f2fe 0%, #eef6fb 32%, var(--white) 68%), radial-gradient(80% 60% at 0% 100%, #dbeafe 0%, transparent 60%);
  --gold-400: #f0b429;
  --gold-600: #b8860b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id], #calcCard { scroll-margin-top: 90px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  margin: 0 0 0.32em;
  line-height: 1.2;
}
p { margin: 0 0 1em; color: var(--ink); text-align: justify; text-align-last: left; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { padding: 0; margin: 0; list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* City/appliance-city pricing tables — previously had zero table styling
   at all (raw browser defaults), so columns sat pressed right up against
   each other with no breathing room, especially between "Service / AMC"
   and "Repair". Generous column padding fixes that gap, plus basic row
   separators and right-aligned price columns for readability. */
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th, .table-wrap td { padding: 14px 22px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.table-wrap th { font-family: var(--font-display); font-weight: 700; color: var(--blue-900); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; }
.table-wrap td { color: var(--ink); }
.table-wrap th:last-child, .table-wrap td:last-child,
.table-wrap th:nth-last-child(2), .table-wrap td:nth-last-child(2) { text-align: right; font-weight: 700; color: var(--blue-700); }
.table-wrap th:last-child, .table-wrap td:last-child { padding-left: 40px; }
.table-wrap tbody tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
  .table-wrap th, .table-wrap td { padding: 10px 12px; font-size: 0.82rem; }
  .table-wrap th:last-child, .table-wrap td:last-child { padding-left: 20px; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

:focus-visible {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.97); }
.btn-primary {
  background: var(--gradient-btn);
  color: var(--white);
  box-shadow: var(--shadow-tag);
  position: relative;
  overflow: hidden;
}
/* A soft diagonal light sweep on hover — a small premium touch on the
   site's main call-to-action, not applied anywhere else so it stays
   a signal rather than noise. */
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s var(--ease);
}
.btn-primary:hover::before { left: 130%; }
.btn-primary:hover { background: var(--gradient-btn-hover); box-shadow: 0 16px 32px rgba(2, 132, 199, 0.34); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-outline { background: transparent; border-color: var(--blue-600); color: var(--blue-600); }
.btn-outline:hover { background: var(--blue-100); }
.btn-white { background: var(--white); color: var(--blue-700); }
.btn-white:hover { background: var(--blue-100); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; }
.brand img { height: 52px; width: 52px; flex-shrink: 0; }
/* Two-line brand lockup — "SEERUA" bold and prominent, "Appliance Care"
   small underneath — matches the same lockup style used in the poster
   logo, and takes noticeably less horizontal header space than the old
   single-line "Seerua Appliance Care" text (helpful on mobile especially). */
.brand-name-stack { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; overflow: hidden; }
.brand-name-main { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--blue-700); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-name-sub { font-size: 0.72rem; color: var(--slate); font-weight: 600; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { flex-shrink: 0; }
.brand-tag { display: none; }

.nav-links { display: flex; gap: 44px; align-items: center; }
.nav-links a { font-weight: 700; font-size: 1.1rem; color: var(--blue-900); white-space: nowrap; }
.nav-menu-btn {
  font: inherit; font-weight: 700; font-size: 1.1rem; color: var(--blue-900);
  background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap;
}
.nav-menu-btn:hover { color: var(--accent-600); }
/* Desktop-only — mobile already has the bottom nav's own "Menu" button
   opening this exact same sheet, so this would just be a redundant
   second way to do the same thing there. */
@media (max-width: 720px) {
  .nav-menu-btn { display: none; }
  /* BUG FIX: hiding just the button inside wasn't enough — this <nav>
     relies on transform:translateY(-130%) (further down) to sit off-
     screen above the viewport, and that percentage is based on the
     nav's OWN height. With its only child hidden, the nav's height
     collapsed to nearly nothing, so -130% of "nearly nothing" barely
     moved it at all — it ended up sitting right at top:64px instead,
     overlapping the logo underneath it. Hiding the whole nav directly
     sidesteps that math entirely; mobile has its own separate "Menu"
     button in the bottom nav bar anyway, so nothing is lost here. */
  #navLinks { display: none; }
}
.nav-links a:hover { color: var(--accent-600); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .call-link { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue-700); font-size: 0.92rem; }
/* Careers page's simple "← Back to Home" link — its own class (not
   .call-link) specifically so it stays visible on mobile, where
   .call-link itself is hidden further down (that rule is meant for the
   phone number specifically, not this). */
.header-home-link { font-weight: 700; color: var(--blue-700); font-size: 0.92rem; white-space: nowrap; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2.4px; background: var(--blue-900); margin: 5px 0; border-radius: 2px; }

/* Header account icon/avatar + its dropdown menu (My Account / Logout) —
   always visible in the header, next to the hamburger. Plain person icon
   before an account exists; once one does, updateHeaderAccountUI() in
   main.js swaps it for a filled circle with the customer's name-initial. */
.header-account { position: relative; }
.header-account-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #000;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}
.header-account-btn:hover { background: #262626; }
.header-account-btn.has-account {
  background: #000;
  color: #fff;
  font-weight: 700;
}
/* Desktop header's own Cart icon — same visual treatment as the
   profile icon right next to it, with a small count badge matching the
   bottom-nav's own badge style. */
.header-cart-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #000;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}
.header-cart-btn:hover { background: #262626; }
.header-cart-badge {
  position: absolute;
  top: -4px; right: -6px;
  background: #e0455a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  border: 2px solid #fff;
}
/* BUG FIX ("mobile mein cart 2 jagah dikh raha hai"): the desktop
   header's own Cart icon (added since mobile has no other way to reach
   it) was also showing on mobile, right alongside the bottom nav's own,
   separate Cart button. Placed AFTER the base .header-cart-btn rule
   above (not just inside an earlier @media block) so this actually wins
   in the cascade at equal specificity — mobile has its own Cart button
   in the bottom nav bar, so this one is redundant there. */
@media (max-width: 720px) {
  .header-cart-btn { display: none; }
}
.header-account-initial { font-size: 1rem; font-family: var(--font-body); line-height: 1; }
.header-account-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
  box-shadow: 0 10px 28px rgba(15, 42, 67, 0.14);
  min-width: 160px;
  z-index: 200;
  overflow: hidden;
}
.header-account-menu.open { display: block; }
.header-account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue-900);
  cursor: pointer;
}
.header-account-menu-item:hover { background: var(--mist, #eef3f9); }
.header-account-menu-item + .header-account-menu-item { border-top: 1px solid var(--line); }

/* ---------- Hero ---------- */

.hero {
  background: var(--white);
  padding: 52px 0 24px;
  position: relative;
  overflow: hidden;
}
.hero .container { position: relative; z-index: 1; }
/* Faint sketch-style appliance icons scattered in the background — a
   subtle visual cue for "we service all of these" without competing with
   the actual headline/copy for attention. Very low opacity, no fill (just
   thin strokes), and deliberately un-aligned/rotated slightly so they read
   as decorative texture rather than a a literal illustration anyone would
   study closely. pointer-events:none and a low z-index keep them fully
   out of the way of any real interaction. */
.hero-sketch-icons { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-sketch-icons svg { position: absolute; stroke: var(--ink); fill: none; stroke-width: 1.6; opacity: 0.28; }
.hero-sketch-ac { width: 118px; top: 14px; right: 5%; transform: rotate(-4deg); }
.hero-sketch-wm { width: 100px; top: 58%; left: 2%; transform: rotate(3deg); }
.hero-sketch-ro { width: 82px; top: 6%; left: 22%; transform: rotate(-3deg); }
.hero-sketch-fridge { width: 90px; bottom: 2%; right: 14%; transform: rotate(3deg); }
@media (max-width: 720px) {
  .hero-sketch-ac { width: 82px; top: 8px; right: 3%; }
  .hero-sketch-wm { width: 68px; top: 64%; left: 1%; }
  .hero-sketch-ro { width: 58px; top: 3%; left: 58%; }
  .hero-sketch-fridge { width: 64px; bottom: 1%; right: 4%; }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 720px;
  gap: 48px;
  align-items: center;
}
@media (min-width: 960px) {
  /* Illustration only ever shows at this width and up — it's real
     content-flanking real estate, not something that should squeeze the
     copy column on tablets. */
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; max-width: 100%; gap: 32px; }
  /* When there's no second column (e.g. an appliance+city page whose
     appliance has no photo yet, like Fridge) the single child otherwise
     sticks to the grid's first-column width, leaving a blank gap next
     to it — this makes it use the full row instead. */
  .hero-grid > *:only-child { grid-column: 1 / -1; max-width: 760px; }
}

/* ---------- Full-poster hero variant ---------- */
/* The whole marketing poster (provided directly, not a stock photo) as
   one image — logo, headline, trust badges, serviced-appliance icons,
   product photo, and ribbon are all part of the design already, so no
   separate HTML text is layered on top of it (that would just duplicate
   what's already in the image). Only the bottom strip — which had an
   outdated phone number — is rebuilt below as real, correctly-numbered,
   clickable HTML instead of being left as unreliable baked-in image text. */
/* ---------- Coded hero, attempt 2 — recreates the poster's most
   distinctive pieces (the diagonal "Trusted Service" ribbon, the row of
   circular service icons) as real markup instead of a flat photo/badge
   card, so it doesn't read as a generic template hero while everything
   stays real, indexable text. ---------- */
.hero-coded-section { background: #fff; padding: 28px 0 4px; }
.hero-coded-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; margin-bottom: 2px; }
@media (min-width: 860px) {
  .hero-coded-grid { grid-template-columns: 1.1fr 0.9fr; gap: 40px; }
  .hero-coded-grid-solo { grid-template-columns: 1fr; text-align: center; }
  .hero-coded-grid-solo .hero-coded-text { max-width: 900px; margin: 0 auto; }
  .hero-coded-grid-solo .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-coded-grid-solo .hero-badges { justify-content: center; }
}
.hero-eyebrow {
  display: inline-block; background: var(--mist); color: var(--ink);
  font-weight: 700; font-size: 0.78rem; padding: 6px 14px; border-radius: 999px;
  margin-bottom: 16px; border: 1px solid var(--line);
}
.hero-coded-text h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 4.6vw, 3rem); line-height: 1.22;
  color: var(--ink); margin: 0 0 16px;
}
.hero-accent-wrap { position: relative; display: inline-block; color: var(--accent-600); }
.hero-underline { display: block; width: 100%; height: 12px; margin-top: -4px; }
.hero-sub { color: var(--ink); font-size: 1rem; line-height: 1.65; margin: 0 0 20px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.hero-badges span {
  display: flex; align-items: center; gap: 7px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
  font-size: 0.82rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.hero-badges svg { width: 16px; height: 16px; stroke: var(--ink); flex-shrink: 0; }

/* Circular service-icon row, recreating the poster's "we service &
   repair" strip in real markup. */
.hero-services-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px;
  text-align: center; padding-top: 8px;
}
@media (min-width: 640px) {
  .hero-services-row { grid-template-columns: repeat(7, 1fr); }
}
.hero-service-icon {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; color: var(--ink);
}

.hero-poster-section { padding: 24px 0 0; }
.hero-poster-img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg, 16px); }
.hero-poster-footer {
  /* Lighter blue matching the site's actual palette (was a very dark
     navy that clashed with the rest of the page) — padding trimmed
     further so this strip stays thin instead of reading as extra blue
     space below the poster. */
  background: var(--blue-600);
  border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px);
  margin-top: -6px;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px;
}
.hero-poster-features { display: flex; gap: 20px; flex-wrap: wrap; }
.hero-poster-features span { color: #ffffff; font-size: 1rem; font-weight: 800; white-space: nowrap; }
.hero-poster-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-poster-call {
  /* Slim strip instead of a big white pill button — just the number with
     a call icon, low-key next to the main Book Now action. */
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #ffffff;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  font-weight: 800;
  font-size: 1.05rem;
  white-space: nowrap;
}
@media (max-width: 720px) {
  /* "Ek seedh mein left se" — kept as one left-aligned row (not the
     earlier stacked/centered layout), same as desktop. */
  .hero-poster-footer { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; padding: 6px 16px; }
  .hero-poster-features { justify-content: flex-start; gap: 10px 16px; }
  .hero-poster-features span { font-size: 0.85rem; }
  .hero-poster-cta { justify-content: flex-start; }
  .hero-poster-call { justify-content: flex-start; font-size: 0.95rem; }
}
.hero-illustration {
  display: none;
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 400px;
  margin: 0 auto;
}
@media (min-width: 960px) {
  .hero-illustration { display: block; }
}
.hero-illustration-glow {
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.28) 0%, rgba(14, 165, 233, 0) 70%);
  filter: blur(6px);
  z-index: 0;
}
.hero-illustration svg { position: relative; z-index: 1; }
/* Each orbiting appliance chip drifts up and down independently, gently —
   the one moment of motion in an otherwise static hero, timed slightly
   differently per icon so they never move in unison. */
.hero-illustration .hi-orbit { animation: hiFloat 5s ease-in-out infinite; transform-origin: center; }
.hero-illustration .hi-orbit:nth-child(2) { animation-delay: -1.1s; animation-duration: 5.6s; }
.hero-illustration .hi-orbit:nth-child(3) { animation-delay: -2.4s; animation-duration: 4.6s; }
.hero-illustration .hi-orbit:nth-child(4) { animation-delay: -3.2s; animation-duration: 5.2s; }
@keyframes hiFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-illustration .hi-orbit { animation: none; }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mist);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
}
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: 18px;
}
.hero-rating .stars { color: #f5a623; letter-spacing: 1px; font-size: 0.85rem; }
.hero h1 {
  /* All headings site-wide now share one consistent size (set on the base
     h1,h2,h3,h4 rule) — this just adds hero-specific spacing/letter
     tracking on top of that shared size. */
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.hero h1 span.highlight { color: inherit; }
.hero-sub { font-size: 1.08rem; margin-bottom: 26px; color: var(--ink); }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.hero-cta-row .btn-primary { box-shadow: var(--shadow-tag); }
.hero-cta-row .btn:hover { transform: translateY(-2px); }
.hero-trust { display: flex; gap: 28px; flex-wrap: wrap; }
.trust-item { display: flex; flex-direction: column; }
.trust-item strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--blue-700); }
.trust-item span { font-size: 0.85rem; color: var(--slate); }

/* ---------- Floating stats strip (overlaps hero bottom edge) ---------- */
.stats-strip { position: relative; z-index: 5; margin-top: -46px; padding: 0 0 14px; }
.stats-strip-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stat-item { text-align: center; padding: 0 8px; position: relative; }
.stat-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.stat-item strong { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--blue-900); }
.stat-item span { font-size: 0.85rem; color: var(--slate); font-weight: 600; }
@media (max-width: 720px) {
  .stats-strip { margin-top: -30px; padding-bottom: 10px; }
  .stats-strip-card { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; padding: 14px 16px; }
  .stat-item:nth-child(2n)::before { display: none; }
}

/* ---------- Price calculator (signature element) ---------- */
.calc-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 22px;
  border: 1px solid var(--line);
  position: relative;
}
.calc-card::before {
  content: "";
  position: absolute;
  top: 22px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: none;
}
.calc-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.calc-title h3 { margin: 0; font-size: 1.05rem; }
.calc-badge { font-size: 0.85rem; font-weight: 700; color: var(--green); background: #e7f8ee; padding: 4px 10px; border-radius: 999px; }
.calc-note { font-size: 0.85rem; color: var(--slate); margin-bottom: 14px; }
.field { margin-bottom: 11px; }
/* BUG FIX ("sabhi khane patle aur paas-paas kar do" -- fields too tall/
   spaced out): booking form specifically gets tighter field spacing and
   shorter input/textarea/select height, per explicit request. Scoped to
   just this form so other forms on the site (Admin panel, careers, etc.)
   are unaffected. */
#bookingForm .field { margin-bottom: 8px; }
#bookingForm .field select,
#bookingForm .field input,
#bookingForm .field textarea { padding: 6px 10px; }
#bookingForm .field label { margin-bottom: 3px; font-size: 0.8rem; }
#bookingForm .dt-trigger-btn,
#bookingForm .address-select-btn { padding: 8px 12px; font-size: 0.85rem; }
#bookingForm #editAddressBtn { padding: 5px 12px; font-size: 0.78rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--blue-900); margin-bottom: 6px; }
.field select, .field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  /* Darker/more visible border than the site-wide --line color, which is
     a very pale grey that's hard to see against a white input — form
     fields specifically get a stronger border so the box itself is
     clearly visible even before it's focused. */
  border: 1.5px solid #94a3b8;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.field select:focus, .field input:focus, .field textarea:focus { border-color: var(--blue-500); }
.photo-preview-thumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mist);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px 6px 6px;
  font-size: 0.85rem;
}
.photo-preview-thumb img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.photo-preview-thumb button { border: none; background: none; color: var(--red); cursor: pointer; font-size: 0.85rem; font-weight: 700; }
.service-toggle { display: flex; gap: 8px; }
.service-toggle button {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--white);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--blue-900);
}
.service-toggle button.active { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }

.price-tag {
  margin-top: 6px;
  border-radius: var(--radius-md);
  background: var(--blue-900);
  color: var(--white);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.price-tag .label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: #b9d2e8; }
.price-tag .amount { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--accent-500); }
.price-tag .amount small { font-size: 0.95rem; color: #b9d2e8; font-weight: 500; }
.price-hint { font-size: 0.85rem; color: var(--slate); margin-top: 6px; }

/* ---------- Sections ---------- */
/* Tightened significantly (from 40px) — deep pass to compact the whole
   page, per explicit request that no section should have visible extra
   breathing room. */
section { padding: 22px 0; }
.section-cities-compact { padding: 16px 0; }
.section-cities-compact .section-head { margin-bottom: 10px; }
.section-cities-compact .city-chip-row { gap: 7px; }
.section-cities-compact .city-chip { padding: 6px 14px; font-size: 0.85rem; }
.section-head { text-align: left; margin: 0 0 8px; }
/* Explicit request: these six sections' headings (and the intro
   paragraph right under them) are centered — every other section on the
   page stays left-aligned. */
#services .section-head,
#serviceDetails .section-head,
#whyUs .section-head,
#about .section-head,
#cities .section-head,
#faq .section-head {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-head .eyebrow { margin-bottom: 6px; }
.section-head h2 { letter-spacing: -0.01em; }
/* BUG FIX: this subtext line had no explicit size, so it inherited the
   page's base 1.05rem body text — noticeably larger than the similar
   subtext under other section headings elsewhere on the page. */
.section-head p { font-size: 0.95rem; }
.bg-mist { background: #fff; }
/* Explicit request: eliminate the space above and below "Our services"
   entirely — the generic `section { padding: 22px 0; }` above otherwise
   gives it the same breathing room as every other section. */
#services { padding: 0; }
#services .section-head { margin-bottom: 10px; }

/* "Appliance care, explained" section — deliberately smaller than the
   site-wide unified heading size, since this section's own heading and
   per-appliance titles read better compact here (per explicit request).
   The section's own <h2> ("Appliance care, explained") is a notch
   smaller than other section heads; each appliance's own name ("AC
   Service" etc.) is smaller still, back to roughly its pre-unification
   size; and the description paragraphs share one consistent size instead
   of inheriting whatever the base <p> rule happens to render at. */
#serviceDetails .section-head h2 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
.appliance-detail-title {
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 10px;
  display: inline-block;
  border-bottom: 2px solid var(--accent-500);
  padding-bottom: 4px;
}
.appliance-detail-text p { font-size: 0.92rem; margin-bottom: 0.7em; }
.appliance-detail-text p:last-child { margin-bottom: 0; }

/* When two mist-background sections sit back to back (Brands, then Why
   Choose Us), they visually blend into one continuous block since there's
   no color break between them — so the second section's own top padding
   just reads as an oversized, unexplained gap. Dropping it here collapses
   that to a single section's worth of breathing room instead of two. */
section.bg-mist + section.bg-mist { padding-top: 0; }

/* ---------- Scroll-reveal ---------- */
/* BUG FIX: this scroll-triggered fade-in was leaving content invisible
   (but still occupying its normal layout space) whenever the
   IntersectionObserver that adds .in-view didn't fire in time — on a
   fast scroll, or for sections further down the page — which looked
   exactly like a big blank gap where a whole section's text should be,
   even though the text was really there the whole time, just
   transparent. Disabling the animation entirely (always visible) is a
   guaranteed fix, and per general design guidance, scattered fade-in
   effects on every section are a generic default anyway, not something
   this page depends on. */
.reveal { opacity: 1; transform: none; }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Services grid */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  text-align: left;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
  cursor: pointer;
  position: relative;
  /* Cards in the same row are already stretched to equal height by the
     grid — this flex column + margin-top:auto on the button (below) makes
     every card's "Book Now" line up on the same bottom edge, no matter how
     many lines its title/description/type-tags wrap to. */
  display: flex;
  flex-direction: column;
}
/* Touch-tap feedback (mirrors the (hover: hover) media query just below,
   which intentionally does NOT match touch screens) — without this,
   tapping a card on mobile gave no visual response at all until the
   Quick Book modal finished opening a moment later. */
.service-card:active { transform: scale(0.98); }
/* This hover lift is scoped to real mouse/trackpad devices only — on touch
   screens, an unscoped `:hover` on a clickable card is a well-known trap:
   the first tap gets consumed simulating the hover state (and here, moving
   the card itself under your finger) instead of registering as a real
   click, so a nested control like the "What we do" <summary> toggle below
   needs a second tap to actually open. `(hover: hover)` sidesteps that by
   only ever matching devices that can genuinely hover before clicking. */
/* SUGGESTION IMPLEMENTED: real appliance photos in the homepage service
   cards (replacing the plain icon, for any appliance that has one set —
   see Admin Panel > Appliances) — bleeds to the card's edges for a
   cleaner, more professional "magazine card" look. aspect-ratio +
   object-fit:cover is what guarantees every card's photo is EXACTLY the
   same size on screen no matter what dimensions the original image
   file happens to be. */
.service-card-photo {
  width: calc(100% + 28px);
  max-width: calc(100% + 28px);
  margin: -16px -14px 14px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
  .service-card:hover .service-icon { transform: scale(1.08) rotate(-4deg); }
  .service-card:hover .btn-outline::after { transform: translateX(3px); }
  .service-card:hover .service-card-photo { transform: scale(1.03); }
}
.service-card-photo { transition: transform 0.3s var(--ease); }
/* BUG FIX: when an appliance has no photo uploaded (Admin Panel >
   Appliances), it fell back to a small 60px floating icon sitting in an
   otherwise-empty card — since every card here is designed around a
   full-width, full-bleed photo header, an appliance without one looked
   noticeably sparse/small next to its photo-having neighbors, not
   intentionally different. Wrapping the icon in a full-width colored
   block (matching the photo's own size/position exactly) makes a
   photo-less card carry the same visual weight as one with a photo,
   instead of looking like something's missing. */
.service-icon-wrap {
  width: calc(100% + 28px);
  margin: -16px -14px 14px;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--icon-blue-bg);
}
.service-card:nth-child(4n+2) .service-icon-wrap { background: var(--icon-accent-bg); }
.service-card:nth-child(4n+3) .service-icon-wrap { background: var(--icon-green-bg); }
.service-card:nth-child(4n+4) .service-icon-wrap { background: var(--icon-navy-bg); }
.service-icon {
  width: 60px; height: 60px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  color: var(--white);
  font-size: 1.7rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s var(--ease);
}
.service-card h3 { font-size: 0.92rem; margin-bottom: 5px; color: var(--ink); }
.service-card p { font-size: 0.92rem; margin-bottom: 8px; color: var(--slate); }
.service-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.service-types span { font-size: 0.85rem; background: var(--mist); color: var(--slate); padding: 4px 9px; border-radius: 999px; }

/* "What we do during service" — collapsed by default so cards stay compact;
   plain <details>/<summary> so it also works with zero JS on the
   server-rendered city pages. */
.service-info { margin-bottom: 14px; }
.service-info summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--accent-600); list-style: none; }
.service-info summary::-webkit-details-marker { display: none; }
.service-info summary::before { content: '▸'; display: inline-block; margin-right: 4px; transition: transform 0.15s ease; }
.service-info[open] summary::before { transform: rotate(90deg); }
.service-info .service-process { margin-top: 10px; font-size: 0.92rem; color: var(--slate); line-height: 1.55; }
.service-info .service-process p { margin: 0 0 8px; }
.service-info .service-process p:last-child { margin-bottom: 0; }

.service-card .btn {
  font-size: 0.76rem;
  padding: 5px 12px;
  border-width: 1px;
  margin-top: auto;
  align-self: flex-start;
  /* Smaller and lightly-filled (soft blue tint) rather than the plain
     transparent-with-border outline look — reads as a light, compact
     "Book Now" chip instead of a full-size button. */
  background: var(--blue-100);
  border-color: transparent;
}
.service-card .btn:hover { background: var(--accent-100); }
.service-card .btn-outline::after { content: "→"; margin-left: 2px; transition: transform 0.2s var(--ease); display: inline-block; }

/* How it works — connected timeline */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; position: relative; }
.steps::before {
  content: "";
  position: absolute;
  top: 44px;
  left: 16%;
  right: 16%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.step {
  position: relative;
  z-index: 1;
  padding: 22px 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  box-shadow: var(--shadow-tag);
}
.step h3 { font-size: 1rem; margin-bottom: 4px; }
.step p { font-size: 0.92rem; margin: 0; }
@media (max-width: 980px) { .steps::before { display: none; } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr !important; } }

/* Why choose us — styled to match the appliance service-card boxes
   (.service-card above): left-aligned text and a rounded-square icon
   instead of the old centered text + circular icon, so the two box types
   read as one consistent system instead of two different styles. */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.why-item {
  text-align: left;
  padding: 10px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.why-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.why-icon {
  width: 30px; height: 30px;
  margin: 0 0 6px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent-100), var(--white));
  border: 1px solid var(--accent-100);
  color: var(--accent-600);
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.why-item:nth-child(4n+2) .why-icon { background: linear-gradient(135deg, #dcfce7, var(--white)); border-color: #dcfce7; color: #16a34a; }
.why-item:nth-child(4n+3) .why-icon { background: linear-gradient(135deg, #fef3c7, var(--white)); border-color: #fef3c7; color: #c2760a; }
.why-item:nth-child(4n+4) .why-icon { background: linear-gradient(135deg, #f3e8ff, var(--white)); border-color: #f3e8ff; color: #7e22ce; }
.why-item h4 { font-size: 1.08rem; margin-bottom: 2px; }
.why-item p { font-size: 1.02rem; color: var(--ink); margin: 0; line-height: 1.45; }

/* Compact variant — used for the Careers page perk cards, which don't
   need the full homepage-sized boxes and were pushing the application
   form too far down the page, especially on mobile. */
.why-grid-compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.why-grid-compact .why-item { padding: 14px 12px; }
.why-grid-compact .why-icon { width: 36px; height: 36px; margin: 0 0 8px; border-radius: 10px; font-size: 1.05rem; }
.why-grid-compact .why-item h4 { font-size: 0.95rem; margin-bottom: 3px; }
.why-grid-compact .why-item p { font-size: 0.92rem; line-height: 1.4; }

/* Brands strip */
.brand-strip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.brand-chip {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--blue-900);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.brand-chip:hover { border-color: var(--blue-500); color: var(--blue-600); transform: translateY(-2px); }

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
/* A large, quiet quotation mark in the corner — a small editorial touch
   that gives the quote some visual weight without adding another color
   or icon to compete with the star rating. */
.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--blue-100);
  z-index: 0;
}
.testimonial-card > * { position: relative; z-index: 1; }
.testimonial-stars { color: #f5a623; font-size: 0.92rem; letter-spacing: 2px; }
.testimonial-quote { font-size: 0.92rem; color: var(--ink); margin: 0; }
.testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--white); font-size: 0.86rem;
  flex-shrink: 0;
  background: var(--icon-blue-bg);
}
.testimonial-card:nth-child(3n+2) .testimonial-avatar { background: var(--icon-accent-bg); }
.testimonial-card:nth-child(3n+3) .testimonial-avatar { background: var(--icon-green-bg); }
.testimonial-name { font-weight: 700; color: var(--blue-900); font-size: 0.9rem; }
.testimonial-meta { font-size: 0.85rem; color: var(--slate); }
@media (max-width: 980px) { .testimonial-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* Cities */
.city-chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.city-chip { background: var(--white); border: 1.5px solid var(--line); padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 0.88rem; color: var(--blue-900); transition: border-color 0.15s ease, color 0.15s ease; }
.city-chip:hover { border-color: var(--blue-500); color: var(--blue-600); }


/* Booking form */
/* BUG FIX ("double page jaisa lagta hai" on desktop): this used to be a
   2-column grid (the "Book a service" side-info panel + the actual form
   fields side by side) — on a wide screen this genuinely looked like two
   separate pages/panels sitting next to each other, especially once the
   trust badges were removed from that side panel (leaving it almost
   empty). Single column now, on every screen size — matches how it
   already displayed on mobile. */
.booking-wrap { display: block; position: relative; max-width: 480px; margin: 0 auto; }
/* .booking-wrap sets its own "display", which (being author CSS) would
   otherwise silently override the browser's default [hidden] → display:none
   rule. This higher-specificity rule makes sure hiding the form actually
   hides it. */
.booking-wrap[hidden] { display: none; }
/* Lets someone close the form again once it's open, without having to
   scroll away or refresh the page. */
.booking-close-btn {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--slate);
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 2;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.booking-close-btn:hover { color: var(--red); border-color: var(--red); transform: scale(1.08); }
.booking-info h2 { margin-bottom: 8px; }
.booking-info ul { margin-top: 18px; }
.booking-info li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 0.92rem; color: var(--slate); }
.booking-info li .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-500); margin-top: 7px; flex-shrink: 0; }
.contact-card { background: var(--blue-900); color: var(--white); border-radius: var(--radius-md); padding: 22px; margin-top: 24px; }
.contact-card h4 { color: var(--white); font-size: 1rem; margin-bottom: 10px; }
.contact-card a { display: flex; align-items: center; gap: 10px; color: #cfe1f0; font-size: 0.92rem; margin-bottom: 8px; font-weight: 600; }
.contact-card a:hover { color: var(--accent-500); }
.trust-badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.trust-badge { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; color: var(--blue-900); background: var(--white); border: 1px solid var(--line); padding: 9px 14px; border-radius: 999px; }
.trust-badge span { color: var(--green); }

.booking-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px;
  position: relative;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-msg { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 0.88rem; margin-top: 14px; display: none; }
.form-msg.success { display: block; background: #e7f8ee; color: var(--green); }
/* Clean success view shown instead of the booking form once a booking
   completes — big checkmark circle + a short summary card, instead of a
   dense paragraph of text. */
.success-check-circle {
  width: 72px; height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  animation: successCheckPop 0.4s var(--ease);
}
@keyframes successCheckPop { 0% { transform: scale(0); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
.success-detail-card { background: var(--mist); border-radius: var(--radius-md); padding: 4px 18px; text-align: left; }
.success-detail-row { display: flex; justify-content: space-between; padding: 12px 0; font-size: 0.9rem; color: var(--slate); border-bottom: 1px solid var(--line); }
.success-detail-row:last-child { border-bottom: none; }
.success-detail-row strong { color: var(--ink); font-family: var(--font-display); }
.form-msg.error { display: block; background: #fdeaea; color: var(--red); }
/* Softer than .error — for things that are just informational (e.g. "this
   is already in your list") rather than a real problem, so they don't read
   like the booking itself failed. */
.form-msg.notice { display: block; background: var(--mist); color: var(--blue-900); border: 1px solid var(--line); }
.form-summary { background: var(--mist); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 16px; font-size: 0.85rem; color: var(--slate); display: none; }
.form-summary.show { display: block; }

/* ---------- Careers modal (fill & submit right on this page) ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,42,67,0.55); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; overscroll-behavior: contain; }
/* Needs to appear ON TOP of the booking form modal when both happen to
   be open at once (the city-mismatch choice pops up WHILE the booking
   form is still open behind it) — same z-index as .modal-backdrop
   otherwise means whichever is later in the HTML paints over the
   other, which happened to hide this one entirely. */
.modal-backdrop.open { display: flex; animation: modalBackdropFadeIn 0.18s ease; }
/* BUG FIX: these two open FROM WITHIN the booking form / account-gate
   modal (tapping "Select Address" while that form is already open) —
   with every .modal-backdrop sharing the same z-index, DOM order alone
   decided paint order, and #accountGateModal happens to come AFTER
   these two in the HTML. That painted the booking form ON TOP of the
   address picker the instant both were "open" at once — the address
   modal wasn't actually broken, just invisible, sitting correctly
   opened directly behind the form that triggered it. */
#selectAddressModal, #addAddressModal { z-index: 260; }
/* Same issue, same fix, for the calendar's "Pick a date" popup — it's
   opened FROM WITHIN #dateTimeModal (tapping the "Pick" pill), but is
   defined earlier in the HTML, so with every modal sharing the same
   z-index otherwise, #dateTimeModal painted on top and made the actual
   calendar invisible the moment both were open — it genuinely was
   opening and a date WAS selectable there, just completely hidden
   behind the very screen that opened it. */
#dateCalendarModal { z-index: 270; }
/* Design polish: every modal in the site (Account Gate, OTP entry,
   Track Booking, Refer a Friend, date calendar, Quick Book, Careers)
   shares these two classes, so this one animation applies everywhere
   at once instead of popping instantly into place. */
@keyframes modalBackdropFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPopIn { from { opacity: 0; transform: scale(0.94) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-backdrop.open .modal { animation: modalPopIn 0.24s var(--ease); }

/* Small floating confirmation toast — shown after actions (like Quick Book
   "Add") that close their own modal, so the person still gets clear,
   brief feedback that something happened. */
.global-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: var(--white);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.global-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 720px) {
  .global-toast { bottom: 32px; }
}
.modal { background: var(--white); border-radius: var(--radius-md); padding: 28px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md); overscroll-behavior: contain; }
/* Wider variant — for modals with genuinely more content to show side by
   side on bigger screens (currently just the booking form's two-column
   info+form layout). Falls back to the same width as a normal modal on
   narrow/mobile screens, where .booking-wrap's own responsive rule
   already collapses it to one column anyway. */
.modal.modal-lg { max-width: 560px; }

/* Quick Book modal (opened from tapping an appliance card) */
.qb-city-select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.95rem; font-family: var(--font-body); }
.qb-type-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 14px 0; padding-bottom: 4px; }
.qb-type-tabs button { flex-shrink: 0; padding: 10px 16px; border: 1px solid #94a3b8; border-radius: 10px; background: var(--white); font-weight: 700; font-size: 0.88rem; cursor: pointer; color: var(--ink); }
.qb-type-tabs button.active { border-color: var(--accent-500); background: var(--blue-50, #eff6ff); color: var(--accent-600); }
.qb-price-card { display: flex; gap: 14px; border: 1px solid #94a3b8; border-radius: var(--radius-md); padding: 14px; margin-bottom: 14px; }
.qb-not-available {
  text-align: center;
  padding: 28px 16px;
  background: var(--mist);
  border-radius: var(--radius-md);
  margin: 4px 0 16px;
}
.qb-not-available-icon { font-size: 2rem; margin-bottom: 10px; }
.qb-not-available p { color: var(--slate); font-size: 0.95rem; line-height: 1.5; margin: 0; }
.qb-not-available p strong { color: var(--ink); }
.qb-price-img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: var(--mist); }
.qb-price-card-nophoto { display: block; }
.qb-price-title { font-weight: 700; margin-bottom: 6px; }
.qb-price-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.qb-price-strike { text-decoration: line-through; color: var(--slate); font-size: 0.92rem; }
.qb-price-now { color: var(--accent-600); font-size: 1.15rem; font-family: var(--font-display); }
.qb-price-trust { color: #1aa251; font-weight: 600; font-size: 0.85rem; margin-top: 6px; }
.qb-service-type-row { display: flex; gap: 8px; margin-bottom: 14px; }
.qb-service-type-btn { flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.qb-service-type-btn.active { background: var(--blue-900); color: #fff; border-color: var(--blue-900); }
.qb-checklist { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.qb-checklist li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.95rem; }
.qb-checklist li::before { content: '✔'; color: #1aa251; font-weight: 700; flex-shrink: 0; }
.qb-actions { display: flex; gap: 8px; }
.qb-btn { flex: 1; padding: 12px 8px; border-radius: 999px; border: none; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.qb-btn-add { background: var(--accent-500); color: #fff; }
.qb-btn-add:hover { background: var(--accent-600); }
.qb-btn-book { background: #1aa251; color: #fff; }
.qb-btn-book:hover { background: #158a44; }

/* Scrollable list of individual service cards (Service/Repair/
   Installation/Uninstallation/Gas Filling etc.) — used for appliance
   types that have a defined services list. */
.qb-services-list { max-height: 55vh; overflow-y: auto; display: grid; gap: 14px; padding: 2px; margin-bottom: 6px; }
.qb-service-card { border: 1px solid #94a3b8; border-radius: var(--radius-md); padding: 14px; }
.qb-service-card .qb-price-card { border: none; padding: 0; margin-bottom: 10px; }
.qb-service-card .qb-checklist { margin-bottom: 12px; }
.qb-service-card .qb-actions { display: flex; gap: 8px; }
.qb-service-card .qb-btn { padding: 10px 8px; font-size: 0.85rem; }
.modal-close { float: right; background: none; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--slate); width: 32px; height: 32px; border-radius: 50%; transition: background 0.15s ease, color 0.15s ease; }
.modal-close:hover { background: var(--mist); color: var(--ink); }

/* Small inline spinner for "Loading...", "Sending...", "Checking your
   bookings..." style messages inside popups — used via .spinner-text,
   e.g. <p class="spinner-text"><span class="spinner-dot"></span>Loading...</p> */
@keyframes spinnerSpin { to { transform: rotate(360deg); } }
.spinner-text { display: flex; align-items: center; gap: 8px; }
.spinner-dot {
  width: 14px; height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--accent-500);
  border-radius: 50%;
  flex-shrink: 0;
  animation: spinnerSpin 0.7s linear infinite;
}

/* Skeleton/shimmer placeholder cards — used while something with real
   visual structure (like a list of booking cards) is loading, instead
   of a plain spinner + text. Reads as "content is about to appear here"
   rather than a generic wait state. */
@keyframes shimmerSweep { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.skeleton-card {
  height: 76px; border-radius: var(--radius-md); margin-bottom: 10px;
  background: linear-gradient(90deg, var(--mist) 25%, #e4ebf2 37%, var(--mist) 63%);
  background-size: 400px 100%;
  animation: shimmerSweep 1.4s ease infinite;
}

/* Custom date calendar (replaces native <input type="date"> for #fDate —
   see the template comment on #dateCalendarModal for why). */
.date-cal-header { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.date-cal-header strong { color: var(--blue-900); font-size: 1rem; }
.date-cal-nav { background: var(--mist, #eef3f9); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--blue-900); }
.date-cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.date-cal-quick { display: flex; gap: 8px; margin-bottom: 12px; }
.date-cal-quick-btn { flex: 1; padding: 9px; border: 1.5px solid var(--accent-500); border-radius: 999px; background: #fff; color: var(--accent-600); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.date-cal-quick-btn:hover, .date-cal-quick-btn.active { background: var(--accent-500); color: #fff; }
.date-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--slate); margin-bottom: 4px; }
.date-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-cal-day {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none;
  border-radius: 50%;
  font-size: 0.9rem;
  color: var(--blue-900);
  cursor: pointer;
}
.date-cal-day:disabled { color: var(--line); cursor: not-allowed; }
.date-cal-day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--accent-500); }
.date-cal-day.is-selected { background: var(--accent-500); color: #fff; }
.date-cal-day.is-empty { visibility: hidden; }
.modal h3 { margin-bottom: 4px; }
.modal p.modal-sub { color: var(--slate); font-size: 0.88rem; margin: 0 0 18px; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }

.cart-add-box { background: var(--mist); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 16px; margin: 16px 0; }
.cart-add-title { font-size: 0.85rem; font-weight: 700; color: var(--blue-900); margin: 0 0 12px; }
.cart-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.cart-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.cart-item .cart-item-info { font-size: 0.86rem; color: var(--ink); }
.cart-item .cart-item-info strong { color: var(--blue-900); }
.cart-item .cart-item-price { font-weight: 700; color: var(--blue-700); font-size: 0.88rem; white-space: nowrap; }
.cart-item .cart-item-remove { background: none; border: none; color: var(--red); font-weight: 700; cursor: pointer; font-size: 1rem; padding: 0 4px; }
.cart-empty { font-size: 0.85rem; color: var(--slate); text-align: center; padding: 10px 0 16px; }
.quick-book-scope-note {
  font-size: 0.82rem;
  color: var(--blue-700);
  background: var(--blue-100);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 14px;
  line-height: 1.4;
}
.cart-total-row { display: flex; justify-content: space-between; align-items: center; background: var(--mist); color: var(--ink); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; font-weight: 700; }
.cart-total-row .amount { color: var(--ink); font-weight: 800; font-size: 1.2rem; font-family: var(--font-display); }

/* Quantity stepper directly in a cart line item — lets the customer
   adjust qty after adding, not just at the moment of adding, matching
   the reference layout's inline -/+ control. */
.cart-item-qty-stepper { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cart-item-qty-stepper button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--accent-600); font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; line-height: 1; }
.cart-item-qty-stepper button:hover { background: var(--mist); }
.cart-item-qty-stepper span { min-width: 18px; text-align: center; font-weight: 700; }
.cart-item-trash { background: #fde8ea; border: none; color: #d92d3d; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.cart-item-trash:hover { background: #fbd2d6; }

/* Payment Summary card — deliberately separate from the cart item list
   itself, matching the reference layout's distinct "breakdown" card. */
.payment-summary-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; margin-bottom: 16px; }
.payment-summary-card h4 { font-size: 1rem; margin-bottom: 12px; }
.payment-summary-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 0.88rem; color: var(--slate); }
.payment-summary-total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 12px; font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.payment-summary-total span:last-child { color: var(--accent-600); font-family: var(--font-display); }

.slot-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot-btn { padding: 12px 8px; border-radius: var(--radius-sm); border: 1.5px solid var(--blue-900); background: var(--blue-900); font-weight: 700; font-size: 0.85rem; color: var(--white); cursor: pointer; text-align: center; transition: background 0.15s ease, border-color 0.15s ease; }
.slot-btn small { display: block; font-weight: 500; color: #cfe1f0; font-size: 0.85rem; margin-top: 3px; }
.slot-btn:hover:not(.selected):not(.full) { background: #0d2b52; border-color: #0d2b52; }
.slot-btn.selected { background: var(--accent-500); border-color: var(--accent-500); color: var(--white); }
.slot-btn.selected small { color: #fff; }
.slot-btn.full { background: var(--mist); border-color: var(--line); color: var(--slate); cursor: not-allowed; opacity: 0.6; }
.slot-btn.full small { color: var(--slate); }
@media (max-width: 480px) { .slot-picker { grid-template-columns: 1fr; } }

/* ---------------- Select Date & Time / Select Address (Jay Home
   Services style flow) --------------------------------------------- */
.dt-trigger-btn, .address-select-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font-size: 0.92rem; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: left; transition: border-color 0.15s ease;
}
.dt-trigger-btn:hover, .address-select-btn:hover { border-color: var(--accent-500); }
.dt-trigger-arrow, .address-select-arrow { color: var(--slate); font-size: 1.1rem; }

.dt-modal-label { font-size: 0.88rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; }

.dt-date-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dt-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 12px 4px; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dt-pill-day { font-size: 0.72rem; color: var(--slate); font-weight: 600; }
.dt-pill-date { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.dt-pill-icon { font-size: 1.05rem; }
.dt-pill.selected { background: var(--accent-500); border-color: var(--accent-500); }
.dt-pill.selected .dt-pill-day, .dt-pill.selected .dt-pill-date { color: #fff; }
.dt-pill:hover:not(.selected) { border-color: var(--accent-500); }

.dt-slot-section { margin-bottom: 16px; }
.dt-slot-section-title { font-size: 0.85rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.dt-slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 420px) { .dt-slot-grid { grid-template-columns: repeat(3, 1fr); } }

.saved-address-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.saved-address-card {
  flex: 1; display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer; transition: border-color 0.15s ease;
}
.saved-address-card:hover { border-color: var(--accent-500); }
.saved-address-card strong { font-size: 0.88rem; color: var(--ink); }
.saved-address-card span { font-size: 0.84rem; color: var(--slate); }
.saved-address-edit-btn {
  flex-shrink: 0; width: 44px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--mist); cursor: pointer; font-size: 1rem;
}
.saved-address-edit-btn:hover { border-color: var(--accent-500); background: #fff; }
.saved-address-delete-btn {
  flex-shrink: 0; width: 44px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--mist); cursor: pointer; font-size: 1rem;
}
.saved-address-delete-btn:hover { border-color: var(--red); background: #fff0f0; }
.address-add-new-btn { border-style: dashed; }

.save-as-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.save-as-pill {
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
  font-size: 0.85rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.save-as-pill.selected { background: var(--accent-500); border-color: var(--accent-500); color: #fff; }
.save-as-pill:hover:not(.selected) { border-color: var(--accent-500); }

.success-redirect-note { background: var(--mist); border-radius: var(--radius-sm); padding: 10px; }

.rate-stars { display: inline-flex; gap: 2px; }
.rate-star { cursor: pointer; font-size: 1.1rem; color: var(--accent-500); }
.rate-star:hover { transform: scale(1.15); display: inline-block; }

.coupon-row { display: flex; gap: 8px; margin-bottom: 8px; }
.coupon-row input { flex: 1; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-weight: 700; letter-spacing: 0.03em; }

.chip { display: inline-flex; align-items: center; background: var(--mist); border: 1.5px solid var(--line); padding: 9px 16px; border-radius: 999px; font-size: 0.86rem; font-weight: 600; color: var(--blue-900); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.chip:has(input:checked) { background: var(--blue-100); border-color: var(--blue-600); color: var(--blue-700); }
.msg-inline-coupon { font-size: 0.85rem; margin-bottom: 12px; }
.msg-inline-coupon.success { color: var(--green); font-weight: 700; }
.msg-inline-coupon.error { color: var(--red); }
.discount-row { display: flex; justify-content: space-between; color: var(--green); font-weight: 700; font-size: 0.88rem; padding: 0 2px 10px; }

/* Track order */
.track-box { max-width: 560px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); }
.track-results { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.track-order-card { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.track-order-card .row1 { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.92rem; color: var(--blue-900); }
.track-order-card .row2 { font-size: 0.85rem; color: var(--slate); margin-top: 4px; }
.status-pill { font-size: 0.85rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: capitalize; }
.status-pending { background: #fff4d9; color: var(--amber); }
.status-assigned, .status-accepted { background: var(--blue-100); color: var(--blue-700); }
.status-in-progress { background: var(--accent-100); color: var(--accent-600); }
.status-completed { background: #e7f8ee; color: var(--green); }
.status-rejected, .status-cancelled { background: #fdeaea; color: var(--red); }

/* FAQ */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  /* BUG FIX: no more internal scroll box — the list just grows/shrinks
     naturally with the page. The "+ More questions" / "- Show less"
     toggle below already controls how many questions are visible at
     once, so this scroll area was redundant (and easy to miss on
     desktop, same issue as the city-picker sheet's scroll earlier). */
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 18px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.faq-item { border-bottom: 1px solid var(--line); padding: 10px 0; }
.faq-q { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 700; color: var(--blue-900); font-size: 0.98rem; }
.faq-q .plus { font-size: 1.3rem; color: var(--accent-500); }
.faq-item.open .plus { transform: rotate(45deg); }
/* BEHAVIOR CHANGE (per explicit request): answers used to slide open via
   an animated max-height transition — now they just show/hide instantly,
   no animation. */
.faq-a { display: none; font-size: 0.9rem; }
.faq-item.open .faq-a { display: block; padding-top: 10px; }
/* Only the first few questions show by default; the rest sit behind this
   until tapped, so the section doesn't open as a huge wall of questions. */
.faq-more-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 12px 0;
  font-weight: 700;
  color: var(--blue-700);
  cursor: pointer;
  font-size: 0.95rem;
}
.faq-more-btn .plus { font-size: 1.3rem; color: var(--accent-500); }
.faq-more-btn:hover { color: var(--blue-600); }

/* CTA banner */
.cta-banner {
  background: linear-gradient(120deg, var(--blue-700), var(--blue-900));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  opacity: 0.7;
  pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--white); margin-bottom: 6px; }
.cta-banner p { color: #cfe1f0; margin: 0; }

/* Footer */
.site-footer { background: var(--blue-900); color: #cfe1f0; padding: 40px 0 20px; }
.footer-col-brand { margin-bottom: 20px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img { height: 36px; width: 36px; background: var(--white); border-radius: 8px; padding: 3px; }
.footer-brand span { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 1.1rem; }
.footer-slogan { font-weight: 600; color: var(--accent-300, #7dd3c0); font-size: 0.92rem; margin: 0 0 10px; }
.site-footer h5 { color: var(--white); font-size: 0.92rem; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.site-footer p { color: #a9c1d6; font-size: 0.95rem; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer ul li a { font-size: 0.88rem; color: #a9c1d6; }
.site-footer ul li a:hover { color: var(--accent-500); }
/* Contact footer — icon-only row (no labels/numbers), all aligned on one
   line, replacing the old emoji + text list. Real SVGs instead of emoji,
   since emoji render inconsistently across devices/platforms —
   particularly noticeable for something as recognizable as the WhatsApp
   mark, which needs to actually look like WhatsApp's real icon (their
   brand green, correct shape) to read as "original" rather than a
   generic chat bubble. Sits directly under the brand description now —
   no separate "Contact" column/heading, so there's no leftover column
   height mismatch or awkward gap next to a much taller brand column. */
.footer-contact-icons { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.footer-icon-link { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--white); transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.footer-icon-link:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }
.footer-icon-link svg { width: 18px; height: 18px; }
.footer-icon-whatsapp { color: #25D366; }
.footer-icon-call { color: var(--accent-500); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; color: #8ba9c2; }
.footer-bottom a { color: #8ba9c2; }
.footer-bottom a:hover { color: var(--accent-500); }

/* WhatsApp floating button */
.wa-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4);
  z-index: 60;
  transition: transform 0.2s ease;
}
.wa-float:hover { transform: scale(1.06); }

/* Chat assistant floating button + panel */
.chat-float {
  position: fixed;
  bottom: 92px;
  right: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-500), var(--blue-600));
  color: #fff;
  border: none;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-tag);
  /* Above the mobile sticky call/book bar (z-index 70) so on phones where
     that bar renders taller than expected (longer translated text, safe-area
     inset on notched devices) it can never sit on top of this button and
     silently swallow the tap. Also above wa-float so the two never fight. */
  z-index: 75;
  cursor: pointer;
  transition: transform 0.2s ease;
  /* Removes the ~300ms tap delay / double-tap-to-zoom ambiguity that makes
     mobile browsers occasionally treat a genuine tap as a non-click. */
  touch-action: manipulation;
}
.chat-float:hover { transform: scale(1.06); }
.chat-float svg { position: relative; z-index: 2; }

/* A soft, slow-breathing ring around the button — subconsciously draws
   the eye without demanding attention the way a fast blink or bright
   color would. Purely decorative (aria-hidden via not being focusable),
   pauses automatically once the chat is open (see .chat-panel.open ~
   .chat-float rule) so it doesn't keep pulsing behind an open
   full-screen chat on mobile. */
.chat-float-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--accent-500);
  opacity: 0.35;
  z-index: 1;
  animation: chatPulse 2.4s ease-out infinite;
}
@keyframes chatPulse {
  0% { transform: scale(0.85); opacity: 0.45; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.chat-panel.open ~ .chat-float .chat-float-pulse,
.chat-panel.open + .chat-float .chat-float-pulse { animation-play-state: paused; opacity: 0; }

/* A small "AI-powered" sparkle badge sitting on the button's corner —
   the detail that makes it read as "smart assistant" rather than a
   generic contact-us bubble. */
.chat-float-spark {
  position: absolute;
  top: -2px; right: -2px;
  font-size: 15px;
  z-index: 3;
  animation: chatSparkTwinkle 2.4s ease-in-out infinite;
}
@keyframes chatSparkTwinkle {
  0%, 100% { opacity: 0.6; transform: scale(0.9) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(12deg); }
}

/* One-time teaser bubble (see initChatWidget in chatbot.js for the
   show/hide timing) — a lightweight nudge, not a modal: tapping it just
   dismisses it, tapping the float button underneath still opens chat
   normally. */
.chat-teaser {
  position: fixed;
  bottom: 158px;
  right: 22px;
  max-width: 190px;
  background: var(--white);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  box-shadow: var(--shadow-lg);
  font-size: 0.85rem;
  line-height: 1.4;
  z-index: 74;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}
.chat-teaser.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

.chat-panel {
  position: fixed;
  bottom: 158px;
  right: 22px;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: min(560px, 70vh);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 76;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.chat-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.chat-panel-head {
  background: linear-gradient(135deg, var(--blue-700), var(--accent-600));
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.chat-panel-head strong { font-family: var(--font-display); font-size: 0.95rem; display: block; }
.chat-panel-head .chat-sub { display: block; font-size: 0.85rem; opacity: 0.85; margin-top: 2px; }
.chat-close-btn { background: transparent; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; padding: 4px; }

.chat-panel-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--mist);
}

.chat-msg { max-width: 90%; padding: 10px 12px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; line-height: 1.45; }
.chat-msg.bot { background: var(--white); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; color: var(--ink); }
.chat-msg.user { background: var(--accent-500); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg p { margin: 0 0 6px; }
.chat-msg p:last-child { margin-bottom: 0; }

/* SUGGESTION IMPLEMENTED: a small spinning ring (conic-gradient, so it
   has a "moving" leading edge rather than a flat uniform circle) reads
   as "AI actively thinking" much more clearly than a static "⏳" text
   ever could — used while waiting for Bella's reply. */
.chat-thinking { display: inline-flex; align-items: center; gap: 8px; color: var(--slate); }
.chat-thinking-star {
  color: #0277FB;
  animation: chatThinkingSpin 2s linear infinite;
  flex-shrink: 0;
  transform-origin: center;
}
@keyframes chatThinkingSpin { to { transform: rotate(360deg); } }

.chat-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 100%; }
.chat-quick-btn { background: var(--white); border: 1px solid var(--accent-500); color: var(--accent-600); padding: 5px 10px; border-radius: 999px; font-size: 0.85rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; touch-action: manipulation; }
.chat-quick-btn:hover { background: var(--accent-500); color: #fff; }

.chat-input-row { display: flex; gap: 8px; align-self: stretch; }
.chat-input-row input { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.85rem; font-family: var(--font-body); }
.chat-input-row button { background: var(--accent-500); color: #fff; border: none; padding: 9px 14px; border-radius: 10px; font-size: 0.85rem; cursor: pointer; flex-shrink: 0; }

/* SUGGESTION IMPLEMENTED: persistent input bar, fixed at the bottom of
   the chat panel (not inside the scrolling message list) — always
   visible, never needs re-opening after each message. The send button
   is a filled circle sized for an easy mobile thumb-tap (40px, well
   above the ~32px minimum comfortable touch target), positioned right
   where a right-handed or left-handed thumb naturally lands next to the
   text field, matching the familiar WhatsApp/iMessage layout. */
.chat-panel-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--white);
  flex-shrink: 0;
}
.chat-panel-input input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 1.02rem;
  font-family: var(--font-body);
  background: var(--mist);
}
.chat-panel-input input:focus { outline: none; border-color: var(--accent-500); background: var(--white); }
.chat-panel-input input:disabled { opacity: 0.6; }
.chat-panel-input button {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-500);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}
.chat-panel-input button svg { width: 21px; height: 21px; }
.chat-panel-input button:hover:not(:disabled) { background: var(--accent-600); transform: scale(1.05); }
.chat-panel-input button:disabled { opacity: 0.5; cursor: default; }
.chat-panel-input button svg { transform: translateX(-1px); } /* optically centers the paper-plane icon */

.chat-typing { font-size: 0.85rem; color: var(--slate); align-self: flex-start; font-style: italic; }

/* Sticky "Book Now" bar — shown on every screen size now (not just
   mobile), so desktop gets the same easy-access CTA that used to live in
   the header before it was removed. `width:100%` capped by `max-width`
   means it's still full-bleed edge-to-edge on phones (100% of a ~390px
   viewport is already under the cap) but becomes a centered, comfortably
   -sized floating bar on wider screens instead of stretching edge-to-edge
   like an alarming full-width strip. */
/* Mobile-only — desktop shows the header's phone number + Book Now
   instead (see .header-actions), so this stays hidden until the mobile
   media query below flips it back on, to avoid showing both at once. */
/* SUGGESTION IMPLEMENTED: unified bottom navigation, visible on both
   mobile and desktop (a deliberate departure from typical desktop
   patterns, per explicit request) — Home / City / Support / Cart / Menu
   in one consistent bar, replacing the separate floating WhatsApp bubble
   and mobile-only Call/Book strip. */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(15, 42, 67, 0.08);
  /* FIX: on some Android browsers/devices, env(safe-area-inset-bottom)
     reports 0 even though the phone's own on-screen navigation bar (or a
     browser toolbar) still overlaps this area — leaving the nav row
     partially hidden behind it. A larger fixed minimum (16px, not 8px)
     keeps a real, visible buffer even on devices/browsers that don't
     report a safe-area inset at all, while max() still grows it further
     wherever a genuine inset IS reported (notched/gesture-nav phones). */
  padding: 8px 6px max(16px, calc(8px + env(safe-area-inset-bottom)));
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--slate);
  font-size: 0.85rem;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: none;
  flex: 1;
  max-width: 84px;
  transition: color 0.15s ease;
}
.bottom-nav-item:hover, .bottom-nav-item:active { color: var(--accent-600); }
.bottom-nav-cart-wrap { position: relative; }
.bottom-nav-badge {
  position: absolute;
  top: -6px; right: -8px;
  background: #e0455a;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}
/* Center "Support" button — raised above the bar, filled/circular, the
   same visual treatment as the reference layout's center action button. */
.bottom-nav-support {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #0277FB;
  color: #fff;
  border: 4px solid var(--bg, #fff);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
  flex-shrink: 0;
  transition: background 0.15s ease;
  /* FLOW CHANGE: moved off to the side (bottom-right corner, floating
     above the nav bar) instead of sitting dead-center in the bottom-nav
     row — Home/City/Cart/Menu now space out evenly on their own below
     it. */
  position: fixed;
  right: 16px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 130;
}
.bottom-nav-support:hover { background: var(--accent-600); }
/* BUG FIX: the "breathing" animation used to live directly on this
   button — but a position:fixed element that also carries its own
   transform can end up computing its fixed position against the wrong
   containing block in some cases (it showed up thousands of pixels
   down the page on wider/laptop screens instead of pinned to the
   viewport corner). Moved the transform onto this inner, plain (static-
   position) span instead — the outer button now never has a transform
   of its own, so its fixed positioning can't be affected by it. */
.bottom-nav-support-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  animation: supportBreathe 2.6s ease-in-out infinite;
}
.bottom-nav-support.open .bottom-nav-support-inner { animation: none; }
@keyframes supportBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-nav-support-inner { animation: none; }
}
.bottom-nav-support .support-icon-close { display: none; }
.bottom-nav-support.open .support-icon-default { display: none; }
.bottom-nav-support.open .support-icon-close { display: block; }
.bottom-nav-support.open { background: var(--ink); }

/* Radial fan-out — 3 satellite buttons (Call/WhatsApp/AI) that pop out
   above the corner support button in a small vertical stack, instead of
   a sliding bottom sheet. Anchored to the same right-side spot as
   .bottom-nav-support (see above — moved off-center to the side); hidden/
   collapsed by default (opacity 0, sitting right on top of that button)
   and only visible+spread out once .open is set on #supportFanOut by
   chatbot.js. */
.support-fan-out {
  position: fixed;
  right: 16px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 91;
  pointer-events: none;
}
.support-fan-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  border: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  text-decoration: none;
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.support-fan-btn.support-fan-call { background: #0d6efd; }
.support-fan-btn.support-fan-whatsapp { background: #1aa251; }
.support-fan-btn.support-fan-ai { background: #fff; border: 2px solid #e5e7eb; }
.support-fan-out.open { pointer-events: auto; }
.support-fan-out.open .support-fan-btn { opacity: 1; }
/* Stacked straight up from the corner button — WhatsApp closest, then
   Call, then AI furthest up — rather than a horizontal arc, so nothing
   spreads off the right edge of the screen near the corner. */
.support-fan-out.open .support-fan-whatsapp { transform: translate(0, -68px) scale(1); }
.support-fan-out.open .support-fan-call { transform: translate(0, -132px) scale(1); }
.support-fan-out.open .support-fan-ai { transform: translate(0, -196px) scale(1); }

/* Bottom sheets — Support / City / Menu popups, all sharing the same
   slide-up-from-bottom pattern, dismissible by tapping the backdrop. */
.bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  /* BUG FIX: this was z-index:95 — LOWER than .bottom-nav's z-index:120
     (raised earlier for an unrelated fix, keeping the nav bar visible
     above system chrome on some phones). That meant the fixed bottom-nav
     bar was rendering ON TOP of this sheet whenever it opened, hiding
     whatever part of the sheet's content (e.g. the last row or two of
     cities) happened to sit underneath the nav bar's own area — even
     though the sheet itself had plenty of room and no real overflow.
     Now higher than the nav bar, so an open sheet always properly covers
     it instead of being covered by it. */
  z-index: 150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.bottom-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.bottom-sheet {
  background: var(--white);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 520px;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.25s ease;
  max-height: 75vh;
  overflow-y: auto;
  /* BUG FIX: content beyond the visible area (e.g. cities further down
     the "Apna Shehar Chunein" list) WAS scrollable, but on desktop
     browsers with auto-hiding scrollbars there's often no visible hint
     that there's more to scroll to — it just looks like the list ends.
     Forcing a visible, styled scrollbar makes that obvious. */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.bottom-sheet::-webkit-scrollbar { width: 8px; }
.bottom-sheet::-webkit-scrollbar-track { background: transparent; }
.bottom-sheet::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.bottom-sheet::-webkit-scrollbar-thumb:hover { background: var(--slate); }
.bottom-sheet-backdrop.open .bottom-sheet { transform: translateY(0); }
.bottom-sheet-handle { width: 40px; height: 4px; background: var(--line); border-radius: 999px; margin: 0 auto 14px; }
.bottom-sheet h3 { font-size: 1.05rem; margin-bottom: 8px; }
.bottom-sheet-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 14px 4px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-body);
  text-decoration: none;
}
.bottom-sheet-option:last-child { border-bottom: none; }
.bottom-sheet-icon { font-size: 1.3rem; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bottom-sheet-city-grid {
  display: grid;
  /* BUG FIX: smaller minimum column width so more cities fit per row —
     with the site's current 8 cities, this fits them all in 2 short rows
     (4 per row) instead of 3 rows (3 per row), which mostly avoids ever
     needing to scroll for a city list this size in the first place.
     Also removed this grid's own separate max-height/scroll — nesting a
     second scrollable area inside the already-scrollable .bottom-sheet
     was creating confusing, easy-to-miss double-scroll behavior; there's
     just the one, obvious scroll on the sheet itself now. */
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  padding-bottom: 8px;
}
.bottom-sheet-city-grid a { display: block; text-align: center; padding: 12px 8px; background: var(--mist); border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.85rem; }
.bottom-sheet-city-grid a:hover { background: var(--accent-100, #dbeafe); }
.bottom-sheet-city-btn { display: block; width: 100%; text-align: center; padding: 12px 8px; background: var(--mist); border: none; border-radius: 12px; color: var(--ink); font-weight: 600; font-size: 0.85rem; font-family: var(--font-body); cursor: pointer; }
.bottom-sheet-city-btn:hover { background: var(--accent-100, #dbeafe); }

/* Room at the bottom of every page so the fixed bar never covers the
   last bit of content, on any screen size (this bar is no longer
   mobile-only). */
body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
/* The bottom tab bar (Home/City/Cart/Menu) is a mobile-app pattern —
   left on at every width, it was still showing up on tablet/desktop
   screens next to the perfectly normal top header nav, which reads as
   a mobile UI accidentally leaking into a desktop layout. Desktop
   already has everything it needs in the header, so this hides it from
   860px up (matching the breakpoint the rest of the page already
   switches to a desktop layout at) and gives that reserved bottom
   padding back to the page. */
@media (min-width: 721px) {
  /* BUG FIX: this used to be `.bottom-nav { display: none; }` — but the
     floating chat/support star button and its Call/WhatsApp/AI fan-out
     panel are DOM children of <nav class="bottom-nav">, even though
     both are position:fixed and visually float independently of it.
     display:none on a parent hides its children regardless of their own
     position — so hiding the tab bar on desktop was accidentally taking
     the entire chat widget down with it. This instead collapses just
     the tab bar itself (Home/City/Cart/Menu) down to nothing, while
     explicitly keeping the floating support button and its fan-out
     enabled and visible at every width. */
  .bottom-nav { position: static; height: 0; padding: 0; margin: 0; background: none; border: none; box-shadow: none; pointer-events: none; }
  .bottom-nav-item { display: none; }
  .bottom-nav-support, .support-fan-out { pointer-events: auto; }
  body { padding-bottom: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-close-btn { top: -10px; right: 6px; }
}
@media (max-width: 720px) {
  /* BUG FIX: this stayed at the same 40px-per-side padding as desktop —
     on a ~380px-wide phone screen, that's 80px (over 20% of the whole
     width) spent on empty margin instead of actual content, making
     everything feel narrower and more cramped than it needs to be. */
  .container { padding: 0 16px; }
  .site-header .container { height: 64px; }
  .brand img { height: 38px; width: 38px; }
  .brand-name-main { font-size: 1rem; }
  .brand-name-sub { font-size: 0.62rem; }
  .header-actions { gap: 8px; }
  .header-actions .call-link { display: none; }
  .header-actions .btn-primary.btn-sm { display: none; }
  .nav-links { position: fixed; top: 64px; left: 0; right: 0; background: var(--white); flex-direction: column; padding: 20px 24px; border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: transform 0.2s ease; align-items: flex-start; gap: 4px; }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { display: block; padding: 10px 0; width: 100%; }
  .nav-toggle { display: block; }
  /* Appliance service cards — was 1 full-width card per screen on mobile
     (lots of scrolling to see them all). auto-fit naturally settles on 2
     per row on phones and 3 per row on slightly wider screens, and the
     card itself is shrunk to match. */
  .services-grid { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
  .service-card { padding: 12px 11px; }
  .service-icon { width: 40px; height: 40px; border-radius: 9px; font-size: 1.2rem; }
  .service-card h3 { font-size: 0.85rem; margin-bottom: 4px; }
  .service-card p { font-size: 0.85rem; margin-bottom: 8px; }
  .service-types { gap: 4px; margin-bottom: 8px; }
  .service-types span { font-size: 0.85rem; padding: 3px 7px; }
  .service-info { margin-bottom: 10px; }
  .service-info summary { font-size: 0.85rem; }
  .service-info .service-process { font-size: 0.85rem; }
  .service-card .btn { width: auto; text-align: center; font-size: 0.72rem; padding: 5px 11px; border-width: 1px; }

  .why-grid { grid-template-columns: 1fr; }
  .why-grid-compact { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .why-grid-compact .why-item { padding: 10px 8px; }
  .why-grid-compact .why-icon { width: 30px; height: 30px; margin: 0 0 6px; font-size: 0.9rem; }
  .why-grid-compact .why-item p { font-size: 0.85rem; }

  /* Booking form / careers form — keep short field pairs side by side
     instead of stacking every single field, and tighten the padding, so
     the whole form is noticeably shorter and needs far less scrolling. */
  .form-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .field { margin-bottom: 8px; }
  .field label { font-size: 0.85rem; margin-bottom: 4px; }
  .field select, .field input, .field textarea { padding: 10px 8px; }
  /* Selects specifically (not inputs/textareas) get a smaller font — a
     narrower half-width box next to the native dropdown arrow isn't
     enough room at the normal 1rem size, so longer option text like
     "Service / AMC" or "Washing Machine" was getting cut off. */
  .field select { font-size: 0.85rem; padding-right: 4px; }
  .booking-form { padding: 18px; }
  .cart-add-box { padding: 12px; margin: 12px 0; }
  .modal { padding: 18px; }
  .modal p.modal-sub { margin-bottom: 12px; }
  section { padding: 16px 0; }

  /* Compact hero on mobile — so "Our services" is visible sooner without
     much scrolling on a phone screen. Desktop keeps its original, more
     spacious sizing (see the base .hero/.eyebrow/h1/.hero-sub rules
     above); this just tightens things up below 720px. Kept extra tight
     per explicit request — heading also thinner (font-weight 500, set on
     the base .hero h1 rule above) and smaller here so the appliance
     list/services grid comes into view with minimal scrolling. */
  .hero { padding: 14px 0 0; }
  .hero .eyebrow { margin-bottom: 6px; padding: 4px 10px; font-size: 0.72rem; }
  .hero h1 { margin-bottom: 5px; }
  .hero-rating { margin-bottom: 5px; }
  .hero-sub { font-size: 0.86rem; margin-bottom: 6px; }
  .hero-grid { gap: 0; }
  #services { padding: 0; }
  #services .section-head { margin-bottom: 8px; }
  #services .section-head .eyebrow { margin-bottom: 8px; }

  .cta-banner { flex-direction: column; text-align: center; }

  /* Full-screen takeover, now paired with blur-on-send (see chatbot.js) —
     the keyboard closes right after sending a message, so the input/
     latest-message-hidden-behind-keyboard scenario mostly only matters
     while actively typing (before hitting send), not throughout the whole
     exchange. 100dvh correctly tracks the visible area on most modern
     mobile browsers for that in-progress-typing case. */
  .chat-panel {
    position: fixed;
    inset: 0;
    bottom: 0; right: 0; left: 0; top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    z-index: 200; /* above the sticky mobile CTA bar and floating buttons */
  }
  .chat-panel-head { padding-top: max(14px, env(safe-area-inset-top)); }
  .chat-panel-input { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  body.chat-open-lock { position: fixed; left: 0; right: 0; overflow: hidden; }
}