/**
 * DP Age Gate – Frontend Styles
 */

/* ── Gate: Fullscreen Overlay ─────────────────────────────────────────── */

#dp-age-gate {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;

    /* Transition für das Ausblenden */
    opacity: 1;
    transition: opacity 0.35s ease;
}

/* Versteckter Zustand (nach JS-Bestätigung) */
#dp-age-gate.dp-age-gate--hidden {
    opacity: 0;
    pointer-events: none;
}

/* hidden-Attribut: Gate komplett aus dem DOM-Flow */
#dp-age-gate[hidden] {
    display: none !important;
}

/* Body-Scroll sperren (wird per JS gesteuert) */
body:has( #dp-age-gate:not([hidden]) ) {
    overflow: hidden;
}

/* ── Inner Container ─────────────────────────────────────────────────── */

.dp-age-gate-inner {
    max-width: 480px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* ── Logo ────────────────────────────────────────────────────────────── */

.dp-age-gate-logo img {
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ── Headline ────────────────────────────────────────────────────────── */

#dp-age-gate h2,
#dp-age-gate-headline {
    font-size: clamp( 1.4rem, 4vw, 2rem );
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    color: inherit;
}

/* ── Message ─────────────────────────────────────────────────────────── */

.dp-age-gate-message {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0.85;
    color: inherit;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.dp-age-gate-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 300px;
}

.dp-btn {
    display: block;
    width: 100%;
    padding: 0.85rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.1s ease;
    text-align: center;
    letter-spacing: 0.03em;
}

.dp-btn:hover {
    filter: brightness( 1.1 );
}

.dp-btn:active {
    transform: scale( 0.98 );
}

.dp-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Primär-Button (Bestätigen) */
.dp-btn-confirm {
    background-color: var( --dp-btn-bg, #9E1460 );
    color: var( --dp-btn-text, #ffffff );
}

/* Sekundär-Button (Ablehnen) */
.dp-btn-deny {
    background-color: transparent;
    color: inherit;
    border: 1px solid currentColor;
    opacity: 0.7;
}

.dp-btn-deny:hover {
    opacity: 1;
    filter: none;
}

/* ── Legal Note ──────────────────────────────────────────────────────── */

.dp-age-gate-legal {
    font-size: 0.78rem;
    line-height: 1.5;
    opacity: 0.55;
    margin: 0;
    color: inherit;
    max-width: 380px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
    .dp-age-gate-inner {
        gap: 1rem;
    }

    #dp-age-gate h2 {
        font-size: 1.4rem;
    }
}