/* ═══════════════════════════════════════════════════════════════
   Maverick Rental Booking — Frontend CSS v3.2.0
   Design-token system driven by 2 admin colors (Main + Accent) +
   radius + font. All other tokens are computed automatically by
   MRB_Settings::generate_css() from those four values. See
   section 1 for the full token list.
═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────────
   Every value below is a CSS custom property with a fallback that
   matches the plugin's own default palette (Orange #F97316 /
   Charcoal #374151). Nothing here is a fixed, final value: on the
   frontend, MRB_Settings::generate_css() (see class-mrb-form.php)
   writes a second, identical-shape block using the admin's actual
   saved settings, attached right after this stylesheet, which
   overrides every one of these fallbacks. That is the entire
   styling system — one set of names, defined once here as safe
   defaults and once more (dynamically) from the database. No
   component rule below ever hardcodes a color, radius, shadow, or
   font of its own. */
[id^="mrb"] {
    --mrb-primary:            #F97316;
    --mrb-primary-rgb:        249,115,22;
    --mrb-secondary:          #374151;
    --mrb-secondary-rgb:      55,65,81;
    --mrb-accent:             #FB923C;
    --mrb-accent-rgb:         251,146,60;
    --mrb-bg:                 #F3F4F6;
    --mrb-card-bg:            #FFFFFF;
    --mrb-input-bg:           #FFFFFF;
    --mrb-input-border:       #D1D5DB;
    --mrb-text:               #111827;
    --mrb-text-secondary:     #6B7280;
    --mrb-button-bg:          #F97316;
    --mrb-button-hover-bg:    #EA580C;
    --mrb-button-text:        #FFFFFF;
    --mrb-button-text-rgb:    255,255,255;
    --mrb-label-color:        #374151;
    --mrb-placeholder-color:  #9CA3AF;
    --mrb-input-focus-color:  #F97316;
    --mrb-input-focus-color-rgb: 249,115,22;
    --mrb-input-focus-border: #F97316;
    --mrb-radius:             10px;
    --mrb-font-size-base:     14px;
    --mrb-font:               'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mrb-heading-font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mrb-button-padding:     14px 28px;
    --mrb-shadow:             0 8px 24px rgba(17,24,39,0.08);

    /* ── Derived tokens — computed from the settings above so the
       rest of the stylesheet never needs a second source of truth
       or a hardcoded literal of its own. */
    --mrb-border:      rgba(var(--mrb-secondary-rgb), 0.14);
    --mrb-border-2:    rgba(var(--mrb-secondary-rgb), 0.24);
    --mrb-accent-10:   rgba(var(--mrb-accent-rgb), 0.10);
    --mrb-accent-18:   rgba(var(--mrb-accent-rgb), 0.18);
    --mrb-accent-40:   rgba(var(--mrb-accent-rgb), 0.40);
    --mrb-radius-lg:   calc(var(--mrb-radius) + 6px);
    --mrb-radius-md:   calc(var(--mrb-radius) - 2px);
    --mrb-radius-sm:   max(3px, calc(var(--mrb-radius) - 5px));
    --mrb-control-h:   46px;

    /* System/semantic colors — success & error states, and the
       WhatsApp brand mark. These are intentionally NOT exposed as
       admin settings: green/red carry a universal, fixed meaning
       (success / validation error) and the WhatsApp swatch is a
       third-party brand mark that has to stay recognizable no
       matter which palette the site picks — the same reason a
       "share on Facebook" button keeps Facebook's own blue. They
       are still centralized here as single-source tokens rather
       than literals scattered through the component rules below. */
    --mrb-ok:            #4ade80;
    --mrb-ok-10:         rgba(74,222,128,0.10);
    --mrb-ok-contrast:   #06210f;
    --mrb-err:           #f87171;
    --mrb-whatsapp-bg:   #25d366;
    --mrb-whatsapp-text: #ffffff;

    display: block;
    position: relative;
    z-index: 100;
    font-family: var(--mrb-font);
    font-size: var(--mrb-font-size-base);
    color: var(--mrb-text);
    max-width: 720px;
    margin: 24px auto 64px;
    box-sizing: border-box;
}

[id^="mrb"] * { box-sizing: border-box; }

/* ── 2. GLOBAL RESET ──────────────────────────────────────────── */
[id^="mrb"] div,
[id^="mrb"] span,
[id^="mrb"] p,
[id^="mrb"] ul,
[id^="mrb"] li,
[id^="mrb"] h1,
[id^="mrb"] h2,
[id^="mrb"] h3,
[id^="mrb"] h4,
[id^="mrb"] label,
[id^="mrb"] input,
[id^="mrb"] select,
[id^="mrb"] textarea,
[id^="mrb"] button,
[id^="mrb"] a,
[id^="mrb"] form {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    list-style: none !important;
    float: none !important;
    line-height: normal !important;
    text-decoration: none !important;
    font-weight: normal !important;
}
/* Every intentional margin/padding/border/font-weight in this
   stylesheet from here on is declared with !important at equal or
   higher specificity than the plain-element selectors above, so it
   still applies correctly — this block only exists to guarantee no
   theme default (a global "label { margin-bottom: 8px }" or
   "input { margin: 0 0 1em }" rule, which is extremely common) can
   ever leak through and silently throw off the form's spacing
   rhythm, the way it was doing before this fix. */

/* ═══ 3. VEHICLE CARD — shares tokens with form card below ═══ */
[id^="mrb"] .mrb-car {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    background: var(--mrb-card-bg) !important;
    border: 1px solid var(--mrb-border) !important;
    border-radius: var(--mrb-radius-lg) !important;
    box-shadow: var(--mrb-shadow) !important;
    padding: 18px 22px !important;
    margin-bottom: 20px !important;
}
[id^="mrb"] .mrb-car-img {
    width: 150px !important;
    height: 96px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    border-radius: var(--mrb-radius-sm) !important;
}
[id^="mrb"] .mrb-car-info {
    flex: 1 !important;
    min-width: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
[id^="mrb"] .mrb-car-cat {
    font-size: calc(var(--mrb-font-size-base) * 0.75) !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: var(--mrb-accent) !important;
    font-weight: 600 !important;
}
[id^="mrb"] .mrb-car-name {
    font-size: calc(var(--mrb-font-size-base) * 1.429) !important;
    font-weight: 700 !important;
    font-family: var(--mrb-heading-font) !important;
    color: var(--mrb-text) !important;
    line-height: 1.2 !important;
}
[id^="mrb"] .mrb-car-price-line {
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
}
[id^="mrb"] .mrb-price-big {
    font-size: calc(var(--mrb-font-size-base) * 1.357) !important;
    font-weight: 700 !important;
    color: var(--mrb-accent) !important;
}
[id^="mrb"] .mrb-price-unit {
    font-size: calc(var(--mrb-font-size-base) * 0.857) !important;
    color: var(--mrb-text-secondary) !important;
}
[id^="mrb"] .mrb-car-features {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 2px !important;
}
[id^="mrb"] .mrb-feat {
    font-size: calc(var(--mrb-font-size-base) * 0.786) !important;
    color: var(--mrb-text-secondary) !important;
    background: var(--mrb-input-bg) !important;
    border: 1px solid var(--mrb-border) !important;
    border-radius: var(--mrb-radius-sm) !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
}
[id^="mrb"] .mrb-days-box {
    background: var(--mrb-accent-10) !important;
    border: 1px solid var(--mrb-accent-40) !important;
    border-radius: var(--mrb-radius-md) !important;
    padding: 12px 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    min-width: 88px !important;
}
[id^="mrb"] .mrb-days-num {
    font-size: calc(var(--mrb-font-size-base) * 2) !important;
    font-weight: 700 !important;
    color: var(--mrb-accent) !important;
    line-height: 1 !important;
    display: block !important;
}
[id^="mrb"] .mrb-days-lbl {
    font-size: calc(var(--mrb-font-size-base) * 0.786) !important;
    color: var(--mrb-text-secondary) !important;
    display: block !important;
    margin-top: 2px !important;
}
[id^="mrb"] .mrb-days-total {
    font-size: calc(var(--mrb-font-size-base) * 0.857) !important;
    font-weight: 700 !important;
    color: var(--mrb-accent) !important;
    display: block !important;
    margin-top: 5px !important;
}

/* ═══ 3a. MOBILE VEHICLE CARD ═══
   Desktop keeps the horizontal row above untouched. Below 600px,
   the same three elements (image / info / days-box) are only
   re-positioned with CSS grid — no markup changes, no changes to
   the days-box's own styling — into a compact layout:
     [img]              ┐
     Name                ├ days-box (unchanged, same style as desktop)
     Price / day        ┘
   The image stays a modest, fixed-size thumbnail — it never grows
   to dominate the card. */
@media (max-width: 600px) {
    [id^="mrb"] .mrb-car {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas: "img days" "info days" !important;
        align-items: start !important;
        column-gap: 14px !important;
        row-gap: 8px !important;
        padding: 16px !important;
    }
    [id^="mrb"] .mrb-car-img {
        grid-area: img !important;
        width: 132px !important;
        height: 88px !important;
        object-fit: contain !important;
        background: var(--mrb-bg) !important;
        border: 1px solid var(--mrb-border) !important;
        justify-self: start !important;
        margin: 0 !important;
    }
    [id^="mrb"] .mrb-car-info {
        grid-area: info !important;
        min-width: 0 !important;
    }
    [id^="mrb"] .mrb-car-name {
        font-size: calc(var(--mrb-font-size-base) * 1.286) !important;
    }
    [id^="mrb"] .mrb-days-box {
        grid-area: days !important;
        align-self: center !important;
        min-width: 0 !important;
        max-width: 130px !important;
    }
    [id^="mrb"] .mrb-days-num {
        font-size: calc(var(--mrb-font-size-base) * 1.714) !important;
    }
}

/* ═══ 3b. FORM HEADER — badge / title / subtitle ═══
   Lives as the first child inside .mrb-card, above the step nav —
   so it needs its own top padding/rounding rather than the
   standalone spacing it had when it sat outside the card. */
[id^="mrb"] .mrb-head {
    text-align: center !important;
    padding: 28px 24px 24px !important;
    border-bottom: 1px solid var(--mrb-border) !important;
    position: relative !important;
    z-index: 2 !important;
}
[id^="mrb"] .mrb-badge {
    display: inline-block !important;
    background: var(--mrb-accent-10) !important;
    color: var(--mrb-accent) !important;
    border: 1px solid var(--mrb-accent-18) !important;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    font-size: calc(var(--mrb-font-size-base) * 0.786) !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}
[id^="mrb"] .mrb-title {
    font-family: var(--mrb-heading-font) !important;
    font-size: calc(var(--mrb-font-size-base) * 1.714) !important;
    font-weight: 700 !important;
    color: var(--mrb-text) !important;
    margin: 0 0 6px !important;
    line-height: 1.25 !important;
}
[id^="mrb"] .mrb-subtitle {
    font-size: calc(var(--mrb-font-size-base) * 1.036) !important;
    color: var(--mrb-text-secondary) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
@media (max-width: 600px) {
    [id^="mrb"] .mrb-head { padding: 22px 20px 20px !important; }
    [id^="mrb"] .mrb-title { font-size: calc(var(--mrb-font-size-base) * 1.5) !important; }
    [id^="mrb"] .mrb-subtitle { font-size: calc(var(--mrb-font-size-base) * 0.929) !important; }
}

/* ═══ 4. FORM CARD — same tokens as vehicle card above ═══ */
[id^="mrb"] .mrb-card {
    background: var(--mrb-card-bg) !important;
    border: 1px solid var(--mrb-border) !important;
    border-radius: var(--mrb-radius-lg) !important;
    box-shadow: var(--mrb-shadow) !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 100 !important;
}

/* ═══ 5. STEP NAVIGATION — fixed geometry, every state ═══ */
[id^="mrb"] .mrb-steps {
    display: flex !important;
    background: var(--mrb-bg) !important;
    border-bottom: 1px solid var(--mrb-border) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
}
[id^="mrb"] .mrb-card > *:first-child {
    border-top-left-radius: var(--mrb-radius-lg) !important;
    border-top-right-radius: var(--mrb-radius-lg) !important;
}
[id^="mrb"] .mrb-stp {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px 6px !important;
    font-size: calc(var(--mrb-font-size-base) * 0.786) !important;
    font-weight: 600 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: var(--mrb-text-secondary) !important;
    position: relative !important;
    cursor: default !important;
    transition: color .25s ease !important;
    white-space: nowrap !important;
}
[id^="mrb"] .mrb-stp::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: var(--mrb-accent) !important;
    transform: scaleX(0) !important;
    transition: transform .3s ease !important;
}
[id^="mrb"] .mrb-stp.on  { color: var(--mrb-accent) !important; }
[id^="mrb"] .mrb-stp.on::after { transform: scaleX(1) !important; }
[id^="mrb"] .mrb-stp.dn  { color: var(--mrb-accent) !important; }

[id^="mrb"] .mrb-nn {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 50% !important;
    border: 1.5px solid currentColor !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: calc(var(--mrb-font-size-base) * 0.714) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    transition: background .25s ease, border-color .25s ease !important;
}
[id^="mrb"] .mrb-stp.dn .mrb-nn {
    background: var(--mrb-accent) !important;
    border-color: var(--mrb-accent) !important;
    color: var(--mrb-button-text) !important;
}
[id^="mrb"] .mrb-stp.dn .mrb-nn::before {
    content: '\2713' !important;
    font-size: calc(var(--mrb-font-size-base) * 0.786) !important;
    line-height: 1 !important;
}
[id^="mrb"] .mrb-stp.dn .mrb-nn > * { display: none !important; }

[id^="mrb"] .mrb-nl {
    display: none !important;
    font-size: calc(var(--mrb-font-size-base) * 0.786) !important;
    letter-spacing: .05em !important;
}
@media (min-width: 480px) {
    [id^="mrb"] .mrb-nl { display: inline !important; }
}

/* ── Panels ─────────────────────────────────────────────────── */
[id^="mrb"] .mrb-pnl {
    display: none !important;
    padding: 26px 24px !important;
}
[id^="mrb"] .mrb-pnl.on {
    display: block !important;
    animation: mrbIn .25s ease !important;
}
@keyframes mrbIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
    [id^="mrb"] .mrb-pnl { padding: 20px 16px !important; }
}
[id^="mrb"] .mrb-pt {
    font-size: calc(var(--mrb-font-size-base) * 1.143) !important;
    font-weight: 700 !important;
    font-family: var(--mrb-heading-font) !important;
    color: var(--mrb-text) !important;
    margin: 0 0 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--mrb-border) !important;
    display: block !important;
}
[id^="mrb"] .mrb-pt small {
    display: block !important;
    font-size: calc(var(--mrb-font-size-base) * 0.857) !important;
    font-weight: 400 !important;
    color: var(--mrb-text-secondary) !important;
    margin-top: 3px !important;
}

/* ═══ 6. GRID SYSTEM ═══ */
[id^="mrb"] .g2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: start !important;
}
[id^="mrb"] .g1 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}
@media (max-width: 520px) {
    [id^="mrb"] .g2 { grid-template-columns: 1fr !important; }
}
[id^="mrb"] .mrb-pnl > .g2,
[id^="mrb"] .mrb-pnl > .g1 {
    margin-bottom: 8px !important;
}
[id^="mrb"] .mrb-pnl > .g2:last-of-type,
[id^="mrb"] .mrb-pnl > .g1:last-of-type {
    margin-bottom: 0 !important;
}

[id^="mrb"] .mf {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 200 !important;
}
[id^="mrb"] .mf > label {
    font-size: calc(var(--mrb-font-size-base) * 0.786) !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--mrb-label-color) !important;
    display: block !important;
    line-height: 1.3 !important;
}
[id^="mrb"] .mf > label .rq {
    color: var(--mrb-accent) !important;
    margin-left: 2px !important;
    font-weight: 700 !important;
}

/* ═══ 7. UNIFIED CONTROL HEIGHT ═══
   min-height/min-width are added as a hard fallback: if the
   --mrb-control-h custom property is ever read as unresolved
   during a layout reflow (the cause of the invisible-select
   regression in v3.0.0), the element still keeps a real box. */
[id^="mrb"] .mf input,
[id^="mrb"] .mf select {
    display: block !important;
    width: 100% !important;
    min-width: 60px !important;
    height: var(--mrb-control-h) !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    background: var(--mrb-input-bg) !important;
    border: 1px solid var(--mrb-input-border) !important;
    border-radius: var(--mrb-radius-sm) !important;
    color: var(--mrb-text) !important;
    font-size: calc(var(--mrb-font-size-base) * 1.036) !important;
    font-family: inherit !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    line-height: var(--mrb-control-h) !important;
    box-shadow: none !important;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
}
[id^="mrb"] .mf input[type="text"],
[id^="mrb"] .mf input[type="tel"],
[id^="mrb"] .mf input[type="email"] {
    cursor: text !important;
}
[id^="mrb"] .mf input[type="date"] {
    cursor: text !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
}
[id^="mrb"] .mf input[type="date"]::-webkit-datetime-edit { line-height: var(--mrb-control-h) !important; }
[id^="mrb"] .mf input[type="date"]::-webkit-inner-spin-button { display: none !important; }
[id^="mrb"] .mf input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(.5) !important;
    cursor: pointer !important;
    opacity: .8 !important;
}
[id^="mrb"] .mf input:focus,
[id^="mrb"] .mf select:focus {
    border-color: var(--mrb-input-focus-border) !important;
    box-shadow: 0 0 0 3px rgba(var(--mrb-input-focus-color-rgb), 0.18) !important;
}
[id^="mrb"] .mf input.er,
[id^="mrb"] .mf select.er {
    border-color: var(--mrb-err) !important;
}
[id^="mrb"] .mf textarea {
    display: block !important;
    width: 100% !important;
    min-height: 86px !important;
    padding: 12px 14px !important;
    background: var(--mrb-input-bg) !important;
    border: 1px solid var(--mrb-input-border) !important;
    border-radius: var(--mrb-radius-sm) !important;
    color: var(--mrb-text) !important;
    font-size: calc(var(--mrb-font-size-base) * 1.036) !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    outline: none !important;
    resize: vertical !important;
    cursor: text !important;
}
[id^="mrb"] .mf textarea:focus {
    border-color: var(--mrb-input-focus-border) !important;
    box-shadow: 0 0 0 3px rgba(var(--mrb-input-focus-color-rgb), 0.18) !important;
}
[id^="mrb"] .mf input::placeholder,
[id^="mrb"] .mf textarea::placeholder {
    color: var(--mrb-placeholder-color) !important;
    opacity: 1 !important;
}
[id^="mrb"] .mf select option {
    background: var(--mrb-input-bg) !important;
    color: var(--mrb-text) !important;
}

[id^="mrb"] .sw { position: relative !important; z-index: 200 !important; }
[id^="mrb"] .sw::after {
    content: '' !important;
    position: absolute !important;
    right: 14px !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: 5px solid var(--mrb-text-secondary) !important;
    pointer-events: none !important;
}
[id^="mrb"] .sw select { padding-right: 34px !important; }

/* ── Phone number — unified input group ─────────────────────────
   Uses the exact same height technique as every other field in
   this form (var(--mrb-control-h) set as BOTH height and
   line-height together — see section 7 above) instead of a
   percentage height, which is what caused the clipped/misaligned
   render: percentage heights on flex children don't reliably
   resolve the same way across themes/browsers, especially once a
   parent theme's own CSS is in the cascade. Giving both the select
   and the input the identical, explicit, already-proven sizing
   rule guarantees they end up pixel-identical. */
[id^="mrb"] .phone-row {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    background: var(--mrb-input-bg) !important;
    border: 1px solid var(--mrb-input-border) !important;
    border-radius: var(--mrb-radius-sm) !important;
    overflow: hidden !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
[id^="mrb"] .phone-row:focus-within {
    border-color: var(--mrb-input-focus-border) !important;
    box-shadow: 0 0 0 3px rgba(var(--mrb-input-focus-color-rgb), 0.18) !important;
}
[id^="mrb"] .phone-row .sw-cc {
    position: relative !important;
    flex: 0 0 92px !important;
    width: 92px !important;
    margin: 0 !important;
    border-right: 1px solid var(--mrb-input-border) !important;
}
[id^="mrb"] .phone-row .sw-cc select {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: var(--mrb-control-h) !important;
    min-height: 44px !important;
    max-height: var(--mrb-control-h) !important;
    line-height: var(--mrb-control-h) !important;
    margin: 0 !important;
    padding: 0 20px 0 12px !important;
    font-size: calc(var(--mrb-font-size-base) * 0.929) !important;
    font-family: inherit !important;
    color: var(--mrb-text) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
}
[id^="mrb"] .phone-row .sw-cc::after {
    content: '' !important;
    position: absolute !important;
    right: 10px !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: 5px solid var(--mrb-text-secondary) !important;
    pointer-events: none !important;
    z-index: 201 !important;
}
[id^="mrb"] .phone-row .phone-input {
    box-sizing: border-box !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: var(--mrb-control-h) !important;
    min-height: 44px !important;
    max-height: var(--mrb-control-h) !important;
    line-height: var(--mrb-control-h) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: calc(var(--mrb-font-size-base) * 0.929) !important;
    font-family: inherit !important;
    color: var(--mrb-text) !important;
    outline: none !important;
    vertical-align: middle !important;
}
[id^="mrb"] .phone-row .phone-input:focus {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* Note: the country-code selector's width is set inline (with
   clamp()) directly on the element in templates/form.php so it can
   scale fluidly with viewport width while still guaranteeing it
   beats any theme CSS — a stylesheet media query here could never
   override an inline style anyway, so responsiveness for this one
   element lives in the template, not here. */

[id^="mrb"] .em {
    position: absolute !important;
    bottom: -20px !important;
    left: 0 !important;
    font-size: calc(var(--mrb-font-size-base) * 0.786) !important;
    color: var(--mrb-err) !important;
    display: none !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}
[id^="mrb"] .mf.he .em { display: block !important; }

/* ═══ 8. SEXE SELECTOR — sleek pills, same height as everything ═══ */
[id^="mrb"] .rg {
    display: flex !important;
    gap: 8px !important;
    height: var(--mrb-control-h) !important;
}
@media (max-width: 340px) {
    [id^="mrb"] .rg { flex-direction: column !important; height: auto !important; }
    [id^="mrb"] .ro { width: 100% !important; }
}
[id^="mrb"] .ro {
    flex: 1 !important;
    height: var(--mrb-control-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    background: var(--mrb-input-bg) !important;
    border: 1px solid var(--mrb-border-2) !important;
    border-radius: var(--mrb-radius-sm) !important;
    cursor: pointer !important;
    font-size: calc(var(--mrb-font-size-base) * 0.929) !important;
    font-weight: 500 !important;
    color: var(--mrb-text-secondary) !important;
    transition: all .2s ease !important;
    user-select: none !important;
}
[id^="mrb"] .ro input { display: none !important; }
[id^="mrb"] .ro.sel {
    border-color: var(--mrb-accent-40) !important;
    color: var(--mrb-accent) !important;
    background: var(--mrb-accent-10) !important;
}
[id^="mrb"] .rd {
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    border: 1.5px solid currentColor !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
[id^="mrb"] .ro.sel .rd::after {
    content: '' !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--mrb-accent) !important;
}

/* ── Divider ────────────────────────────────────────────────── */
[id^="mrb"] .dv {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 24px 0 16px !important;
}
[id^="mrb"] .dv span {
    font-size: calc(var(--mrb-font-size-base) * 0.75) !important;
    color: var(--mrb-text-secondary) !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 600 !important;
}
[id^="mrb"] .dl { flex: 1 !important; height: 1px !important; background: var(--mrb-border) !important; }

/* ── Summary box ────────────────────────────────────────────── */
[id^="mrb"] .sb {
    background: var(--mrb-input-bg) !important;
    border: 1px solid var(--mrb-border) !important;
    border-radius: var(--mrb-radius-md) !important;
    padding: 18px !important;
    margin-bottom: 16px !important;
}
[id^="mrb"] .sb h4 {
    font-size: calc(var(--mrb-font-size-base) * 0.75) !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--mrb-accent) !important;
    margin-bottom: 14px !important;
}
[id^="mrb"] .sg {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}
@media (max-width: 480px) {
    [id^="mrb"] .sg { grid-template-columns: 1fr !important; }
}
[id^="mrb"] .si .sl {
    font-size: calc(var(--mrb-font-size-base) * 0.75) !important;
    color: var(--mrb-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin-bottom: 3px !important;
    display: block !important;
}
[id^="mrb"] .si .sv {
    font-size: calc(var(--mrb-font-size-base) * 0.964) !important;
    color: var(--mrb-text) !important;
    font-weight: 600 !important;
    display: block !important;
}

[id^="mrb"] .sb-price-block {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px dashed var(--mrb-border-2) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}
[id^="mrb"] .sb-price-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 10px !important;
}
[id^="mrb"] .sb-price-label { font-size: calc(var(--mrb-font-size-base) * 0.929) !important; color: var(--mrb-text-secondary) !important; flex: 1 !important; }
[id^="mrb"] .sb-price-sub   { font-size: calc(var(--mrb-font-size-base) * 0.786) !important; color: var(--mrb-text-secondary) !important; font-weight: 400 !important; }
[id^="mrb"] .sb-price-val   { font-size: var(--mrb-font-size-base) !important; font-weight: 700 !important; color: var(--mrb-text) !important; white-space: nowrap !important; }
[id^="mrb"] .sb-price-caution .sb-price-label,
[id^="mrb"] .sb-price-caution .sb-price-val { color: var(--mrb-text-secondary) !important; font-weight: 500 !important; }
[id^="mrb"] .sb-price-grand {
    margin-top: 5px !important;
    padding-top: 11px !important;
    border-top: 1px solid var(--mrb-border-2) !important;
}
[id^="mrb"] .sb-price-grand .sb-price-label { font-size: calc(var(--mrb-font-size-base) * 0.964) !important; font-weight: 700 !important; color: var(--mrb-text) !important; }
[id^="mrb"] .sb-price-grand .sb-price-val   { font-size: calc(var(--mrb-font-size-base) * 1.357) !important; font-weight: 700 !important; color: var(--mrb-accent) !important; }

[id^="mrb"] .rp-hint {
    display: none;
    font-size: calc(var(--mrb-font-size-base) * 0.857) !important;
    color: var(--mrb-accent) !important;
    margin-top: 10px !important;
    padding: 9px 13px !important;
    background: var(--mrb-accent-10) !important;
    border-radius: var(--mrb-radius-sm) !important;
    line-height: 1.4 !important;
}

[id^="mrb"] .mrb-terms {
    background: var(--mrb-accent-10) !important;
    border: 1px solid var(--mrb-accent-18) !important;
    border-radius: var(--mrb-radius-sm) !important;
    padding: 13px 16px !important;
    margin: 16px 0 !important;
    font-size: calc(var(--mrb-font-size-base) * 0.893) !important;
    color: var(--mrb-text-secondary) !important;
    line-height: 1.5 !important;
    display: block !important;
}
[id^="mrb"] .mrb-terms a {
    color: var(--mrb-accent) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    transition: filter .2s ease !important;
}
[id^="mrb"] .mrb-terms a:hover { filter: brightness(0.85) !important; }

/* ── Nav / buttons ──────────────────────────────────────────── */
[id^="mrb"] .nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 22px !important;
    gap: 10px !important;
    max-width: 100% !important;
}
[id^="mrb"] button.mb-g,
[id^="mrb"] .mb.mb-g {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: var(--mrb-control-h) !important;
    padding: 0 20px !important;
    background: transparent !important;
    border: 1px solid var(--mrb-border-2) !important;
    border-radius: var(--mrb-radius-sm) !important;
    color: var(--mrb-text-secondary) !important;
    font-size: calc(var(--mrb-font-size-base) * 0.929) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
[id^="mrb"] button.mb-g:hover,
[id^="mrb"] .mb.mb-g:hover {
    border-color: var(--mrb-border-2) !important;
    color: var(--mrb-text) !important;
}
[id^="mrb"] button.mb-p,
[id^="mrb"] .mb.mb-p {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 50px !important;
    padding: var(--mrb-button-padding) !important;
    background: var(--mrb-button-bg) !important;
    border-radius: var(--mrb-radius-sm) !important;
    color: var(--mrb-button-text) !important;
    font-size: calc(var(--mrb-font-size-base) * 1.036) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .2s ease, transform .15s ease !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
@media (max-width: 600px) {
    [id^="mrb"] .nav {
        justify-content: center !important;
        gap: 12px !important;
    }
    [id^="mrb"] button.mb-g,
    [id^="mrb"] .mb.mb-g {
        flex: 0 0 auto !important;
        padding: 0 16px !important;
    }
    [id^="mrb"] button.mb-p,
    [id^="mrb"] .mb.mb-p {
        flex: 0 1 auto !important;
        min-height: 48px !important;
        padding: 13px 26px !important;
        white-space: nowrap !important;
    }
}
@media (max-width: 360px) {
    [id^="mrb"] button.mb-g,
    [id^="mrb"] .mb.mb-g {
        padding: 0 12px !important;
    }
    [id^="mrb"] button.mb-p,
    [id^="mrb"] .mb.mb-p {
        padding: 13px 16px !important;
        font-size: calc(var(--mrb-font-size-base) * 0.929) !important;
    }
}
[id^="mrb"] button.mb-p:hover,
[id^="mrb"] .mb.mb-p:hover {
    background: var(--mrb-button-hover-bg) !important;
    transform: translateY(-1px) !important;
}
[id^="mrb"] button.mb-p:active,
[id^="mrb"] .mb.mb-p:active { transform: none !important; }
[id^="mrb"] button.mb-p:disabled,
[id^="mrb"] .mb.mb-p:disabled { opacity: .5 !important; cursor: not-allowed !important; transform: none !important; }

[id^="mrb"] .sp {
    width: 16px !important; height: 16px !important;
    border: 2px solid rgba(var(--mrb-button-text-rgb, 255,255,255), 0.3) !important;
    border-top-color: var(--mrb-button-text) !important;
    border-radius: 50% !important;
    animation: mrbSpin .6s linear infinite !important;
    display: none !important;
}
@keyframes mrbSpin { to { transform: rotate(360deg); } }
[id^="mrb"] .mb-p.ld .sp { display: block !important; }
[id^="mrb"] .mb-p.ld .bt { display: none !important; }

/* ── Success screen ─────────────────────────────────────────── */
[id^="mrb"] .ms {
    display: none !important;
    padding: 50px 26px !important;
    text-align: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
}
[id^="mrb"] .ms.on { display: flex !important; animation: mrbIn .4s ease !important; }
[id^="mrb"] .ms-ic {
    width: 70px !important; height: 70px !important;
    border-radius: 50% !important;
    background: var(--mrb-ok-10) !important;
    border: 2px solid var(--mrb-ok) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: calc(var(--mrb-font-size-base) * 2.143) !important;
    color: var(--mrb-ok) !important;
}
[id^="mrb"] .ms h3 { font-size: calc(var(--mrb-font-size-base) * 1.5) !important; font-weight: 700 !important; font-family: var(--mrb-heading-font) !important; color: var(--mrb-text) !important; }
[id^="mrb"] .ms p  { color: var(--mrb-text-secondary) !important; font-size: calc(var(--mrb-font-size-base) * 1.036) !important; max-width: 400px !important; line-height: 1.7 !important; }
[id^="mrb"] .ms-ref {
    display: inline-block !important;
    background: var(--mrb-input-bg) !important;
    border: 1px solid var(--mrb-border) !important;
    border-radius: var(--mrb-radius-sm) !important;
    padding: 8px 20px !important;
    font-size: calc(var(--mrb-font-size-base) * 0.964) !important;
    font-weight: 700 !important;
    color: var(--mrb-accent) !important;
    letter-spacing: .07em !important;
}
[id^="mrb"] .ms-wa {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--mrb-whatsapp-bg) !important;
    color: var(--mrb-whatsapp-text) !important;
    height: 50px !important;
    padding: 0 26px !important;
    border-radius: var(--mrb-radius-sm) !important;
    font-size: calc(var(--mrb-font-size-base) * 1.036) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: filter .2s ease !important;
}
[id^="mrb"] .ms-wa:hover { filter: brightness(1.08) !important; }
[id^="mrb"] .ms-wa svg { width: 21px !important; height: 21px !important; fill: var(--mrb-whatsapp-text) !important; }
[id^="mrb"] .ms-ph {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--mrb-input-bg) !important;
    border: 1px solid var(--mrb-border-2) !important;
    color: var(--mrb-text) !important;
    height: 44px !important;
    padding: 0 22px !important;
    border-radius: var(--mrb-radius-sm) !important;
    font-size: calc(var(--mrb-font-size-base) * 0.964) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: border-color .2s ease !important;
}
[id^="mrb"] .ms-ph:hover { border-color: var(--mrb-accent) !important; color: var(--mrb-accent) !important; }

/* ── Kill Motors overlays that interfere with our form ───────── */
.stm-rental-reservation-info,
.stm-rent-a-car-reservation-info,
.elementor-widget-stm_rental_reservation_info,
.stm-rent-info-wrap,
.stm-request-price,
.stm-rent-request-price,
.elementor-widget-stm_rent_request_price,
.stm-rent-overlay,
.stm-rental-overlay,
.stm-overlay,
#stm-rent-overlay {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
}

/* ── Global fix: <script> tags rendering as visible text ───────
   Confirmed via browser DevTools (Computed styles panel) that some
   theme/library asset on this site applies `display: block` (plus
   a full box model — width, height, line-height, margins) directly
   to the bare `script` element selector, with no scoping. Browsers
   never render <script> content visually by default; this override
   is what was making our own footer-loaded inline script data
   (mrbData) appear as plain readable text on the page, sitting right
   after the closing </footer> since that's literally where the
   <script> tag exists in the DOM.

   This rule is intentionally NOT scoped to [id^="mrb"] — the bug
   is a global one (affects every script tag the offending CSS can
   reach, not just ours), and since this stylesheet already loads
   reliably on every page where our form renders, restoring the
   correct native non-rendering behavior here is the most robust
   fix: it does not depend on identifying and patching whichever
   specific theme/library file contains the bad rule, and keeps
   working even if that file changes in a future theme update. */
script {
    display: none !important;
}