/* ============================================================
   MXUBER BOOKING EXTRAS — entrance + micro-interactions layer
   on top of booking.css. Covers the booking flow:
   /cab/create-ride, /cab/ride/{id}, /cab/ride/track/{uuid}.

   LOAD ORDER (required): after booking.css (both copies — the
   page @push and the global mx-layer loop — satisfy this).

   Language: 200-300ms micro, cubic-bezier(0.16,1,0.3,1),
   ink/accent via --mx-* tokens, no gradients, no glow.
   ============================================================ */

/* ------------------------------------------------------------
   0. KEYFRAMES
   ------------------------------------------------------------ */

@keyframes mx-bk-fade-in {
    from { opacity: 0; }
}

@keyframes mx-bk-slide-up {
    from { opacity: 0; transform: translateY(16px); }
}

@keyframes mx-card-pulse {
    0%   { transform: scale(0.98); }
    100% { transform: scale(1); }
}

@keyframes mx-pop {
    from { opacity: 0; transform: scale(0.5); }
}

/* ponytail: max-height per spec clips lists taller than 320px
   during the 0.18s open animation only — rest state is untouched
   (no fill). Upgrade path: animate a measured --dd-height var. */
@keyframes mx-select2-in {
    from { opacity: 0; max-height: 0; transform: translateY(-4px); }
    to   { opacity: 1; max-height: 320px; transform: translateY(0); }
}

@keyframes mx-corp-in {
    from { opacity: 0; transform: translateY(-6px); }
}

/* ------------------------------------------------------------
   1-2. ENTRANCES — form panel rises first (100ms), map card
   fades in after it (200ms)
   ------------------------------------------------------------ */

.create-ride-section .right-details-box {
    animation: mx-bk-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

.create-ride-section .left-map-box .save-address-map-box {
    animation: mx-bk-fade-in 0.45s ease 0.2s backwards;
}

/* ------------------------------------------------------------
   3-4. VEHICLE CARDS — hover lift + selected pulse.
   No entrance animation on .vehicles-box on purpose: the
   selected-state pulse is delivered via `animation` on
   :has(:checked); a base entrance on the same element would
   REPLAY every time the selection moves off a card.
   ------------------------------------------------------------ */

.create-ride-section .right-details-box .select-vehicles-box .vehicles-box {
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.create-ride-section .right-details-box .select-vehicles-box .vehicles-box:hover {
    transform: translateY(-2px);
}

.create-ride-section .right-details-box .select-vehicles-box .vehicles-box:has(.form-check-input:checked) {
    animation: mx-card-pulse 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------
   5. BOOK RIDE CTA — press feedback + spinner pop-in.
   Bootstrap's rotate keyframe is redeclared alongside mx-pop:
   both are finite/infinite pairs on transform, the finite pop
   wins for its 0.18s then rotation takes back over.
   ------------------------------------------------------------ */

#bookRideBtn {
    transition: background-color 0.18s ease, transform 0.1s ease, opacity 0.15s ease;
}

#bookRideBtn:active {
    transform: translateY(1px);
}

#bookRideBtn .spinner-border {
    animation: spinner-border-grow 0.75s linear infinite,
        mx-pop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------
   6. INPUT FOCUS RING — ink outline + subtle shadow
   ------------------------------------------------------------ */

.create-ride-section .form-box .form-control.white-from-control:focus,
.create-ride-section select.form-select:focus,
.create-ride-section select.form-control.select-2:focus {
    outline: 2px solid var(--mx-ink);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-ink) 5%, transparent);
}

.create-ride-section .select2-container--default.select2-container--focus .select2-selection--single,
.create-ride-section .select2-container--default.select2-container--open .select2-selection--single {
    outline: 2px solid var(--mx-ink);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-ink) 5%, transparent);
}

/* keyboard ring on everything else clickable in the section */
.create-ride-section :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--mx-ink);
    outline-offset: 3px;
}

/* route underline fields: ring on the wrapper, not the input */
.create-ride-section .mx3-routefield .form-control.white-from-control:focus-visible {
    outline: none;
}

/* ------------------------------------------------------------
   7. SELECT2 DROPDOWN — smooth open.
   ponytail: select2 detaches the dropdown the instant it
   closes, so a close animation needs a JS hook (class on
   --closing before detach); CSS-only can animate the open.
   ------------------------------------------------------------ */

body .select2-container--open .select2-dropdown {
    transform-origin: top center;
    animation: mx-select2-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------
   8. BUSINESS RIDE PANEL — fades in with the form; its fields
   slide down when the toggle flips (jQuery's slideToggle flips
   display, which restarts mx-corp-in — 200ms total with the
   160ms height slide)
   ------------------------------------------------------------ */

.create-ride-section .mx-corp-book {
    animation: mx-bk-slide-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.45s backwards;
}

.mx-corp-book__fields {
    animation: mx-corp-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------
   9. LABELS — muted at rest, ink while their field is focused
   ------------------------------------------------------------ */

.create-ride-section .right-details-box label.form-label,
.create-ride-section #ambulance_div > .form-group > label,
.create-ride-section .right-details-box .select-vehicles-box .form-label,
.mx-corp-book__row label {
    color: var(--mx-ink-2);
    transition: color 0.15s ease;
}

.create-ride-section .right-details-box .form-box:focus-within label.form-label,
.create-ride-section #ambulance_div > .form-group:focus-within > label,
.create-ride-section .right-details-box .select-vehicles-box:focus-within .form-label,
.mx-corp-book__row:focus-within label {
    color: var(--mx-ink);
}

/* ------------------------------------------------------------
   10. RIDE SHOW — trip header + cards entrance, action hover
   ------------------------------------------------------------ */

.mx3-ride .mx3-ride__head {
    animation: mx-bk-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s backwards;
}

.mx3-ride .right-details-box,
.mx3-ride .left-map-box {
    animation: mx-bk-fade-in 0.45s ease 0.18s backwards;
}

.mx3-ride .mx3-btn:active {
    transform: scale(0.98);
}

/* route rows stagger in */
.mx3-ride .mx3-route__list li {
    animation: mx-bk-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.mx3-ride .mx3-route__list li:nth-child(1) { animation-delay: 0.22s; }
.mx3-ride .mx3-route__list li:nth-child(2) { animation-delay: 0.28s; }
.mx3-ride .mx3-route__list li:nth-child(3) { animation-delay: 0.34s; }
.mx3-ride .mx3-route__list li:nth-child(n+4) { animation-delay: 0.4s; }

/* ------------------------------------------------------------
   11. TRACK — status sheet slide-in, marker/timeline motion
   ------------------------------------------------------------ */

/* status accent bar sweeps in once */
@keyframes mx-status-bar {
    from { transform: scaleX(0); }
}

.mx3-track .ride-header::before {
    transform-origin: left center;
    animation: mx-status-bar 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

/* sheet: mobile open/close stays transform-driven (vendor sets
   the transition on .details-sidebar); desktop panel slides in */
@media (min-width: 769px) {
    .mx3-track .details-sidebar {
        animation: mx-bk-fade-in 0.4s ease 0.1s backwards;
    }
}

/* timeline rows rise */
.mx3-track .timeline-item {
    animation: mx-bk-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.mx3-track .timeline-item:nth-child(1) { animation-delay: 0.1s; }
.mx3-track .timeline-item:nth-child(2) { animation-delay: 0.16s; }
.mx3-track .timeline-item:nth-child(3) { animation-delay: 0.22s; }
.mx3-track .timeline-item:nth-child(n+4) { animation-delay: 0.28s; }

/* map control press */
.mx3-track .map-control-btn {
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.mx3-track .map-control-btn:active {
    transform: scale(0.94);
}

/* accordion chevron */
.mx3-track .accordion-section .accordion-button::after {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------
   12. REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .create-ride-section,
    .create-ride-section *,
    .mx3-ride,
    .mx3-ride *,
    .mx3-track,
    .mx3-track *,
    .mx-corp-book,
    .mx-corp-book *,
    body .select2-container .select2-dropdown {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}