/* Layout страницы register/ + небо и сезонные эффекты */
@import url('../../app/fon/css/sky.css');
@import url('https://fonts.bunny.net/css?family=outfit:300,400,500,600,700');

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--sky-1, #050816);
}

body {
    font-family: 'Outfit', system-ui, sans-serif;
    min-height: 100dvh;
    color: var(--chrome-100);
    background: transparent;
    overflow-x: hidden;
}

.hidden {
    display: none !important;
}

.register-page {
    position: relative;
    min-height: 100dvh;
}

.auth-card-shell {
    position: relative;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-card-shell:has(.auth-card--wide) {
    max-width: 440px;
}

/* Экраны входа и регистрации: mobile-first, эталон iPhone ~390×844; масштаб через breakpoints */
#registerScreen, #authLanding {
    --r-shell-max: 420px;
    --r-shell-w: min(92%, var(--r-shell-max));
    --r-screen-pad-y: clamp(0.75rem, 2.5vh, 1.5rem);
    --r-screen-pad-x: clamp(1rem, 4vw, 1.75rem);
    --r-logo-reserve: clamp(5.5rem, 14vh, 8.5rem);
    --r-stack-gap: clamp(0.65rem, 1.8vh, 1rem);
    --r-card-pad-top: var(--r-stack-gap);
    --r-card-pad-x: clamp(1rem, 5.4vw, 1.5rem);
    --r-card-pad-bottom: clamp(0.65rem, 1.7vh, 1rem);
    --r-title-size: clamp(1.125rem, 2.9vh, 1.5rem);
    --r-title-mb: var(--r-stack-gap);
    --r-input-h: clamp(2.25rem, 5.5dvh, 3.25rem);
    --r-input-pad-y: clamp(0.55rem, 0.9vh, 0.75rem);
    --r-input-pad-x: clamp(0.85rem, 5.5vw, 1.15rem);
    --r-input-font: clamp(1rem, 1.56vh, 1.0625rem);
    --r-placeholder-font: clamp(0.8125rem, 1.24vh, 0.9375rem);
    --r-btn-font: var(--r-input-font);
    --r-error-font: clamp(0.8125rem, 1.36vh, 0.9375rem);
    --r-hint-font: clamp(0.75rem, 1.3vh, 0.875rem);
    --r-hint-mt: 0.8vh;
    --r-gender-h: clamp(5.25rem, calc(var(--r-input-h) * 2.05), 7.75rem);
    --r-gender-gap: clamp(0.45rem, 0.76vh, 0.65rem);
    --r-gender-inner-gap: 0.35vh;
    --r-gender-pad-y: 0.29vh;
    --r-gender-pad-x: 4.5%;
    --r-gender-pad-bottom: 0.25vh;
    --r-gender-radius: clamp(0.875rem, 1.75vh, 1.125rem);
    --r-gender-font: var(--r-placeholder-font);
    --r-gender-icon-h: calc((var(--r-gender-h) - var(--r-gender-pad-y) - var(--r-gender-pad-bottom)) / 1.2);
    --r-gender-icon-w: var(--r-gender-icon-h);
    --r-radius-pill: 50vh;
    --r-radius-card: clamp(1rem, 2.5vh, 1.375rem);
    --r-logo-w: min(calc(52% / 1.1), calc(240px / 1.1));
    --r-logo-gap: clamp(0.65rem, 1.8vh, 1.1rem);
    --r-logo-top: clamp(0.5rem, 1vh, 0.85rem);
    --r-logo-pad-x: 4%;
    /* liquid glass tokens (shared module) */
    --lg-card-radius: var(--r-radius-card);
    --lg-card-pad: var(--r-card-pad-top) var(--r-card-pad-x) var(--r-card-pad-bottom);
    --lg-field-h: var(--r-input-h);
    --lg-field-radius: var(--r-radius-pill);
    --lg-field-pad-y: var(--r-input-pad-y);
    --lg-field-pad-x: var(--r-input-pad-x);
    --lg-btn-pad-y: var(--r-input-pad-y);
    --lg-btn-pad-x: var(--r-input-pad-x);
    --lg-btn-radius: var(--r-gender-radius);
    --lg-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
    --lg-border: rgba(255, 255, 255, 0.3);
    --lg-blur: blur(12px) saturate(140%);
    --lg-card-tint: rgba(36, 23, 26, 0.56);
    --test-form-fill: rgba(255, 255, 255, 0.2);
}

#registerScreen.auth-screen,
#authLanding.auth-screen {
    position: relative;
    z-index: 2;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--r-screen-pad-y) var(--r-screen-pad-x);
    padding-top: calc(var(--r-screen-pad-y) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--r-screen-pad-y) + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: transparent;
    isolation: auto;
    pointer-events: auto;
}

#registerScreen .auth-card-shell,
#authLanding .auth-card-shell {
    width: var(--r-shell-w);
    max-width: var(--r-shell-max);
    flex-shrink: 0;
    margin-block: auto;
    gap: var(--r-logo-gap);
}

#registerScreen .auth-card,
#authLanding .auth-card,
#registerScreen .login-card,
#authLanding .login-card {
    width: 100%;
    max-width: none;
}

.register-logo {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--r-logo-top, 1vh));
    left: 50%;
    z-index: 510;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 var(--r-logo-pad-x, 4%);
    margin: 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.register-logo__img {
    display: block;
    width: var(--r-logo-w, 46%);
    height: auto;
}

#registerScreen .auth-card-shell > .register-logo,
#authLanding .auth-card-shell > .register-logo {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    z-index: auto;
    width: 100%;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

#registerScreen .auth-card-shell > .register-logo__img,
#authLanding .auth-card-shell > .register-logo__img {
    width: var(--r-logo-w);
    max-width: 100%;
    margin: 0 auto;
}

.auth-card-shell > .login-card {
    width: 100%;
    padding-top: 2rem;
}

#registerScreen .auth-card-shell > .login-card,
#authLanding .auth-card-shell > .login-card {
    padding: 0;
    border-radius: var(--r-radius-card);
}

#registerScreen .auth-card-shell > .liquidGlass-wrapper--card,
#authLanding .auth-card-shell > .liquidGlass-wrapper--card {
    width: 100%;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#registerScreen .test-card,
#authLanding .test-card {
    width: 100%;
    min-height: 16rem;
    cursor: default;
    border: none !important;
    box-shadow: none;
    background: var(--lg-card-tint);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    backdrop-filter: blur(4px) saturate(120%);
}

#registerScreen .test-card.liquidGlass-wrapper--card::before,
#authLanding .test-card.liquidGlass-wrapper--card::before,
#registerScreen .test-card.liquidGlass-wrapper--card::after,
#authLanding .test-card.liquidGlass-wrapper--card::after {
    display: none;
}

#registerScreen .test-card > .liquidGlass-tint,
#authLanding .test-card > .liquidGlass-tint,
#registerScreen .test-card > .liquidGlass-shine,
#authLanding .test-card > .liquidGlass-shine {
    display: none;
}

#registerScreen .test-card > .liquidGlass-text,
#authLanding .test-card > .liquidGlass-text {
    min-height: inherit;
    z-index: 4;
}

#registerScreen .test-card__title,
#authLanding .test-card__title {
    width: 100%;
    margin: 0 0 var(--r-title-mb);
    color: #fff;
    font-size: var(--r-title-size);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: center;
}

#authLanding .test-card__subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(0.875rem, 1.4dvh, 1rem);
    margin: 0 0 var(--r-title-mb);
}

#registerScreen .test-form,
#authLanding .test-form {
    display: flex;
    flex-direction: column;
    gap: var(--r-stack-gap);
}

#registerScreen .test-field,
#authLanding .test-field {
    display: block;
}

#registerScreen .test-card .liquidGlass-wrapper--field,
#authLanding .test-card .liquidGlass-wrapper--field,
#registerScreen .test-card .liquidGlass-wrapper--field > .liquidGlass-tint,
#authLanding .test-card .liquidGlass-wrapper--field > .liquidGlass-tint {
    background: var(--test-form-fill);
}

#registerScreen .test-card .liquidGlass-wrapper--field input,
#authLanding .test-card .liquidGlass-wrapper--field input {
    font-size: var(--r-input-font);
    border: none;
    background: transparent;
    box-shadow: none;
}

#registerScreen .test-card .liquidGlass-wrapper--field input:focus,
#authLanding .test-card .liquidGlass-wrapper--field input:focus {
    border: none;
    box-shadow: none;
    outline: none;
}

#registerScreen .test-card .liquidGlass-wrapper--field input::placeholder,
#authLanding .test-card .liquidGlass-wrapper--field input::placeholder {
    font-size: var(--r-placeholder-font);
}

#registerScreen .test-gender {
    margin: 0;
    padding: 0;
    border: none;
}

#registerScreen .test-gender__box {
    display: flex;
    gap: var(--r-gender-gap);
}

#registerScreen .test-gender__opt {
    position: relative;
    flex: 1;
    display: block;
    cursor: pointer;
    transition: transform 0.15s;
}

#registerScreen .test-gender__field {
    height: var(--r-gender-h);
    min-height: var(--r-gender-h);
    border-radius: var(--r-gender-radius);
    cursor: pointer;
}

#registerScreen .test-gender__field .liquidGlass-text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--r-gender-pad-y) var(--r-gender-pad-x) var(--r-gender-pad-bottom);
}

#registerScreen .test-gender__icon {
    display: block;
    width: var(--r-gender-icon-w);
    height: auto;
    max-height: var(--r-gender-icon-h);
    object-fit: contain;
    opacity: 0.82;
    transition: opacity 0.2s, transform 0.2s;
}

#registerScreen .test-gender__opt input {
    position: absolute;
    inset: 0;
    z-index: 5;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

#registerScreen .test-gender__opt:has(input:checked) .test-gender__icon {
    opacity: 1;
    transform: scale(1.05);
}

#registerScreen .test-gender__opt--female:has(input:checked) .test-gender__field,
#registerScreen .test-gender__opt--female:has(input:checked) .test-gender__field > .liquidGlass-tint {
    background: #f896ff;
}

#registerScreen .test-gender__opt--male:has(input:checked) .test-gender__field,
#registerScreen .test-gender__opt--male:has(input:checked) .test-gender__field > .liquidGlass-tint {
    background: #78b7fa;
}

#registerScreen .test-gender__opt:active {
    transform: scale(0.98);
}

#registerScreen .test-actions,
#authLanding .test-actions {
    display: flex;
    flex-direction: column;
    gap: var(--r-stack-gap);
}

#registerScreen .test-card .liquidGlass-wrapper--field,
#authLanding .test-card .liquidGlass-wrapper--field {
    border: none;
    box-shadow: none;
}

#registerScreen .test-card .liquidGlass-wrapper--button,
#authLanding .test-card .liquidGlass-wrapper--button {
    min-height: var(--r-input-h);
    font-size: calc(var(--r-placeholder-font) * 1.5);
    border: none;
    box-shadow: none;
    background: transparent;
}

#registerScreen .test-card .liquidGlass-wrapper--button.test-link-btn,
#authLanding .test-card .liquidGlass-wrapper--button.test-link-btn {
    background: transparent;
    border: 2px solid #865461;
    color: #fff;
}

#registerScreen .test-link-btn > .liquidGlass-tint,
#authLanding .test-link-btn > .liquidGlass-tint,
#registerScreen .test-link-btn > .liquidGlass-effect,
#authLanding .test-link-btn > .liquidGlass-effect,
#registerScreen .test-link-btn > .liquidGlass-shine,
#authLanding .test-link-btn > .liquidGlass-shine {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

@media (hover: hover) {
    #registerScreen .test-card .liquidGlass-wrapper--button.test-link-btn:hover,
    #authLanding .test-card .liquidGlass-wrapper--button.test-link-btn:hover {
        background: #865461;
        border-color: #865461;
    }

    #registerScreen .test-card .liquidGlass-wrapper--button.test-link-btn:hover > .liquidGlass-tint,
    #authLanding .test-card .liquidGlass-wrapper--button.test-link-btn:hover > .liquidGlass-tint {
        background: #865461;
    }
}

#registerScreen .test-submit,
#authLanding .test-submit {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(145deg, #ff6b81, rgba(255, 91, 91, 0.21));
    box-shadow:
        0 4px 16px rgba(255, 91, 91, 0.21),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

#registerScreen .test-submit > .liquidGlass-tint,
#authLanding .test-submit > .liquidGlass-tint {
    background: linear-gradient(145deg, #ff6b81, #ff4757);
}

#registerScreen .test-submit > .liquidGlass-effect,
#authLanding .test-submit > .liquidGlass-effect {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#registerScreen .test-submit > .liquidGlass-shine,
#authLanding .test-submit > .liquidGlass-shine {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#registerScreen .test-submit:active,
#authLanding .test-submit:active {
    background: linear-gradient(145deg, #ff5a6e, #e63e4e);
}

#registerScreen .test-submit:active > .liquidGlass-tint,
#authLanding .test-submit:active > .liquidGlass-tint {
    background: linear-gradient(145deg, #ff5a6e, #e63e4e);
}

#registerScreen .test-card .liquidGlass-wrapper--button .liquidGlass-text,
#authLanding .test-card .liquidGlass-wrapper--button .liquidGlass-text {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
}

#registerForm .login-error,
#userLoginForm .login-error {
    margin: 0;
    min-height: 0;
}

#registerForm .login-error:empty,
#userLoginForm .login-error:empty {
    display: none;
}

#registerScreen .login-error,
#authLanding .login-error {
    font-size: var(--r-error-font);
}

#registerScreen .auth-hint,
#authLanding .auth-hint {
    font-size: var(--r-hint-font);
    margin: var(--r-hint-mt) 0 0;
}

/* Карточки — glass-panel (остальные экраны) */
.register-page .glass-panel {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 40px 20px rgba(255, 255, 255, 0.02);
    transition: all 0.35s ease;
}

.register-page .glass-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    pointer-events: none;
    z-index: 1;
}

.register-page .glass-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    border: none;
    border-radius: 0;
    inset: auto;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.8),
        transparent,
        rgba(255, 255, 255, 0.3)
    );
    pointer-events: none;
    z-index: 1;
}

@media (hover: none) and (pointer: coarse) {
    .register-page .login-card.glass-panel {
        background: rgba(255, 255, 255, 0.24);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

}

/* --- Телефон: компактнее поля, кнопки и пол --- */
@media (max-width: 767px) {
    #registerScreen, #authLanding {
        --r-input-h: clamp(2.05rem, 5dvh, 2.85rem);
        --r-gender-h: clamp(4.75rem, calc(var(--r-input-h) * 2), 6.5rem);
        --r-input-pad-y: clamp(0.45rem, 0.8dvh, 0.65rem);
        --r-stack-gap: clamp(0.5rem, 1.4dvh, 0.85rem);
        --r-input-font: 0.8125rem;
        --r-placeholder-font: 0.75rem;
    }

    #registerScreen .liquidGlass-wrapper--field input,
    #authLanding .liquidGlass-wrapper--field input {
        font-size: 0.8125rem;
    }

    #registerScreen .liquidGlass-wrapper--field input::placeholder,
    #authLanding .liquidGlass-wrapper--field input::placeholder {
        font-size: 0.75rem;
    }

    #registerScreen .liquidGlass-wrapper--button,
    #authLanding .liquidGlass-wrapper--button {
        font-size: 1rem;
    }
}

/* --- Маленький экран / низкий viewport --- */
@media (max-width: 360px), (max-height: 640px) {
    #registerScreen, #authLanding {
        --r-input-h: clamp(1.9rem, 4.5dvh, 2.45rem);
        --r-gender-h: clamp(4.25rem, calc(var(--r-input-h) * 1.9), 5.75rem);
        --r-input-pad-y: clamp(0.4rem, 0.7dvh, 0.55rem);
        --r-stack-gap: clamp(0.45rem, 1.2dvh, 0.7rem);
        --r-gender-radius: clamp(0.75rem, 1.5dvh, 1rem);
        --r-logo-gap: clamp(0.45rem, 1.2dvh, 0.75rem);
    }
}

/* --- iPhone Plus / крупные телефоны --- */
@media (min-width: 390px) and (max-width: 767px) {
    #registerScreen, #authLanding {
        --r-shell-w: min(90%, var(--r-shell-max));
    }
}

/* --- iPad (portrait + landscape) --- */
@media (min-width: 768px) {
    #registerScreen, #authLanding {
        --r-shell-max: 440px;
        --r-shell-w: min(68%, var(--r-shell-max));
        --r-logo-reserve: clamp(6rem, 11vh, 8rem);
        --r-logo-w: min(calc(38% / 1.1), calc(280px / 1.1));
        --r-screen-pad-y: clamp(1rem, 3vh, 2rem);
        --r-stack-gap: clamp(0.75rem, 2vh, 1.125rem);
    }

    #registerScreen .test-card__title,
    #authLanding .test-card__title {
        font-size: clamp(1.25rem, 2.4vh, 1.625rem);
    }
}

/* --- ПК / широкие экраны --- */
@media (min-width: 1024px) {
    #registerScreen, #authLanding {
        --r-shell-max: 420px;
        --r-shell-w: var(--r-shell-max);
        --r-logo-reserve: 7.5rem;
        --r-logo-w: calc(280px / 1.1);
        --r-screen-pad-x: 1.5rem;
    }

    #registerScreen.auth-screen,
    #authLanding.auth-screen {
        padding-top: calc(var(--r-screen-pad-y) + env(safe-area-inset-top, 0px));
    }
}

/* --- Очень широкий монитор: карточка не растягивается --- */
@media (min-width: 1440px) {
    #registerScreen, #authLanding {
        --r-shell-max: 440px;
    }
}

/* --- Ландшафт на телефоне: меньше логотип, прокрутка формы --- */
@media (max-height: 500px) and (orientation: landscape) {
    #registerScreen, #authLanding {
        --r-logo-reserve: 4.5rem;
        --r-logo-w: min(calc(32% / 1.1), calc(180px / 1.1));
        --r-input-h: clamp(1.75rem, 4dvh, 2.15rem);
        --r-gender-h: clamp(3.5rem, calc(var(--r-input-h) * 1.75), 4.5rem);
        --r-stack-gap: 0.45rem;
    }

    #registerScreen.auth-screen,
    #authLanding.auth-screen {
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: calc(var(--r-screen-pad-y) + env(safe-area-inset-top, 0px));
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    #registerScreen .auth-card-shell,
    #authLanding .auth-card-shell {
        margin-block: 0.75rem;
    }
}

/* --- Доступность: без blur / motion --- */
@media (prefers-reduced-transparency: reduce) {
    #registerScreen .test-gender__opt {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-screen:not(.hidden) .auth-card,
    #registerScreen .test-gender__opt,
    #registerScreen .liquidGlass-wrapper--button,
    #authLanding .liquidGlass-wrapper--button {
        transition: none !important;
        animation: none !important;
    }
}