/* ==========================================================================
   RINALDO WIN - REGISTER
   Cinematic night + clean glass + gold premium
   ========================================================================== */

:root {
    --gold: #ffc94b;
    --gold-light: #ffe6a0;
    --gold-deep: #d99217;

    --white: #f8f8fb;
    --muted: rgba(235, 239, 248, .72);

    --glass: rgba(12, 17, 30, .12);
    --border: rgba(235, 241, 255, .34);
}


/* ==========================================================================
   GLOBAL
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;

    color: var(--white);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: #05070d;

    overflow-x: hidden;
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================================
   PAGE
   ========================================================================== */

.register-page {
    position: relative;

    width: 100%;
    min-height: 100svh;

    overflow-x: hidden;
    overflow-y: auto;

    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .28),
            rgba(0, 0, 0, .04) 35%,
            rgba(0, 0, 0, .10) 70%,
            rgba(0, 0, 0, .48)
        ),
        url("../images/fundallogin.png")
        center center / cover no-repeat fixed;
}


/* ==========================================================================
   ATMOSPHERE
   ========================================================================== */

.register-page::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(87, 119, 190, .14),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 75%,
            rgba(255, 180, 48, .08),
            transparent 24%
        ),
        radial-gradient(
            circle at 85% 65%,
            rgba(61, 104, 202, .10),
            transparent 28%
        );
}

.register-page::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    box-shadow:
        inset 0 0 180px rgba(0, 0, 0, .42);
}


/* ==========================================================================
   BACKGROUND GLOW
   ========================================================================== */

.bg-glow {
    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;

    opacity: .35;
}

.bg-glow-one {
    left: -130px;
    top: 35%;

    background: rgba(255, 174, 45, .14);
}

.bg-glow-two {
    right: -150px;
    top: 25%;

    background: rgba(67, 104, 202, .15);
}


/* ==========================================================================
   LANGUAGE
   ========================================================================== */

.language-switcher {
    position: absolute;

    top: 42px;
    right: 5.5vw;

    z-index: 10;

    min-width: 176px;
    height: 51px;

    padding: 0 19px;

    display: flex;
    align-items: center;
    gap: 12px;

    border: 1px solid rgba(255, 205, 100, .28);
    border-radius: 28px;

    background: rgba(7, 11, 21, .17);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    color: rgba(248, 248, 252, .88);

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 10px 30px rgba(0,0,0,.12);

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        transform .2s ease;
}

.language-switcher:hover {
    border-color: rgba(255, 205, 100, .62);

    background:
        rgba(12, 17, 30, .30);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 10px 30px rgba(0,0,0,.18),
        0 0 25px rgba(255, 201, 75, .08);
}

.language-switcher:active {
    transform: translateY(1px);
}

.language-switcher:focus-visible {
    outline: none;

    border-color: rgba(255, 205, 100, .85);

    box-shadow:
        0 0 0 3px rgba(255, 197, 68, .10),
        0 0 28px rgba(255, 190, 50, .12);
}

.language-globe {
    color: var(--gold);

    font-size: 23px;

    line-height: 1;

    text-shadow:
        0 0 10px rgba(255, 201, 75, .35);
}

.language-arrow {
    margin-left: auto;

    color: var(--gold-light);

    font-size: 22px;
    line-height: 1;

    transition:
        transform .25s ease;
}

.language-switcher:hover .language-arrow {
    transform: translateY(2px);
}


/* ==========================================================================
   STAGE
   ========================================================================== */

.register-stage {
    width: 100%;
    min-height: 100svh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        120px
        20px
        150px;
}


/* ==========================================================================
   GLASS CARD
   ========================================================================== */

.register-card {
    position: relative;

    width: min(620px, 92vw);

    min-height: 1160px;

    overflow: hidden;

    border: 1px solid rgba(235, 241, 255, .42);

    border-radius: 40px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.018) 40%,
            rgba(7, 12, 25, .08)
        );

    backdrop-filter:
        blur(2px)
        saturate(112%);

    -webkit-backdrop-filter:
        blur(2px)
        saturate(112%);

    box-shadow:
        0 35px 100px rgba(0,0,0,.40),
        inset 0 1px 0 rgba(255,255,255,.26),
        inset 1px 0 0 rgba(255,255,255,.08);

    isolation: isolate;
}


/* ==========================================================================
   CARD EFFECTS
   ========================================================================== */

.register-card::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.13),
            transparent 24%,
            transparent 74%,
            rgba(255,211,112,.08)
        );

    box-shadow:
        inset 0 0 45px rgba(255,255,255,.018);
}

.register-card::after {
    content: "";

    position: absolute;

    inset: 1px;

    border-radius: 39px;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.045),
        inset 0 0 35px rgba(255,197,75,.025);
}


/* ==========================================================================
   REFLECTION
   ========================================================================== */

.glass-reflection {
    position: absolute;

    width: 180px;
    height: 850px;

    left: -180px;
    top: -250px;

    transform: rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.045),
            transparent
        );

    filter: blur(13px);

    opacity: .65;

    pointer-events: none;

    animation: glassReflection 9s ease-in-out infinite;
}

@keyframes glassReflection {

    0% {
        left: -220px;
        opacity: 0;
    }

    25% {
        opacity: .6;
    }

    55% {
        left: 680px;
        opacity: .35;
    }

    100% {
        left: 760px;
        opacity: 0;
    }
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.register-content {
    position: relative;
    z-index: 2;

    width: 100%;

    padding:
        50px
        58px
        45px;
}


/* ==========================================================================
   LOGO
   ========================================================================== */

.logo-area {
    position: relative;

    width: 110px;
    height: 100px;

    margin:
        0 auto
        5px;

    display: grid;
    place-items: center;

    color: var(--gold);
}

.crown-svg {
    position: relative;
    z-index: 2;

    width: 100px;
    height: 90px;

    filter:
        drop-shadow(0 0 8px rgba(255,205,89,.72))
        drop-shadow(0 0 25px rgba(255,174,35,.34));
}

.crown-glow {
    position: absolute;

    width: 70px;
    height: 70px;

    border-radius: 50%;

    background: rgba(255, 186, 42, .16);

    filter: blur(25px);
}


/* ==========================================================================
   TITLE
   ========================================================================== */

.register-content h1 {
    margin: 0;

    text-align: center;

    font-size: clamp(38px, 5vw, 50px);

    line-height: 1.05;

    font-weight: 750;

    letter-spacing: -1.8px;
}

.register-content h1 span {
    color: var(--gold);

    text-shadow:
        0 0 28px rgba(255,194,64,.24);
}

.subtitle {
    margin:
        14px
        0
        17px;

    text-align: center;

    color: rgba(245,246,250,.78);

    font-size: 14px;

    letter-spacing: .7px;
}


/* ==========================================================================
   DIVIDER
   ========================================================================== */

.gold-divider {
    width: 160px;

    margin:
        0 auto
        27px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 10px;
}

.gold-divider span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,201,75,.45)
        );
}

.gold-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255,201,75,.45),
            transparent
        );
}

.gold-divider b {
    color: var(--gold);

    font-size: 8px;

    text-shadow:
        0 0 15px rgba(255,201,75,.85);
}


/* ==========================================================================
   FORM
   ========================================================================== */

.register-form {
    width: 100%;

    display: grid;

    gap: 13px;
}

.field-group {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   INPUT BOX - PREMIUM GOLD GLASS
   ========================================================================== */

.input-box {
    position: relative;

    width: 100%;
    min-width: 0;

    height: 68px;

    display: flex;
    align-items: center;

    border:
        1px solid
        rgba(245,247,255,.34);

    border-radius: 18px;

    /*
       FUNDAL NOU:
       mai vizibil, mai elegant și mai profund
    */
    background:
        linear-gradient(
            135deg,
            rgba(10, 15, 28, .72),
            rgba(20, 25, 40, .58) 48%,
            rgba(7, 11, 22, .68)
        );

    /*
       efect de sticlă + lumină fină
    */
    backdrop-filter:
        blur(14px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(135%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 22px rgba(255,201,75,.025),
        0 10px 25px rgba(0,0,0,.16),
        0 0 0 1px rgba(0,0,0,.10);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        transform .25s ease;
}


/*
   Reflexie foarte fină în interiorul casetei
*/
.input-box::before {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: 17px;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.075),
            transparent 24%,
            transparent 68%,
            rgba(255,201,75,.035)
        );

    opacity: .9;
}


/*
   Linia aurie fină de jos
*/
.input-box::after {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 0;

    height: 1px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,201,75,.22),
            transparent
        );

    opacity: .65;

    pointer-events: none;
}

.input-box:hover {
    border-color:
        rgba(255,255,255,.48);

    background:
        linear-gradient(
            135deg,
            rgba(12,18,32,.78),
            rgba(24,29,45,.64),
            rgba(8,13,25,.74)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 0 25px rgba(255,201,75,.035),
        0 12px 30px rgba(0,0,0,.18),
        0 0 18px rgba(255,190,50,.035);
}


/*
   Când scrii în câmp:
   aurul devine mai vizibil și caseta se aprinde elegant
*/
.input-box:focus-within {
    border-color:
        rgba(255,205,92,.82);

    background:
        linear-gradient(
            135deg,
            rgba(12,18,31,.84),
            rgba(28,32,48,.68) 50%,
            rgba(9,14,27,.80)
        );

    box-shadow:
        0 0 0 3px rgba(255,197,68,.065),
        0 0 30px rgba(255,190,50,.105),
        0 12px 35px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 0 28px rgba(255,201,75,.045);
}

.input-box:focus-within::after {
    opacity: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,201,75,.65),
            transparent
        );

    box-shadow:
        0 0 10px rgba(255,201,75,.35);
}


/* ==========================================================================
   INPUT ICON
   ========================================================================== */

.input-icon {
    position: relative;
    z-index: 2;

    width: 65px;
    min-width: 65px;

    flex: 0 0 65px;

    display: grid;
    place-items: center;

    color:
        rgba(255,218,126,.90);

    filter:
        drop-shadow(0 0 5px rgba(255,201,75,.18));
}

.input-icon svg {
    width: 25px;
    height: 25px;
}


/* ==========================================================================
   INPUT TEXT - GOLD
   ========================================================================== */

.input-box input {
    position: relative;
    z-index: 2;

    min-width: 0;
    width: 100%;

    flex: 1;

    height: 100%;

    padding:
        0
        18px
        0
        0;

    border: 0;
    outline: 0;

    /*
       TEXTUL SCRIS NORMAL
    */
    color:
        #ffd86a !important;

    /*
       lumină aurie discretă
    */
    text-shadow:
        0 0 10px rgba(255,201,75,.14);

    background: transparent;

    font-size: 15px;

    caret-color:
        #ffc94b;

    -webkit-text-fill-color:
        #ffd86a !important;
}

.input-box input::placeholder {
    color:
        rgba(239,241,247,.50);

    text-shadow: none;

    -webkit-text-fill-color:
        rgba(239,241,247,.50);
}

.input-box input:focus {
    color:
        #ffe08a !important;

    -webkit-text-fill-color:
        #ffe08a !important;

    text-shadow:
        0 0 12px rgba(255,201,75,.18);

    caret-color:
        #ffd45c;
}


/* ==========================================================================
   AUTOFILL - EMAIL / PASSWORD SALVATE
   ========================================================================== */

.input-box input:-webkit-autofill,
.input-box input:-webkit-autofill:hover,
.input-box input:-webkit-autofill:focus,
.input-box input:-webkit-autofill:active {

    /*
       TEXT AURIU ȘI LA AUTOFILL
    */
    -webkit-text-fill-color:
        #ffd86a !important;

    caret-color:
        #ffd86a !important;

    /*
       FUNDAL PREMIUM ÎN CÂMPUL AUTOFILL
    */
    -webkit-box-shadow:
        0 0 0 1000px rgba(13, 19, 34, .78) inset !important;

    box-shadow:
        0 0 0 1000px rgba(13, 19, 34, .78) inset !important;

    background:
        rgba(13, 19, 34, .78) !important;

    color:
        #ffd86a !important;

    text-shadow:
        0 0 10px rgba(255,201,75,.14);

    /*
       împiedică browserul să pună galbenul lui urât
    */
    transition:
        background-color 99999s ease-in-out 0s !important;
}


/* ==========================================================================
   PASSWORD TOGGLE
   ========================================================================== */

.password-toggle {
    position: relative;
    z-index: 3;

    width: 57px;
    min-width: 57px;
    height: 100%;

    display: grid;
    place-items: center;

    border: 0;

    background: transparent;

    color:
        rgba(255,218,126,.76);

    cursor: pointer;

    transition: .2s ease;
}

.password-toggle:hover {
    color:
        var(--gold-light);

    filter:
        drop-shadow(
            0 0 8px rgba(255,201,75,.48)
        );
}

.password-toggle svg {
    width: 24px;
    height: 24px;
}


/* ==========================================================================
   PASSWORD STRENGTH
   ========================================================================== */

.password-strength {
    width: 100%;

    padding:
        7px
        5px
        0;
}

.strength-info {
    display: flex;
    align-items: center;

    gap: 4px;

    color:
        rgba(241,242,247,.72);

    font-size: 12px;
}

.strength-info strong {
    color: var(--gold);

    font-weight: 600;

    text-shadow:
        0 0 9px rgba(255,201,75,.18);
}

.strength-track {
    width: 100%;

    height: 5px;

    margin-top: 7px;

    overflow: hidden;

    border-radius: 10px;

    background:
        rgba(255,255,255,.22);
}

.strength-fill {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #d68b24,
            #ffd85d
        );

    box-shadow:
        0 0 12px rgba(255,198,70,.45);

    transition:
        width .3s ease;
}


/* ==========================================================================
   BIRTHDAY BUTTON
   ========================================================================== */

.birthday-content {
    position: relative;
    z-index: 2;

    flex: 1;

    min-width: 0;

    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 2px;
}

.birthday-content label {
    margin-bottom: 2px;

    color:
        rgba(245,246,250,.72);

    font-size: 12px;
}

.birthday-content input {
    width: 100%;
    min-width: 0;

    height: 30px;

    padding: 0 !important;

    color:
        #ffd86a !important;

    -webkit-text-fill-color:
        #ffd86a !important;

    text-shadow:
        0 0 9px rgba(255,201,75,.12);

    font-size: 15px;

    caret-color:
        #ffc94b;
}

.birthday-content input::-webkit-calendar-picker-indicator {
    opacity: .75;

    cursor: pointer;

    filter:
        invert(1)
        sepia(1)
        saturate(2)
        hue-rotate(355deg);
}

.birthday-label {
    color:
        rgba(245,246,250,.55);

    font-size: 11px;

    line-height: 1;
}

.birthday-value {
    color:
        #ffd86a;

    text-shadow:
        0 0 9px rgba(255,201,75,.13);

    font-size: 15px;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.birthday-value.placeholder {
    color:
        rgba(239,241,247,.55);

    text-shadow: none;
}

.birthday-arrow {
    position: relative;
    z-index: 3;

    width: 48px;

    flex: 0 0 48px;

    display: grid;
    place-items: center;

    color:
        rgba(255,201,75,.92);

    font-size: 28px;

    font-weight: 300;

    line-height: 1;

    transform: translateY(-1px);

    text-shadow:
        0 0 10px rgba(255,201,75,.20);

    transition:
        transform .25s ease,
        filter .25s ease;
}

.birthday-box {
    cursor: pointer;

    user-select: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .2s ease;
}

.birthday-box:hover {
    border-color:
        rgba(255,255,255,.48);
}

.birthday-box.active {
    border-color:
        rgba(255,205,92,.82);

    box-shadow:
        0 0 0 3px rgba(255,197,68,.065),
        0 0 30px rgba(255,190,50,.11),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 0 25px rgba(255,201,75,.04);
}

.birthday-box.active .birthday-arrow {
    transform:
        rotate(90deg);

    filter:
        drop-shadow(0 0 7px rgba(255,201,75,.45));
}


/* ==========================================================================
   TERMS
   ========================================================================== */

.terms {
    position: relative;

    width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin:
        4px
        0
        5px;

    cursor: pointer;

    color:
        rgba(245,246,250,.75);

    font-size: 13px;

    line-height: 1.65;
}

.terms input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.terms-check {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    margin-top: 1px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.38);

    border-radius: 7px;

    background:
        rgba(255,255,255,.05);

    transition: .25s ease;
}

.terms-check svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: #2a210a;

    stroke-width: 3;

    opacity: 0;
}

.terms input:checked + .terms-check {
    border-color: #ffe069;

    background:
        #ffe069;

    box-shadow:
        0 0 18px rgba(255,205,69,.32);
}

.terms input:checked + .terms-check svg {
    opacity: 1;
}

.terms-text {
    min-width: 0;
    flex: 1;

    overflow-wrap: anywhere;
    word-break: normal;
}

.terms-text a {
    color: var(--gold-light);

    transition: .2s ease;
}

.terms-text a:hover {
    text-shadow:
        0 0 13px rgba(255,201,75,.45);
}


/* ==========================================================================
   BUTTON
   ========================================================================== */

.register-button {
    position: relative;

    width: 100%;
    height: 67px;

    margin-top: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        #ffe092;

    border-radius: 35px;

    background:
        linear-gradient(
            100deg,
            rgba(17,14,10,.92),
            rgba(63,45,14,.88) 48%,
            #ffc32e 100%
        );

    color: #fff;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.10) inset,
        0 10px 28px rgba(255,176,34,.20),
        0 0 28px rgba(255,192,60,.15);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.register-button::before {
    content: "";

    position: absolute;

    top: -40%;
    left: -35%;

    width: 30%;
    height: 180%;

    transform: rotate(25deg);

    background:
        rgba(255,255,255,.20);

    filter: blur(8px);

    transition:
        left .65s ease;
}

.register-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.14) inset,
        0 14px 34px rgba(255,176,34,.30),
        0 0 38px rgba(255,192,60,.20);
}

.register-button:hover::before {
    left: 115%;
}

.register-button span,
.register-button b {
    position: relative;
    z-index: 2;
}

.register-button b {
    position: absolute;

    right: 28px;

    font-size: 30px;

    font-weight: 300;

    line-height: 1;
}


/* ==========================================================================
   SOCIAL
   ========================================================================== */

.social-divider {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 15px;

    margin:
        25px 0
        14px;
}

.social-divider span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25)
        );
}

.social-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.25),
            transparent
        );
}

.social-divider em {
    color:
        rgba(245,246,250,.70);

    font-size: 12px;

    font-style: normal;

    white-space: nowrap;
}

.social-login {
    width: 100%;

    display: flex;

    justify-content: center;

    gap: 24px;
}

.social-btn {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.23);

    border-radius: 50%;

    background:
        rgba(7,11,21,.18);

    color: #fff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 10px 25px rgba(0,0,0,.12);

    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);

    cursor: pointer;

    transition: .22s ease;
}

.social-btn:hover {
    transform: translateY(-3px);

    border-color:
        rgba(255,205,92,.60);

    box-shadow:
        0 0 25px rgba(255,190,52,.15),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.google-btn strong {
    font-size: 25px;

    font-family: Arial, sans-serif;

    color: #fff;

    text-shadow:
        1px 0 #4285f4,
        -1px 0 #ea4335,
        0 1px #34a853;
}

.social-btn svg {
    width: 27px;
    height: 27px;
}

.discord-btn svg {
    color: #a9a2ff;
}


/* ==========================================================================
   LOGIN LINE
   ========================================================================== */

.login-line {
    margin-top: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    color:
        rgba(241,242,247,.78);

    font-size: 13px;
}

.login-line a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--gold-light);
}

.login-line a:hover {
    text-shadow:
        0 0 15px rgba(255,201,75,.4);
}

.login-line b {
    font-size: 20px;

    font-weight: 400;

    line-height: 1;

    transform: translateY(-1px);
}


/* ==========================================================================
   ERRORS
   ========================================================================== */

.field-error {
    display: block;

    min-height: 0;

    margin:
        3px
        5px
        0;

    color:
        #ffb7b7;

    font-size: 11px;
}

.input-box.input-error {
    border-color:
        rgba(255,88,88,.82);

    box-shadow:
        0 0 0 3px rgba(255,70,70,.07);
}

.form-message {
    width: 100%;

    padding:
        11px
        14px;

    border-radius: 13px;

    font-size: 13px;
}

.form-message-error {
    color: #ffd5d5;

    border:
        1px solid
        rgba(255,80,80,.30);

    background:
        rgba(120,20,20,.18);
}

.form-message-success {
    color: #e6ffd1;

    border:
        1px solid
        rgba(137,255,100,.28);

    background:
        rgba(30,100,20,.16);
}


/* ==========================================================================
   BOTTOM
   ========================================================================== */

.bottom-info {
    position: absolute;

    left: 4.5vw;
    right: 4.5vw;

    bottom: 27px;

    display: flex;
    align-items: center;

    min-height: 50px;
}

.bottom-features {
    display: flex;

    align-items: center;

    gap: 30px;
}

.feature-item {
    display: flex;
    align-items: center;

    gap: 9px;

    color:
        rgba(245,246,250,.68);

    font-size: 13px;
}

.feature-icon {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    color: var(--gold);

    font-size: 20px;

    text-shadow:
        0 0 10px rgba(255,201,75,.30);
}

.feature-item strong {
    font-weight: 400;
}

.copyright {
    position: absolute;

    right: 0;

    color:
        rgba(242,243,248,.34);

    font-size: 12px;
}


/* ==========================================================================
   AUTOFILL - EXTRA SAFETY
   ========================================================================== */

.input-box input:-webkit-autofill,
.input-box input:-webkit-autofill:hover,
.input-box input:-webkit-autofill:focus,
.input-box input:-webkit-autofill:active {

    -webkit-text-fill-color:
        #ffd86a !important;

    -webkit-box-shadow:
        0 0 0 1000px rgba(13,19,34,.78) inset !important;

    box-shadow:
        0 0 0 1000px rgba(13,19,34,.78) inset !important;

    background:
        rgba(13,19,34,.78) !important;

    color:
        #ffd86a !important;

    caret-color:
        #ffd86a !important;

    transition:
        background-color 99999s ease-in-out 0s !important;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   MOBILE - MAX 760PX
   ========================================================================== */

@media screen and (max-width: 760px) {

    .register-page {
        background-attachment: scroll;
        background-position: center center;
        min-height: 100svh;
    }

    html,
    body {
        scroll-behavior: smooth;
    }


    /* LIMBA */

    .language-switcher {
    top: 12px;
    right: 14px;

    min-width: 132px;
    height: 42px;

    padding: 0 14px;

    border-radius: 23px;

    font-size: 12px;
}

.language-globe {
    font-size: 19px;
}

.language-arrow {
    font-size: 18px;
}


    /* CONTAINER */

    .register-stage {
        min-height: 100svh;

        padding:
            72px
            10px
            90px;

        align-items: flex-start;
    }


    /* CARD */

    .register-card {
        width: 100%;

        min-height: 0;

        border-radius: 28px;

        position: relative;
    }

    .register-card::after {
        border-radius: 27px;
    }


    /* CONȚINUT */

    .register-content {
        padding:
            26px
            20px
            28px;

        position: relative;
    }

    .register-form {
        scroll-margin-bottom: 140px;
    }


    /* LOGO */

    .logo-area {
        width: 82px;
        height: 74px;

        margin:
            0 auto
            2px;
    }

    .crown-svg {
        width: 76px;
        height: 68px;
    }

    .crown-glow {
        width: 55px;
        height: 55px;
    }


    /* TITLU */

    .register-content h1 {
        font-size: 34px;

        line-height: 1.05;

        letter-spacing: -1.3px;
    }

    .subtitle {
        margin:
            9px
            0
            14px;

        padding: 0 5px;

        font-size: 12px;

        line-height: 1.45;
    }


    /* DIVIDER */

    .gold-divider {
        width: 125px;

        margin:
            0 auto
            20px;

        gap: 8px;
    }


    /* FORM */

    .register-form {
        gap: 10px;
    }


    /* INPUT */

    .input-box {
        height: 60px;

        border-radius: 16px;

        background:
            linear-gradient(
                135deg,
                rgba(10,15,28,.78),
                rgba(21,27,42,.64),
                rgba(7,11,22,.74)
            );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            inset 0 0 20px rgba(255,201,75,.025),
            0 9px 24px rgba(0,0,0,.16);
    }

    .input-box::before {
        border-radius: 15px;
    }

    .input-box:focus-within {
        border-color:
            rgba(255, 205, 92, .88);

        background:
            linear-gradient(
                135deg,
                rgba(12,18,31,.86),
                rgba(27,33,49,.70),
                rgba(8,13,25,.80)
            );

        box-shadow:
            0 0 0 3px rgba(255, 197, 68, .08),
            0 0 28px rgba(255, 190, 50, .13),
            inset 0 1px 0 rgba(255,255,255,.14),
            inset 0 0 24px rgba(255,201,75,.04);
    }

    .input-box input:focus {
        color:
            #ffe08a !important;

        -webkit-text-fill-color:
            #ffe08a !important;

        caret-color:
            #ffd45c;
    }

    .input-box input:-webkit-autofill,
    .input-box input:-webkit-autofill:hover,
    .input-box input:-webkit-autofill:focus,
    .input-box input:-webkit-autofill:active {

        -webkit-text-fill-color:
            #ffd86a !important;

        -webkit-box-shadow:
            0 0 0 1000px rgba(13,19,34,.82) inset !important;

        box-shadow:
            0 0 0 1000px rgba(13,19,34,.82) inset !important;

        background:
            rgba(13,19,34,.82) !important;

        color:
            #ffd86a !important;
    }

    .input-box input:focus {
        caret-color: #ffc94b;
    }

    .input-icon {
        width: 54px;
        min-width: 54px;
        flex: 0 0 54px;

        color:
            rgba(255,218,126,.92);
    }

    .input-icon svg {
        width: 23px;
        height: 23px;
    }

    .input-box input {
        padding-right: 8px;

        font-size: 15px;
    }


    /* PASSWORD */

    .password-toggle {
        width: 48px;
        min-width: 48px;
        flex: 0 0 48px;

        position: relative;
        z-index: 1001 !important;

        color:
            rgba(255,218,126,.78);
    }

    .password-toggle svg {
        width: 22px;
        height: 22px;
    }


    /* PASSWORD STRENGTH */

    .password-strength {
        padding:
            5px
            4px
            0;
    }

    .strength-info {
        font-size: 11px;
    }

    .strength-track {
        height: 5px;

        margin-top: 5px;
    }


    /* DATA NAȘTERII */

    .birthday-box {
        position: relative !important;
        z-index: 1000 !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 62px !important;

        cursor: pointer !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;

        -webkit-user-select: none;
        user-select: none;

        -webkit-tap-highlight-color: transparent;
    }

    .birthday-content {
        min-width: 0;

        padding-right: 6px;
    }

    .birthday-content label {
        font-size: 11px;
    }

    .birthday-content input {
        height: 27px;

        font-size: 14px;

        color:
            #ffd86a !important;

        -webkit-text-fill-color:
            #ffd86a !important;
    }

    .birthday-value {
        font-size: 14px;

        color:
            #ffd86a;
    }


    /* TERMENI */

    .terms {
        width: 100%;

        margin:
            4px
            0
            5px;

        gap: 8px;

        font-size: 12px;

        line-height: 1.55;

        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .terms-check {
        width: 22px;
        height: 22px;

        flex: 0 0 22px;

        border-radius: 6px;
    }

    .terms-check svg {
        width: 15px;
        height: 15px;
    }

    .terms-text {
        min-width: 0;
        width: 100%;

        overflow-wrap: break-word;
    }


    /* BUTON */

    .register-button {
        height: 60px;

        margin-top: 4px;

        border-radius: 31px;

        font-size: 16px;

        position: relative;
        z-index: 1000 !important;

        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .register-button b {
        right: 21px;

        font-size: 27px;
    }


    /* SOCIAL DIVIDER */

    .social-divider {
        gap: 10px;

        margin:
            20px 0
            12px;
    }

    .social-divider em {
        font-size: 11px;

        white-space: nowrap;
    }


    /* SOCIAL */

    .social-login {
        gap: 16px;
    }

    .social-btn {
        width: 57px;
        height: 57px;

        flex: 0 0 57px;

        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .social-btn svg {
        width: 24px;
        height: 24px;
    }

    .google-btn strong {
        font-size: 22px;
    }


    /* LOGIN */

    .login-line {
        margin-top: 20px;

        flex-wrap: wrap;

        gap: 6px;

        font-size: 12px;

        text-align: center;
    }

    .login-line a {
        gap: 7px;

        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .login-line b {
        font-size: 18px;
    }


    /* ERORI */

    .field-error {
        margin:
            3px
            4px
            0;

        font-size: 10px;

        line-height: 1.4;
    }

    .form-message {
        padding:
            9px
            12px;

        font-size: 12px;
    }


    /* BOTTOM */

    .bottom-info {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;

        margin-top: 15px;

        padding:
            0
            8px;

        justify-content: center;
    }

    .bottom-features {
        width: 100%;

        justify-content: center;

        gap: 12px;
    }

    .feature-item {
        gap: 4px;

        font-size: 10px;

        white-space: nowrap;
    }

    .feature-icon {
        width: 20px;
        height: 20px;

        font-size: 16px;
    }

    .copyright {
        display: none;
    }
}
/* ============================================================
   CINEMATIC GOLDEN LIGHT TRAIL
   ============================================================ */

.register-page {
    position: relative;
}

/* Lumina care trece prin fundal */
.register-page::before {
    content: "";

    position: absolute;
    z-index: 0;

    width: 620px;
    height: 4px;

    left: -30%;
    top: 68%;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 201, 75, 0) 12%,
            rgba(255, 201, 75, .18) 30%,
            rgba(255, 220, 130, .72) 46%,
            #fff5cf 50%,
            rgba(255, 201, 75, .60) 57%,
            rgba(255, 180, 40, .18) 78%,
            transparent 100%
        );

    box-shadow:
        0 0 5px rgba(255, 231, 160, .95),
        0 0 14px rgba(255, 210, 90, .80),
        0 0 30px rgba(255, 185, 45, .55),
        0 0 65px rgba(255, 165, 20, .28);

    transform:
        rotate(-31deg)
        scaleX(.75);

    filter: blur(.25px);

    opacity: 0;

    pointer-events: none;

    animation:
        goldenLightTrail 8s cubic-bezier(.45,0,.55,1) infinite;
}


/* Punctul luminos de pe traseu */
.register-page::after {
    content: "";

    position: absolute;
    z-index: 0;

    width: 18px;
    height: 18px;

    left: 42%;
    top: 49%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fffdf0 0%,
            #fff1a8 18%,
            #ffd45c 38%,
            rgba(255, 190, 45, .35) 65%,
            transparent 100%
        );

    box-shadow:
        0 0 8px #fff4bd,
        0 0 18px rgba(255,220,110,.95),
        0 0 35px rgba(255,194,60,.75),
        0 0 70px rgba(255,170,25,.45);

    opacity: 0;

    pointer-events: none;

    animation:
        goldenLightPoint 8s cubic-bezier(.45,0,.55,1) infinite;
}


/* ============================================================
   TRAIECTORIA LUMINII
   ============================================================ */

@keyframes goldenLightTrail {

    0% {
        left: -35%;
        top: 72%;

        opacity: 0;

        transform:
            rotate(-31deg)
            scaleX(.55);
    }

    10% {
        opacity: .35;
    }

    25% {
        opacity: .75;
    }

    42% {
        left: 18%;
        top: 57%;

        opacity: .90;

        transform:
            rotate(-31deg)
            scaleX(1);
    }

    58% {
        left: 48%;
        top: 43%;

        opacity: .85;

        transform:
            rotate(-31deg)
            scaleX(1.05);
    }

    72% {
        left: 70%;
        top: 32%;

        opacity: .60;

        transform:
            rotate(-31deg)
            scaleX(.85);
    }

    86% {
        left: 92%;
        top: 22%;

        opacity: .20;

        transform:
            rotate(-31deg)
            scaleX(.60);
    }

    100% {
        left: 115%;
        top: 10%;

        opacity: 0;

        transform:
            rotate(-31deg)
            scaleX(.35);
    }
}


/* ============================================================
   PUNCTUL CARE MERGE CU LUMINA
   ============================================================ */

@keyframes goldenLightPoint {

    0% {
        left: -5%;
        top: 74%;

        opacity: 0;

        transform: scale(.35);
    }

    12% {
        opacity: .25;
    }

    25% {
        left: 18%;
        top: 58%;

        opacity: .85;

        transform: scale(.8);
    }

    42% {
        left: 42%;
        top: 46%;

        opacity: 1;

        transform: scale(1.15);
    }

    50% {
        left: 52%;
        top: 40%;

        opacity: 1;

        transform: scale(1.35);
    }

    60% {
        left: 65%;
        top: 33%;

        opacity: .85;

        transform: scale(1);
    }

    75% {
        left: 82%;
        top: 25%;

        opacity: .45;

        transform: scale(.7);
    }

    90% {
        left: 102%;
        top: 15%;

        opacity: 0;

        transform: scale(.35);
    }

    100% {
        left: 110%;
        top: 10%;

        opacity: 0;
    }
}