/*
 * Blue Motors Southampton — 1.8.0 design refresh
 *
 * Loaded AFTER the legacy stylesheets so it wins by source order without
 * needing `!important` everywhere. Implements:
 *   DSN-002 — system font stack + type ramp
 *   DSN-003 — restrained chrome (navy + red)
 *   DSN-004 — unified service-card structure; per-category colour via
 *             [data-service="..."] attribute selector
 *   DSN-006 — sticky mobile CTA bar
 *   DSN-007 — single-column mobile service list
 *   DSN-008 — one-step-at-a-time mobile flow + progress dots
 *
 * Tokens (--bms-*) come from _tokens.css; this file does not redefine them.
 */

/* ============================================================
 * DSN-002 — Typography
 * ============================================================ */

.bms-booking-container,
.bms-booking-wrapper,
.bms-service-selection-container,
.bms-frontend-booking-management {
    font-family: var(--bms-font);
    color: var(--bms-text);
    line-height: var(--bms-lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bms-booking-container h1,
.bms-booking-container h2,
.bms-booking-container h3,
.bms-booking-container h4 {
    font-family: var(--bms-font);
    color: var(--bms-text);
    line-height: var(--bms-lh-tight);
    letter-spacing: -0.01em;
}

.bms-service-header h1,
.bms-booking-container h1 { font-size: var(--bms-fs-2xl); font-weight: var(--bms-fw-semi); }
.bms-booking-container h2,
.bms-booking-container .step-title { font-size: var(--bms-fs-xl); font-weight: var(--bms-fw-semi); }
.bms-booking-container h3 { font-size: var(--bms-fs-lg); font-weight: var(--bms-fw-semi); }
.bms-booking-container h4 { font-size: var(--bms-fs-base); font-weight: var(--bms-fw-semi); }
.bms-booking-container,
.bms-booking-container p { font-size: var(--bms-fs-base); }
.bms-booking-container .service-subtitle,
.bms-booking-container .helper-text,
.bms-booking-container small { font-size: var(--bms-fs-sm); color: var(--bms-text-muted); }

/* ============================================================
 * DSN-003 — Chrome (navy + red), focus rings, form fields
 * ============================================================ */

/* Progress steps strip ----------------------------------------- */
.bms-progress-steps {
    background: var(--bms-surface);
    border-bottom: 1px solid var(--bms-border);
}
.bms-progress-steps .step .step-number {
    background: var(--bms-surface);
    color: var(--bms-text-muted);
    border: 2px solid var(--bms-border-strong);
    transition: background var(--bms-t-base), color var(--bms-t-base), border-color var(--bms-t-base);
}
.bms-progress-steps .step.active .step-number,
.bms-progress-steps .step.completed .step-number {
    background: var(--bms-brand-navy);
    color: var(--bms-text-inverse);
    border-color: var(--bms-brand-navy);
}
.bms-progress-steps .step .step-label {
    color: var(--bms-text-muted);
    font-size: var(--bms-fs-sm);
}
.bms-progress-steps .step.active .step-label {
    color: var(--bms-text);
    font-weight: var(--bms-fw-semi);
}

/* Primary buttons (anything outside coloured service cards) ----- */
.bms-booking-container .btn-primary,
.bms-booking-container button.btn-primary,
.bms-booking-container .btn-select-combo.btn-primary,
.bms-frontend-booking-management .button-primary {
    background: var(--bms-brand-red);
    color: var(--bms-text-inverse);
    border: none;
    border-radius: var(--bms-r-base);
    padding: var(--bms-s-3) var(--bms-s-6);
    font-family: var(--bms-font);
    font-size: var(--bms-fs-base);
    font-weight: var(--bms-fw-semi);
    min-height: var(--bms-touch-min);
    cursor: pointer;
    transition: background var(--bms-t-fast), transform var(--bms-t-fast);
}
.bms-booking-container .btn-primary:hover,
.bms-booking-container button.btn-primary:hover {
    background: var(--bms-brand-red-hover);
    transform: translateY(-1px);
}
.bms-booking-container .btn-primary:active { transform: translateY(0); }

/* Secondary / outlined buttons ------------------------------- */
.bms-booking-container .btn-secondary,
.bms-booking-container button.btn-secondary {
    background: var(--bms-surface);
    color: var(--bms-brand-navy);
    border: 1.5px solid var(--bms-brand-navy);
    border-radius: var(--bms-r-base);
    padding: var(--bms-s-3) var(--bms-s-6);
    font-weight: var(--bms-fw-semi);
    min-height: var(--bms-touch-min);
    transition: background var(--bms-t-fast);
}
.bms-booking-container .btn-secondary:hover {
    background: var(--bms-surface-muted);
}

/* Form fields ------------------------------------------------ */
.bms-booking-container input[type="text"],
.bms-booking-container input[type="email"],
.bms-booking-container input[type="tel"],
.bms-booking-container input[type="date"],
.bms-booking-container input[type="time"],
.bms-booking-container input[type="number"],
.bms-booking-container select,
.bms-booking-container textarea {
    width: 100%;
    background: var(--bms-surface);
    color: var(--bms-text);
    border: 1.5px solid var(--bms-border);
    border-radius: var(--bms-r-base);
    padding: var(--bms-s-3) var(--bms-s-4);
    font-family: var(--bms-font);
    font-size: var(--bms-fs-base);
    min-height: var(--bms-touch-min);
    box-sizing: border-box;
    transition: border-color var(--bms-t-fast), box-shadow var(--bms-t-fast);
}
.bms-booking-container input:hover,
.bms-booking-container select:hover,
.bms-booking-container textarea:hover {
    border-color: var(--bms-border-strong);
}
.bms-booking-container input:focus,
.bms-booking-container select:focus,
.bms-booking-container textarea:focus {
    outline: none;
    border-color: var(--bms-brand-navy);
    box-shadow: var(--bms-focus-ring);
}

/* Focus rings everywhere keyboard users can land ------------- */
.bms-booking-container a:focus-visible,
.bms-booking-container button:focus-visible,
.bms-booking-container [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--bms-focus-ring);
    border-radius: var(--bms-r-sm);
}

/* Links ------------------------------------------------------ */
.bms-booking-container a {
    color: var(--bms-brand-navy);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.bms-booking-container a:hover { color: var(--bms-brand-navy-hover); }

/* ============================================================
 * DSN-004 — Unified service cards (per-category colour)
 * ============================================================ */

/* Apply the shared card skeleton to BOTH card variants used in
   service-selection-step.php. Colour is bound via [data-service]
   below. Selector specificity is bumped with .bms-booking-container
   so this stays additive over service-card-colors*.css.            */
.bms-booking-container .bms-service-card-modern,
.bms-booking-container .enhanced-service-card {
    position: relative;
    background: var(--bms-card-default);
    color: var(--bms-text-inverse);
    border: none;
    border-radius: var(--bms-r-lg);
    padding: var(--bms-s-6);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    gap: var(--bms-s-3);
    box-shadow: none;
    transition: transform var(--bms-t-fast), box-shadow var(--bms-t-base);
    overflow: hidden;
}
.bms-booking-container .bms-service-card-modern:hover,
.bms-booking-container .enhanced-service-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bms-elev-card-hover);
}
.bms-booking-container .bms-service-card-modern.selected,
.bms-booking-container .enhanced-service-card.selected {
    outline: 3px solid var(--bms-text-inverse);
    outline-offset: -6px;
}

/* Typography inside cards is white-on-colour ------------------ */
.bms-booking-container .bms-service-card-modern .service-title,
.bms-booking-container .bms-service-card-modern h2,
.bms-booking-container .enhanced-service-card h4 {
    color: var(--bms-text-inverse);
    font-size: var(--bms-fs-lg);
    font-weight: var(--bms-fw-semi);
    margin: 0;
    line-height: var(--bms-lh-tight);
}
.bms-booking-container .bms-service-card-modern .service-tagline,
.bms-booking-container .bms-service-card-modern .fuel-types,
.bms-booking-container .enhanced-service-card .service-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--bms-fs-sm);
    margin: 0;
    line-height: var(--bms-lh-base);
}
.bms-booking-container .bms-service-card-modern .price-section {
    display: flex;
    align-items: baseline;
    gap: var(--bms-s-3);
    margin: var(--bms-s-2) 0;
}
.bms-booking-container .bms-service-card-modern .price-label {
    font-size: var(--bms-fs-xs);
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bms-booking-container .bms-service-card-modern .price-main {
    font-size: var(--bms-fs-2xl);
    font-weight: var(--bms-fw-bold);
    color: var(--bms-text-inverse);
    line-height: 1;
}
.bms-booking-container .enhanced-service-card .service-price {
    color: var(--bms-text-inverse);
    font-size: var(--bms-fs-xl);
    font-weight: var(--bms-fw-bold);
    margin: 0;
}
.bms-booking-container .bms-service-card-modern .service-details,
.bms-booking-container .bms-service-card-modern .detail-item {
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--bms-fs-sm);
}

/* The unified "select / book" button at the foot of every card */
.bms-booking-container .bms-service-card-modern .btn-select-service,
.bms-booking-container .enhanced-service-card .btn-select-service {
    margin-top: auto;
    background: rgba(255, 255, 255, 0.95);
    color: var(--bms-text);
    border: none;
    border-radius: var(--bms-r-base);
    padding: var(--bms-s-3) var(--bms-s-4);
    font-family: var(--bms-font);
    font-size: var(--bms-fs-base);
    font-weight: var(--bms-fw-semi);
    min-height: var(--bms-touch-min);
    cursor: pointer;
    transition: background var(--bms-t-fast), transform var(--bms-t-fast);
}
.bms-booking-container .bms-service-card-modern .btn-select-service:hover,
.bms-booking-container .enhanced-service-card .btn-select-service:hover {
    background: var(--bms-text-inverse);
    transform: translateY(-1px);
}

/* "MOST POPULAR" badge ---------------------------------------- */
.bms-booking-container .bms-service-card-modern .popular-badge {
    position: absolute;
    top: var(--bms-s-3);
    right: var(--bms-s-3);
    background: var(--bms-brand-red);
    color: var(--bms-text-inverse);
    font-size: var(--bms-fs-xs);
    font-weight: var(--bms-fw-bold);
    padding: var(--bms-s-1) var(--bms-s-3);
    border-radius: var(--bms-r-pill);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--bms-elev-card-hover);
}

/* Per-category colour palette --------------------------------- *
 * One rule per service slug. Add new services here when the    *
 * Services admin page introduces new ones.                      */
.bms-booking-container [data-service="mot_test"]            { background: var(--bms-card-mot_test); }
.bms-booking-container [data-service="interim_service"]     { background: var(--bms-card-interim_service); }
.bms-booking-container [data-service="full_service"]        { background: var(--bms-card-full_service); }
.bms-booking-container [data-service="air_con_regas"]       { background: var(--bms-card-air_con_regas); }
.bms-booking-container [data-service="air_con_service"]     { background: var(--bms-card-air_con_service); }
.bms-booking-container [data-service="brake_check"]         { background: var(--bms-card-brake_check); }
.bms-booking-container [data-service="brake_service"]       { background: var(--bms-card-brake_service); }
.bms-booking-container [data-service="suspension_check"]    { background: var(--bms-card-suspension_check); }
.bms-booking-container [data-service="battery_test"]        { background: var(--bms-card-battery_test); }
.bms-booking-container [data-service="battery_replacement"] { background: var(--bms-card-battery_replacement); }
.bms-booking-container [data-service="exhaust_check"]       { background: var(--bms-card-exhaust_check); }
.bms-booking-container [data-service="exhaust_repair"]      { background: var(--bms-card-exhaust_repair); }
.bms-booking-container [data-service="clutch_check"]        { background: var(--bms-card-clutch_check); }
.bms-booking-container [data-service="diagnostic_check"]    { background: var(--bms-card-diagnostic_check); }

/* "Save Time & Money" MOT combo strip ------------------------- */
.bms-booking-container .bms-mot-section {
    background: var(--bms-success);
    color: var(--bms-text-inverse);
    border-radius: var(--bms-r-lg);
    padding: var(--bms-s-6);
    margin: var(--bms-s-6) 0;
}
.bms-booking-container .bms-mot-section .mot-header h2,
.bms-booking-container .bms-mot-section .mot-header h3,
.bms-booking-container .bms-mot-section .mot-header { color: var(--bms-text-inverse); }

/* Subtitle: the legacy mobile-critical-fixes.css forces #475569 on this
   paragraph (a holdover from before the green section existed). Beat it
   with higher specificity so the text reads as white on green at every
   viewport width. */
.bms-booking-container .bms-mot-section .mot-header .mot-subtitle,
.bms-booking-container .bms-mot-section .mot-subtitle {
    color: var(--bms-text-inverse);
    opacity: 0.95;
}

.bms-booking-container .bms-mot-section .mot-pricing-table {
    background: var(--bms-surface);
    color: var(--bms-text);
    border-radius: var(--bms-r-base);
    padding: var(--bms-s-4);
    margin-top: var(--bms-s-4);
}

/* 4-column desktop grid for the pricing rows. Gated to >=768px so the
   legacy mobile stacked-card layout in mobile-critical-fixes.css survives
   and renders correctly at phone widths (it already does a good job —
   white card per row, blue/green left border, large bold total, green
   Save chip, full-width Book Now button). */
@media (min-width: 768px) {
    .bms-booking-container .bms-mot-section .pricing-header,
    .bms-booking-container .bms-mot-section .pricing-row {
        display: grid;
        grid-template-columns: 1.4fr 0.8fr 1.2fr 1fr;
        gap: var(--bms-s-3);
        align-items: center;
        padding: var(--bms-s-2) 0;
    }
    .bms-booking-container .bms-mot-section .pricing-header {
        font-size: var(--bms-fs-sm);
        font-weight: var(--bms-fw-semi);
        color: var(--bms-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom: 1px solid var(--bms-border);
    }
    .bms-booking-container .bms-mot-section .savings {
        display: inline-block;
        background: var(--bms-success);
        color: var(--bms-text-inverse);
        border-radius: var(--bms-r-pill);
        padding: 2px 10px;
        font-size: var(--bms-fs-xs);
        font-weight: var(--bms-fw-semi);
        margin-left: var(--bms-s-2);
    }
}

/* Mobile niceties: a touch more padding around the green section so it
   doesn't kiss the viewport edges, and a tighter table padding so the
   stacked cards have room. */
@media (max-width: 767px) {
    .bms-booking-container .bms-mot-section {
        padding: var(--bms-s-5) var(--bms-s-4);
        margin-left: 0;
        margin-right: 0;
    }
    .bms-booking-container .bms-mot-section .mot-pricing-table {
        padding: var(--bms-s-3);
        background: transparent;
    }
}

/* ============================================================
 * DSN-006 — Sticky mobile CTA bar
 * ============================================================ */
@media (max-width: 767px) {
    .bms-sticky-cta {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        padding: var(--bms-s-3) var(--bms-s-4);
        padding-bottom: max(var(--bms-s-3), env(safe-area-inset-bottom));
        background: var(--bms-surface);
        border-top: 1px solid var(--bms-border);
        box-shadow: var(--bms-elev-sticky);
        z-index: 50;
        display: flex;
        gap: var(--bms-s-3);
    }
    .bms-sticky-cta .btn-primary,
    .bms-sticky-cta button.btn-primary { flex: 1; }
    .bms-sticky-cta .btn-secondary { flex: 0 0 auto; }
    /* Reserve viewport space so the floating bar never overlaps content. */
    .bms-booking-container { padding-bottom: 88px; }
    /* The confirmation step hides the bar — see DSN-008 JS. */
    .bms-booking-container.is-confirmation .bms-sticky-cta { display: none; }
}
@media (min-width: 768px) {
    /* Desktop: the wrapper is purely semantic; render inline. */
    .bms-sticky-cta {
        display: flex;
        gap: var(--bms-s-3);
        margin-top: var(--bms-s-4);
    }
}

/* ============================================================
 * DSN-007 — Single-column mobile service list
 * ============================================================ */
@media (max-width: 767px) {
    .bms-services-showcase {
        display: flex;
        flex-direction: column;
        gap: var(--bms-s-3);
    }
    .bms-services-showcase .services-separator { display: none; }
    .enhanced-services-grid { grid-template-columns: 1fr !important; gap: var(--bms-s-3) !important; }
    .bms-booking-container .bms-service-card-modern,
    .bms-booking-container .enhanced-service-card {
        min-height: 72px;
        padding: var(--bms-s-4);
    }
    .bms-booking-container .bms-service-card-modern .price-section {
        margin: var(--bms-s-1) 0;
    }
    .bms-booking-container .bms-service-card-modern .service-details { display: none; }
}

/* ============================================================
 * DSN-008 — One-step-at-a-time mobile flow + progress dots
 * ============================================================ */
@media (max-width: 767px) {
    /* Hide the default horizontal progress strip on mobile; the dot
       strip below replaces it. */
    .bms-progress-steps {
        display: flex;
        justify-content: center;
        gap: var(--bms-s-2);
        padding: var(--bms-s-3) var(--bms-s-4);
        border-bottom: 1px solid var(--bms-border);
    }
    .bms-progress-steps .step {
        flex: 0 0 auto;
        width: 10px;
        height: 10px;
        padding: 0;
        border-radius: var(--bms-r-pill);
        background: var(--bms-border-strong);
        position: relative;
    }
    .bms-progress-steps .step.active { background: var(--bms-brand-navy); width: 28px; }
    .bms-progress-steps .step.completed { background: var(--bms-brand-navy); }
    .bms-progress-steps .step .step-number,
    .bms-progress-steps .step .step-label { display: none; }

    /* Full-viewport one-step layout. On mobile only the active step is
       visible; .bms-booking-container.bms-mobile-step-flow is added by
       booking.js so we don't fight desktop styles. */
    .bms-booking-container.bms-mobile-step-flow .bms-step-content {
        display: none;
    }
    .bms-booking-container.bms-mobile-step-flow .bms-step-content.is-active {
        display: block;
        animation: bms-step-in var(--bms-t-base);
    }
    @keyframes bms-step-in {
        from { opacity: 0; transform: translateX(8px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* Back affordance — JS injects .bms-mobile-back if the current step > 1 */
    .bms-mobile-back {
        background: transparent;
        border: none;
        color: var(--bms-brand-navy);
        font-size: var(--bms-fs-base);
        font-weight: var(--bms-fw-semi);
        padding: var(--bms-s-2) var(--bms-s-3);
        min-height: var(--bms-touch-min);
        margin: var(--bms-s-2) 0;
        cursor: pointer;
    }
    .bms-mobile-back::before { content: "← "; }
}

/* ============================================================
 * Admin chrome bumps (resources page + booking management)
 * ============================================================ */
.bms-resources .button.button-primary,
.bms-frontend-booking-management .button.button-primary {
    background: var(--bms-brand-navy);
    border-color: var(--bms-brand-navy);
    color: var(--bms-text-inverse);
}
.bms-resources .button.button-primary:hover {
    background: var(--bms-brand-navy-hover);
    border-color: var(--bms-brand-navy-hover);
}
.bms-swimlane-head { border-bottom-color: var(--bms-brand-navy) !important; color: var(--bms-brand-navy) !important; }
.bms-swimlane-count { background: var(--bms-brand-navy) !important; }