/* ── Fastlog-Tour-Theme (Driver.js Overrides) ──────────────────────────
 * Macht die Verbindung Popover → Element klar erkennbar:
 *   1. Akzent-Outline + Glow um das aktive Element
 *   2. Backdrop-Blur statt nur Abdunklung
 *   3. Grosser, akzentfarbiger Pfeil
 *   4. Surface-Tokens, Akzent-Primary-Button
 *
 * Namespace via `popoverClass: 'fl-tour-popover'`.
 *
 * Hintergrund Driver.js: das aktive Element bleibt visuell unverändert,
 * ein SVG-Overlay mit „Loch" sorgt für den Spotlight. Auf dunklem Theme
 * ist der Kontrast zwischen abgedunkelt/nicht-abgedunkelt minimal — wir
 * fügen daher einen expliziten Akzent-Ring direkt am Element hinzu, der
 * innerhalb des Stage-Padding (8 px) sichtbar bleibt.
 */

/* ── Aktives Element: deutlicher Akzent-Ring + Glow ──────────────────── */
/* Hauptsignal „Hier zeigt der Popover hin". Outline sitzt innerhalb des
 * Stage-Padding-Cutouts (10 px) → bleibt im Spotlight sichtbar, ohne dass
 * wir den z-index des Elements anfassen müssen.
 *
 * Wichtig: outline + box-shadow zusammen dürfen NICHT über das stagePadding
 * hinausragen, sonst sieht die Pfeilspitze des Popovers vom Outline-Rand
 * getrennt aus. outline-offset (2) + outline-width (3) = 5 px → bleibt
 * innerhalb der 10 px stagePadding. Glow-Halo bewusst klein gehalten. */
.driver-active-element {
    outline: 3px solid var(--accent) !important;
    outline-offset: 2px;
    border-radius: var(--r);
    box-shadow: 0 0 0 6px rgba(0, 74, 151, .22) !important;
    transition: outline-color .15s, box-shadow .15s;
}

/* ── Overlay: deutlich abdunkeln (kein Backdrop-Blur — würde die ──────
 * Sichtbarkeit im Cutout-Bereich verfälschen, weil eine seitenweite
 * Blur-Layer keinen SVG-Cutout besitzt; der hervorgehobene Bereich
 * würde mitgeblurrt → genau das Gegenteil eines Spotlights). */
.driver-active .driver-overlay {
    opacity: .78 !important;
}

/* ── Popover: Surface-Tokens + ordentlicher Schatten ─────────────────── */
.fl-tour-popover.driver-popover {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 18px 20px 16px;
    min-width: 320px;
    max-width: 380px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .25);
    font-family: inherit;
}

.fl-tour-popover.driver-popover * {
    font-family: inherit;
}

.fl-tour-popover .driver-popover-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin: 0 28px 6px 0;
    line-height: 1.35;
}

.fl-tour-popover .driver-popover-description {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.5;
    margin: 0;
}

.fl-tour-popover .driver-popover-close-btn {
    color: var(--text-3);
    font-size: 22px;
    line-height: 1;
    width: 28px;
    height: 28px;
    top: 6px;
    right: 6px;
    border-radius: var(--r);
}

.fl-tour-popover .driver-popover-close-btn:hover,
.fl-tour-popover .driver-popover-close-btn:focus {
    color: var(--text);
    background: var(--surface-2);
}

.fl-tour-popover .driver-popover-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    gap: 8px;
}

.fl-tour-popover .driver-popover-progress-text {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 500;
}

.fl-tour-popover .driver-popover-navigation-btns {
    gap: 6px;
}

.fl-tour-popover .driver-popover-footer button {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    text-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s;
    line-height: 1.4;
}

.fl-tour-popover .driver-popover-footer button:hover,
.fl-tour-popover .driver-popover-footer button:focus {
    background: var(--surface-2);
    border-color: var(--text-3);
    color: var(--text);
}

/* Letzter Button („Weiter" / „Fertig") als Primary */
.fl-tour-popover .driver-popover-navigation-btns button:last-child {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent, #fff);
}

.fl-tour-popover .driver-popover-navigation-btns button:last-child:hover,
.fl-tour-popover .driver-popover-navigation-btns button:last-child:focus {
    background: var(--accent-dark, var(--accent));
    border-color: var(--accent-dark, var(--accent));
    opacity: .92;
}

.fl-tour-popover .driver-popover-footer button.driver-popover-btn-disabled {
    opacity: .35;
}

/* ── Pfeil: gross + akzentfarbig ─────────────────────────────────────── */
/* Driver.js zeichnet den Pfeil über CSS-Borders. Wir vergrössern ihn
 * (10px statt 5px) und färben ihn in Akzent — sichtbarer Hinweis,
 * zu welchem Element der Popover gehört. */
.fl-tour-popover .driver-popover-arrow {
    border-width: 10px;
}
.fl-tour-popover .driver-popover-arrow-side-left {
    border-left-color: var(--accent);
}
.fl-tour-popover .driver-popover-arrow-side-right {
    border-right-color: var(--accent);
}
.fl-tour-popover .driver-popover-arrow-side-top {
    border-top-color: var(--accent);
}
.fl-tour-popover .driver-popover-arrow-side-bottom {
    border-bottom-color: var(--accent);
}