/* Легаси-каркас оверлея переехал в style.css (.modal-overlay). Здесь остаются только
   размеры и наполнение конкретных окон. Показ — классом .open, не style.display. */
.modal-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--surface-muted);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    width: 800px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    gap: 40px;
}

/* Базовый вид cookie-плашки. Раньше эти же правила лежали в .modal-content-monitoring —
   классе окна мониторинга; окно переехало на канон (.modal), и класс остался жить только
   у плашки под чужим именем. Значения перенесены один в один. */
.gdpr-modal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
    background-color: var(--card);
    border-radius: 18px;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    background: none;
}

.modal-content h2 {
    font-size: 16px;
    font-weight: 400;
    line-height: 21.86px;
    text-align: center;
}

.password-button {
    display: flex;
    gap: 12px;
    background: var(--primary);
    color: var(--surface-soft);
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 40px;
    border: none;
}

.password-button:hover {
    background: var(--primary-dark);
    color: var(--surface-soft);
}

.password-button:disabled {
    background: #C1D4FA;
    color: var(--surface-soft);
}

.registration-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--card);
    gap: 20px
}

.registration-form input {
    width: 260px;
}

.registration-form input::placeholder {
    color: var(--border-soft);
}

.registration-form p {
    font-size: 12px;
    margin-top: 0;
    width: 270px;
    text-align: left;
}

/* login-modal: адаптивный переопределитель .modal-content только для окна входа.
   Не трогать .modal-content напрямую — он общий для окна входа и cookie-плашки. */
.login-modal {
    width: min(calc(100% - 32px), 420px); /* вместо фикс. 800px */
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 18px;           /* токен модалки design-concept */
    background-color: var(--card);
    padding: 24px 22px;
    gap: 0;                        /* убрать аномальный 40px; отступы дают внутр. блоки */
    align-items: stretch;
}

/* Компенсации утечки старого глобального .modal больше не нужны: каркас оверлея
   переехал в .modal-overlay (style.css), карточка живёт своим .modal-content. */

/* gdpr-плашка: чиним только десктоп/планшет, мобайл (<=720px) не трогаем.
   gdpr-overlay гасит утекший в .modal max-width:400px из style.css. */
@media screen and (min-width: 721px) {

    .gdpr-modal {
        width: min(calc(100% - 32px), 420px);
        max-height: 90vh;
        overflow-y: auto;
        height: auto;                 /* гасит базовые 500px у .gdpr-modal выше */
        border-radius: 18px;          /* radius-modal */
        background-color: var(--card);
        padding: 24px 22px;
        gap: 16px;
        align-items: stretch;
    }

    /* выравнивание кнопки и ссылки по центру плашки (TASK-247) */
    .gdpr-actions {
        display: flex;
        flex-direction: column;
        align-items: center;   /* кнопка и ссылка по центру, как заголовок/текст */
        gap: 12px;             /* видимый отступ кнопка↔ссылка по AC */
    }
    .gdpr-actions br { display: none; }  /* отступ дает gap, перенос не нужен */
}