/* =====================================================================================
   Booking pages — "app style" (matches the Xpressmac app's Travel between cities screens)
   Light grey page · white rounded cards · grey labels above big rounded fields ·
   blue = selected · green = available · orange pill = the main action.
   Pages: body.xm-app  (/transport, /intercity, /service-checkout)  ·  booking dialog .xmbk (everywhere)
   ===================================================================================== */
:root {
    --app-bg: #F2F2F7; --app-card: #FFFFFF; --app-ink: #111111; --app-sub: #8A8A8E; --app-line: #E5E5EA;
    --app-or: #EE7430; --app-or-d: #D9621F; --app-or-tint: #FFF4EC;
    --app-bl: #2563EB; --app-bl-tint: #EAF1FE; --app-gr: #34A853; --app-gr-tint: #E3F5E6; --app-red: #D33B3B; --app-red-tint: #FBE3E3;
    --app-r: 22px; --app-r-sm: 14px; --app-shadow: 0 6px 24px rgba(17, 17, 17, .06);
}

/* ---------- page shell ---------- */
body.xm-app { background: var(--app-bg); }
body.xm-app .vsec { background: transparent; box-shadow: none; padding: 0; margin-top: 26px; border-left: 0 !important; }
body.xm-app .vsec__head { margin-bottom: 14px; align-items: baseline; }
body.xm-app .vsec__title { font: 700 22px/1.25 'Poppins', 'Inter', sans-serif; color: var(--app-ink); }
body.xm-app .vsec__title .ico { display: none; }
body.xm-app .vsec__radius { background: none; color: var(--app-sub); padding: 0; font-size: 14px; }
body.xm-app .rentq__sum { color: var(--app-sub); font-size: 14px; margin: 14px 2px 12px; }
body.xm-app .svc-empty { background: var(--app-card); border: 0; border-radius: var(--app-r); padding: 22px; color: var(--app-sub); text-align: center; box-shadow: var(--app-shadow); }

/* ---------- main buttons: orange pill ---------- */
body.xm-app .btn--primary, .xmbk .btn--primary {
    background: var(--app-or); border-color: var(--app-or); color: #fff; border-radius: 999px; font-weight: 700;
    box-shadow: 0 6px 16px rgba(238, 116, 48, .26); transition: background .15s, transform .1s;
}
body.xm-app .btn--primary:hover, .xmbk .btn--primary:hover { background: var(--app-or-d); border-color: var(--app-or-d); }
body.xm-app .btn--primary:active, .xmbk .btn--primary:active { transform: scale(.985); }
body.xm-app .btn--primary:disabled, .xmbk .btn--primary:disabled { background: #E3E3E8; border-color: #E3E3E8; color: #9A9AA0; box-shadow: none; }
body.xm-app .btn--dark { border-radius: 999px; }
body.xm-app .btn--ghost, body.xm-app .btn--outline, .xmbk .btn--ghost { border-radius: 999px; background: #fff; border: 1px solid #DADADF; color: var(--app-ink); }
body.xm-app .linkbtn, body.xm-app .vsec__loc { color: var(--app-bl); text-decoration: none; font-weight: 600; }

/* ---------- search forms (were navy panels) → white cards ---------- */
body.xm-app .ridebox { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
body.xm-app .rentq { background: var(--app-card); color: var(--app-ink); border-radius: var(--app-r); box-shadow: var(--app-shadow); padding: 20px; gap: 14px; }
body.xm-app .rentq__field { color: var(--app-sub); font-weight: 500; font-size: 13.5px; opacity: 1; }
body.xm-app .rentq__field input, body.xm-app .rentq__field select, body.xm-app .icq__sel,
body.xm-app .rentq__in, body.xm-app .apsel__input, body.xm-app .apquick input, body.xm-app .apquick select {
    background: #fff; border: 1px solid #DADADF; border-radius: var(--app-r-sm); height: 48px; font: 600 15px 'Inter', sans-serif; color: var(--app-ink);
}
body.xm-app .rentq__in { height: auto; }
body.xm-app .rentq__in input { border: 0; height: 46px; }
body.xm-app .rentq__field input:focus, body.xm-app .rentq__field select:focus, body.xm-app .icq__sel:focus { outline: 2px solid var(--app-bl); outline-offset: 0; border-color: var(--app-bl); }
body.xm-app .rentq__gps { background: var(--app-bl-tint); }
body.xm-app .rentq .locmodal__status { color: var(--app-red); }
body.xm-app .icq__swap { background: #fff; color: var(--app-bl); box-shadow: 0 3px 12px rgba(0, 0, 0, .14); border-radius: 50%; width: 48px; height: 48px; font-size: 20px; }
/* radio/checkbox rows → segmented pills (blue when chosen) */
body.xm-app .rentq__opts { gap: 10px; }
body.xm-app .rentq__check { border: 1px solid #DADADF; border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 14.5px; color: var(--app-ink); background: #fff; }
body.xm-app .rentq__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.xm-app .rentq__check:has(input:checked) { border-color: var(--app-bl); background: var(--app-bl-tint); }
body.xm-app .rentq__check:has(input:focus-visible) { outline: 2px solid var(--app-bl); outline-offset: 2px; }
body.xm-app .rentq__check.icq__soon { background: #F4F4F6; color: var(--app-sub); }
body.xm-app .icq__soon small { background: #FFF1D6; color: #B4690E; }
body.xm-app .icq__go { min-width: 150px; height: 46px; font-size: 15.5px; }
/* side tip card */
body.xm-app .ride__app { background: var(--app-card); border: 0; border-radius: var(--app-r); box-shadow: var(--app-shadow); padding: 20px; }
body.xm-app .ride__app b { font: 700 17px 'Poppins', sans-serif; }
body.xm-app .ride__app p { color: var(--app-sub); }

/* ---------- vehicle cards (taxi, airport, intercity car) ---------- */
body.xm-app .apcars, body.xm-app .ride__cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
body.xm-app .apcar { background: var(--app-card); border: 2px solid transparent; border-radius: var(--app-r); box-shadow: var(--app-shadow); overflow: hidden; padding: 0; text-align: left; transition: border-color .15s, transform .15s; }
body.xm-app .apcar:hover { border-color: var(--app-bl); transform: translateY(-2px); }
body.xm-app .apcar__img { background: #F6F7FA; border-radius: 0; }
body.xm-app .apcar__body { padding: 14px 16px 16px; gap: 4px; }
body.xm-app .apcar__body b { font: 700 17px 'Inter', sans-serif; color: var(--app-ink); }
body.xm-app .apcar__body small { color: var(--app-sub); font-size: 13.5px; }
body.xm-app .apcar__cap { color: var(--app-sub); font-weight: 500; }
body.xm-app .apcar__from { margin-top: 8px; font-size: 14px; color: var(--app-sub); }
body.xm-app .apcar__from b { font: 700 18px 'Inter', sans-serif; color: var(--app-ink); }
body.xm-app .apcar::after { content: 'Choose →'; display: block; margin: 0 16px 16px; color: var(--app-bl); font-weight: 600; font-size: 14.5px; }

/* ---------- intercity cards (home block) ---------- */
body.xm-app .icq__list { gap: 16px; }
body.xm-app .icq__card { border: 0; border-radius: var(--app-r); box-shadow: var(--app-shadow); padding: 18px 20px; gap: 12px; }
body.xm-app .icq__card.is-off { background: #F4F4F6; box-shadow: none; }
body.xm-app .icq__top b { font-size: 18px; }
body.xm-app .icq__top small { color: var(--app-sub); }
body.xm-app .icq__price { font-size: 18px; }
body.xm-app .icq__pt b { font-size: 18px; }
body.xm-app .icq__pt span, body.xm-app .icq__mid { color: var(--app-sub); }
body.xm-app .icq__mid i { color: var(--app-gr); }
body.xm-app .icq__seats { background: var(--app-gr-tint); color: #2E8A3A; border-radius: 10px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; }
body.xm-app .icq__seats.is-low { background: #FFF1D6; color: #B4690E; }
body.xm-app .icq__seats.is-x { background: var(--app-red-tint); color: var(--app-red); }
body.xm-app .icq__demo { background: #FFF7E6; border-radius: 16px; padding: 14px 16px; color: #5B4A2A; }
body.xm-app .icq__stations a, body.xm-app .icq__stations span { background: #fff; border: 1px solid #DADADF; padding: 6px 12px; }
body.xm-app .icq__stations a.is-on { background: var(--app-bl-tint); border-color: var(--app-bl); color: var(--app-ink); }

/* ---------- rental ---------- */
body.xm-app .pills .pill { border-radius: 999px; background: #fff; border: 1px solid #DADADF; }
body.xm-app .pills .pill.is-active { background: var(--app-bl-tint); border-color: var(--app-bl); color: var(--app-ink); }
body.xm-app .ccard { border: 0; border-radius: var(--app-r); box-shadow: var(--app-shadow); overflow: hidden; }
body.xm-app .ccard__price { font-size: 18px; }

/* ---------- airport quick form ---------- */
body.xm-app .apquick { background: var(--app-card); color: var(--app-ink); border-radius: var(--app-r); box-shadow: var(--app-shadow); }
body.xm-app .apquick h3 { color: var(--app-ink); }
body.xm-app .apquick label { color: var(--app-sub); }
body.xm-app .apquick ul { color: var(--app-sub); }
body.xm-app .apquick__dir { background: #F2F2F7; border-radius: 999px; padding: 4px; }
body.xm-app .apquick__dir label { border-radius: 999px; color: var(--app-ink); }
body.xm-app .apquick__dir label:has(input:checked) { background: var(--app-bl-tint); outline: 1px solid var(--app-bl); color: var(--app-ink); }
body.xm-app .apquick .btn--primary { height: 52px; font-size: 16px; }

/* ---------- Transportation page header (photo, like the original cab page) ---------- */
body.xm-app .transport--page {
    position: relative; overflow: hidden; border-radius: 0 0 var(--app-r) var(--app-r); margin-top: 0; padding: 46px 28px 28px; min-height: 230px;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 18px;
    background: linear-gradient(180deg, rgba(11, 18, 32, .35), rgba(11, 18, 32, .78)), url('../../img/car-banner.png') center / cover no-repeat, #0B1F3A;
}
body.xm-app .transport--page .transport__title { font: 700 34px/1.15 'Poppins', sans-serif; letter-spacing: -.01em; }
body.xm-app .transport--page .transport__sub { color: #E5E7EB; font-size: 15px; }
body.xm-app .trp__tabs { background: rgba(255, 255, 255, .96); border-radius: 999px; padding: 5px; gap: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
body.xm-app .trp__tabs a { background: transparent; color: var(--app-ink); padding: 10px 18px; font-weight: 600; }
body.xm-app .trp__tabs a:hover { background: #F2F2F7; }
body.xm-app .trp__tabs a.is-on { background: var(--app-bl-tint); color: var(--app-ink); box-shadow: inset 0 0 0 1.5px var(--app-bl); }

/* ---------- service booking page ---------- */
body.xm-app .svcco__card { border: 0; border-radius: var(--app-r); box-shadow: var(--app-shadow); padding: 22px; }
body.xm-app .svcco__h { font: 700 18px 'Poppins', sans-serif; color: var(--app-ink); }
body.xm-app .svcco__h span { background: var(--app-or); color: #fff; }
body.xm-app .svcco__card input, body.xm-app .svcco__card select, body.xm-app .svcco__card textarea { border: 1px solid #DADADF; border-radius: var(--app-r-sm); min-height: 48px; font-size: 15px; }
body.xm-app .svcco__card textarea { min-height: 90px; }
body.xm-app .svcco__card input:focus, body.xm-app .svcco__card textarea:focus { outline: 2px solid var(--app-bl); border-color: var(--app-bl); }
body.xm-app .svcco__card label:has(> input[type=radio]), body.xm-app .svcco__addrs label, body.xm-app .svcco__pays label { border: 1px solid #DADADF; border-radius: 16px; background: #fff; }
body.xm-app .svcco__card label:has(> input[type=radio]:checked), body.xm-app .svcco__addrs label:has(input:checked), body.xm-app .svcco__pays label:has(input:checked) { border-color: var(--app-bl); background: var(--app-bl-tint); }
body.xm-app .svcco__card input[type=radio] { accent-color: var(--app-bl); min-height: 0; }
body.xm-app .svcco__slots button, body.xm-app [data-slot] { border-radius: 999px; border: 1px solid #DADADF; background: #fff; }
body.xm-app [data-slot].is-on, body.xm-app [data-slot][aria-pressed="true"] { border-color: var(--app-bl); background: var(--app-bl-tint); color: var(--app-ink); }
body.xm-app .svcco__qty { border-radius: 999px; border: 1px solid #DADADF; overflow: hidden; }
body.xm-app .svcco__sum { position: sticky; top: 90px; }
body.xm-app .svcco__sum .svcco__place { width: 100%; height: 54px; font-size: 16.5px; }
body.xm-app .svcco__svc .price, body.xm-app .svcco__card [class*="price"] { color: var(--app-ink); }
body.xm-app .svcco__crumb a { color: var(--app-sub); }

/* ---------- booking dialog (taxi, airport, private car, services) ---------- */
.xmbk .locmodal__backdrop { background: rgba(17, 17, 17, .45); backdrop-filter: blur(2px); }
.xmbk .locmodal__panel { max-width: 540px; border-radius: 26px; padding: 22px 22px 18px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.xmbk .locmodal__close { background: #F2F2F7; border-radius: 50%; width: 36px; height: 36px; }
.xmbk__head { margin: 0 44px 18px 0; gap: 14px; }
.xmbk__img { width: 56px; height: 56px; border-radius: 16px; background: var(--app-or-tint); padding: 10px; object-fit: contain; }
.xmbk__head small { color: var(--app-or); letter-spacing: .06em; font-weight: 700; font-size: 11.5px; }
.xmbk__head h2 { font: 700 20px/1.25 'Poppins', sans-serif; color: var(--app-ink); }
.xmbk__head p { color: var(--app-sub); font-size: 13.5px; }
.xmbk__form label { color: var(--app-sub); font-weight: 500; font-size: 13px; gap: 6px; margin-bottom: 12px; }
.xmbk__form input, .xmbk__form select, .xmbk__form textarea, .xmbk .apsel__input { height: 48px; border: 1px solid #DADADF; border-radius: var(--app-r-sm); font: 600 15px 'Inter', sans-serif; color: var(--app-ink); background: #fff; }
.xmbk__form textarea { height: auto; min-height: 70px; padding: 12px; font-weight: 500; }
.xmbk__form input:focus, .xmbk__form select:focus, .xmbk__form textarea:focus { outline: 2px solid var(--app-bl); outline-offset: 0; border-color: var(--app-bl); }
.xmbk__row { gap: 12px; }
.xmbk__form .xmbk__opt { border: 1px solid #DADADF; border-radius: 16px; padding: 12px 14px; background: #fff; color: var(--app-ink); font-size: 14px; }
.xmbk__opt input { accent-color: var(--app-bl); }
.xmbk__opt b { color: var(--app-ink); }
.xmbk__opt small { color: var(--app-sub); }
.xmbk__opt em { color: var(--app-ink); font-size: 13.5px; }
.xmbk__opt:has(input:checked) { border-color: var(--app-bl); background: var(--app-bl-tint); }
.xmbk__total { background: #F6F7FA; border-radius: 16px; padding: 14px 16px; margin: 6px 0 10px; color: var(--app-sub); }
.xmbk__total b { font: 700 20px 'Inter', sans-serif; color: var(--app-ink); }
.xmbk [data-xmbk-submit] { height: 54px; font-size: 16.5px; margin-top: 4px; }
.xmbk .locmodal__privacy { text-align: center; color: var(--app-sub); font-size: 12.5px; margin-top: 10px; }
.xmbk__done .locmodal__badge { width: 64px; height: 64px; border-radius: 50%; background: var(--app-gr-tint); color: #2E8A3A; display: inline-grid; place-items: center; font-size: 30px; }
.xmbk__done .btn { border-radius: 999px; height: 50px; }
.xmbk__app { color: var(--app-sub); font-size: 13px; }
.xmbk__app a { color: var(--app-bl); }
@media (max-width: 640px) {
    .xmbk .locmodal__panel { border-radius: 24px 24px 0 0; padding: 18px 16px 16px; }
    .xmbk .locmodal__panel::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 99px; background: #D1D1D6; margin: -6px auto 12px; }
    body.xm-app .transport--page { padding: 34px 16px 20px; min-height: 200px; border-radius: 0 0 18px 18px; }
    body.xm-app .transport--page .transport__title { font-size: 27px; }
    body.xm-app .trp__tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    body.xm-app .trp__tabs a { padding: 9px 14px; font-size: 13.5px; }
    body.xm-app .ridebox { grid-template-columns: 1fr; }
    body.xm-app .rentq { padding: 16px; }
    body.xm-app .apcars, body.xm-app .ride__cars { grid-template-columns: 1fr 1fr; gap: 12px; }
    body.xm-app .vsec__title { font-size: 20px; }
}

/* service page details */
body.xm-app .svcco__price { color: var(--app-ink); font-size: 22px; }
body.xm-app .svcco__total dd { color: var(--app-ink); font-size: 20px; }
body.xm-app .svcco__svc .scard__type { color: var(--app-or); }
body.xm-app .svcco__by a { color: var(--app-bl); text-decoration: none; }


/* Transportation page (update 32): uses the homepage colours (navy gradient header and search panels, white cards with a navy left edge) from xm-pages.css — no app-style overrides here. */