/**
 * pages/welcome/gate.css — вид шторки регистрации на экране готового разбора.
 *
 * Оформление подчиняется razbor2.css: шторка стоит внутри блока практики и не
 * должна читаться как чужеродная вставка. Свои классы с приставкой wlc-gate,
 * чтобы правки линии не задевали разбор.
 */

/* ─── Плашка вместо плеера ──────────────────────────────────────────────── */

.wlc-gate-poster {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 28px 20px; min-height: 200px;
    border-radius: var(--radius-md, 12px);
    background: linear-gradient(140deg, #2b3440, #17202a);
    text-align: center;
}

.wlc-gate-poster__title {
    font-size: 17px; font-weight: 700; color: #fff; max-width: 420px;
}

.wlc-gate-poster__play {
    width: 64px; height: 64px; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform .12s ease;
}

.wlc-gate-poster__play:hover  { transform: scale(1.05); }
.wlc-gate-poster__play:active { transform: scale(.98); }

/* Треугольник play — фигурой, а не картинкой: одна деталь меньше в загрузке. */
.wlc-gate-poster__play span {
    width: 0; height: 0; margin-left: 5px;
    border-style: solid; border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #17202a;
}

.wlc-gate-poster__note { font-size: 13px; color: rgba(255, 255, 255, .72); }

/* ─── Форма ─────────────────────────────────────────────────────────────── */

.wlc-gate {
    padding: 22px 18px;
    border: 1px solid var(--bd, #E2E8F0); border-radius: var(--radius-md, 12px);
    background: var(--card, #fff);
}

.wlc-gate__form { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto; }

.wlc-gate__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--t1, #0f172a); text-align: center; }
.wlc-gate__hint  { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--t3, #64748b); text-align: center; }

.wlc-gate__input {
    box-sizing: border-box; width: 100%;
    padding: 13px 14px; border: 1px solid var(--bd, #E2E8F0); border-radius: var(--radius-sm, 8px);
    font-family: inherit; font-size: 16px;  /* 16px — иначе iOS увеличивает страницу при фокусе */
    color: var(--t1, #0f172a); background: #fff;
    outline: none;
}

.wlc-gate__input:focus { border-color: var(--color-primary, #F5B848); }

.wlc-gate__submit {
    padding: 14px 18px; border: none; border-radius: var(--radius-sm, 8px);
    background: var(--color-primary, #F5B848); color: #3B1F0A;
    font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}

.wlc-gate__submit[disabled] { opacity: .6; cursor: default; }

.wlc-gate__link {
    align-self: center; margin-top: 2px;
    border: none; background: none; padding: 4px;
    font-family: inherit; font-size: 14px; color: var(--t3, #64748b);
    text-decoration: underline; cursor: pointer;
}

.wlc-gate__error {
    margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--danger, #E05050); text-align: center;
}

.wlc-gate__error a { color: inherit; }

/* С обложкой плашка перестаёт быть заглушкой: картинка идёт фоном, затемнение
   поверх неё держит читаемым белый текст на любой картинке. */
.wlc-gate-poster--image {
    background-size: cover;
    background-position: center;
}