/*
Altersabfrage
==================================================
Die Sichtbarkeit haengt allein am Attribut data-fsk18 am html-Element, das im
Kopf der Seite gesetzt wird -- noch bevor der Browser zum ersten Mal zeichnet.
So blitzt der Shop nicht kurz auf, und das Skript muss beim Aufbau nichts am
DOM aendern.

Farben und Schriften stammen absichtlich nicht aus dem Theme: das Plugin soll
ohne Theme-Kompilierung auskommen. Die Werte entsprechen der Farbwelt des
Shops (Dunkelbraun, Gold, Serifenschrift fuer Ueberschriften).
*/

/* Grundzustand: unsichtbar. Ohne Stylesheet greift das hidden-Attribut. */
.fsk18 {
    display: none;
}

html[data-fsk18] .fsk18 {
    align-items: center;
    background: rgba(21, 21, 21, 0.93);
    display: flex;
    inset: 0;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
    position: fixed;
    z-index: 2000;   /* ueber dem Cookie-Banner (1100) */
}

/* Scroll-Sperre. Sie greift schon vor dem ersten Zeichnen -- es gab also nie
   einen Rollbalken, der beim Einblenden verschwinden koennte. */
html[data-fsk18],
html[data-fsk18] body {
    height: 100%;
    overflow: hidden;
}

/* Das Cookie-Banner erscheint beim ersten Besuch gleichzeitig und laege sonst
   -- abgedunkelt, aber sichtbar -- unter der Altersabfrage. Zwei Einblendungen
   nebeneinander verwirren; das Banner kommt deshalb erst danach. */
html[data-fsk18] .cookie-permission-container {
    display: none !important;
}

.fsk18-dialog {
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    margin: auto;
    max-width: 540px;
    padding: 44px 40px 40px;
    text-align: center;
    width: 100%;
}

.fsk18-eyebrow {
    color: #c09a6d;
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.fsk18-title {
    color: #151515;
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.15;
    margin: 0 0 18px;
}

.fsk18-text {
    color: rgba(0, 0, 0, 0.7);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.fsk18-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
}

.fsk18-btn {
    border-radius: 0;
    font-size: 13px;
    letter-spacing: 0.12em;
    padding: 14px 20px;
    text-transform: uppercase;
    width: 100%;
}

.fsk18-btn-deny {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: rgba(0, 0, 0, 0.65);
}

.fsk18-btn-deny:hover,
.fsk18-btn-deny:focus-visible {
    border-color: #151515;
    color: #151515;
}

/* Ansichtswechsel ohne DOM-Umbau: gezeigt wird, was zum Wert des Attributs passt. */
.fsk18-view {
    display: none;
}

html[data-fsk18='ask'] [data-fsk18-view='ask'],
html[data-fsk18='denied'] [data-fsk18-view='denied'] {
    display: block;
}

@media (max-width: 480px) {
    .fsk18-dialog {
        padding: 32px 24px 28px;
    }

    .fsk18-title {
        font-size: 24px;
    }
}

/* --- Bestaetigung im Bestellabschluss -------------------------------------- */
.fsk18-checkout {
    border: 1px solid rgba(0, 0, 0, 0.14);
    margin-bottom: 16px;
    padding: 16px 18px;
}

.fsk18-checkout .fsk18-checkout-hint {
    color: rgba(0, 0, 0, 0.55);
    display: block;
    font-size: 13px;
    margin-bottom: 10px;
}

.fsk18-checkout .form-check-label {
    font-size: 14px;
    line-height: 1.5;
}