/* ============================================================
   Produkt-Tour – 5-Schritte-Guide durch die Nutrition-Datenbank
   Siehe static/js/product_tour.js
   ============================================================ */

.pt-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

.pt-overlay.is-visible {
    opacity: 1;
}

/* Vier "Bänder" rahmen das Tour-Ziel ein statt es zu bedecken: dimmen den
   Rest der Seite UND blockieren Klicks dort, während das eigentliche Ziel
   frei bleibt und ganz normal (nativ, ohne Trickserei) klickbar ist.
   pointer-events erst bei .is-visible aktivieren: sonst blockieren die
   Bänder (z.B. nach "Tour überspringen") unsichtbar weiter die Seite -
   die Opacity-Transition allein deaktiviert kein Hit-Testing. */
.pt-band {
    position: fixed;
    background: rgba(9, 15, 22, 0.78);
    pointer-events: none;
    transition: top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1),
                width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1);
}

.pt-overlay.is-visible .pt-band {
    pointer-events: auto;
}

.pt-ring {
    position: fixed;
    border-radius: 14px;
    pointer-events: none;
    transition: top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1),
                width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1);
}

.pt-ring::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    border: 2px solid #e6a817;
    box-shadow: 0 0 0 4px rgba(230, 168, 23, 0.22);
    animation: pt-pulse 1.8s ease-in-out infinite;
}

@keyframes pt-pulse {
    0%, 100% { opacity: .85; transform: scale(1); }
    50%      { opacity: .35; transform: scale(1.03); }
}

.pt-tooltip {
    position: fixed;
    z-index: 20001;
    width: min(340px, calc(100vw - 2rem));
    background: linear-gradient(160deg, #153043 0%, #0D2130 100%);
    color: #eeeeee;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    padding: 1.35rem 1.4rem 1.15rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: opacity .22s ease, transform .22s ease, top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1);
}

.pt-overlay.is-visible .pt-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.pt-tooltip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.pt-step-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #e6a817;
}

.pt-close {
    background: none;
    border: none;
    color: rgba(238,238,238,0.55);
    font-size: 1.05rem;
    line-height: 1;
    padding: .15rem;
    cursor: pointer;
    transition: color .15s ease;
}
    .pt-close:hover { color: #eeeeee; }

.pt-tooltip-title {
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 .45rem 0;
}

.pt-tooltip-text {
    font-size: .88rem;
    line-height: 1.55;
    color: rgba(238,238,238,0.85);
    margin: 0 0 1.1rem 0;
}

.pt-dots {
    display: flex;
    gap: .35rem;
    margin-bottom: 1rem;
}

.pt-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(238,238,238,0.25);
    transition: background .2s ease, transform .2s ease;
}
    .pt-dot.is-active { background: #e6a817; transform: scale(1.2); }
    .pt-dot.is-done { background: rgba(230,168,23,0.55); }

.pt-tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.pt-skip {
    background: none;
    border: none;
    color: rgba(238,238,238,0.6);
    font-size: .82rem;
    font-weight: 600;
    padding: .4rem 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
    .pt-skip:hover { color: #eeeeee; }

.pt-next {
    background: #e6a817;
    color: #222831;
    border: none;
    font-weight: 700;
    font-size: .88rem;
    padding: .55rem 1.15rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
    .pt-next:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(230,168,23,0.35); }

/* Tooltip-Pfeil, Richtung wird per Modifier-Klasse gesetzt */
.pt-tooltip::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: #153043;
    transform: rotate(45deg);
}
.pt-tooltip.pt-arrow-top::before    { top: -6px; left: var(--pt-arrow-offset, 24px); border-radius: 3px 0 0 0; }
.pt-tooltip.pt-arrow-bottom::before { bottom: -6px; left: var(--pt-arrow-offset, 24px); border-radius: 0 0 3px 0; }

@media (max-width: 480px) {
    .pt-tooltip { padding: 1.1rem 1.1rem .95rem; }
    .pt-tooltip-title { font-size: 1rem; }
    .pt-tooltip-text { font-size: .85rem; }

    /* Buttons untereinander statt nebeneinander - column-reverse, weil "Weiter"/
       "Fertig" im Markup nach "Tour überspringen" kommt, aber als primäre Aktion
       oben stehen soll. */
    .pt-tooltip-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: .55rem;
    }

    .pt-next {
        width: 100%;
        justify-content: center;
    }

    .pt-skip {
        text-align: center;
        padding: .2rem 0;
    }
}