/* ═══════════════════════════════════════════════════════════════════════════
   MILES BOOKING ENGINE — production stylesheet.

   Three pages, one stylesheet (owner, 13-Sep, modelled on the Savaari flow):
     1 SEARCH      the form card (Miles Clean variant 22 underline treatment)
     2 SELECT CAR  summary bar · package tabs · car cards with a drop-down
     3 BOOKING     two columns — details on the left, payment on the right

   Class prefix stays `.mc-` so the view kit and this file are read together.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── reset + page ─────────────────────────────────────────────────────────── */
:root{
  --c-navy:#0a1f44; --c-navy2:#142e5e; --c-navy3:#e6ebf4; --c-accent:#f59e0b; --c-accent2:#fbbf24;
  --c-ink:#0f172a; --c-mute:#64748b; --c-line:#e2e8f0; --c-bg:#f8fafc; --c-card:#fff; --c-ok:#15803d; --c-bad:#b91c1c;
  --c-radius:12px; --c-radius-sm:8px; --c-shadow:0 4px 12px rgba(15,23,42,.04); --c-shadow-md:0 10px 25px rgba(15,23,42,.08);
  --c-font:Inter,Poppins,-apple-system,"Segoe UI",Roboto,sans-serif; --c-head:Poppins,Inter,sans-serif;
  --c-btn:var(--c-navy); --c-btn-ink:#fff; --c-sel:var(--c-accent); --c-sel-ink:var(--c-navy);
}
.mb-stage *,.mb-stage *::before,.mb-stage *::after{box-sizing:border-box}
.mb-stage img{max-width:100%}
/* ⚠️ Reset the FONT FAMILY only.
   `.mb-stage button{font:inherit;color:inherit}` is specificity (0,1,1) — higher than
   the (0,1,0) of every `.mc-*` button class — so it beat them and forced EVERY button
   to the site's body colour and 16px. On a navy Select button that meant near-black
   text on navy: the button rendered as a solid block with no readable label, which is
   what "we can't see anything" meant. Each button class sets its own colour and size. */
.mb-stage button,.mb-stage input,.mb-stage select,.mb-stage textarea{font-family:inherit}
.mb-stage input,.mb-stage select,.mb-stage textarea{font-size:inherit;color:inherit}
.mb-stage button{line-height:1.2}
.mb-stage button{cursor:pointer}
.mb-stage button:disabled{cursor:not-allowed}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
@keyframes mbShimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.mb-skel{background:linear-gradient(90deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.09) 37%,rgba(0,0,0,.05) 63%);background-size:800px 100%;animation:mbShimmer 1.3s infinite;border-radius:8px}
@media(prefers-reduced-motion:reduce){.mb-skel{animation:none}}

/* A soft tint behind the page so every white panel reads as a distinct card. Scoped
   to the engine's own stage so no other page's background is touched. */
.mb-stage{background:#eef2f8;padding:2px 0 1px}
.mc-wrap{max-width:1120px;margin:0 auto;padding:16px 16px 60px;scroll-margin-top:92px}
@media(max-width:899px){.mc-wrap{padding-bottom:150px}}   /* room for the dock + the site's phone bar */
.mc-main>section{margin-top:14px}
/* The site navbar is fixed, so a section the engine scrolls to would land underneath
   it. Leave the navbar's height clear on every jump target. */
.mc-main>section,#sec-results,#sec-selected,#sec-details,#sec-pay,#sec-done{scroll-margin-top:92px}
.mc-foot{margin-top:26px;text-align:center;font-size:12px;color:var(--c-mute)}

/* ── mode banner (admin / agent / edit) ───────────────────────────────────── */
.mc-mode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--c-navy);color:#fff;font-size:13px;font-weight:700;padding:9px 16px}
.mc-mode.is-agent{background:#0a1f44;box-shadow:inset 4px 0 0 #f59e0b}
.mc-who{background:rgba(255,255,255,.14);border-radius:999px;padding:2px 10px;font-weight:500;font-size:12px}
.mc-who b{font-weight:700}
.mc-credit{margin-top:10px;border:1px solid #e5e7eb;border-left:4px solid #f59e0b;border-radius:10px;padding:10px 12px;background:#fff;font-size:13px;color:#0a1f44}
.mc-credit>div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.mc-credit>div span{color:#475569}
.mc-credit small{display:block;color:#64748b;margin:2px 0 4px}
.mc-credit .mc-credit-left{border-top:1px dashed #cbd5e1;margin-top:4px;padding-top:6px;font-size:14px}
.mc-credit.is-over{border-color:#dc2626;border-left-color:#dc2626}
.mc-credit.is-over .mc-credit-left b{color:#dc2626}
.mc-credit p{margin:6px 0 0;color:#dc2626;font-weight:600}
.mc-done-fare{margin-top:14px;border:1px solid #e5e7eb;border-left:4px solid #f59e0b;border-radius:10px;padding:10px 12px;background:#fff;color:#0a1f44;font-size:13px}
.mc-done-fh{display:block;font-size:14px;margin-bottom:6px}
.mc-done-fare>div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.mc-done-fare>div span{color:#475569}
.mc-done-fare>div span small{display:block;font-size:11px;color:#94a3b8}
.mc-done-fare>div b{white-space:nowrap}
.mc-done-fare .mc-done-sep{border-top:1px dashed #cbd5e1;margin-top:4px;padding-top:6px}
.mc-done-fare .mc-done-tot{font-size:14px}
.mc-done-fare .mc-done-tot b{color:#0a1f44}
.mc-mode.is-edit{background:#b45309}
.mc-mode small{font-weight:500;color:rgba(255,255,255,.82)}
.mc-mode a{color:#fff;text-decoration:underline}

/* ── step indicator ───────────────────────────────────────────────────────── */
.mc-steps{display:flex;gap:0;margin:0 0 4px;padding:0;list-style:none;align-items:center}
.mc-steps li{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#94a3b8;letter-spacing:.02em}
.mc-steps li i{width:22px;height:22px;border-radius:50%;border:2px solid #cbd5e1;display:grid;place-items:center;font-style:normal;font-size:11px;color:#94a3b8;background:#fff}
.mc-steps li.is-on{color:var(--c-navy)}
.mc-steps li.is-on i{border-color:var(--c-navy);background:var(--c-navy);color:#fff}
.mc-steps li.is-done{color:var(--c-navy)}
.mc-steps li.is-done i{border-color:#16a34a;background:#16a34a;color:#fff}
.mc-steps li+li::before{content:"";display:block;width:34px;height:2px;background:#cbd5e1;margin:0 10px}
.mc-steps li.is-done+li::before{background:#16a34a}
@media(max-width:480px){.mc-steps li span{display:none}.mc-steps li.is-on span{display:inline}.mc-steps li+li::before{width:18px;margin:0 6px}}

/* ── PAGE 1 · search ──────────────────────────────────────────────────────── */
/* Variant 22 is the underline treatment — that lives on the INPUTS. The panel itself
   still needs to be a panel: with no card at all the whole booking form read as a
   thin floating strip on a white page, which is what "we can't see anything" meant. */
.mc-search{background:var(--c-card);border:1px solid #d7deea;border-radius:var(--c-radius);box-shadow:0 2px 10px rgba(15,23,42,.05);padding:20px 22px 22px}
.mc-search-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.mc-title{font-family:"Space Grotesk",Poppins,Inter,sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;margin:0;color:var(--c-navy)}
.mc-title b{color:var(--c-accent)}
.mc-tagline{font-size:13px;color:var(--c-mute)}
.mc-trips{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.mc-trips::-webkit-scrollbar{display:none}
.mc-trip{flex:none;border:0;border-bottom:2px solid transparent;background:transparent;border-radius:0;padding:6px 10px;color:var(--c-ink);display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;transition:.15s}
.mc-trip-l{font-size:13px;font-weight:700}
.mc-trip.is-on{background:transparent;color:var(--c-navy);border-bottom-color:var(--c-accent)}
/* All four trip types must fit a 360px phone without the last one clipping at the
   edge — a half-visible "Airport" reads as a broken layout, not a scrollable row. */
@media(max-width:430px){.mc-trips{gap:2px}.mc-trip{padding:6px 6px}.mc-trip-l{font-size:12.5px}}
@media(max-width:340px){.mc-trip-l{font-size:11.5px}}
.mc-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;color:var(--c-ink)}
@media(min-width:860px){.mc-bar{grid-template-columns:1.1fr 1.4fr 1.3fr auto}.mc-bar .mc-f-ret{grid-column:1/3}.mc-bar-go{grid-column:4;grid-row:1}}
/* Phones: every field gets the full width. The date+time box used to take half of it
   (136px on a 375px phone), squeezing "Wed, 16 Sept" and "10:00 am" into ellipses. */
@media(max-width:859px){.mc-bar .mc-f-city,.mc-bar .mc-f-dest,.mc-bar .mc-f-pkg,.mc-bar .mc-f-when,.mc-bar-go{grid-column:1/-1}}
.mc-f{margin:0;min-width:0}
.mc-f-when{display:block}
/* the combined date+time trigger that opens the shared picker */
.mc-when{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 4px;background:transparent;
  border:0;border-bottom:2px solid #cbd5e1;border-radius:0;text-align:left;color:var(--c-ink);transition:.15s}
.mc-when:hover,.mc-when:focus{border-bottom-color:var(--c-navy);outline:0}
.mc-when-i{flex:none;display:grid;place-items:center;color:var(--c-navy)}
.mc-when-b{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.mc-when-b .dtp-tr-date{font-size:14.5px;font-weight:700;color:var(--c-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-when-b .dtp-tr-time{font-size:13px;color:var(--c-mute);white-space:nowrap}
.mc-when-b .dtp-tr-filled{color:var(--c-ink)}
.mc-when-b .dtp-tr-time.dtp-tr-filled{color:var(--c-navy);font-weight:700}
.mc-when-c{flex:none;color:var(--c-mute)}
@media(max-width:859px){.mc-when{height:44px}}
.mc-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-mute);margin-bottom:4px}
.mc-lbl small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--c-mute)}
.mc-in{width:100%;height:40px;border:0;border-bottom:2px solid #cbd5e1;border-radius:0;padding:0 4px;font-size:14.5px;background:transparent;color:var(--c-ink);outline:0;transition:.15s}
.mc-in:focus{border-bottom-color:var(--c-navy);box-shadow:none}
textarea.mc-in{height:auto;padding:8px 4px}
.mc-seg{display:flex;gap:6px;margin-top:6px}
.mc-seg-b{border:1.5px solid var(--c-line);background:var(--c-card);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700;color:var(--c-mute)}
.mc-seg-b.is-on{background:var(--c-navy3);border-color:var(--c-navy);color:var(--c-navy)}
.mc-note{font-size:12px;color:var(--c-mute);margin-top:6px}
.mc-cta{display:block;width:100%;height:44px;border:0;border-radius:0;background:var(--c-accent);color:var(--c-navy);font-weight:800;font-size:14.5px;padding:0 18px;white-space:nowrap;transition:.15s}
.mc-cta:hover:not(:disabled){filter:brightness(1.06)}
/* A disabled call to action still has to be legible. Light grey on white was about
   2:1 contrast — the button effectively vanished, and the customer was left looking
   at a form with no visible way forward. Amber-tinted reads clearly as "this is the
   button, it is not ready yet", and V.searchGate() says what is missing. */
.mc-cta:disabled,.mc-paybtn:disabled{background:#fef3c7;color:#92400e;box-shadow:none;opacity:1}
.mc-cta:disabled{border:1.5px dashed #fcd34d}
.mc-gate{margin-top:10px;font-size:13px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:var(--c-radius-sm);padding:8px 12px}
.mc-ghost{display:inline-block;background:var(--c-card);border:1.5px solid var(--c-line);border-radius:var(--c-radius-sm);padding:10px 14px;font-weight:700;color:var(--c-ink);text-decoration:none;font-size:13.5px}
.mc-link{background:none;border:0;padding:0;color:var(--c-navy);font-weight:700;text-decoration:underline;cursor:pointer;font-size:13px}
.mc-link:disabled{color:#94a3b8;text-decoration:none}
.mc-err{margin-top:10px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:var(--c-radius-sm);padding:9px 12px;font-size:13.5px}
.mc-ok{margin-top:10px;background:#f0fdf4;border:1px solid #86efac;color:#166534;border-radius:var(--c-radius-sm);padding:9px 12px;font-size:13.5px}
.mc-hint{margin-top:10px;font-size:12.5px;color:var(--c-mute)}
.mc-hint svg{vertical-align:-2px;margin-right:3px}

/* ═══ PAGE 1 · PROFESSIONAL SKIN ═══════════════════════════════════════════════
   Owner, 13-Sep: "Can we have different colors and a little different professional
   look?" A navy header band carrying the title and the trip switch, boxed field tiles
   on white, ONE solid amber action, and the payment trust strip along the foot.
   Brand palette only (R5: navy, amber, white + neutral greys).

   Everything is scoped to .mc-search, so the page-2/3 controls that share class names
   (.mc-f, .mc-in, .mc-cta, .mc-gate) keep their approved look. */
.mc-search{padding:0;overflow:hidden;border:1px solid #d3dbe8;border-radius:16px;box-shadow:0 10px 30px rgba(10,31,68,.10)}
.mc-search-top{background:linear-gradient(120deg,#0a1f44 0%,#173a72 100%);border-bottom:3px solid var(--c-accent);
  padding:18px 22px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.mc-search .mc-search-hd{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.mc-search .mc-title{font-family:var(--c-head);font-size:22px;font-weight:700;text-transform:none;letter-spacing:-.01em;color:#fff;line-height:1.2;margin:0;text-align:center}
.mc-search .mc-title b{color:var(--c-accent);font-weight:700}
.mc-search .mc-tagline{font-size:12.5px;color:#b8c6de}
/* trip switch — owner, 13-Sep: centred, a Savaari-style segmented bar, "highlighted"
   with the running gold line of the homepage's "Real Google reviews" badge (index.php
   .rgt14). Same recipe: a 2px gap around the bar with a slowly turning gold conic
   gradient behind it, clipped to the shape. Kept as its own copy because /booking does
   not load the homepage's stylesheet. */
/* FIXED after the owner's screenshot (13-Sep). The first ring was nothing but the moving
   gradient, copied from the reviews badge — and that badge is navy INSIDE. Here the inside
   is white tabs and the outside is the navy header, so the gradient's near-white stops
   vanished against the tabs and its dark stops vanished against the header: the "ring"
   showed as two gold streaks with no edge round Airport. Now the ring is a steady gold
   outline painted by the element itself (always visible, both sides), and the moving
   gradient only adds two bright glints that run round it. */
.mc-trips-ring{--ring-base:#d6981a;--ring-glow:#fde68a;--ring-core:#fffaeb;
  position:relative;display:inline-block;max-width:100%;padding:3px;border-radius:11px;overflow:hidden;isolation:isolate;
  background:var(--ring-base);box-shadow:0 0 0 1px rgba(253,230,138,.20),0 8px 22px rgba(0,0,0,.28)}
/* FIXED again 13-Sep (owner: "It should move in a full circle. It should not disappear in
   between."). The lights were a conic gradient SPINNING behind the bar. Spinning is round and
   the bar is a long flat rectangle, so the light raced along the long sides, crawled round the
   ends and vanished whenever the spinning square stopped covering the bar. ring.js now draws
   two lights ON the gold edge and moves them round the outline at a constant speed. */
.mc-ring-svg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.mc-ring-svg rect{fill:none;stroke-width:3;stroke-linecap:round}
.mc-ring-glow{stroke:var(--ring-glow);opacity:.95}
.mc-ring-core{stroke:var(--ring-core)}
.mc-trips-ring>.mc-trips,.mc-trips-ring>.mc-pkgbar{position:relative;z-index:1}
/* on a light page (the package tabs on page 2) the glints need saturated gold, not pale */
.mc-ring-light{--ring-base:#cf8a10;--ring-glow:#fbbf24;--ring-core:#fff1b8;box-shadow:0 0 0 1px rgba(207,138,16,.14),0 6px 16px rgba(10,31,68,.10)}
/* /booking redraws the page after each choice, and a fresh element starts its animation
   at 0deg — the gold line would jump back to its starting point every time. views.js
   stamps --mc-shine-delay from the clock on each redraw (ring.js phases the ring lights the same way), so the new
   ring picks up exactly where the old one was and simply keeps circling. */
.mc-search .mc-trips{margin:0;display:flex;gap:0;padding:0;background:#fff;border:0;border-radius:8px;overflow:hidden;max-width:100%}
.mc-search .mc-trip{flex:none;display:flex;flex-direction:row;align-items:center;justify-content:center;min-height:42px;
  border:0;border-left:1px solid #d6deea;border-radius:0;padding:10px 26px;background:#fff;color:var(--c-navy);transition:background .15s,color .15s}
.mc-search .mc-trip:first-child{border-left:0}
.mc-search .mc-trip .mc-trip-l{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mc-search .mc-trip:hover{background:#f2f5fa;color:var(--c-navy)}
/* The chosen trip wears the reviews badge's own pairing — navy with gold lettering that
   catches the light (index.php .rgt14-inner + .rgt14-l3) — so it reads as part of the
   turning gold ring. Owner, 13-Sep: the amber fill "is not matching with the golden ring". */
/* FIXED after the same screenshot: a navy tab on the navy header melted into it and the bar
   looked as if it started at Round Trip; the shimmer's dark orange-brown made "ONE WAY"
   hard to read. Now: a lighter royal navy than the header, its own gold edge, and gold
   lettering that is always bright with a soft light passing through. */
.mc-search .mc-trip.is-on,.mc-pkgtab.is-on{background:linear-gradient(180deg,#21468a 0%,#15336a 100%);color:#fcd34d;box-shadow:inset 0 0 0 2px rgba(252,211,77,.60)}
.mc-search .mc-trip.is-on:hover,.mc-pkgtab.is-on:hover{background:linear-gradient(180deg,#264e96 0%,#183a76 100%)}
.mc-search .mc-trip.is-on .mc-trip-l,.mc-pkgtab.is-on .mc-pk-l{font-weight:800;color:#fcd34d;
  background:linear-gradient(90deg,#fcd34d 0%,#fcd34d 40%,#fff8d6 50%,#fcd34d 60%,#fcd34d 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:mcGoldShine 3s linear infinite;animation-delay:var(--mc-shine-delay,0s)}
@keyframes mcGoldShine{from{background-position:100% 0}to{background-position:0% 0}}
.mc-search .mc-trip.is-on+.mc-trip,.mc-pkgtab.is-on+.mc-pkgtab{border-left-color:transparent}
@media(prefers-reduced-motion:reduce){.mc-search .mc-trip.is-on .mc-trip-l,.mc-pkgtab.is-on .mc-pk-l{animation:none;-webkit-text-fill-color:#fcd34d}}
.mc-search .mc-trip:focus-visible{outline:2px solid var(--c-navy);outline-offset:-4px}
/* body — boxed tiles */
.mc-search-body{padding:18px 22px 16px;background:#fff}
.mc-search .mc-bar{gap:12px;align-items:stretch}
.mc-search .mc-f{border:1px solid #d6deea;border-radius:12px;background:#fff;padding:9px 14px 7px;transition:border-color .15s,box-shadow .15s}
.mc-search .mc-f:hover{border-color:#a8b7cf}
.mc-search .mc-f:focus-within{border-color:var(--c-navy);box-shadow:0 0 0 3px rgba(10,31,68,.10)}
.mc-search .mc-f.is-missing{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(245,158,11,.22)}
/* the box that just opened by itself: two soft amber pulses so the eye follows */
.mc-search .mc-f.is-next{border-color:var(--c-accent);animation:mcNextPulse 1.1s ease-out 2}
@keyframes mcNextPulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.55)}100%{box-shadow:0 0 0 12px rgba(245,158,11,0)}}
@media(prefers-reduced-motion:reduce){.mc-search .mc-f.is-next{animation:none;box-shadow:0 0 0 3px rgba(245,158,11,.25)}}
.mc-search .mc-lbl{margin:0 0 2px;font-size:10.5px;letter-spacing:.08em;color:#6b7a90}
.mc-search .mc-in{height:30px;border:0;border-radius:0;padding:0;font-size:15px;font-weight:600;color:var(--c-navy);background:transparent}
.mc-search .mc-in:focus{border:0;box-shadow:none}
.mc-search .mc-in::placeholder{color:#9aa6b8;font-weight:500}
.mc-search select.mc-in{cursor:pointer}
.mc-search .mc-when{height:30px;border:0;padding:0;gap:8px}
.mc-search .mc-when:hover,.mc-search .mc-when:focus{border:0}
.mc-search .mc-when-b .dtp-tr-date{font-size:15px}
.mc-search .mc-when-b .dtp-tr-filled{color:var(--c-navy)}
.mc-search .mc-seg{margin:6px 0 2px}
/* the one action */
.mc-search .mc-bar-go{display:flex}
.mc-search .mc-bar-go .mc-cta{width:100%;height:auto;min-height:56px;border:0;border-radius:12px;background:var(--c-accent);color:var(--c-navy);
  font-size:15px;font-weight:800;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 6px 16px rgba(245,158,11,.32);transition:background .15s,transform .12s,box-shadow .15s}
.mc-search .mc-bar-go .mc-cta:hover:not(:disabled){background:#e88f07;filter:none;transform:translateY(-1px);box-shadow:0 8px 20px rgba(245,158,11,.38)}
.mc-search .mc-bar-go .mc-cta:active:not(:disabled){transform:none}
.mc-search .mc-bar-go .mc-cta:disabled{background:#fcd9a0;color:#6b4e12;border:0;box-shadow:none}   /* only while fares load */
.mc-search .mc-search-gate{margin-top:12px;background:#f4f7fc;border:1px solid #dde5f1;border-left:3px solid var(--c-accent);color:var(--c-navy);border-radius:10px;padding:9px 12px;font-size:13px}
.mc-search .mc-hint{margin-top:10px;font-size:12px;color:#6b7a90}
.mc-search .mc-err{margin-top:12px}
@media(max-width:859px){
  .mc-search-top{padding:16px 16px 14px}
  .mc-search-body{padding:14px 16px}
  .mc-search .mc-trips-ring{display:block;width:100%}
  .mc-search .mc-trips{width:100%}
  .mc-search .mc-trip{flex:1 1 auto;padding:10px 8px}
  .mc-search .mc-bar-go .mc-cta{min-height:52px}
}
@media(max-width:430px){.mc-search .mc-trip{padding:10px 4px;min-height:40px}.mc-search .mc-trip .mc-trip-l{font-size:11px;letter-spacing:.02em}.mc-search .mc-title{font-size:20px}}

/* ── THE ONE-WAY OFFER (owner, 13-Sep: "bring it back") ─────────────────────────
   In the gold of the ring rather than the old page's green (R5). */
.mc-trip-off{display:inline-block;margin-left:7px;padding:2px 6px;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.03em;line-height:1.2;
  text-transform:uppercase;white-space:nowrap;background:linear-gradient(135deg,#fde68a,#f59e0b);color:#0a1f44;-webkit-text-fill-color:#0a1f44}
@media(max-width:859px){.mc-search .mc-trip{flex-direction:column;gap:3px}.mc-trip-off{margin-left:0;font-size:9px;padding:1px 5px}}
@media(max-width:430px){.mc-off-w{display:none}}
.mc-ow-offer{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:6px 14px;border-radius:999px;
  background:rgba(245,158,11,.14);border:1px solid rgba(252,211,77,.45);color:#fde68a;font-size:12.5px;font-weight:600;line-height:1.35;text-align:left}
.mc-ow-offer b{color:#fcd34d;font-weight:800}
.mc-ow-offer svg{flex:none;color:#fcd34d}
.mc-ow-short{display:none}
@media(max-width:600px){.mc-ow-long{display:none}.mc-ow-short{display:inline}.mc-ow-offer{font-size:12px;padding:6px 12px}}
.mc-ow-note{color:#b45309;font-weight:700}
.mc-ow-chip{display:inline-flex;align-items:center;gap:5px;margin-bottom:5px;padding:3px 9px;border-radius:999px;
  background:linear-gradient(135deg,#fde68a,#f59e0b);color:#0a1f44;font-size:10.5px;font-weight:800;font-style:normal;letter-spacing:.02em;white-space:nowrap}
.mc-ow-chip svg{width:12px;height:12px}
.mc-ow-save{font-size:12px;font-weight:800;color:#b45309;margin:1px 0 2px}
.mc-total .mc-ow-saved{display:flex;align-items:center;gap:6px;width:100%;font-size:12.5px;font-weight:700;color:#b45309}
.mc-total .mc-ow-saved svg{flex:none}
.mc-total .mc-ow-saved span{font-size:inherit;font-weight:inherit;letter-spacing:0;text-transform:none;color:inherit}

/* ── payment trust strip (includes/booking-pay-trust.php) ──────────────────────
   Razorpay's verified badge + the UPI and card marks. Along the foot of page 1, and
   stacked under PROCEED on page 3. */
.mc-trust{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:12px 22px;background:#f6f8fc;border-top:1px solid #e3e9f2}
.mc-trust-rzp{display:inline-flex;align-items:center;flex:none;line-height:0;border-radius:6px}
.mc-trust-rzp img{height:40px;width:auto;display:block}
.mc-trust-pay{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;flex:1 1 320px}
.mc-trust-lbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7a90;margin-right:2px}
.mc-pm{display:inline-flex;align-items:center;justify-content:center;height:32px;min-width:44px;padding:4px 7px;background:#fff;border:1px solid #e0e6ef;border-radius:8px}
.mc-pm img{height:20px;width:auto;display:block}
.mc-pm svg{display:block}
.mc-pm-txt{font-size:11px;font-weight:600;color:#475569;white-space:nowrap}
/* Paytm's icon file is a wordmark centred in a square, and the BHIM artwork carries wide
   margins — at the chip's 20px they read as specks. Draw both larger and let the chip
   crop the empty space. */
.mc-pm-paytm,.mc-pm-bhim{overflow:hidden}
.mc-pm-paytm svg{width:46px;height:46px;margin:-7px -5px}
.mc-pm-bhim img{height:34px;margin:-7px -2px}
/* Two short lines on the right: the security promise, and — owner, 13-Sep — that
   international cards are accepted ("reframe it as per the space available": as a chip
   it pushed the logos onto three rows; as a second line it reads in full). */
.mc-trust-note{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:none;font-size:11.5px;font-weight:600;color:var(--c-navy)}
.mc-trust-line{display:flex;align-items:center;gap:6px;white-space:nowrap}
.mc-trust-line svg{flex:none}
@media(max-width:859px){
  .mc-trust{padding:12px 16px;justify-content:center}
  .mc-trust-pay{flex-basis:100%;gap:6px}
  .mc-trust-note{width:100%;align-items:center}
}
@media(max-width:430px){
  /* phones: two tidy rows of marks instead of three ragged ones */
  .mc-trust-lbl{display:none}
  .mc-pm{height:30px;min-width:40px;padding:3px 6px}
  .mc-pm-txt{font-size:10.5px}
}
/* page 3: inside the payment panel */
.mc-paytrust{margin-top:12px}
.mc-paytrust .mc-pay-note{margin:0 0 8px}
.mc-side .mc-trust{flex-direction:column;align-items:center;gap:9px;padding:12px 0 2px;background:transparent;border-top:1px solid #edf1f7}
.mc-side .mc-trust-pay{flex-basis:auto}
.mc-side .mc-trust-note{align-items:center}
.mc-side .mc-pm{height:30px;min-width:42px;padding:3px 7px}

/* ── page 1 embedded in another page (includes/booking-search-widget.php) ───
   The same search card, inside a host page (today the homepage hero). The host paints
   the background, so the stage is transparent; the host's centring, white text and
   heading styles are neutralised so the card reads exactly as it does on /booking.
   Its title is an h2 on purpose — the host page owns the h1. */
.mb-stage.mbw{background:transparent;padding:0;max-width:1080px;margin:22px auto 28px;text-align:left;color:var(--c-ink)}
.mbw .mc-search{box-shadow:0 18px 50px rgba(2,6,23,.30);border-color:rgba(255,255,255,.22)}
.mbw .mc-title{text-align:center;line-height:1.2}

/* ── summary bar (pages 2 + 3) ────────────────────────────────────────────── */
.mc-sum{display:flex;align-items:center;gap:0 26px;flex-wrap:wrap;background:var(--c-card);border:1px solid #d7deea;border-left:4px solid var(--c-accent);border-radius:var(--c-radius);box-shadow:0 2px 10px rgba(15,23,42,.05);padding:12px 18px;margin-bottom:12px}
.mc-sum-c{padding:4px 0;min-width:0}
.mc-sum-c span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-mute)}
.mc-sum-c b{display:block;font-size:14px;color:var(--c-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.mc-sum-act{margin-left:auto;display:flex;gap:16px;align-items:center;padding:4px 0}
@media(max-width:640px){.mc-sum{gap:0 18px;padding:10px 14px}.mc-sum-c b{font-size:13px;max-width:180px}.mc-sum-act{margin-left:0;width:100%;justify-content:flex-end;border-top:1px solid #edf1f7;margin-top:6px;padding-top:8px}}

/* ── PAGE 2 · select car ──────────────────────────────────────────────────── */
/* package tabs (owner, 13-Sep: "put the same gold ring on the package tabs too") — the
   trip switch's centred segmented bar, gold ring and chosen-tab style, on the light page */
.mc-pkgtabs{display:flex;justify-content:center;margin:4px 0 14px}
.mc-pkgbar{display:flex;background:#fff;border-radius:8px;overflow:hidden}
.mc-pkgtab{flex:none;display:flex;align-items:center;justify-content:center;min-height:42px;border:0;border-left:1px solid #d6deea;border-radius:0;
  padding:10px 24px;background:#fff;color:var(--c-navy);transition:background .15s,color .15s}
.mc-pkgtab:first-child{border-left:0}
.mc-pkgtab:hover{background:#f2f5fa}
.mc-pkgtab:focus-visible{outline:2px solid var(--c-navy);outline-offset:-4px}
.mc-pk-l{display:flex;align-items:baseline;gap:5px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.mc-pk-l i{font-style:normal;opacity:.45}
@media(max-width:640px){
  .mc-pkgtabs .mc-trips-ring{display:block;width:100%}
  .mc-pkgbar{width:100%}
  .mc-pkgtab{flex:1 1 0;padding:8px 4px;min-height:50px}
  .mc-pk-l{flex-direction:column;align-items:center;gap:1px;font-size:11.5px;line-height:1.25}
  .mc-pk-l i{display:none}
}
.mc-res-note{font-size:12.5px;color:var(--c-mute);margin:0 4px 10px;display:flex;align-items:center;gap:6px;min-height:18px}
/* L369: cheaper Local package offer on a short one-way search */
.mc-lhint{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:12px 14px;border:1px solid #f59e0b;border-radius:12px;background:#fff8eb;color:#0a1f44;font-size:14px;line-height:1.45}
.mc-lhint b{font-weight:800}
.mc-lhint-btn{flex:none;background:#0a1f44;color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:700;font-size:14px;cursor:pointer;min-height:44px}
.mc-lhint-btn:hover{background:#12306a}
@media(max-width:600px){.mc-lhint{font-size:13.5px}.mc-lhint-btn{width:100%}}
.mc-cards{display:flex;flex-direction:column;gap:12px}
.mc-card{background:var(--c-card);border:1px solid #d7deea;border-radius:var(--c-radius);box-shadow:0 2px 10px rgba(15,23,42,.05);overflow:hidden;transition:box-shadow .15s,border-color .15s}
.mc-card:hover{border-color:#b8c4d8;box-shadow:0 6px 18px rgba(15,23,42,.08)}
.mc-card-main{display:grid;grid-template-columns:200px 1fr auto;gap:20px;align-items:center;padding:16px 20px}
.mc-card-img{width:200px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#fff;border:1px solid #e6ebf3}
.mc-card-img img{width:100%;height:100%;object-fit:contain;display:block}
.mc-card-bd{min-width:0}
.mc-card-n{margin:0;font-family:var(--c-head);font-size:17px;font-weight:700;color:var(--c-navy);line-height:1.2}
.mc-card-sub{font-size:12.5px;color:var(--c-mute);margin-top:3px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mc-card-facts{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.mc-card-facts li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--c-ink)}
.mc-card-facts li svg{color:var(--c-navy);flex:none}
.mc-card-facts li b{font-weight:700;color:var(--c-navy)}
.mc-card-more{margin-top:10px;background:none;border:0;padding:0;font-size:12.5px;font-weight:700;color:var(--c-navy);display:inline-flex;align-items:center;gap:4px;text-decoration:underline;text-underline-offset:3px}
.mc-card-more svg{transition:transform .2s}
.mc-card.is-open .mc-card-more svg{transform:rotate(180deg)}
.mc-card-r{text-align:right;min-width:150px}
.mc-card-price span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-mute)}
.mc-card-price b{display:block;font-size:24px;font-weight:900;color:var(--c-navy);letter-spacing:-.01em;line-height:1.15;margin:2px 0}
.mc-card-price small{display:block;font-size:11px;color:var(--c-mute);line-height:1.35}
.mc-card-price.is-stale b{opacity:.5}
/* Select: navy → AMBER on hover (owner, 13-Sep) */
.mc-card-sel{margin-top:10px;height:42px;padding:0 22px;border:0;border-radius:8px;background:var(--c-navy);color:#fff;font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s,transform .12s}
.mc-card-sel:hover:not(:disabled){background:var(--c-accent);color:var(--c-navy);box-shadow:0 4px 12px rgba(245,158,11,.35);transform:translateY(-1px)}
.mc-card-sel:active:not(:disabled){transform:translateY(0)}
.mc-card-sel:disabled{background:#e8edf5;color:#64748b}
.mc-card-x{border-top:1px solid #e6ebf3;background:#f8fafd;padding:16px 20px 18px;animation:mcOpen .18s ease-out}
@keyframes mcOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .mc-card-main{grid-template-columns:1fr auto;grid-template-areas:"img price" "bd bd" "sel sel";gap:10px 14px;padding:14px 14px}
  .mc-card-img{grid-area:img;width:min(38vw,150px)}
  .mc-card-bd{grid-area:bd}
  .mc-card-r{grid-area:price;display:contents}
  .mc-card-price{grid-area:price;align-self:start}
  .mc-card-sel{grid-area:sel;margin-top:2px;width:100%;height:44px}
}
.mc-na-note{margin:12px 4px 0;font-size:12px;color:var(--c-mute);line-height:1.5}

/* inclusions / exclusions — two clear lists */
.mc-ie{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
@media(max-width:640px){.mc-ie{grid-template-columns:1fr}}
.mc-ie h4{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-mute)}
.mc-ie ul{list-style:none;margin:0;padding:0}
.mc-ie li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;padding:4px 0;color:var(--c-ink)}
.mc-ie li svg{flex:none;margin-top:3px;border-radius:50%;padding:2px;width:16px;height:16px}
.mc-ie li.is-in svg{color:#15803d;background:#dcfce7}
.mc-ie li.is-ex svg{color:#b91c1c;background:#fee2e2}

/* ── PAGE 3 · booking ─────────────────────────────────────────────────────── */
.mc-book{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media(min-width:900px){.mc-book{grid-template-columns:minmax(0,1fr) 360px;gap:18px}.mc-side{position:sticky;top:92px}}
.mc-book-l{display:flex;flex-direction:column;gap:14px;min-width:0}
.mc-panel{background:var(--c-card);border:1px solid #d7deea;border-radius:var(--c-radius);box-shadow:0 2px 10px rgba(15,23,42,.05);padding:18px 20px}
/* text-align is set explicitly: the site's global stylesheet centres every h2 */
.mc-panel h2{margin:0 0 12px;font-family:var(--c-head);font-size:16px;font-weight:700;color:var(--c-navy);padding-bottom:10px;border-bottom:1px solid #edf1f7;text-align:left}
/* review */
.mc-rv-car{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.mc-rv-car img{width:120px;aspect-ratio:16/9;object-fit:contain;border-radius:8px;border:1px solid #e6ebf3;background:#fff}
.mc-rv-car b{display:block;font-size:15px;color:var(--c-navy)}
.mc-rv-car span{display:block;font-size:12.5px;color:var(--c-mute)}
.mc-rv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 18px}
.mc-rv-r{border-top:1px solid #edf1f7;padding-top:8px;min-width:0}
.mc-rv-r span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-mute)}
.mc-rv-r b{display:block;font-size:13.5px;color:var(--c-ink);margin-top:2px}
/* contact */
/* Owner, 13-Sep: "please give border and better table". Boxed tiles in two clean columns:
   name | mobile, email | international number, then pickup | drop, then the note. */
.mc-cust{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.mc-cust{grid-template-columns:1fr 1fr}.mc-cust .mc-full{grid-column:1/-1}.mc-cust-2{grid-template-columns:1fr 1fr}}
.mc-mob{display:flex;align-items:center;gap:10px}
.mc-cc{flex:none;height:32px;display:flex;align-items:center;padding:0 10px 0 0;border-right:1px solid #d6deea;font-size:15px;font-weight:700;color:var(--c-navy)}
.mc-ferr{font-size:12px;color:var(--c-bad);margin-top:4px}.mc-f.has-err .mc-in{border-bottom-color:#ef4444}
.mc-intl{display:flex;gap:8px;align-items:center;align-self:center;font-size:12.5px;color:var(--c-mute);padding:0 4px}
.mc-intl input{width:16px;height:16px;margin:0;accent-color:var(--c-navy)}
/* L339 (owner, 24-Sep-2026: "Can we have the dropdown be something much better?"): the mobile number's country.
   A grey segment with a real flag + code beside the number; the list floats under the box as a card (search,
   POPULAR, ALL COUNTRIES); on a phone it slides up from the bottom as a sheet. Brand navy + amber only. */
.mc-f-mob{position:relative}
.mc-f-mob.is-cpick{z-index:60}
.mc-ccbtn{flex:none;height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;margin-left:-4px;border:1px solid #d6deea;border-radius:8px;background:#f1f5f9;font-size:15px;font-weight:700;color:var(--c-navy);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.mc-ccbtn:hover{background:#e6ebf4;border-color:#a8b7cf}
.mc-ccbtn:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.mc-ccbtn[aria-expanded="true"]{border-color:var(--c-navy);background:#e6ebf4}
.mc-ccbtn[aria-expanded="true"] .mc-cchev{transform:rotate(180deg)}
.mc-cchev{color:#64748b;transition:transform .15s}
.mc-cflag{width:22px;height:16px;flex:none;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(15,23,42,.12);background:#e2e8f0}
.mc-ccnum{font-variant-numeric:tabular-nums}
.mc-intl-link{display:block;margin-top:4px;font-size:12.5px}
.mc-cback{display:none}
.mc-cpick{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);min-width:300px;background:#fff;border:1px solid #d6deea;border-radius:12px;box-shadow:0 16px 40px rgba(10,31,68,.18);overflow:hidden;animation:mcCpickIn .14s ease-out}
@keyframes mcCpickIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mc-cpick-hd{display:none}
.mc-csearch{display:flex;align-items:center;gap:8px;margin:10px 10px 6px;padding:0 12px;height:42px;border:1.5px solid #d6deea;border-radius:10px;background:#f8fafc;color:#64748b}
.mc-csearch:focus-within{border-color:var(--c-navy);background:#fff}
.mc-csearch input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:15px;color:var(--c-ink);font-family:inherit}
.mc-clist{max-height:300px;overflow-y:auto;padding:0 6px 8px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mc-cgroup{position:sticky;top:0;z-index:1;background:#fff;padding:10px 10px 4px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8}
.mc-cgroup[hidden]{display:none}
.mc-copt{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:8px;background:none;text-align:left;font-size:14.5px;color:var(--c-ink);cursor:pointer;font-family:inherit}
.mc-copt[hidden]{display:none}
.mc-copt:hover,.mc-copt:focus-visible{background:#f1f5f9;outline:none}
.mc-copt.is-on{background:#fef3c7;color:var(--c-navy);font-weight:700}
.mc-cname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-ctick{flex:none;color:var(--c-accent)}
.mc-cdial{flex:none;min-width:44px;text-align:right;color:#64748b;font-variant-numeric:tabular-nums}
.mc-cnone{padding:18px 12px;text-align:center;font-size:13.5px;color:#64748b}
.mc-cnone[hidden]{display:none}
@media(max-width:640px){
  .mc-f-mob.is-cpick{z-index:auto}   /* no layer of its own, or the sheet is trapped under the header */
  .mc-cback{display:block;position:fixed;inset:0;background:rgba(10,31,68,.5);z-index:2147483600}
  .mc-cpick{position:fixed;left:0;right:0;top:auto;bottom:0;min-width:0;max-height:82vh;display:flex;flex-direction:column;border:0;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(10,31,68,.3);z-index:2147483601;animation:mcCpickUp .2s ease-out}
  @keyframes mcCpickUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
  .mc-cpick-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 4px}
  .mc-cpick-hd b{font-size:17px;color:var(--c-navy)}
  .mc-cpick-x{width:36px;height:36px;border:0;border-radius:50%;background:#f1f5f9;font-size:22px;line-height:1;color:var(--c-navy);cursor:pointer}
  .mc-clist{max-height:none;flex:1;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}
.mc-loc{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px;padding-top:16px;border-top:1px dashed #dbe3ee}
@media(min-width:760px){.mc-loc{grid-template-columns:1fr 1fr}.mc-loc .mc-full{grid-column:1/-1}}
.mc-cust .mc-f,.mc-loc .mc-f{border:1px solid #d6deea;border-radius:10px;background:#fff;padding:8px 12px 6px;transition:border-color .15s,box-shadow .15s}
.mc-cust .mc-f:hover,.mc-loc .mc-f:hover{border-color:#a8b7cf}
.mc-cust .mc-f:focus-within,.mc-loc .mc-f:focus-within{border-color:var(--c-navy);box-shadow:0 0 0 3px rgba(10,31,68,.10)}
.mc-cust .mc-f.has-err{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.mc-cust .mc-lbl,.mc-loc .mc-lbl{margin-bottom:2px}
.mc-cust .mc-in,.mc-loc .mc-in{height:32px;border:0;border-radius:0;padding:0;font-size:15px;font-weight:600;color:var(--c-navy);background:transparent}
.mc-cust .mc-in:focus,.mc-loc .mc-in:focus{border:0;box-shadow:none}
.mc-cust .mc-in::placeholder,.mc-loc .mc-in::placeholder{color:#9aa6b8;font-weight:500}
.mc-loc textarea.mc-in{height:auto;min-height:44px;padding:2px 0;resize:vertical}
.mc-cust .mc-ferr{margin-top:2px}
/* Required / Optional — every field says which (owner, 13-Sep) */
.mc-req,.mc-opt{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;font-size:9.5px;font-weight:800;font-style:normal;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.45;vertical-align:1px;text-decoration:none}
.mc-req{background:#fef3c7;color:#92400e}
.mc-opt{background:#eef2f7;color:#64748b}
.mc-measuring{display:flex;align-items:center;gap:6px;color:var(--c-navy);font-weight:600}
.mc-gst{margin-top:14px;padding-top:12px;border-top:1px solid #edf1f7}
/* OTP */
.mc-otp{grid-column:1/-1;border:1.5px solid var(--c-line);border-radius:var(--c-radius-sm);padding:12px 14px;background:var(--c-bg)}
.mc-otp.is-ok{border-color:#86efac;background:#f0fdf4}
.mc-otp-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--c-navy)}
.mc-otp-row{display:flex;gap:8px;align-items:flex-end;margin-top:8px;flex-wrap:wrap}
.mc-otp-row .mc-f{flex:1;min-width:150px}
.mc-otp-row .mc-cta{width:auto;padding:0 18px;height:40px}
.mc-otp-note{font-size:12px;color:var(--c-mute);margin-top:6px}
/* Owner, 24-Sep-2026: the code goes on WhatsApp first - WhatsApp's green is allowed on the WhatsApp button only (R5).
   #15803d keeps white text readable (5:1); the mark itself sits in a small white badge in WhatsApp's own #25D366. */
.mc-otp-send{margin-top:10px}
.mc-wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;padding:0 18px;border:0;border-radius:12px;background:linear-gradient(180deg,#17914a,#15803d);color:#fff;font:inherit;font-size:16px;font-weight:800;letter-spacing:.1px;cursor:pointer;box-shadow:0 6px 16px rgba(21,128,61,.28);transition:transform .08s ease,box-shadow .15s ease,background .15s ease}
.mc-wa-btn svg{width:30px;height:30px;padding:5px;border-radius:50%;background:#fff;color:#25D366;flex:0 0 auto;box-sizing:border-box}
.mc-wa-btn:hover{background:linear-gradient(180deg,#15803d,#166534);box-shadow:0 8px 20px rgba(21,128,61,.34)}
.mc-wa-btn:active{transform:translateY(1px)}
.mc-wa-btn:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.mc-wa-btn:disabled{background:#cbd5e1;box-shadow:none;cursor:not-allowed;color:#fff}
.mc-wa-btn:disabled svg{color:#94a3b8}
.mc-wa-ic{display:inline-flex;vertical-align:-4px;color:#25D366}
.mc-wa-ic svg{width:16px;height:16px}
/* add-ons */
.mc-addons{display:flex;flex-direction:column;gap:8px}
@media(min-width:760px){.mc-addons{display:grid;grid-template-columns:1fr 1fr;gap:8px}}
.mc-addon{display:flex;align-items:center;gap:10px;border:1px solid #dbe3ee;background:#fff;border-radius:9px;padding:8px 12px;cursor:pointer;min-height:48px;transition:.15s}
.mc-addon:hover{border-color:#b8c4d8}
.mc-addon.is-on{border-color:var(--c-navy);background:var(--c-navy3)}
.mc-addon input{width:18px;height:18px;accent-color:var(--c-navy);margin:0;flex:none}
.mc-addon-t{flex:1;min-width:0}.mc-addon-l{display:block;font-size:13.5px;font-weight:700}.mc-addon-n{display:block;font-size:11.5px;color:var(--c-mute)}
.mc-addon-p{font-size:13.5px;font-weight:800;color:var(--c-navy);white-space:nowrap}.mc-addon-p small{font-weight:500;color:var(--c-mute);font-size:11px}

/* right column — payment */
.mc-side{display:flex;flex-direction:column;gap:12px;min-width:0}
/* free cancellation with a live clock (owner, 13-Sep) — navy while free, amber at 50%, grey after */
.mc-free{background:#fff;border:1px solid #c9d4ea;border-left:4px solid var(--c-navy);color:var(--c-navy);border-radius:var(--c-radius-sm);padding:10px 12px;font-size:13px;box-shadow:0 2px 10px rgba(15,23,42,.05)}
.mc-free.is-half{border-left-color:var(--c-accent)}
.mc-free.is-none{border-left-color:#94a3b8}
.mc-free-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mc-free-h svg{flex:none}
.mc-free-h>span:first-of-type{flex:1 1 140px;min-width:0;line-height:1.35}
.mc-free b{font-weight:800}
.mc-free-cd{margin-left:auto;padding:3px 8px;border-radius:6px;background:var(--c-navy);color:#fcd34d;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-free.is-half .mc-free-cd{background:#fef3c7;color:#92400e}
.mc-free-g{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr);gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed #dbe3ee}
.mc-free-g span{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-mute)}
.mc-free-g b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-free-n{margin-top:6px;font-size:11px;color:var(--c-mute)}
.mc-panel-pay{box-shadow:0 6px 20px rgba(15,23,42,.08)}
.mc-panel-pay h2{margin-top:14px}
.mc-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.mc-total span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-mute)}
.mc-total b{font-size:30px;font-weight:900;color:var(--c-navy);letter-spacing:-.02em;line-height:1.1}
.mc-total small{width:100%;font-size:12px;color:var(--c-mute)}
.mc-payopts{display:flex;flex-direction:column;gap:8px}
.mc-payopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid #dbe3ee;background:#fff;border-radius:10px;padding:10px 12px;transition:.15s;color:var(--c-ink)}
.mc-payopt:hover{border-color:#b8c4d8}
.mc-payopt i{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #cbd5e1;background:#fff;position:relative}
.mc-payopt.is-on{border-color:var(--c-navy);background:var(--c-navy3)}
.mc-payopt.is-on i{border-color:var(--c-navy)}
.mc-payopt.is-on i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--c-navy)}
.mc-payopt div{flex:1;min-width:0}
.mc-payopt b{display:block;font-size:13.5px;font-weight:800;color:var(--c-navy)}
.mc-payopt small{display:block;font-size:11.5px;color:var(--c-mute);line-height:1.35;margin-top:1px}
.mc-payopt span{flex:none;font-size:15px;font-weight:900;color:var(--c-navy);font-variant-numeric:tabular-nums}
.mc-coupon-lbl{margin-top:16px}
.mc-coupon-row{display:flex;gap:8px;align-items:flex-end}
.mc-coupon-row .mc-f{flex:1;border:1px solid #d6deea;border-radius:10px;background:#fff;padding:4px 12px}
.mc-coupon-row .mc-f:focus-within{border-color:var(--c-navy);box-shadow:0 0 0 3px rgba(10,31,68,.10)}
.mc-coupon-row .mc-in{height:32px;border:0;padding:0}
.mc-coupon-row .mc-ghost{height:42px;padding:0 14px;display:inline-flex;align-items:center;border-radius:10px}
.mc-paybtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;margin-top:14px;border:0;border-radius:0;background:var(--c-accent);color:var(--c-navy);font-weight:900;font-size:15px;letter-spacing:.02em;box-shadow:0 8px 20px rgba(245,158,11,.3);transition:.15s}
.mc-paybtn:hover:not(:disabled){background:var(--c-accent2)}
.mc-paybtn.is-busy{opacity:.75}
.mc-pay-note{margin-top:8px;font-size:11.5px;color:var(--c-mute);text-align:center}
.mc-pay-note svg{vertical-align:-2px}

/* requote */
.mc-rq{margin:12px 0 0;border-radius:var(--c-radius-sm);padding:14px 16px;border:2px solid var(--c-accent);background:#fffbeb}
.mc-rq.is-same,.mc-rq.is-ok{border-color:#86efac;background:#f0fdf4;color:#166534;display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13.5px;padding:9px 12px;border-width:1px}
.mc-rq-h{font-size:11px;font-weight:900;letter-spacing:.16em;color:#b45309}
.mc-rq-n{font-size:24px;font-weight:900;margin:4px 0;color:var(--c-navy)}
.mc-rq-n s{color:#94a3b8;font-size:16px;font-weight:600}.mc-rq-arrow{color:#b45309}.mc-rq-n small{font-size:12.5px;color:var(--c-mute);font-weight:600}
.mc-rq-r{margin:0;font-size:13.5px}.mc-rq-s{margin:6px 0 0;font-size:12.5px;color:var(--c-mute)}
.mc-rq-b{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}.mc-rq-b .mc-cta{width:auto;padding:0 18px}

/* fare break-up — a drop-down directly above the amount (owner, 13-Sep) */
.mc-fb{margin:0 0 10px;border:1.5px solid #b9c6da;border-radius:10px;background:#fff;box-shadow:0 1px 4px rgba(10,31,68,.07);transition:border-color .15s,box-shadow .15s}
.mc-fb:hover{border-color:#8fa1bd}
.mc-fb.is-open{border-color:var(--c-navy);box-shadow:0 0 0 3px rgba(10,31,68,.08)}
.mc-fb-h:focus-visible{outline:2px solid var(--c-navy);outline-offset:2px}
.mc-fb-h{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:transparent;text-align:left;cursor:pointer;color:var(--c-navy);font:inherit}
.mc-fb-h>span{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.mc-fb-h em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--c-mute);white-space:nowrap}
.mc-fb-h em.mc-fb-save{color:#b45309;font-weight:700}
.mc-fb-h svg{flex:none;margin-left:auto;transition:transform .2s}
.mc-fb-h em~svg{margin-left:4px}
.mc-fb.is-open .mc-fb-h svg{transform:rotate(180deg)}
.mc-fb-b{padding:4px 10px 8px;border-top:1px dashed #dbe3ee;animation:mcOpen .18s ease-out}
.mc-fb-ctx{font-size:11px;color:var(--c-mute);padding:2px 0}
.mc-fb-r{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:3px 0;font-size:12.5px;line-height:1.35;color:var(--c-ink)}
.mc-fb-r b{font-weight:700;color:var(--c-navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.mc-fb-r.is-save,.mc-fb-r.is-save b{color:#b45309;font-weight:700}
.mc-fb-x{margin-top:3px;font-size:11px;line-height:1.4;color:var(--c-mute)}

/* ── PAGE 3, SHORTER (owner, 13-Sep: "The whole last page is very huge … Can we shorten
   it?") — slim car row, inclusions and coupon behind a tap, tighter panels and options ── */
.mc-book .mc-book-l{gap:12px}
.mc-book .mc-panel{padding:14px 16px}
.mc-book .mc-panel h2{margin-bottom:10px;padding-bottom:8px;font-size:15px}
.mc-book .mc-rv-slim{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:10px 16px}
.mc-rv-slim .mc-rv-car{margin:0}
.mc-rv-slim .mc-rv-car img{width:96px}
.mc-rv-facts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.mc-rv-facts span{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--c-navy);background:var(--c-navy3);border-radius:6px;padding:4px 9px}
.mc-rv-facts .mc-rv-off{background:#fef3c7;color:#92400e}
.mc-book .mc-fold{padding:0}
.mc-fold-h{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:13px 16px;border:0;background:transparent;border-radius:var(--c-radius);font-family:var(--c-head);font-size:15px;font-weight:700;color:var(--c-navy);text-align:left;cursor:pointer}
.mc-fold-h svg{flex:none;transition:transform .2s}
.mc-fold.is-open .mc-fold-h svg{transform:rotate(180deg)}
.mc-fold-b{padding:12px 16px 14px;border-top:1px solid #edf1f7;animation:mcOpen .18s ease-out}
.mc-book .mc-side{gap:10px}
.mc-book .mc-total b{font-size:26px}
.mc-book .mc-panel-pay h2{margin-top:12px}
.mc-book .mc-payopts{gap:6px}
.mc-book .mc-payopt{padding:8px 11px;gap:10px}
.mc-coupon-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px}
.mc-book .mc-coupon-lbl{margin-top:12px}
.mc-book .mc-paybtn{margin-top:12px}
.mc-side .mc-paytrust{margin-top:10px}
.mc-side .mc-trust{gap:7px;padding:10px 0 0}
.mc-side .mc-trust-rzp img{height:32px}
.mc-side .mc-pm{height:26px;min-width:38px;padding:2px 6px}
/* ── the fare table ────────────────────────────────────────────────────────
   One right-aligned amount column, tabular figures, every value on the same edge. */
.mc-tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid #dbe3ee;border-radius:10px;overflow:hidden;
  box-shadow:0 1px 3px rgba(15,23,42,.04)}
.mc-tbl th,.mc-tbl td{text-align:left;padding:10px 14px;font-size:13px;line-height:1.35}
.mc-tbl th:last-child,.mc-tbl td:last-child{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.mc-tbl thead th{background:var(--c-navy);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:9px 14px}
.mc-tbl thead th:last-child{color:#c7d2e6;letter-spacing:.04em;text-transform:none;font-size:11.5px;font-weight:600}
.mc-tbl tbody td{border-top:1px solid #edf1f7;color:var(--c-ink)}
.mc-tbl tbody tr:first-child td{border-top:0}
.mc-tbl tbody td:last-child{font-weight:700;color:var(--c-navy)}
.mc-tbl tbody tr.is-save td,.mc-tbl tbody tr.is-save td:last-child{color:var(--c-ok)}
.mc-tbl tfoot th{background:#f4f7fc;border-top:2px solid var(--c-navy);font-size:14px;
  font-weight:800;color:var(--c-navy);padding:12px 14px}
.mc-tbl tfoot th:last-child{font-size:18px;font-weight:900;letter-spacing:-.01em}
.mc-tbl-note{margin:9px 2px 0;font-size:11.5px;line-height:1.55;color:var(--c-mute)}

/* ── confirmation ─────────────────────────────────────────────────────────── */
.mc-done{background:var(--c-card);border:2px solid #86efac;border-radius:var(--c-radius);padding:18px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.mc-done-i{width:44px;height:44px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center}
.mc-done-i svg{width:22px;height:22px}
.mc-done-h{display:block;font-family:var(--c-head);font-size:18px;color:var(--c-navy);margin-bottom:4px}
.mc-done p{margin:0 0 10px;font-size:13.5px;color:var(--c-mute)}
.mc-done-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 14px}
.mc-done-grid div{border-top:1px solid var(--c-line);padding-top:6px}
.mc-done-grid span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--c-mute);font-weight:700}
.mc-done-grid b{font-size:13.5px}
.mc-done-b{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap;align-items:center}
@media(max-width:560px){.mc-done{grid-template-columns:1fr}}

/* ── sticky dock (phones, page 3) ─────────────────────────────────────────── */
.mc-mini{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mc-mini-t b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.mc-mini-t span{display:block;font-size:11px;color:var(--c-mute);white-space:nowrap}
.mc-mini-f b{display:block;font-size:20px;font-weight:900;color:var(--c-navy);line-height:1.1}
.mc-dock{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--c-card);border-top:1px solid var(--c-line);padding:10px 14px;box-shadow:0 -8px 24px rgba(15,23,42,.08);display:flex;align-items:center;gap:12px}
.mc-dock .mc-mini{flex:1}
.mc-dock .mc-cta{width:auto;padding:0 16px;height:42px}
/* The site's own phone bar (#miles-sticky-bar, 58px, z-index 9998) sits at the very
   bottom; the dock rides just above it rather than underneath it. */
body:has(#miles-sticky-bar.visible) .mc-dock{bottom:58px}
@media(min-width:900px){.mc-dock{display:none}}

/* ── blocking overlay while money is in flight ────────────────────────────── */
.mc-busy{position:fixed;inset:0;z-index:2100;background:rgba(2,6,23,.55);display:grid;place-items:center;padding:20px}
.mc-busy-box{background:#fff;border-radius:14px;padding:22px 26px;max-width:360px;text-align:center;box-shadow:0 30px 80px rgba(2,6,23,.4)}
.mc-busy-box b{display:block;font-family:var(--c-head);font-size:16px;color:var(--c-navy);margin-bottom:6px}
.mc-busy-box p{margin:0;font-size:13px;color:var(--c-mute)}
.mc-spin{width:30px;height:30px;margin:0 auto 12px;border:3px solid var(--c-line);border-top-color:var(--c-accent);border-radius:50%;animation:mcSpin .8s linear infinite}
@keyframes mcSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mc-spin{animation:none}}

/* ── Google Places suggestion list ────────────────────────────────────────────
   Google appends .pac-container to <body>, outside this page's stacking context, so
   it needs a z-index above the site's sticky navbar (1030) or the suggestions appear
   BEHIND the header. Styled to match the rest of the form. */
.pac-container{z-index:2200!important;border-radius:10px;border:1px solid var(--c-line);box-shadow:0 12px 30px rgba(15,23,42,.14);font-family:var(--c-font);margin-top:2px}
.pac-item{padding:8px 12px;font-size:13.5px;color:var(--c-ink);cursor:pointer;border-top:1px solid #f1f5f9}
.pac-item:first-child{border-top:0}
.pac-item:hover,.pac-item-selected{background:var(--c-navy3)}
.pac-item-query{font-size:13.5px;color:var(--c-navy);font-weight:700}
.pac-icon{margin-top:3px}
.hdpi .pac-container{background-image:none}
/* 27-Sep-2026: js/main.js forces .pac-container{min-width:320px!important} site-wide. On a phone the airport /
   pickup box starts ~76px in, so the list ran ~20px past the screen edge and the addresses were cut off. On
   phones the list simply takes the box's own width (Google's default); computers keep the 320px minimum.
   `html body` outranks main.js's injected rule, which is added to <head> after this file. */
@media (max-width:600px){html body .pac-container{min-width:0!important;max-width:calc(100vw - 16px)!important}}

/* More than one destination (owner, 17-Sep-2026, L200) — kept TIDY (L201, owner: "the sizes of the
   boxes have increased … very big and very untidy"). The add link sits on the Destination label line,
   so the first row keeps its original height; each extra destination is its own same-size box in a
   row of its own underneath (desktop: three across; phone: one under the other). */
.mc-lbl-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.mc-lbl-row .mc-lbl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-search .mc-lbl-row{margin:0 0 2px}
.mc-search .mc-lbl-row .mc-lbl{margin:0}
.mc-adddest{flex:0 0 auto;padding:8px 0;margin:-8px 0;border:0;background:none;color:#b45309;font-weight:700;font-size:11.5px;line-height:1.2;cursor:pointer;white-space:nowrap}   /* a finger-sized tap area, no extra height */
.mc-adddest:hover{text-decoration:underline}
.mc-adddest[hidden]{display:none}
.mc-f-more{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.mc-f-more[hidden],.mc-f-more:empty{display:none}
@media(min-width:860px){.mc-bar .mc-f-more{grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr))}.mc-bar .mc-route{grid-row:4}}   /* L449 */
.mc-dest-line{display:flex;gap:6px;align-items:center}
.mc-dest-line .mc-in{flex:1;min-width:0}
.mc-dest-rm{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:#eef2f8;color:#0a1f44;font-size:17px;line-height:1;cursor:pointer}
.mc-dest-rm:hover{background:#fde7c2;color:#b45309}
/* L276: the + that adds the next destination - same size and shape as the - beside it */
.mc-dest-add{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:#fde7c2;color:#b45309;font-size:17px;line-height:1;cursor:pointer}
.mc-dest-add:hover{background:#f59e0b;color:#0a1f44}
.mc-dest-add[hidden]{display:none}
/* L279: the number of each destination, so the customer sees the order at a glance */
.mc-dest-no{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#0a1f44;color:#fff;font:800 11px/20px 'Poppins',system-ui,sans-serif;text-align:center}
.mc-dest-no[hidden]{display:none}
.mc-f-dest .mc-dest-line{display:flex;gap:8px;align-items:center}
/* Every box in the search row keeps ONE height (L201): the date picker's own style gives its button
   min-height:44px once it has opened, which grew the whole row from 65 to 79 px. And a focused box is
   shown by its navy border, not by a second dark frame drawn around the text inside it. */
.mc-search .mc-when{min-height:0}
.mc-search .mc-in:focus-visible{outline:0}
/* Page 3 destinations on the way (L204) */
.mc-loc .mc-in:focus-visible{outline:0}
.mc-add3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.mc-add3 .mc-link{font-weight:700;color:#b45309}
.mc-add3 small{color:#6b7a90;font-size:12px}
/* L370: stops on the way - one clear "x Remove" text button and a route line in travel order */
.mc-stop-rm{flex:0 0 auto;padding:6px 0;margin:-6px 0;border:0;background:none;color:#6b7a90;font-weight:700;font-size:11.5px;line-height:1.2;cursor:pointer;white-space:nowrap}
.mc-stop-rm:hover{color:#b45309;text-decoration:underline}
.mc-f-stop .mc-lbl-row{margin:0 0 2px}
.mc-route{grid-column:1/-1;font-size:13px;font-weight:600;color:#0a1f44;padding:2px 4px}
.mc-route[hidden]{display:none}
/* 🔒 L450: a new order for the places - the grip (six dots) to drag, as on Google Maps, and ↑ ↓ to tap (W3C 2.5.7).
   Negative margins keep every box at the row's one height (L201); the grip alone stops the page scrolling. */
.mc-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mc-mv{flex:0 0 auto;width:26px;height:26px;margin:-7px 0;padding:0;border:0;border-radius:50%;background:#eef2f8;color:#0a1f44;font:800 14px/26px system-ui,-apple-system,'Segoe UI',sans-serif;text-align:center;cursor:pointer}
.mc-mv:hover,.mc-mv:focus-visible{background:#fde7c2;color:#b45309}
.mc-mv[hidden]{display:none}
.mc-grip{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-8px -10px -8px -2px;color:#8a97ad;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mc-grip:hover{color:#0a1f44}
.mc-grip[hidden]{display:none}
.mc-reo-on,.mc-reo-on *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}
.is-reo-drag{position:relative;z-index:40;box-shadow:0 12px 28px rgba(10,31,68,.28)!important;opacity:.97;transition:none!important}
.is-reo-target{outline:2px dashed #f59e0b;outline-offset:2px}
/* L448: the line under the pickup address on the homepage box ("City: Thane · Change", or the not-served message) */
.mbw .mc-cityline{margin-top:6px;font-size:12.5px;line-height:1.45;color:#5b6b86}
.mbw .mc-cityline a{color:#0a1f44;font-weight:700}
.mbw .mc-cityline-ch{background:none;border:0;padding:0;font:inherit;color:#0a1f44;font-weight:700;text-decoration:underline;cursor:pointer}
.mbw .mc-cityline~select.mc-in{margin-top:6px}
/* 🔒 L457 "Call me back" */
.mc-cb{margin:14px 0;padding:14px;border:1px solid #f3d7a0;background:#fffaf0;border-radius:12px;position:relative}
.mc-cb-hd b{display:block;color:#0a1f44;font-size:15px}
.mc-cb-hd span{display:block;color:#475569;font-size:13px;margin-top:2px}
.mc-cb-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
@media(max-width:560px){.mc-cb-row{grid-template-columns:1fr}}
.mc-cb-btn{margin-top:10px;width:100%;min-height:46px;border:0;border-radius:10px;background:#0a1f44;color:#fff;font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.mc-cb-btn:disabled{opacity:.6;cursor:default}
.mc-cb.is-done{display:flex;gap:8px;align-items:center;color:#0a1f44;font-weight:600}
.mc-cb-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}