/*
 * MOTO SERVICE RENT — STICKY BAR + MODAL v2.0
 * File: moto-sticky-bar.css
 * Path: /wp-content/themes/marina/css/moto-sticky-bar.css
 * Design: #0b0b0b dark + #eb7c16 accent + Outfit/Cormorant
 */

/* ═══════════════════════════════════════════
   1. STICKY BAR — BOTTOM FIXED
   ═══════════════════════════════════════════ */

.moto-sticky-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99990 !important;
    background: rgba(11,11,11,0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding: 0 !important;
    transform: translateY(0) !important;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}
.moto-sticky-bar.moto-bar-hidden {
    transform: translateY(100%) !important;
}

.moto-bar-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    height: 72px !important;
}

/* Logo */
.moto-bar-logo {
    flex: 0 0 auto !important;
    padding: 0 20px 0 24px !important;
    display: flex !important;
    align-items: center !important;
}
.moto-bar-logo img {
    height: 32px !important;
    width: auto !important;
    opacity: 0.9 !important;
}

/* Separator */
.moto-bar-sep {
    width: 1px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.08) !important;
    flex-shrink: 0 !important;
}

/* Fields */
.moto-bar-field {
    flex: 1 !important;
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    height: 72px !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
}
.moto-bar-field:hover {
    background: rgba(255,255,255,0.03) !important;
}
.moto-bar-field:last-of-type {
    border-right: none !important;
}

.moto-bar-field label {
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.4) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.moto-bar-field input,
.moto-bar-field select {
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    line-height: 1.2 !important;
}
.moto-bar-field input::placeholder {
    color: rgba(255,255,255,0.25) !important;
}
.moto-bar-field select option {
    background: #0b0b0b !important;
    color: #ffffff !important;
}

/* Select arrow */
.moto-bar-sel-wrap {
    position: relative !important;
}
.moto-bar-sel-wrap::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 4px solid rgba(255,255,255,0.3) !important;
    pointer-events: none !important;
}

/* PRENOTA Button */
.moto-bar-btn {
    flex: 0 0 auto !important;
    height: 72px !important;
    padding: 0 32px !important;
    background: #eb7c16 !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    transition: background 0.3s, transform 0.3s !important;
    outline: none !important;
    white-space: nowrap !important;
}
.moto-bar-btn:hover {
    background: #f0912e !important;
}
.moto-bar-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 2 !important;
    transition: transform 0.3s !important;
}
.moto-bar-btn:hover svg {
    transform: translateX(3px) !important;
}

/* Mobile toggle (hidden on desktop) */
.moto-bar-toggle {
    display: none !important;
}

/* ═══════════════════════════════════════════
   2. MOBILE STICKY BAR
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .moto-bar-inner {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 0 !important;
    }
    .moto-bar-logo {
        display: none !important;
    }
    .moto-bar-sep {
        display: none !important;
    }

    /* Mobile: collapsed = just the button */
    .moto-bar-field {
        display: none !important;
    }
    .moto-sticky-bar.moto-expanded .moto-bar-field {
        display: flex !important;
        flex: 0 0 50% !important;
        height: 56px !important;
        padding: 8px 16px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }
    .moto-sticky-bar.moto-expanded .moto-bar-field:nth-child(odd) {
        border-right: 1px solid rgba(255,255,255,0.06) !important;
    }

    .moto-bar-toggle {
        display: flex !important;
        width: 100% !important;
        height: 56px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        cursor: pointer !important;
        font-family: 'Outfit', -apple-system, sans-serif !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        color: rgba(255,255,255,0.6) !important;
        outline: none !important;
        padding: 0 !important;
    }
    .moto-bar-toggle svg {
        width: 14px !important;
        height: 14px !important;
        stroke: rgba(255,255,255,0.4) !important;
        fill: none !important;
        stroke-width: 2 !important;
        transition: transform 0.3s !important;
    }
    .moto-sticky-bar.moto-expanded .moto-bar-toggle svg {
        transform: rotate(180deg) !important;
    }

    .moto-bar-btn {
        width: 100% !important;
        height: 52px !important;
        justify-content: center !important;
        font-size: 12px !important;
        letter-spacing: 4px !important;
    }
}


/* ═══════════════════════════════════════════
   3. MODAL OVERLAY
   ═══════════════════════════════════════════ */

.moto-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    background: rgba(11,11,11,0.96) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.moto-modal-overlay.moto-modal-open {
    display: flex !important;
}

/* Modal Header */
.moto-modal-hd {
    flex: 0 0 auto !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.moto-modal-hd-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
}
.moto-modal-close {
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s !important;
    outline: none !important;
    padding: 0 !important;
}
.moto-modal-close:hover {
    border-color: #eb7c16 !important;
    background: rgba(235,124,22,0.1) !important;
}
.moto-modal-close svg {
    width: 18px !important;
    height: 18px !important;
    stroke: rgba(255,255,255,0.6) !important;
    fill: none !important;
    stroke-width: 2 !important;
}

/* Modal Body */
.moto-modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 0 70px 0 !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ─── CRBS GENERAL RESET ─── */
.moto-modal-body .crbs {
    background: transparent !important;
}
.moto-modal-body .crbs-main {
    max-width: 100% !important;
    padding: 0 !important;
}
.moto-modal-body .crbs-main-content {
    display: flex !important;
    min-height: calc(100vh - 130px) !important;
}

/* ═══════════════════════════════════════════
   SIDEBAR ARANCIONE — FULL HEIGHT + SCROLL
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-summary {
    background: #eb7c16 !important;
    min-height: calc(100vh - 130px) !important;
    max-height: calc(100vh - 130px) !important;
    padding: 28px 22px !important;
    border: none !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.3) transparent !important;
}
.moto-modal-body .crbs-summary::-webkit-scrollbar {
    width: 4px !important;
}
.moto-modal-body .crbs-summary::-webkit-scrollbar-track {
    background: transparent !important;
}
.moto-modal-body .crbs-summary::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25) !important;
    border-radius: 2px !important;
}
.moto-modal-body .crbs-summary,
.moto-modal-body .crbs-summary *,
.moto-modal-body .crbs-summary span,
.moto-modal-body .crbs-summary div,
.moto-modal-body .crbs-summary h4,
.moto-modal-body .crbs-summary a,
.moto-modal-body .crbs-summary p {
    color: #ffffff !important;
}

/* Sidebar header */
.moto-modal-body .crbs-summary .crbs-summary-header {
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
    padding-bottom: 14px !important;
    margin-bottom: 6px !important;
}
.moto-modal-body .crbs-summary .crbs-summary-header h4,
.moto-modal-body .crbs-summary .crbs-summary-header > h4 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin: 0 !important;
}
.moto-modal-body .crbs-summary .crbs-summary-header > a {
    color: rgba(255,255,255,0.7) !important;
    font-size: 11px !important;
}

/* Sidebar fields */
.moto-modal-body .crbs-summary .crbs-summary-field {
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
    padding: 11px 0 !important;
}
.moto-modal-body .crbs-summary .crbs-summary-field:last-child {
    border-bottom: none !important;
}
.moto-modal-body .crbs-summary .crbs-summary-field-name {
    font-family: 'Outfit', sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.7) !important;
    margin-bottom: 3px !important;
}
.moto-modal-body .crbs-summary .crbs-summary-field-value {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
}

/* Sidebar price block */
.moto-modal-body .crbs-summary-price-element {
    background: rgba(0,0,0,0.15) !important;
    border-radius: 6px !important;
    padding: 12px !important;
    margin-top: 14px !important;
}
.moto-modal-body .crbs-summary-price-element > div {
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    padding: 6px 0 !important;
}
.moto-modal-body .crbs-summary-price-element > div:last-child {
    border-bottom: none !important;
}
.moto-modal-body .crbs-summary-price-element > div span {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
}
.moto-modal-body .crbs-summary-price-element > div.crbs-summary-price-element-total {
    border-top: 2px solid rgba(255,255,255,0.35) !important;
    padding-top: 10px !important;
    margin-top: 4px !important;
}
.moto-modal-body .crbs-summary-price-element > div.crbs-summary-price-element-total > span {
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* ═══════════════════════════════════════════
   CONTENT AREA (right side) — DARK BG
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-main-content > div:not(.crbs-summary) {
    flex: 1 !important;
    padding: 20px 28px 30px !important;
    min-width: 0 !important;
    background: #0b0b0b !important;
}

/* Step headers — white text on dark bg */
.moto-modal-body .crbs-main-content-step-header {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    margin-bottom: 20px !important;
    padding-bottom: 14px !important;
}
.moto-modal-body .crbs-main-content-step-header-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
}

/* Refine search bar */
.moto-modal-body .crbs-main-content-step-2-filter,
.moto-modal-body [class*="refine"],
.moto-modal-body [class*="filter-bar"] {
    background: rgba(235,124,22,0.12) !important;
    border: 1px solid rgba(235,124,22,0.25) !important;
    border-radius: 4px !important;
    margin-bottom: 16px !important;
}
.moto-modal-body .crbs-main-content-step-2-filter *,
.moto-modal-body [class*="refine"] *,
.moto-modal-body [class*="filter-bar"] * {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════
   VEHICLE CARDS — DARK THEMED
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-vehicle-list > ul > li {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.moto-modal-body .crbs-vehicle {
    background: #161616 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: all 0.3s !important;
    margin-bottom: 12px !important;
}
.moto-modal-body .crbs-vehicle:hover {
    border-color: rgba(235,124,22,0.35) !important;
    background: #1a1a1a !important;
}

/* Vehicle image */
.moto-modal-body .crbs-vehicle .crbs-vehicle-image {
    background: #111 !important;
}
.moto-modal-body .crbs-vehicle .crbs-vehicle-image img {
    mix-blend-mode: normal !important;
}

/* Vehicle content — name, attributes */
.moto-modal-body .crbs-vehicle .crbs-vehicle-content {
    background: #161616 !important;
}
.moto-modal-body .crbs-vehicle .crbs-vehicle-content h3,
.moto-modal-body .crbs-vehicle .crbs-vehicle-content .crbs-vehicle-content-header,
.moto-modal-body .crbs-vehicle .crbs-vehicle-content .crbs-vehicle-content-header * {
    color: #ffffff !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* Vehicle attributes */
.moto-modal-body .crbs-vehicle .crbs-vehicle-attribute,
.moto-modal-body .crbs-vehicle .crbs-vehicle-attribute * {
    color: rgba(255,255,255,0.65) !important;
    font-family: 'Outfit', sans-serif !important;
}
.moto-modal-body .crbs-vehicle .crbs-vehicle-attribute > ul > li > div:first-child {
    color: rgba(255,255,255,0.4) !important;
}
.moto-modal-body .crbs-vehicle .crbs-vehicle-attribute > ul > li > div:first-child + div {
    color: #ffffff !important;
}

/* Vehicle attribute icons */
.moto-modal-body .crbs-vehicle .crbs-vehicle-attribute > ul > li > div:first-child [class*="crbs-icon"],
.moto-modal-body .crbs-vehicle .crbs-vehicle-attribute i {
    color: rgba(255,255,255,0.4) !important;
    opacity: 0.5 !important;
}

/* Vehicle price area */
.moto-modal-body .crbs-vehicle .crbs-vehicle-price {
    background: #1c1c1c !important;
}
.moto-modal-body .crbs-vehicle .crbs-vehicle-price,
.moto-modal-body .crbs-vehicle .crbs-vehicle-price * {
    color: #ffffff !important;
}
.moto-modal-body .crbs-vehicle .crbs-vehicle-price > div:first-child {
    color: #eb7c16 !important;
}
.moto-modal-body .crbs-vehicle .crbs-vehicle-price > div:first-child > span {
    color: #eb7c16 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
}

/* Vehicle SELECT button */
.moto-modal-body .crbs-vehicle .crbs-vehicle-price .crbs-button {
    background: #eb7c16 !important;
    color: #ffffff !important;
    border: none !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    transition: background 0.3s !important;
    border-radius: 0 !important;
}
.moto-modal-body .crbs-vehicle .crbs-vehicle-price .crbs-button:hover {
    background: #f0912e !important;
}

/* Vehicle description area */
.moto-modal-body .crbs-vehicle .crbs-vehicle-description,
.moto-modal-body .crbs-vehicle .crbs-vehicle-description * {
    color: rgba(255,255,255,0.5) !important;
    background: #161616 !important;
}

/* ═══════════════════════════════════════════
   EXTRAS / ADD-ONS — DARK ELEGANT
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-booking-extra-header {
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
}
.moto-modal-body .crbs-booking-extra-header > span:first-child {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
}
.moto-modal-body .crbs-booking-extra-header > span:first-child + span {
    color: rgba(255,255,255,0.4) !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Force dark on EVERY element in extras */
.moto-modal-body .crbs-booking-extra-list,
.moto-modal-body .crbs-booking-extra-list > ul,
.moto-modal-body .crbs-booking-extra-list > ul > li,
.moto-modal-body .crbs-booking-extra-list > ul > li > div,
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-1,
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-2,
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-3,
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-2 > .crbs-form-field {
    background: #161616 !important;
    background-color: #161616 !important;
}
.moto-modal-body .crbs-booking-extra-list > ul > li {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    border-top: none !important;
}
.moto-modal-body .crbs-booking-extra-list > ul > li > div {
    border: none !important;
    padding: 16px 12px !important;
}

/* Column 1 — Name, price, description */
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-1 .booking-form-extra-name {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-1 .booking-form-extra-price {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: #eb7c16 !important;
    font-weight: 500 !important;
}
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-1 .booking-form-extra-description {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.45) !important;
    line-height: 1.6 !important;
    font-weight: 300 !important;
}

/* Column 2 — Quantity input */
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-2 input,
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-2 select,
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-2 .dk-selected {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    text-align: center !important;
    min-width: 60px !important;
}

/* Column 3 — SELECT button */
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-3 > a,
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-3 .crbs-button {
    background: #eb7c16 !important;
    color: #ffffff !important;
    border: none !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 10px 24px !important;
    border-radius: 0 !important;
    transition: background 0.3s !important;
}
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-3 > a:hover,
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-3 .crbs-button:hover {
    background: #f0912e !important;
}

/* Nuke any remaining white bg in extras */
.moto-modal-body .crbs-booking-extra-list > ul > li > div.crbs-column-2 > .crbs-form-field > input {
    background: rgba(255,255,255,0.08) !important;
    background-color: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

/* Add-on general text */
.moto-modal-body h2, .moto-modal-body h3, .moto-modal-body h4 {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════
   VEHICLE FILTER / REFINE YOUR SEARCH — DARK
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-vehicle-filter {
    background: #161616 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 4px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}
.moto-modal-body .crbs-vehicle-filter .crbs-form-field {
    margin-bottom: 0 !important;
}
.moto-modal-body .crbs-vehicle-filter label {
    color: rgba(255,255,255,0.5) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}
.moto-modal-body .crbs-vehicle-filter select,
.moto-modal-body .crbs-vehicle-filter input,
.moto-modal-body .crbs-vehicle-filter .dk-selected,
.moto-modal-body .crbs-vehicle-filter .dk-select {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
}
.moto-modal-body .crbs-vehicle-filter select option {
    background: #161616 !important;
    color: #ffffff !important;
}
/* DropKick dropdown inside filter */
.moto-modal-body .crbs-vehicle-filter .dk-select .dk-select-options {
    background: #1c1c1c !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
.moto-modal-body .crbs-vehicle-filter .dk-select .dk-option {
    color: rgba(255,255,255,0.7) !important;
    background: transparent !important;
}
.moto-modal-body .crbs-vehicle-filter .dk-select .dk-option:hover,
.moto-modal-body .crbs-vehicle-filter .dk-select .dk-option-selected {
    background: rgba(235,124,22,0.15) !important;
    color: #eb7c16 !important;
}

/* Global DropKick overrides inside modal */
.moto-modal-body .dk-select {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
.moto-modal-body .dk-selected {
    color: #ffffff !important;
    background: transparent !important;
}
.moto-modal-body .dk-selected::before,
.moto-modal-body .dk-selected::after {
    border-top-color: rgba(255,255,255,0.4) !important;
}
.moto-modal-body .dk-select-options {
    background: #1c1c1c !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    z-index: 999 !important;
}
.moto-modal-body .dk-option {
    color: rgba(255,255,255,0.7) !important;
}
.moto-modal-body .dk-option:hover,
.moto-modal-body .dk-option-selected {
    background: rgba(235,124,22,0.15) !important;
    color: #eb7c16 !important;
}

/* ═══════════════════════════════════════════
   FORM FIELDS — STEP 4 (Driver Details)
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-form-field label {
    color: rgba(255,255,255,0.5) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
.moto-modal-body .crbs-form-field input,
.moto-modal-body .crbs-form-field select,
.moto-modal-body .crbs-form-field textarea,
.moto-modal-body .crbs-form-field .dk-selected {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
}
.moto-modal-body .crbs-form-field input:focus,
.moto-modal-body .crbs-form-field select:focus,
.moto-modal-body .crbs-form-field textarea:focus {
    border-color: #eb7c16 !important;
    outline: none !important;
}

/* General text in content area */
.moto-modal-body .crbs-main-content > div:not(.crbs-summary) p,
.moto-modal-body .crbs-main-content > div:not(.crbs-summary) span,
.moto-modal-body .crbs-main-content > div:not(.crbs-summary) div,
.moto-modal-body .crbs-main-content > div:not(.crbs-summary) label,
.moto-modal-body .crbs-main-content > div:not(.crbs-summary) a {
    color: rgba(255,255,255,0.7) !important;
}

/* ═══════════════════════════════════════════
   NAVIGATION BAR — FIXED BOTTOM
   ═══════════════════════════════════════════ */
.moto-modal-body .crbs-main-content-navigation-button {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99 !important;
    background: #eb7c16 !important;
    height: 56px !important;
    border-top: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
}
.moto-modal-body .crbs-main-content-navigation-button::after {
    content: '' !important;
    display: table !important;
    clear: both !important;
}

/* Target both <a> wrappers and direct .crbs-button */
.moto-modal-body .crbs-main-content-navigation-button > a,
.moto-modal-body .crbs-main-content-navigation-button > .crbs-button,
.moto-modal-body .crbs-main-content-navigation-button a {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    padding: 0 30px !important;
    height: 56px !important;
    line-height: 56px !important;
    display: block !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    border-radius: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    width: auto !important;
}
.moto-modal-body .crbs-main-content-navigation-button > a:hover,
.moto-modal-body .crbs-main-content-navigation-button a:hover {
    background: rgba(0,0,0,0.15) !important;
}

/* PREV → LEFT 50% */
.moto-modal-body .crbs-main-content-navigation-button .crbs-button-step-prev,
.moto-modal-body .crbs-main-content-navigation-button a:first-child {
    float: left !important;
    width: 50% !important;
    border-right: 2px solid #0b0b0b !important;
    text-align: left !important;
}

/* NEXT → RIGHT 50% */
.moto-modal-body .crbs-main-content-navigation-button .crbs-button-step-next,
.moto-modal-body .crbs-main-content-navigation-button a:last-child {
    float: right !important;
    width: 50% !important;
    border-left: 2px solid #0b0b0b !important;
    text-align: right !important;
    padding-right: 30px !important;
    padding-left: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* All text inside white */
.moto-modal-body .crbs-main-content-navigation-button span,
.moto-modal-body .crbs-main-content-navigation-button .crbs-button span,
.moto-modal-body .crbs-main-content-navigation-button a span {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .moto-modal-body .crbs-main-content {
        flex-direction: column !important;
        min-height: auto !important;
    }
    .moto-modal-body .crbs-summary {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        position: relative !important;
        padding: 18px 18px !important;
    }
    .moto-modal-body .crbs-main-content > div:not(.crbs-summary) {
        padding: 16px 14px 80px !important;
    }
    .moto-modal-body .crbs-vehicle {
        margin-bottom: 10px !important;
    }
}


/* ═══════════════════════════════════════════
   4. LOADING ANIMATION — SCOOTER
   ═══════════════════════════════════════════ */

.moto-loading {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999999 !important;
    background: #0b0b0b !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px !important;
}

/* Road */
.moto-loading-road {
    position: relative !important;
    width: 320px !important;
    height: 120px !important;
    overflow: hidden !important;
}

/* Scooter SVG container */
.moto-loading-scooter {
    position: absolute !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 140px !important;
    height: 70px !important;
    animation: motoScooterBounce 0.6s ease-in-out infinite !important;
}
.moto-loading-scooter svg {
    width: 100% !important;
    height: 100% !important;
}

/* Road line */
.moto-loading-roadline {
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    width: 200% !important;
    height: 2px !important;
    background: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.15) 0px,
        rgba(255,255,255,0.15) 20px,
        transparent 20px,
        transparent 40px
    ) !important;
    animation: motoRoadScroll 0.8s linear infinite !important;
}

/* Speed lines */
.moto-loading-lines {
    position: absolute !important;
    bottom: 32px !important;
    left: 20px !important;
    width: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.moto-speed-line {
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(235,124,22,0.4), transparent) !important;
    animation: motoSpeedLine 0.7s ease-out infinite !important;
    opacity: 0 !important;
}
.moto-speed-line:nth-child(1) { width: 40px !important; animation-delay: 0s !important; }
.moto-speed-line:nth-child(2) { width: 30px !important; animation-delay: 0.15s !important; }
.moto-speed-line:nth-child(3) { width: 50px !important; animation-delay: 0.3s !important; }
.moto-speed-line:nth-child(4) { width: 25px !important; animation-delay: 0.45s !important; }

/* Dust particles */
.moto-dust {
    position: absolute !important;
    bottom: 18px !important;
    left: 30px !important;
    width: 4px !important;
    height: 4px !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 50% !important;
    animation: motoDust 1s ease-out infinite !important;
}
.moto-dust:nth-child(2) { left: 24px !important; bottom: 22px !important; animation-delay: 0.3s !important; }
.moto-dust:nth-child(3) { left: 18px !important; bottom: 16px !important; animation-delay: 0.6s !important; }

/* Text */
.moto-loading-logo {
    margin-top: -10px !important;
    margin-bottom: 8px !important;
}
.moto-loading-logo img {
    height: 36px !important;
    width: auto !important;
    opacity: 0.7 !important;
    animation: motoTextPulse 1.5s ease-in-out infinite !important;
}

.moto-loading-text {
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.4) !important;
    animation: motoTextPulse 1.5s ease-in-out infinite !important;
}

/* Progress bar */
.moto-loading-progress {
    width: 200px !important;
    height: 2px !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 1px !important;
    overflow: hidden !important;
}
.moto-loading-progress-fill {
    height: 100% !important;
    width: 0% !important;
    background: #eb7c16 !important;
    border-radius: 1px !important;
    animation: motoProgress 2.5s ease-in-out infinite !important;
}

/* Keyframes */
@keyframes motoScooterBounce {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
    50% { transform: translateX(-50%) translateY(-4px) rotate(-1deg); }
}

@keyframes motoRoadScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}

@keyframes motoSpeedLine {
    0% { opacity: 0; transform: translateX(20px); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-40px); }
}

@keyframes motoDust {
    0% { opacity: 0; transform: translate(0,0) scale(0.5); }
    20% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(-30px, -15px) scale(1.5); }
}

@keyframes motoTextPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes motoProgress {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

@keyframes motoShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(5px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}


/* ═══════════════════════════════════════════
   5. DATEPICKER DARK OVERRIDE
   ═══════════════════════════════════════════ */

/* Only inside sticky bar context */
body .ui-datepicker {
    background: #111111 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
    padding: 12px !important;
    font-family: 'Outfit', -apple-system, sans-serif !important;
    z-index: 999999 !important;
}
body .ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 12px !important;
}
body .ui-datepicker-title {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
}
body .ui-datepicker-prev,
body .ui-datepicker-next {
    cursor: pointer !important;
    top: 8px !important;
}
body .ui-datepicker-prev span,
body .ui-datepicker-next span {
    display: none !important;
}
body .ui-datepicker-prev::after {
    content: '‹' !important;
    color: rgba(255,255,255,0.5) !important;
    font-size: 22px !important;
}
body .ui-datepicker-next::after {
    content: '›' !important;
    color: rgba(255,255,255,0.5) !important;
    font-size: 22px !important;
}
body .ui-datepicker th {
    color: rgba(255,255,255,0.3) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 6px 0 !important;
}
body .ui-datepicker td {
    padding: 2px !important;
}
body .ui-datepicker td a,
body .ui-datepicker td span {
    color: rgba(255,255,255,0.7) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    text-align: center !important;
    padding: 6px !important;
    font-size: 13px !important;
    transition: all 0.2s !important;
}
body .ui-datepicker td a:hover {
    background: rgba(235,124,22,0.15) !important;
    color: #eb7c16 !important;
}
body .ui-datepicker td .ui-state-active {
    background: #eb7c16 !important;
    color: #ffffff !important;
}
body .ui-datepicker td .ui-state-disabled span {
    color: rgba(255,255,255,0.15) !important;
}


/* ═══════════════════════════════════════════
   6. BODY PADDING COMPENSATION
   ═══════════════════════════════════════════ */

body {
    padding-bottom: 72px !important;
}
@media (max-width: 768px) {
    body {
        padding-bottom: 56px !important;
    }
    body.moto-bar-expanded-body {
        padding-bottom: 230px !important;
    }
}