.auth-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 23, 18, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 100;
}

/* Страничный вариант авторизации (auth/login|register|forgot.blade.php
   с компонентом <auth-page>): только горизонтальное центрирование карточки.
   Вертикальный отступ под шапку даёт layouts.app::main.hero-backdrop,
   sticky-футер — flex:1 на .wrapper > main. Свой min-height/padding-top
   тут не нужен — иначе секция раздувается и футер уходит за viewport. */
.auth-page {
    display: flex;
    justify-content: center;
}
.auth-modal--page {
    animation: none;
    overflow: hidden;
    /* На странице карточка не должна резаться по высоте окна, в отличие
       от модалки (где max-height: calc(100vh - 48px) предотвращает выход
       за края). На странице доступен скролл всей body. */
    max-height: none;
}

.auth-modal {
    position: relative;
    width: min(100%, 580px);
    max-height: calc(100vh - 48px);
    padding: 36px 40px;
    animation: auth-modal-in 0.18s ease;
}
.auth_bg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}
.auth_bg img {
    width: 100%;
    height: 100%;
}

@keyframes auth-modal-in {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.auth-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--textPrimary);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}

.auth-modal__close:hover {
    background: var(--surface-strong);
    color: var(--ink);
}

.auth-modal__title {
    font-family: 'Lora-Bold';
    font-weight: 700;
    font-size: 24px;
    line-height: 130%;
    text-align: center;
    margin-bottom: 30px;
}
.auth-modal__title--forgot {
    margin-bottom: 16px;
}
.auth-modal__title--register {
    margin-bottom: 8px;
}
.auth-modal__subtitle {
    font-family: 'Lora-Regular';
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 30px;
}

.auth-modal__form {
    display: grid;
    gap: 8px;
}

.auth-modal__field {
    display: grid;
    gap: 6px;
}

.auth-modal__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.auth-modal__input {
    width: 100%;
    background: #FFF4E7;
    border: 1px dashed #9D653F66;
    padding: 11px 24px;
    border-radius: 8px;
    font-family: 'Lora-Regular';
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
}

.auth-modal__input:focus,
.auth-modal__input:focus-visible {
    outline: none;
    border-color: #AE7954;
}

.auth-modal__error {
    color: var(--danger, #a04f3f);
    font-size: 12px;
}

.auth-modal__hint {
    font-family: 'GolosText-Regular';
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    color: #9D653F;
}
.underAge_input {
    background: #EDF0524D;
}
.join__lock {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}
/* Стили <input type="date"> вынесены в общий блок в public/css/ui/forms.css
   — там единый паттерн для всех форм проекта (.input, .auth-modal__input,
   .auth-input, .join__input) с иконкой-календарём и cursor: pointer. */
.auth-modal__flash {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 14px;
}

.auth-modal__flash--error {
    background: rgba(160, 79, 63, 0.12);
    color: var(--danger, #a04f3f);
}

.auth-modal__check {
    flex-direction: column;
}
.auth-modal__check input {
    margin-right: 12px;
}
.auth-modal__inline-link {
    text-align: center;
}

.auth-modal__link {
    font-family: 'Lora-Regular';
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #9D653F;
    cursor: pointer;
}

.auth-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.auth-modal__actions--center {
    justify-content: center;
}

.auth-modal__primary,
.auth-modal__ghost {
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Lora-Regular';
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    transition: .8s;
    cursor: pointer;
}
.auth-modal__ghost {
    border: 1px solid #3D5632;
    color: #3D5632;
}
.auth-modal__primary {
    background: var(--textPrimaryBase);
    color: #FFF4E7;
}
.auth-modal__primary:hover {
    background: #516A46;
}
.auth-modal__primary:disabled {
    opacity: 0.6;
    cursor: default;
}
.custom-select {
    position: relative;
    width: 100%;
    cursor: pointer;
}
.custom_input_wrap {
    position: relative;
}
.custom_input_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    right: 24px;
    transition: .8s;
    opacity: 0.6;
    cursor: pointer;
}
.custom_input_arrow.active {
    opacity: 1;
    transform: translateY(-50%) rotate(180deg);
}
.custom-select__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 226px;
    overflow-y: auto;
    z-index: 10;
    margin-top: 6px;
    background: #FFF4E7;
    border: 1px dashed #8A522C66;
    border-radius: 8px;
    padding: 12px 14px;
}
.custom-select__option {
    padding: 6px 8px;
    transition: .3s;
    font-family: 'Lora-Regular';
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    border-radius: 6px;
}

.custom-select__option:hover {
    color: #FFF4E7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M5.57078 8.8375L10.5145 3.89375C10.6312 3.77708 10.7673 3.71875 10.9229 3.71875C11.0784 3.71875 11.2145 3.77708 11.3312 3.89375C11.4479 4.01042 11.5062 4.14906 11.5062 4.30967C11.5062 4.47028 11.4479 4.60872 11.3312 4.725L5.97911 10.0917C5.86244 10.2083 5.72633 10.2667 5.57078 10.2667C5.41522 10.2667 5.27911 10.2083 5.16244 10.0917L2.65411 7.58333C2.53744 7.46667 2.48144 7.32822 2.48611 7.168C2.49078 7.00778 2.55164 6.86914 2.66869 6.75208C2.78575 6.63503 2.92439 6.57669 3.08461 6.57708C3.24483 6.57747 3.38328 6.63581 3.49994 6.75208L5.57078 8.8375Z' fill='%23FFF4E7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 97%;
    background-size: 14px;
    background-color: #9D653F;
}
.register_importantText {
    font-size: 12px;
    line-height: 14px;
    color: #D94D4D;
}
@media screen and (max-width: 660px) {
    .auth-modal {
        padding: 36px 24px;
    }
    .auth-modal__title {
        font-size: 20px;
        line-height: 24px;
    }
    .auth-modal__subtitle {
        font-size: 16px;
        line-height: 22px;
    }
}
@media screen and (max-width: 475px) {
    .auth-modal__actions {
        flex-direction: column-reverse;
    }
}