/* Shared responsive/UI CSS extracted from stepbystep_step1/2/3/5.twig - keep in sync across all steps. */

/* Hero card (.atsUxWrap) margin fix - shared step-progress/header spacing rule */
@media only screen and (max-width: 1280px) {
    .container>.user-localisation+.logo-holder+.user-localisation+div {
        margin-bottom: 0 !important;
    }
}

/* Steps 2/3/5 hide the hero card entirely (only Step 1 shows it) */
.atsUxWrap {
    display: none;
}

/* The Zurück/Reset/Weiter buttons move into the mobile action bar on every step
   (step2/3.twig date form, search.twig vehicle-selection/Step5/Step6) - hide
   their original inline spot. Centralized here (not duplicated per-file) since
   the per-file copies of this rule have regressed/been lost multiple times. */
@media only screen and (max-width: 767px) {
    .step-navigation {
        display: none !important;
    }
}

/* The "Zurück" button next to the vehicle-selection/Step5/Step6 shared heading
   (.vehicle-selection-header) stays visible across all steps since it's rendered
   once outside .step-navigation - hidden on mobile, where the fixed bottom
   action bar's own Zurück button already covers this. */
@media only screen and (max-width: 767px) {
    .vehicle-selection-back-btn {
        display: none !important;
    }

    /* With the back button gone, its balancing spacer div would otherwise leave
       .vehicle-selection-heading-text off-center (its text-align:center then
       centers within a shrunk, lopsided box) - drop the spacer and let the
       heading take the full row width. */
    .vehicle-selection-header-spacer {
        display: none !important;
    }

    .vehicle-selection-heading-text {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* Mobile fixed bottom action bar: WhatsApp button + Zurück/Weiter button slot(s) */
.mobile-action-bar {
    display: none;
}

@media only screen and (max-width: 767px) {
    .mobile-action-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        height: 60px;
        background: #ffffff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    .mobile-action-bar-back-slot,
    .mobile-action-bar-continue-slot {
        display: flex;
        align-items: stretch;
    }

    /* Default (no Zurück button): WhatsApp 25% + Weiter 75% */
    .mobile-action-bar-continue-slot {
        flex: 0 0 75%;
        max-width: 75%;
    }

    /* No Weiter button yet - collapse the empty slot so WhatsApp takes the full width */
    .mobile-action-bar-continue-slot:empty {
        display: none;
    }

    .mobile-action-bar-continue-slot:empty~.mobile-action-bar-whatsapp {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Bar has a Zurück button (Step 2+): Zurück 25% + Weiter 50% + WhatsApp 25% */
    .mobile-action-bar-back-slot {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .mobile-action-bar.has-back .mobile-action-bar-continue-slot {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Bar has Zurück + Reset (Step 3): Zurück 20% + Reset 20% + Weiter 40% + WhatsApp 20%, icons only */
    .mobile-action-bar-reset-slot {
        display: flex;
        align-items: stretch;
        flex: 0 0 20%;
        max-width: 20%;
    }

    /* Reset button removed (e.g. vehicle-selection screen) - collapse the slot
       instead of reserving its width, so has-back's 25/50/25 split applies cleanly */
    .mobile-action-bar-reset-slot:empty {
        display: none;
        flex: 0;
        max-width: 0;
        border-right: none;
    }

    .mobile-action-bar.has-reset .mobile-action-bar-back-slot,
    .mobile-action-bar.has-reset .mobile-action-bar-whatsapp {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .mobile-action-bar.has-reset .mobile-action-bar-continue-slot {
        flex: 0 0 40%;
        max-width: 40%;
    }

    /* Flat, borderless segments with a thin divider between them (no individual button chrome) */
    .mobile-action-bar-back-slot,
    .mobile-action-bar-reset-slot {
        border-right: 1px solid #e5e7eb;
    }

    .mobile-action-bar-back-slot .btn-back,
    .mobile-action-bar-reset-slot .calendar-reset-btn,
    .mobile-action-bar-continue-slot .btn-continue {
        width: 100%;
        height: 100%;
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        transform: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-action-bar-back-slot .btn-back {
        background: #ffffff;
        color: #1e40af;
    }

    .mobile-action-bar-reset-slot .calendar-reset-btn {
        background: #ffffff;
        color: #dc2626;
    }

    /* Icon-only Zurück/Reset inside the mobile bar - hide their text labels */
    .mobile-action-bar-back-slot .btn-label,
    .mobile-action-bar-reset-slot .calendar-reset-btn span {
        display: none;
    }

    .mobile-action-bar-back-slot svg,
    .mobile-action-bar-reset-slot svg {
        width: 20px;
        height: 20px;
    }

    .mobile-action-bar-whatsapp {
        flex: 0 0 25%;
        max-width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #25D366;
        text-decoration: none;
        padding: 12px 0;
    }

    .mobile-action-bar-whatsapp svg {
        width: 28px;
        height: 28px;
    }

    .mobile-action-bar-whatsapp .wa-mark {
        fill: #ffffff;
    }

    /* Leave room at the bottom of the page so content isn't hidden behind the fixed bar */
    body {
        padding-bottom: 72px;
    }
}