/**
 * Tour-spezifische Styles (driver.js-Overrides).
 *
 * GOALS: driver.css ist Desktop-first (Popover max-width 300px, position
 * top-right). Auf der öffentlichen `cp_detail`-Seite (Endkunden, Mobil-
 * first via QR-Scan an der Säule) bricht das Layout: Schmaler Viewport
 * (480px-Container) + Popover abgeschnitten + Touch-Targets zu klein.
 *
 * Entscheidung: eigene Klasse `cp-tour-popover` via driver.js-Option
 * `popoverClass` — erbt driver.css, überschreibt gezielt auf <=480px:
 *   - Popover über volle Bildschirmbreite, Bottom-Sheet-artig fixiert,
 *     damit Daumen/Daumenabstand ausreicht
 *   - größere Schrift für Outdoor-Lesbarkeit
 *   - 44px-Mindesthöhe für Weiter/Zurück/Fertig und Audio-Button
 *
 * Desktop bleibt via Driver-Default (nur Klassen-Namensraum isoliert).
 *
 * Achtung: Datei in `base.html` NACH `driver.css` einbinden, damit die
 * Overrides greifen.
 */

/* ===== Tour-Button (Start-Knopf) =====
   Erhöht das Touch-Target unabhängig vom Seiten-Layout. */
.ux-tour-start {
    /* WCAG 2.5.5 / Apple HIG: 44×44 Pt als Minimum für primäre Touch-Targets */
    min-height: 44px;
    padding: 10px 18px;
    font-size: 1rem;
    line-height: 1.5;
}

/* ===== Popover-Layout auf schmalen Bildschirmen ===== */
@media (max-width: 480px) {
    /* Bottom-Sheet: Popover an Unterkante pinnen, volle Breite.
       Drive.js setzt per JS position/top/left — !important nötig. */
    .driver-popover.cp-tour-popover {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
        border-radius: 12px 12px 0 0;
        /* mehr Luft für Touch-Treffer + Lesbarkeit Outdoor */
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 32px #0007;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Pfeil ausblenden — Bottom-Sheet benötigt keinen Anker-Pfeil */
    .driver-popover.cp-tour-popover .driver-popover-arrow {
        display: none;
    }

    .driver-popover.cp-tour-popover .driver-popover-title {
        font-size: 18px;
        line-height: 1.4;
    }

    .driver-popover.cp-tour-popover .driver-popover-description {
        font-size: 15px;
        line-height: 1.55;
    }

    /* Footer: Buttons vollflächig und fingerfreundlich */
    .driver-popover.cp-tour-popover .driver-popover-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 18px;
    }

    .driver-popover.cp-tour-popover .driver-popover-progress-text {
        order: -1;
        text-align: center;
        font-size: 13px;
    }

    .driver-popover.cp-tour-popover .driver-popover-navigation-btns {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .driver-popover.cp-tour-popover .driver-popover-footer button {
        flex: 1;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 15px;
        border-radius: 6px;
    }

    /* Audio-Button im Beschreibungsteil ebenfalls vergrößern */
    .driver-popover.cp-tour-popover .ux-tour-audio {
        min-height: 44px;
        min-width: 44px;
        font-size: 18px;
        padding: 8px 12px;
    }

    /* Close-X größer für Touch */
    .driver-popover.cp-tour-popover .driver-popover-close-btn {
        width: 44px;
        height: 44px;
        font-size: 22px;
        line-height: 44px;
        top: 4px;
        right: 4px;
    }
}

/* ===== Very small (<360px): noch kompakteres Layout ===== */
@media (max-width: 360px) {
    .driver-popover.cp-tour-popover {
        max-height: 75vh;
        padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .driver-popover.cp-tour-popover .driver-popover-title {
        font-size: 17px;
    }
    .driver-popover.cp-tour-popover .driver-popover-description {
        font-size: 14px;
    }
}