/* ===== SubscribeStar Adult — Gate Styles ===== */
:root {
    --ssa-radius: 14px;
    --ssa-gap: 16px;
    --ssa-text: #e8e8e8;
    --ssa-panel-bg: rgba(255,255,255,.02);
    --ssa-panel-bg-2: rgba(255,255,255,.03);
    --ssa-border: rgba(255,255,255,.08);

    /* Акценты */
    --ssa-red-1: #b91c1c;   /* темный */
    --ssa-red-2: #ef4444;   /* светлее */
    --ssa-green-1: #166534; /* темный */
    --ssa-green-2: #22c55e; /* светлее */

    /* Брендовая кнопка (оранжевая как на сайте) */
    --ssa-cta-1: #ff8a00;
    --ssa-cta-2: #ffb547;
    --ssa-cta-text: #101010;
}

/* Базовый контейнер для «замка» */
.ssa-gate,
.ssa-locked,
.ssa-unlocked {
    position: relative;
    margin: 28px 0;
    padding: 40px 24px 20px;
    border-radius: var(--ssa-radius);
    color: var(--ssa-text);
    background: linear-gradient(180deg, var(--ssa-panel-bg-2), var(--ssa-panel-bg));
    border: 1px solid var(--ssa-border);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

/* Подзаголовок/лид */
.ssa-gate .ssa-lead,
.ssa-locked .ssa-lead,
.ssa-unlocked .ssa-lead {
    font-size: 1.075rem;
    line-height: 1.6;
    margin-bottom: var(--ssa-gap);
    letter-spacing: .01em;
}

/* Значок-статус (бейдж) */
.ssa-gate::before,
.ssa-locked::before,
.ssa-unlocked::before {
    position: absolute;
    top: -10px;
    left: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: .72rem;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    text-transform: uppercase;
    backdrop-filter: saturate(130%);
    content: '';
}

/* LOCKED */
.ssa-locked {
    border-color: color-mix(in srgb, var(--ssa-red-2) 35%, transparent);
    background:
            linear-gradient(135deg, color-mix(in srgb, var(--ssa-red-2) 12%, transparent), transparent),
            linear-gradient(180deg, var(--ssa-panel-bg-2), var(--ssa-panel-bg));
    box-shadow: 0 10px 26px rgba(239, 68, 68, .18), 0 18px 40px rgba(0,0,0,.28);
}
.ssa-locked::before {
    content: 'Locked';
    background: linear-gradient(135deg, var(--ssa-red-1), var(--ssa-red-2));
    box-shadow: 0 6px 16px rgba(239, 68, 68, .35);
}

/* UNLOCKED */
.ssa-unlocked {
    border-color: color-mix(in srgb, var(--ssa-green-2) 35%, transparent);
    background:
            linear-gradient(135deg, color-mix(in srgb, var(--ssa-green-2) 12%, transparent), transparent),
            linear-gradient(180deg, var(--ssa-panel-bg-2), var(--ssa-panel-bg));
    box-shadow: 0 10px 26px rgba(34, 197, 94, .18), 0 18px 40px rgba(0,0,0,.28);
}
.ssa-unlocked::before {
    content: 'Unlocked';
    background: linear-gradient(135deg, var(--ssa-green-1), var(--ssa-green-2));
    box-shadow: 0 6px 16px rgba(34, 197, 94, .35);
}

/* Кнопки */
.ssa-btn,
.ssa-button,
.ssa-gate .button,
.ssa-locked .button,
.ssa-unlocked .button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    box-shadow: 0 12px 22px rgba(0,0,0,.28);
    cursor: pointer;
}

/* Основная CTA (оранжевая — в тон кнопке DOWNLOAD на сайте) */
.ssa-btn--primary,
.ssa-button--primary {
    background: linear-gradient(135deg, var(--ssa-cta-1), var(--ssa-cta-2));
    color: var(--ssa-cta-text);
}
.ssa-btn--primary:hover,
.ssa-button--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 26px rgba(0,0,0,.34);
}

/* Вторичная (прозрачная) */
.ssa-btn--ghost,
.ssa-button--ghost {
    background: transparent;
    color: var(--ssa-text);
    border-color: rgba(255,255,255,.22);
}
.ssa-btn--ghost:hover,
.ssa-button--ghost:hover {
    background: rgba(255,255,255,.06);
}

/* Маленькая приписка под кнопкой */
.ssa-note {
    opacity: .85;
    font-size: .94rem;
    margin-top: 10px;
}

/* Отступ до секции комментариев, чтобы «плашка» дышала */
.ssa-locked + .comments-area,
.ssa-unlocked + .comments-area,
.ssa-gate + .comments-area {
    margin-top: 36px;
}

/* Доступность: отключаем анимации для тех, кто просит */
@media (prefers-reduced-motion: reduce) {
    .ssa-btn, .ssa-button { transition: none; }
}

/* Подсказка для администраторов/редакторов */
.ssa-admin-hint {
    margin: 20px 0;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.ssa-admin-hint-text {
    color: var(--ssa-green-2);
    font-size: 0.94rem;
    line-height: 1.5;
    font-weight: 500;
}