/* ═══════════════════════════════════════════════════════════
   Customer-facing visual consistency: panels, tiles, and forms
   Loaded on every customer-facing layout (main + booking wizard).

   This file is linked AFTER taxi-custom.css, so it wins ties and its
   !important declarations are the last word on those properties. That is
   why the design-system values live here rather than being layered on top
   from taxi-custom.css — an override there loses to these declarations
   however specific it is made. (Confirmed the hard way: a scoped
   multi-class selector, class doubling and even an inline style all failed
   to move the card radius while line 20 still read 12px !important.)

   Brought onto the Wayfinding system 2026-08-23.
   ═══════════════════════════════════════════════════════════ */

/* ---------- Unified panel for every form/tile ---------- */
/*
 * Every customer-facing page (home, booking wizard, driver
 * registration, etc.) renders form blocks and tile sections as
 * .card with shadow-sm/border-0/rounded-3, OR as the legacy
 * .booking-form-card. This rule unifies them to one visual.
 *
 * 3px radius and a hairline border replace the 12px-and-drop-shadow
 * treatment. Shadows are tinted with the ink hue rather than pure black —
 * black at low opacity reads as flat grey against a warm ground.
 */
.booking-form-card,
.taxi-panel,
section .card.shadow-sm.border-0.rounded-3,
.container > .row > [class*="col-"] > .card.shadow-sm.border-0.rounded-3,
.container > .row > [class*="col-"] > form > .card.shadow-sm.border-0.rounded-3 {
    background: var(--taxi-surface, #F8F9F2) !important;
    border: 1px solid var(--taxi-line, #DCDDCD) !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 2px rgba(99, 10, 70, 0.04),
                0 12px 28px -16px rgba(99, 10, 70, 0.16) !important;
}

/* Inner spacing for panels that don't use Bootstrap padding utility */
.booking-form-card,
.taxi-panel {
    padding: 30px;
}

@media (max-width: 575.98px) {
    .booking-form-card,
    .taxi-panel { padding: 20px; }
}

/* ---------- Tile cards (home page + dashboards) ---------- */
.booking-type-card,
.feature-card,
.vehicle-card,
.driver-card {
    background: var(--taxi-surface, #F8F9F2) !important;
    border: 1px solid var(--taxi-line, #DCDDCD);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(99, 10, 70, 0.04),
                0 12px 28px -16px rgba(99, 10, 70, 0.14);
    transition: box-shadow 240ms cubic-bezier(0.65, 0, 0.35, 1),
                transform 240ms cubic-bezier(0.65, 0, 0.35, 1),
                border-color 120ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* The border takes the brand green on hover, so depth is signalled by the
   edge as well as the lift — colour alone is not a reliable cue. */
.booking-type-card:hover,
.feature-card:hover,
.vehicle-card:hover,
.driver-card:hover {
    border-color: var(--taxi-expressway, #4C6C14);
    box-shadow: 0 2px 4px rgba(99, 10, 70, 0.05),
                0 22px 44px -20px rgba(99, 10, 70, 0.22);
    transform: translateY(-3px);
}

/* ---------- Page ground ----------
   The olive-biased ground from the design tokens, not a neutral grey.
   The wizard pages previously took a cooler grey so white panels would
   read as elevated; with hairline borders doing that job the ground can
   stay constant, which keeps the whole booking flow visually continuous. */
body {
    background: var(--taxi-reflect, #F1F2E9);
}

body:has(.booking-progress) {
    background: var(--taxi-reflect, #F1F2E9);
}

/* ---------- Form-element consistency ---------- */
/* 2px on controls, matching the buttons. */
.booking-form-card .form-control,
.booking-form-card .form-select,
.taxi-panel .form-control,
.taxi-panel .form-select,
.card .form-control,
.card .form-select {
    border-radius: 2px;
}