/* ============================================================================
   BAKITOUR — SERVICES PAGE (page-scoped enhancements)
   Loaded only by pages/services.blade.php via <x-slot:head>, after
   bakitour-premium.css. Borrowed from the bakitour-enhancements redesign,
   adapted to the global [data-reveal] system (no page-local reveal JS).
   ========================================================================== */

/* Popular-routes ledger CSS promoted to bakitour-premium.css (2026-07-06 — used on home too). */

/* ===== Editorial spotlight (image + checklist + CTA, alternating sides) ===== */
.bk-spot { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .bk-spot { grid-template-columns: 1fr; gap: 30px; } }
.bk-spot__media { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(26, 58, 50, 0.14); }
.bk-spot__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-spot__body h2 { margin: 14px 0 0; font-family: var(--bk-font-display); font-variation-settings: 'opsz' 144; font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--bk-forest); }
.bk-spot__body > p { margin: 16px 0 0; font-size: var(--bk-text-lg, 18px); line-height: 1.65; color: var(--bk-ink-secondary); }
.bk-spot__hl { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 13px; }
.bk-spot__hl li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--bk-forest); }
.bk-spot__hl svg { width: 18px; height: 18px; color: var(--bk-accent); flex-shrink: 0; }
.bk-spot__body .bk-btn { margin-top: 28px; }
.bk-spot--rev .bk-spot__media { order: 2; }
@media (max-width: 900px) { .bk-spot--rev .bk-spot__media { order: 0; } }

/* ===== How it works — bk-feature cards on the full home palette =====
   The earlier beige/white override read washed-out ("cheap") against the warm
   band — the cards now inherit the sage creative (blob/tile-blob/halo) exactly
   like the home green cards. Only the icon sizing is steps-specific. */
.bk-steps .bk-feature__tile svg { width: 54px; height: 54px; }

/* ===== Service inner pages — quiet pills, single editorial band, slim related strip.
   Used only by pages/service.blade.php (the 6 landing pages). ===== */
.bk-svc-pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--bk-space-2, 8px); }
.bk-svc-pill { display: inline-flex; align-items: center; padding: var(--bk-space-2, 8px) var(--bk-space-4, 16px); background: var(--bk-white, #fff); border: 1px solid var(--bk-border, #e7e2da); border-radius: 999px; font-size: var(--bk-text-sm); color: var(--bk-forest, #1a3a2f); font-weight: 500; }

.bk-svc-editorial { max-width: 760px; }
.bk-svc-editorial__block + .bk-svc-editorial__block { margin-top: var(--bk-space-16, 64px); }
.bk-svc-editorial h2 { margin: 0 0 var(--bk-space-5, 20px); font-family: var(--bk-font-display); font-variation-settings: 'opsz' 144; font-weight: 400; font-size: clamp(1.6rem, 2.2vw, 1.9rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--bk-forest); }
.bk-svc-editorial p { margin: 0 0 var(--bk-space-4, 16px); font-size: var(--bk-text-lg, 18px); line-height: 1.75; color: var(--bk-ink-secondary, #555); }
.bk-svc-editorial .bk-svc-editorial__block p:last-child { margin-bottom: 0; }

.bk-svc-more { padding: 52px 0; background: var(--bk-forest-tint); }
.bk-svc-more .bk-eyebrow { margin: 0; }
.bk-svc-more__row { display: flex; align-items: center; gap: var(--bk-space-8, 32px); flex-wrap: wrap; }
.bk-svc-more__links { display: flex; align-items: center; gap: var(--bk-space-8, 32px); flex-wrap: wrap; }
.bk-svc-more__link { font-family: var(--bk-font-display); font-size: var(--bk-text-lg); color: var(--bk-forest); text-decoration: none; }
.bk-svc-more__link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) {
    .bk-svc-more__row { align-items: flex-start; flex-direction: column; gap: var(--bk-space-4, 16px); }
    .bk-svc-more__links { flex-direction: column; align-items: flex-start; gap: var(--bk-space-3, 12px); }
}

/* ===== Client logos strip (service pages, optional) — quiet grayscale row ===== */
.bk-svc-logos { padding: var(--bk-space-12, 48px) 0; background: var(--bk-white, #fff); border-top: 1px solid var(--bk-border); border-bottom: 1px solid var(--bk-border); }
.bk-svc-logos__row { display: flex; align-items: center; justify-content: center; gap: var(--bk-space-12, 48px); flex-wrap: wrap; }
.bk-svc-logos__row img { height: 34px; width: auto; opacity: 0.55; filter: grayscale(1); transition: opacity 0.3s ease, filter 0.3s ease; }
.bk-svc-logos__row img:hover { opacity: 1; filter: grayscale(0); }

/* ===== Corporate inquiry (approved 2026-07-06) — editorial pitch + form in
   feature-card chrome. Inputs come from the canonical x-field components;
   only layout + the small-caps label treatment are scoped here. ===== */
.bk-inquiry { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--bk-space-16, 64px); align-items: center; max-width: 1100px; }
@media (max-width: 900px) { .bk-inquiry { grid-template-columns: 1fr; gap: var(--bk-space-10, 40px); } }
.bk-inquiry__title { margin: 14px 0 0; font-family: var(--bk-font-display); font-variation-settings: 'opsz' 144; font-weight: 400; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--bk-forest); }
.bk-inquiry__sub { margin: 16px 0 0; font-size: var(--bk-text-lg, 18px); line-height: 1.65; color: var(--bk-ink-secondary); }
.bk-inquiry__hl { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 13px; }
.bk-inquiry__hl li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--bk-forest); }
.bk-inquiry__hl svg { width: 18px; height: 18px; color: var(--bk-gold, #c2a35f); flex-shrink: 0; }
.bk-inquiry__alt { margin: 26px 0 0; font-size: var(--bk-text-sm); color: var(--bk-ink-muted); }
.bk-inquiry__alt a { color: var(--bk-forest); font-weight: 600; text-decoration: none; }
.bk-inquiry__card {
    background: var(--bk-white);
    border: 1px solid rgba(26, 58, 50, 0.07);
    border-radius: 22px;
    padding: var(--bk-space-10, 40px) var(--bk-space-9, 36px);
    box-shadow: 0 1px 2px rgba(26, 58, 50, 0.05), 0 18px 40px rgba(26, 58, 50, 0.06);
}
.bk-inquiry__card .bk-label { font-size: var(--bk-text-xs, 12px); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bk-ink-muted); }
.bk-inquiry__card .bk-field { margin-bottom: var(--bk-space-4, 16px); }
.bk-inquiry__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bk-space-4, 16px); }
@media (max-width: 560px) { .bk-inquiry__grid2 { grid-template-columns: 1fr; gap: 0; } }
.bk-inquiry__submit { width: 100%; justify-content: center; margin-top: var(--bk-space-5, 20px); }
.bk-inquiry__success { background: var(--bk-forest-tint); color: var(--bk-forest); padding: var(--bk-space-4) var(--bk-space-5); border-radius: var(--bk-radius-md, 10px); margin: 0 0 var(--bk-space-5); }
.bk-inquiry__note { margin: 14px 0 0; text-align: center; font-size: var(--bk-text-xs, 12.5px); color: var(--bk-ink-muted); }

/* ── Terminal ledger (airport pages) ─────────────────────────────
   Terminal-by-terminal pickup guide on /airport-transfers/{jfk,lga,ewr} —
   same quiet ledger treatment as the .bk-routes rows. */
.bk-terminals { list-style: none; margin: var(--bk-space-6, 24px) 0 0; padding: 0; border-top: 1px solid var(--bk-border, #e5e0d8); }
.bk-terminals li { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 18px 4px; border-bottom: 1px solid var(--bk-border, #e5e0d8); }
.bk-terminals strong { flex: 0 0 130px; font-weight: 600; color: var(--bk-forest, #1a3a32); font-size: var(--bk-text-base, 16px); line-height: 1.6; }
.bk-terminals span { flex: 1 1 300px; min-width: 240px; font-size: var(--bk-text-base, 16px); line-height: 1.6; color: var(--bk-ink-secondary, #555); }

/* ── Booking quick-start (SEO landing pages) ─────────────────────
   Blacklane-pattern portrait widget floating over the hero: One-way / hourly
   tab pill (home-widget idiom), icon-led bordered fields (x-field focus ring
   convention), layered premium shadow, gold eyebrow. Posts into /book.
   The card is absolutely positioned so the hero band keeps its natural height;
   it overhangs onto the section below, which carries desktop clearance. */
.bk-page-title--widget {
    overflow: visible;
    /* The hero's isolation:isolate contains the card's z-index; without elevating
       the band itself, the NEXT section's background paints over the card's
       overhang and swallows its clicks (verified via elementFromPoint). */
    z-index: 1;
}
/* With a floating card on the right, the heading takes the LEFT column. */
@media (min-width: 1025px) {
    .bk-page-title--widget .bk-page-title__inner {
        text-align: left;
        max-width: var(--bk-container, 1200px);
        margin: 0 auto;
        padding-left: var(--bk-space-6, 24px);
        padding-right: calc(420px + 24px + 48px + var(--bk-space-6, 24px));
    }
}
.bk-quickstart-anchor {
    position: absolute;
    top: calc(var(--bk-header-h, 76px) + 24px);
    left: 0;
    right: 0;
    height: 0;
    z-index: 5;
}
.bk-quickstart-anchor .bk-container { display: flex; justify-content: flex-end; }

.bk-quickstart {
    /* Glass card: frosted over the hero image, matching the home widget's
       glass-bar idiom (blur + saturate + light edge highlight). */
    background: rgba(252, 251, 247, 0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 1px 2px rgba(26, 58, 50, 0.06),
        0 24px 48px -12px rgba(26, 58, 50, 0.22),
        0 48px 96px -24px rgba(26, 58, 50, 0.30);
}
.bk-quickstart--stack {
    width: 420px;
    max-width: 100%;
    padding: var(--bk-space-6, 24px) var(--bk-space-6, 24px) var(--bk-space-5, 20px);
}
.bk-quickstart__head { margin-bottom: var(--bk-space-4, 16px); }
.bk-quickstart__head .bk-eyebrow { display: block; margin-bottom: 6px; }
.bk-quickstart__title { margin: 0; font-family: var(--bk-font-display); font-variation-settings: 'opsz' 144; font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.6rem); letter-spacing: -0.01em; color: var(--bk-forest, #1a3a32); }
.bk-quickstart__sub { margin: 4px 0 0; font-size: var(--bk-text-sm, 14px); color: var(--bk-ink-muted, #8a8578); }

/* Tab pill — segmented control on forest tint, active segment = forest on white */
.bk-qs-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: rgba(26, 58, 50, 0.10);
    border-radius: 999px;
    margin-bottom: var(--bk-space-5, 20px);
}
/* Sliding thumb: one forest pill gliding between the two segments. */
.bk-qs-tabs__thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 6px);
    background: var(--bk-forest, #1a3a32);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(26, 58, 50, 0.25);
    transition: transform 0.28s cubic-bezier(0.33, 1, 0.42, 1);
    will-change: transform;
}
.bk-qs-tabs--hourly .bk-qs-tabs__thumb { transform: translateX(calc(100% + 4px)); }
.bk-qs-tab {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 9px 12px;
    font: inherit;
    font-size: var(--bk-text-sm, 14px);
    font-weight: 600;
    color: var(--bk-forest, #1a3a32);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.bk-qs-tab { position: relative; z-index: 1; }
.bk-qs-tab--active { color: var(--bk-cream, #faf7f0); }
/* Swapped-field entrance: soft fade-rise (leave is instant so heights never stack). */
.bk-qs-enter { transition: opacity 0.24s ease-out, transform 0.24s cubic-bezier(0.33, 1, 0.42, 1); }
.bk-qs-enter-start { opacity: 0; transform: translateY(6px); }
.bk-qs-enter-end { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .bk-qs-tabs__thumb { transition: none; }
    .bk-qs-enter { transition: none; }
}
.bk-qs-tab:focus-visible { outline: 2px solid var(--bk-forest, #1a3a32); outline-offset: 2px; }

.bk-quickstart__form { display: grid; grid-template-columns: 1fr; gap: var(--bk-space-3, 12px); }

/* Icon-led bordered field (x-field focus-ring convention) */
.bk-qs-field {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 1px solid rgba(26, 58, 50, 0.14);
    border-radius: var(--bk-radius-md, 10px);
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.66);
    cursor: text;
    font: inherit;
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.bk-qs-field--trigger { cursor: pointer; }
.bk-qs-field--trigger:hover { background: rgba(255, 255, 255, 0.85); }
.bk-qs-field-wrap { position: relative; }
.bk-qs-field__value { font-size: var(--bk-text-base, 16px); color: var(--bk-ink, #232323); }
.bk-qs-field__chevron { width: 16px; height: 16px; flex: 0 0 16px; color: var(--bk-ink-muted, #8a8578); transition: transform 0.22s ease; }
.bk-qs-field__chevron--open { transform: rotate(180deg); }

/* Dark-glass popover panel — same recipe as the home widget's dropdowns
   (.bk-booking__dropdown), hosting the shared .bk-calendar / .bk-time__option. */
.bk-qs-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: linear-gradient(rgba(15, 19, 25, 0.96), rgba(15, 19, 25, 0.96));
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--bk-radius-md, 10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.bk-qs-pop--cal { padding: 14px; }
.bk-qs-pop--list { padding: 6px; max-height: 240px; overflow-y: auto; }
/* An open dropdown's field-wrap rises above later sibling fields/CTA. */
.bk-qs-field-wrap--raised { z-index: 40; }
/* Themed scrollbar — same recipe as the home widget's dropdowns. */
.bk-qs-pop--list { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.bk-qs-pop--list::-webkit-scrollbar { width: 6px; }
.bk-qs-pop--list::-webkit-scrollbar-track { background: transparent; }
.bk-qs-pop--list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 3px; }
.bk-qs-pop--list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); }
/* Places prediction rows (two-line, home-widget result idiom on dark glass) */
.bk-qs-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    margin: 2px 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.bk-qs-result:hover, .bk-qs-result--active { background: rgba(110, 110, 115, 0.4); }
.bk-qs-result svg { width: 16px; height: 16px; flex: 0 0 16px; color: rgba(255, 255, 255, 0.55); }
.bk-qs-result__text { display: flex; flex-direction: column; min-width: 0; }
.bk-qs-result__main { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-qs-result__sub { font-size: 12px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-qs-field:focus-within {
    border-color: var(--bk-forest, #1a3a32);
    box-shadow: 0 0 0 3px rgba(26, 58, 50, 0.10);
}
.bk-qs-field__icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--bk-forest-soft, #2a5347); }
.bk-qs-field__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bk-qs-field__label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bk-ink-muted, #8a8578); }
.bk-qs-field__input {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: var(--bk-text-base, 16px);
    color: var(--bk-ink, #232323);
    width: 100%;
}
.bk-qs-field__input:focus { outline: none; }
.bk-qs-field__input::placeholder { color: var(--bk-ink-faint, #b5b0a4); }
select.bk-qs-field__input { cursor: pointer; }

.bk-quickstart__note { margin: 2px 0 0; font-size: var(--bk-text-xs, 12.5px); color: var(--bk-ink-muted, #8a8578); }
.bk-quickstart__submit { width: 100%; justify-content: center; margin-top: var(--bk-space-2, 8px); }

/* Clearance: the floating card (taller with tabs) overhangs below the hero. */
.bk-page-title--widget + .bk-section { padding-top: calc(var(--bk-space-16, 64px) + 260px); }
@media (max-width: 1024px) {
    /* Tablet/mobile: no floating — the card flows below the hero text, inside the band. */
    .bk-quickstart-anchor { position: static; height: auto; margin-top: var(--bk-space-8, 32px); margin-bottom: 0; }
    .bk-quickstart-anchor .bk-container { justify-content: center; }
    .bk-page-title--widget + .bk-section { padding-top: var(--bk-space-16, 64px); }
}