/* ═══════════════════════════════════════════════════════════════
   booking.css — Dedicated booking page design
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────────── */
.bk-page {
    --bk-navy    : #06264a;
    --bk-navy-2  : #0b3b70;
    --bk-sky     : #54B6F4;
    --bk-gold    : #FFC000;
    --bk-green   : #25D366;
    --bk-text    : #17324d;
    --bk-muted   : #5a7080;
    --bk-light   : #f4f8fc;
    --bk-bg      : #edf4fb;
    --bk-card-bg : #ffffff;
    --bk-border  : #dbe7f3;
    --bk-shadow  : 0 20px 55px rgba(6,38,74,.11);
    --bk-shadow-s: 0 6px 22px rgba(6,38,74,.08);

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
    line-height : 1.7;
    color       : var(--bk-text);
    background  : var(--bk-bg);
}

html[data-theme="dark"] .bk-page {
    --bk-navy    : #e8f2fb;
    --bk-text    : #d0e8f8;
    --bk-muted   : rgba(200,225,245,.65);
    --bk-light   : #0a1e30;
    --bk-bg      : #071827;
    --bk-card-bg : #0d2337;
    --bk-border  : rgba(255,255,255,.08);
    --bk-shadow  : 0 20px 55px rgba(0,0,0,.35);
    --bk-shadow-s: 0 6px 22px rgba(0,0,0,.25);
}

.bk-page * { box-sizing: border-box; }
.bk-page img { max-width: 100%; display: block; }
.bk-page a { text-decoration: none; color: inherit; }
.bk-page h1, .bk-page h2, .bk-page h3 { margin: 0; letter-spacing: -.03em; }
.bk-page p { margin: 0; }

.bk-wrap {
    width : min(1160px, calc(100% - 48px));
    margin: 0 auto;
}

/* ── EYEBROW ──────────────────────────────────────────────────── */
.bk-eyebrow {
    display        : inline-flex;
    align-items    : center;
    padding        : 6px 14px;
    border-radius  : 999px;
    background     : rgba(84,182,244,.15);
    border         : 1px solid rgba(84,182,244,.35);
    color          : #54B6F4;
    font-weight    : 800;
    font-size      : .78rem;
    text-transform : uppercase;
    letter-spacing : .09em;
    margin-bottom  : 16px;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.bk-hero {
    background : linear-gradient(135deg, #06264a 0%, #0b3b70 60%, #1a6fa8 100%);
    padding    : 64px 0 72px;
    text-align : center;
    position   : relative;
    overflow   : hidden;
}
.bk-hero::after {
    content   : '';
    position  : absolute;
    bottom    : -1px;
    left      : 0;
    right     : 0;
    height    : 60px;
    background: var(--bk-bg);
    clip-path : ellipse(55% 100% at 50% 100%);
}

.bk-hero-inner {
    position  : relative;
    z-index   : 1;
    text-align: center;
}

.bk-hero h1 {
    font-size    : clamp(2.2rem, 5vw, 3.6rem);
    font-weight  : 900;
    color        : #fff;
    line-height  : 1.1;
    margin-bottom: 14px;
}
.bk-lead {
    font-size    : clamp(1rem, 1.8vw, 1.12rem);
    color        : rgba(255,255,255,.75);
    max-width    : 560px;
    margin       : 0 auto 28px;
    line-height  : 1.75;
}

/* Hero contact pills */
.bk-hero-contacts {
    display        : flex;
    gap            : 14px;
    justify-content: center;
    flex-wrap      : wrap;
}
.bk-contact-pill {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    padding        : 12px 22px;
    border-radius  : 999px;
    background     : rgba(255,255,255,.12);
    border         : 1px solid rgba(255,255,255,.25);
    color          : #fff !important;
    font-weight    : 700;
    font-size      : .95rem;
    transition     : background .2s, transform .2s;
    backdrop-filter: blur(6px);
}
.bk-contact-pill:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.bk-pill-wa { background: rgba(37,211,102,.18) !important; border-color: rgba(37,211,102,.40) !important; }
.bk-pill-wa:hover { background: rgba(37,211,102,.30) !important; }
.bk-pill-icon { font-size: 1.1rem; }

/* ── BODY GRID ────────────────────────────────────────────────── */
.bk-body { padding: 0 0 80px; }

.bk-grid {
    display              : grid;
    grid-template-columns: 1fr 340px;
    gap                  : 28px;
    align-items          : start;
    padding-top          : 0;
    margin-top           : -20px;
}

/* ── FORM CARD ────────────────────────────────────────────────── */
.bk-form-card {
    background   : var(--bk-card-bg);
    border-radius: 24px;
    box-shadow   : var(--bk-shadow);
    border       : 1px solid var(--bk-border);
    overflow     : hidden;
    transition   : background .3s, border-color .3s;
}

.bk-form-header {
    padding        : 32px 36px 0;
    border-bottom  : 1px solid var(--bk-border);
    padding-bottom : 24px;
    margin-bottom  : 0;
}
.bk-form-header h2 {
    font-size    : clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight  : 900;
    color        : var(--bk-navy);
    margin-bottom: 6px;
}
.bk-form-header p {
    color    : var(--bk-muted);
    font-size: .95rem;
}

/* Override booking form styles inside this card */
.bk-form-card .fivestar-booking-form {
    border-radius: 0 !important;
    box-shadow   : none !important;
    border       : none !important;
    background   : transparent !important;
    margin       : 0 !important;
}
.bk-form-card .fivestar-booking-form .fvs-form-inner {
    padding: 28px 36px 36px !important;
}

/* ── SIDEBAR ──────────────────────────────────────────────────── */
.bk-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }

.bk-sidebar-card {
    background   : var(--bk-card-bg);
    border-radius: 20px;
    border       : 1px solid var(--bk-border);
    box-shadow   : var(--bk-shadow-s);
    padding      : 24px 22px;
    transition   : background .3s, border-color .3s;
}

.bk-sidebar-card h3 {
    font-size    : 1.05rem;
    font-weight  : 900;
    color        : var(--bk-navy);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bk-sky);
    display      : inline-block;
}

/* Checklist */
.bk-check-list {
    list-style: none;
    padding   : 0;
    margin    : 0;
    display   : flex;
    flex-direction: column;
    gap       : 9px;
}
.bk-check-list li {
    display    : flex;
    align-items: center;
    gap        : 10px;
    font-size  : .9rem;
    font-weight: 600;
    color      : var(--bk-text);
}
.bk-check-list li::before {
    content        : '✓';
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 20px;
    height         : 20px;
    border-radius  : 50%;
    background     : var(--bk-sky);
    color          : #fff;
    font-size      : .7rem;
    font-weight    : 900;
    flex-shrink    : 0;
}

/* Fare guide */
.bk-fare-note {
    font-size    : .88rem;
    color        : var(--bk-muted);
    margin-bottom: 14px !important;
}
.bk-fare-note strong { color: var(--bk-navy); }

.bk-fares { display: flex; flex-direction: column; gap: 0; }
.bk-fare-row {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 9px 0;
    border-bottom  : 1px solid var(--bk-border);
    font-size      : .88rem;
}
.bk-fare-row:last-child { border-bottom: none; }
.bk-fare-row span { color: var(--bk-text); font-weight: 600; }
.bk-fare-row span a { color: var(--bk-sky) !important; text-decoration: underline; text-underline-offset: 2px; }
.bk-fare-row b { color: var(--bk-sky); font-size: 1rem; font-weight: 900; }

/* CTA card */
.bk-cta-card {
    background   : linear-gradient(135deg, #06264a 0%, #0b3b70 100%) !important;
    border-color : transparent !important;
    text-align   : center;
}
.bk-cta-card p { color: rgba(255,255,255,.75); font-size: .92rem; margin-bottom: 14px !important; }

.bk-call-btn, .bk-wa-btn {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    padding        : 13px 20px;
    border-radius  : 999px;
    font-weight    : 800;
    font-size      : .93rem;
    transition     : transform .2s, box-shadow .2s;
    text-decoration: none !important;
    margin-bottom  : 10px;
}
.bk-call-btn:last-child, .bk-wa-btn:last-child { margin-bottom: 0; }

.bk-call-btn {
    background : var(--bk-sky) !important;
    color      : #06264a !important;
    box-shadow : 0 6px 20px rgba(84,182,244,.30);
}
.bk-call-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(84,182,244,.45); }

.bk-wa-btn {
    background : var(--bk-green) !important;
    color      : #fff !important;
    box-shadow : 0 6px 20px rgba(37,211,102,.25);
    margin-bottom: 0;
}
.bk-wa-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.40); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .bk-grid    { grid-template-columns: 1fr; }
    .bk-sidebar { position: static; }
}
@media (max-width: 600px) {
    .bk-wrap    { width: calc(100% - 32px); }
    .bk-hero    { padding: 48px 0 60px; }
    .bk-form-header,
    .bk-form-card .fivestar-booking-form .fvs-form-inner { padding-left: 20px !important; padding-right: 20px !important; }
    .bk-contact-pill { font-size: .88rem; padding: 10px 16px; }
    .bk-contact-pill { width: 100%; justify-content: center; }
    .bk-hero-contacts { flex-direction: column; align-items: stretch; }
}
@media (max-width: 400px) {
    .bk-wrap  { width: calc(100% - 20px); }
    .bk-hero  { padding: 36px 0 50px; }
}