/* Shared public authentication experience for login and registration. */
.auth-page {
    position: relative;
    padding: clamp(36px, 5vw, 76px) 0 clamp(48px, 6vw, 86px);
    background:
        radial-gradient(circle at 12% 12%, rgba(37, 204, 198, .14), transparent 28%),
        radial-gradient(circle at 87% 80%, rgba(42, 132, 173, .11), transparent 31%),
        linear-gradient(145deg, #f6fbfb 0%, #edf5f7 48%, #f8fbfc 100%);
    overflow: hidden;
}

.auth-page::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(8, 72, 88, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 72, 88, .025) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.auth-page__canvas {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(1180px, calc(100% - 40px));
    min-width: 0;
    margin: 0 auto;
    grid-template-columns: minmax(390px, .88fr) minmax(470px, 1.12fr);
    align-items: stretch;
    gap: clamp(18px, 2vw, 28px);
}

.auth-card,
.auth-brand-panel {
    min-width: 0;
    border-radius: 24px;
}

.auth-card {
    display: flex;
    border: 1px solid rgba(171, 199, 207, .7);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 26px 70px rgba(8, 43, 59, .13);
    flex-direction: column;
    overflow: hidden;
}

.auth-card__header {
    padding: clamp(28px, 3vw, 40px) clamp(26px, 3.5vw, 44px) 24px;
    border-bottom: 1px solid #e4edef;
    background: linear-gradient(145deg, #ffffff 30%, #f3fbfa 100%);
}

.auth-card__eyebrow {
    margin: 0 0 8px;
    color: #087c82 !important;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.auth-card__header h1 {
    margin: 0;
    color: #071f32;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.auth-card__header > p:last-child {
    max-width: 510px;
    margin: 12px 0 0;
    color: #607683;
    font-size: .94rem;
    line-height: 1.58;
}

.auth-card__body {
    display: flex;
    padding: 26px clamp(26px, 3.5vw, 44px) clamp(30px, 3.5vw, 44px);
    flex: 1;
    flex-direction: column;
}

.auth-form {
    display: grid;
    min-width: 0;
    height: 100%;
    gap: 18px;
}

.auth-social-button {
    display: flex;
    min-height: 52px;
    padding: 10px 16px;
    border: 1px solid #b9cbd8;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #173a5e;
    font-size: .9rem;
    font-weight: 850;
    text-decoration: none;
}

.auth-social-button span {
    display: inline-grid;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    place-items: center;
    background: #1877f2;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
}

.auth-social-button:hover {
    border-color: #7fa8cf;
    background: #f6f9fd;
    color: #102f50;
}

.auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: #788b94;
    font-size: .74rem;
    font-weight: 800;
}

.auth-divider::before,
.auth-divider::after {
    height: 1px;
    background: #dbe7e9;
    content: "";
}

.auth-phone-note {
    margin: -5px 0 0 !important;
    color: #687e88 !important;
    font-size: .75rem;
    line-height: 1.5;
    text-align: center;
}

.auth-form > label,
.auth-form .auth-field {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: #193746;
    font-size: .82rem;
    font-weight: 850;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    height: 52px;
    padding: 0 15px;
    border: 1px solid #cbdce1;
    border-radius: 12px;
    background: #fff;
    color: #0b2738;
    box-shadow: inset 0 1px 2px rgba(7, 37, 52, .025);
    font-size: .96rem;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.auth-form input:hover {
    border-color: #9fbfc6;
}

.auth-form input:focus {
    border-color: #12a8aa;
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(18, 168, 170, .14);
}

.auth-form input:user-invalid {
    border-color: #c84d5e;
    box-shadow: 0 0 0 3px rgba(200, 77, 94, .1);
}

.auth-form .auth-password-control {
    position: relative;
    min-width: 0;
}

.auth-form .auth-password-control input {
    padding-right: 57px;
}

.auth-form .auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #607a86;
    box-shadow: none;
    transform: translateY(-50%);
}

.auth-form .auth-password-toggle:hover {
    background: #eaf7f6;
    color: #087b82;
    transform: translateY(-50%);
}

.auth-form .auth-password-toggle:focus-visible {
    outline: 3px solid rgba(18, 168, 170, .22);
    outline-offset: 0;
    background: #eaf7f6;
    color: #087b82;
}

.auth-login-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    padding: 2px 0;
}

.auth-login-options .auth-remember-option {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.auth-login-options .auth-remember-option input,
.auth-registration-legal input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 1px 0 0;
    padding: 0;
    accent-color: #0b9fa3;
}

.auth-login-options .auth-remember-option strong {
    color: #193746;
    font-size: .86rem;
}

.auth-login-options .auth-remember-option small {
    max-width: 285px;
    color: #6b7f89;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.38;
}

.auth-login-options__forgot {
    padding-top: 1px;
    color: #087b82;
    font-size: .8rem;
    font-weight: 850;
    text-decoration: underline;
    text-decoration-color: rgba(8, 123, 130, .35);
    text-underline-offset: 3px;
}

.auth-two-factor {
    display: grid;
    min-width: 0;
    gap: 18px;
}

.auth-two-factor__delivery {
    display: flex;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #bfe0df;
    border-radius: 14px;
    align-items: center;
    gap: 11px;
    background: #f0fbfa;
    color: #1d4a54;
    font-size: .84rem;
    line-height: 1.45;
}

.auth-two-factor__delivery strong {
    overflow-wrap: anywhere;
    color: #073d47;
}

.auth-two-factor__shield {
    display: inline-grid;
    width: 31px;
    min-width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 50%;
    background: #16a9a4;
    color: #fff;
    font-size: .9rem;
    font-weight: 900;
}

.auth-form--two-factor {
    height: auto;
    gap: 12px;
}

.auth-form .auth-two-factor__code {
    height: 62px;
    padding: 0 14px 0 23px;
    font-size: clamp(1.55rem, 4vw, 2rem);
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    letter-spacing: .34em;
    text-align: center;
}

.auth-two-factor__help,
.auth-two-factor__status,
.auth-two-factor__secondary p {
    margin: 0;
    color: #687e88;
    font-size: .76rem;
    line-height: 1.45;
}

.auth-two-factor__status.is-warning {
    padding: 11px 13px;
    border: 1px solid #ecd7a8;
    border-radius: 12px;
    background: #fff9eb;
    color: #75571d;
    font-weight: 750;
}

.auth-two-factor__secondary {
    display: grid;
    padding-top: 2px;
    gap: 7px;
}

.auth-two-factor__secondary form,
.auth-two-factor__cancel {
    margin: 0;
}

.auth-two-factor__resend,
.auth-two-factor__cancel button {
    min-height: 45px;
    width: 100%;
    padding: 9px 14px;
    border: 1px solid #aacdd1;
    border-radius: 11px;
    background: #fff;
    color: #087b82;
    box-shadow: none;
    font-size: .8rem;
    font-weight: 850;
}

.auth-two-factor__resend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.auth-two-factor__resend:not(:disabled):hover,
.auth-two-factor__cancel button:hover {
    border-color: #0b9294;
    background: #eefafa;
    color: #05666d;
    transform: none;
}

.auth-two-factor__resend:disabled {
    cursor: not-allowed;
    border-color: #d7e3e5;
    background: #f5f8f9;
    color: #71848c;
    opacity: 1;
}

.auth-two-factor__cancel button {
    min-height: 38px;
    border-color: transparent;
    background: transparent;
    color: #647b86;
    font-size: .75rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-registration-legal {
    display: grid;
    min-width: 0;
    gap: 0;
    margin: 1px 0 0;
    padding: 14px 16px 12px;
    border: 1px solid #d7e6e8;
    border-radius: 16px;
    background: #f5fafb;
}

.auth-registration-legal legend {
    padding: 0 5px;
    color: #173746;
    font-size: .82rem;
    font-weight: 900;
}

.auth-registration-legal .registration-legal-check {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px !important;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #e1ecee;
    border-radius: 0;
    background: transparent;
    color: #405965;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.42;
}

.auth-registration-legal .registration-legal-check:last-of-type {
    border-bottom: 0;
}

.auth-registration-legal a {
    color: #087b82;
    font-weight: 850;
    text-decoration: underline;
    text-decoration-color: rgba(8, 123, 130, .36);
    text-underline-offset: 2px;
}

.auth-registration-legal .field-help {
    margin: 5px 0 0;
    color: #6a7e88;
    font-size: .72rem;
    font-weight: 700;
}

.auth-form__submit {
    width: 100%;
    min-height: 54px;
    margin-top: 2px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0b9fa3, #13bbb2);
    color: #fff;
    box-shadow: 0 12px 24px rgba(10, 144, 148, .2);
    font-size: .96rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-form__submit:hover {
    background: linear-gradient(135deg, #087c83, #0aa49f);
    box-shadow: 0 16px 30px rgba(8, 123, 130, .25);
    transform: translateY(-2px);
}

.auth-form__submit:focus-visible {
    outline: 3px solid rgba(18, 168, 170, .28);
    outline-offset: 3px;
}

.auth-form__alternate {
    margin: auto 0 0 !important;
    padding-top: 2px;
    color: #687c87 !important;
    font-size: .82rem;
    text-align: center;
}

.auth-form__alternate a {
    color: #087b82;
    font-weight: 900;
}

.auth-brand-panel {
    position: relative;
    display: flex;
    min-height: 610px;
    padding: clamp(38px, 4vw, 58px);
    border: 1px solid rgba(73, 185, 188, .25);
    background:
        radial-gradient(circle at 77% 18%, rgba(37, 211, 202, .19), transparent 27%),
        radial-gradient(circle at 22% 90%, rgba(37, 132, 167, .23), transparent 32%),
        linear-gradient(145deg, #061c2c 0%, #082f42 53%, #075a61 100%);
    color: #fff;
    box-shadow: 0 28px 72px rgba(5, 33, 48, .2);
    align-items: center;
    overflow: hidden;
}

.auth-brand-panel::before,
.auth-brand-panel::after {
    position: absolute;
    border: 1px solid rgba(94, 221, 212, .13);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.auth-brand-panel::before {
    top: -130px;
    right: -95px;
    width: 390px;
    height: 390px;
}

.auth-brand-panel::after {
    right: 54px;
    bottom: -190px;
    width: 460px;
    height: 460px;
}

.auth-brand-panel__motif {
    position: absolute;
    z-index: 0;
    right: -55px;
    bottom: -20px;
    width: min(82%, 520px);
    opacity: .45;
    pointer-events: none;
}

.auth-brand-panel__motif svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.auth-brand-panel__motif .auth-brand-panel__map {
    fill: rgba(68, 203, 198, .06);
    stroke: rgba(148, 238, 229, .31);
    stroke-width: 2;
}

.auth-brand-panel__motif .auth-brand-panel__route {
    fill: none;
    stroke: rgba(87, 229, 219, .62);
    stroke-width: 3;
    stroke-dasharray: 7 10;
}

.auth-brand-panel__motif .auth-brand-panel__route--secondary {
    stroke: rgba(110, 177, 220, .48);
}

.auth-brand-panel__motif circle {
    fill: #4ce0d7;
    stroke: rgba(255, 255, 255, .8);
    stroke-width: 3;
}

.auth-brand-panel__motif > span {
    position: absolute;
    right: 24%;
    bottom: 23%;
    color: rgba(99, 229, 220, .1);
    font-size: clamp(5rem, 10vw, 9rem);
    font-weight: 950;
    line-height: 1;
}

.auth-brand-panel__content {
    position: relative;
    z-index: 1;
    display: grid;
    max-width: 520px;
    align-content: center;
}

.auth-brand-panel__logo {
    display: inline-flex;
    width: fit-content;
    max-width: 230px;
    margin-bottom: 32px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 16, 26, .18);
}

.auth-brand-panel__logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.auth-brand-panel__kicker {
    margin: 0 0 10px;
    color: #6ee4dc;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.auth-brand-panel h2 {
    max-width: 510px;
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 3.6vw, 3.15rem);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.auth-page--login .auth-brand-panel h2 {
    font-size: clamp(2rem, 3.15vw, 2.75rem);
}

.auth-brand-panel__lead {
    max-width: 480px;
    margin: 16px 0 0;
    color: #cce3e8;
    font-size: .98rem;
    line-height: 1.58;
}

.auth-brand-panel__benefits {
    display: grid;
    gap: 11px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.auth-brand-panel__benefits li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #f4ffff;
    font-size: .88rem;
}

.auth-brand-panel__benefits li > span {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(104, 232, 222, .35);
    border-radius: 9px;
    background: rgba(42, 190, 185, .13);
    color: #69e1d9;
}

.auth-brand-panel__benefits svg {
    width: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-brand-panel__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 30px 0 0;
    color: #9fc3ca;
    font-size: .73rem;
    font-weight: 750;
}

.auth-brand-panel__note > span {
    width: 28px;
    height: 2px;
    background: #3ad0c8;
}

@media (min-width: 901px) {
    .auth-page {
        min-height: calc(100dvh - 92px);
    }

    .auth-page--register .auth-brand-panel {
        min-height: 760px;
    }
}

@media (max-width: 900px) {
    .auth-page {
        min-height: 0;
        padding: 28px 0 52px;
        overflow: visible;
    }

    .auth-page__canvas {
        width: min(680px, calc(100% - 32px));
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .auth-brand-panel {
        order: -1;
        min-height: 285px;
        padding: 30px 34px;
        align-items: flex-start;
    }

    .auth-brand-panel__logo {
        max-width: 190px;
        margin-bottom: 22px;
    }

    .auth-brand-panel h2 {
        max-width: 580px;
        font-size: clamp(1.8rem, 5vw, 2.5rem);
    }

    .auth-brand-panel__lead {
        max-width: 560px;
        margin-top: 10px;
    }

    .auth-brand-panel__benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 20px;
    }

    .auth-brand-panel__note {
        display: none;
    }

    .auth-brand-panel__motif {
        right: -70px;
        bottom: -150px;
        width: 450px;
    }
}

@media (max-width: 600px) {
    .auth-page {
        padding: 14px 0 30px;
    }

    .auth-page__canvas {
        width: min(100% - 24px, 480px);
        gap: 12px;
    }

    .auth-card,
    .auth-brand-panel {
        border-radius: 18px;
    }

    .auth-brand-panel {
        min-height: 0;
        padding: 20px 22px 22px;
    }

    .auth-brand-panel__logo {
        max-width: 164px;
        margin-bottom: 15px;
        padding: 5px 8px;
        border-radius: 10px;
    }

    .auth-brand-panel__kicker {
        margin-bottom: 6px;
        font-size: .62rem;
    }

    .auth-brand-panel h2 {
        max-width: 340px;
        font-size: clamp(1.45rem, 7vw, 1.85rem);
        line-height: 1.08;
    }

    .auth-page--login .auth-brand-panel h2 {
        max-width: 290px;
        font-size: clamp(1.4rem, 6.2vw, 1.7rem);
    }

    .auth-brand-panel__lead {
        display: -webkit-box;
        max-width: 350px;
        margin-top: 8px;
        overflow: hidden;
        color: #d3e7ea;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: .82rem;
        line-height: 1.42;
    }

    .auth-brand-panel__benefits,
    .auth-brand-panel__motif > span {
        display: none;
    }

    .auth-brand-panel__motif {
        right: -82px;
        bottom: -160px;
        width: 360px;
        opacity: .34;
    }

    .auth-card__header {
        padding: 22px 20px 18px;
    }

    .auth-card__header h1 {
        font-size: clamp(1.8rem, 9vw, 2.2rem);
    }

    .auth-card__header > p:last-child {
        margin-top: 8px;
        font-size: .84rem;
        line-height: 1.45;
    }

    .auth-card__body {
        padding: 20px 18px 24px;
    }

    .auth-form {
        gap: 15px;
    }

    .auth-form input[type="text"],
    .auth-form input[type="email"],
    .auth-form input[type="password"] {
        height: 50px;
        font-size: 16px;
    }

    .auth-form .auth-two-factor__code {
        height: 58px;
        padding-left: 18px;
        font-size: 1.65rem;
        letter-spacing: .28em;
    }

    .auth-two-factor__resend {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .auth-login-options {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .auth-login-options__forgot {
        padding-left: 30px;
    }

    .auth-registration-legal {
        padding: 11px 13px 9px;
        border-radius: 13px;
    }

    .auth-registration-legal .registration-legal-check {
        padding: 9px 0;
        font-size: .75rem;
    }

    .auth-form__submit {
        min-height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-form input,
    .auth-form__submit {
        transition: none;
    }

    .auth-form__submit:hover {
        transform: none;
    }
}