/* ===========================
   PeruOnline — Age Gate styles
   (уникальные токены и классы)
   =========================== */

:root {
    /* сайт тёмный */
    color-scheme: dark;

    /* брендовые токены */
    --po-ink:        #0a0e17; /* base bg */
    --po-mist:       #111827; /* секции/градиент */
    --po-text:       #e6eaf2;
    --po-dim:        #b9c0cf;

    --po-primary:    #D7263D; /* rojo */
    --po-accent:     #FFC145; /* oro */
    --po-success:    #22c55e;
    --po-danger:     #ef4444;

    --po-ring:       rgba(255,193,69,.45);
    --po-shadow:     0 22px 60px rgba(10,14,23,.55);

    --po-radius-xl:  18px;
    --po-radius-lg:  12px;
    --po-gap:        1rem;
    --po-pad:        1.25rem;
}

/* типографика */
.po-font-heading,
h1,h2,h3,h4,h5,h6 { font-family: Rubik, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
.po-font-body,
body { font-family: Nunito, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

/* ---------- Overlay ---------- */
.po-overlay {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(6px);
    z-index: 9999;
}

/* ---------- Modal ---------- */
.po-agegate {
    width: min(92vw, 520px);
    color: var(--po-text);
    background:
            radial-gradient(80% 70% at 20% 0%, rgba(215,38,61,.18) 0%, transparent 65%),
            radial-gradient(80% 70% at 100% 100%, rgba(255,193,69,.15) 0%, transparent 65%),
            linear-gradient(180deg, var(--po-ink), var(--po-mist));
    border-radius: var(--po-radius-xl);
    box-shadow: var(--po-shadow);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid rgba(255,255,255,.08);
}

.po-agegate__badge {
    height: 64px; width: 64px;
    display: grid; place-items: center;
    border-radius: 999px;
    font: 800 18px/1 Rubik, system-ui, sans-serif;
    color: var(--po-ink);
    background: linear-gradient(135deg, var(--po-primary), var(--po-accent));
    margin: 0 auto var(--po-gap);
    box-shadow: 0 8px 26px rgba(215,38,61,.35);
}

.po-agegate__title {
    text-align: center;
    font: 800 clamp(1.25rem, 2.4vw, 1.6rem)/1.2 Rubik, system-ui, sans-serif;
    margin: .25rem 0 .5rem;
}

.po-agegate__text {
    text-align: center;
    color: var(--po-dim);
    margin: 0 auto 1rem;
    max-width: 46ch;
}

/* ---------- Buttons ---------- */
.po-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem;
}

.po-btn {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    padding: .70rem 1rem;
    border-radius: var(--po-radius-lg);
    border: 1px solid transparent;
    font: 700 15px/1 Nunito, system-ui, sans-serif;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.po-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--po-ring);
}

/* yes = градиент бренда */
.po-btn.--yes {
    color: #0b0f1a;
    background: linear-gradient(90deg, var(--po-primary), var(--po-accent));
}
.po-btn.--yes:hover { transform: translateY(-1px); }

/* no = прозрачная с контуром */
.po-btn.--no {
    color: var(--po-text);
    background: transparent;
    border-color: rgba(255,255,255,.18);
}
.po-btn.--no:hover { background: rgba(255,255,255,.05); }

/* подпись */
.po-agegate__note {
    margin-top: .75rem;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
}

/* ---------- Fallback age-restriction page ---------- */
.po-agepage {
    min-height: 100vh;
    display: grid; place-items: center;
    background: linear-gradient(180deg, var(--po-ink), var(--po-mist));
    color: var(--po-text);
    text-align: center;
    padding: 2rem;
}
.po-agepage__box {
    max-width: 760px; width: 100%;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--po-radius-xl);
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: var(--po-shadow);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .po-btn, .po-agegate { transition: none; }
    .po-overlay { backdrop-filter: none; }
}