/* ============================================================
   WORLD OF FROSTVOID — REBORN
   AUTH / REGISTER V3
   ============================================================ */

.fv-auth-page {
    position: relative;

    min-height: 860px;

    padding:
        180px 20px
        100px;

    overflow: hidden;

    background: #02050a;

    color: #aab7c7;
}


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

.fv-auth-background {
    position: absolute;
    inset: 0;

    background-image:
        url('../img/reborn/home/hero.png');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.04);

    filter:
        saturate(.72)
        brightness(.58);
}

.fv-auth-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2,5,11,.64) 0%,
            rgba(2,5,11,.80) 46%,
            rgba(2,5,11,.95) 100%
        ),
        radial-gradient(
            ellipse at center,
            rgba(8,14,25,.20),
            rgba(2,5,10,.78) 70%
        );

    backdrop-filter: blur(2px);
}


/* ============================================================
   CONTAINER
   ============================================================ */

.fv-auth-container {
    position: relative;
    z-index: 5;

    width: min(820px, 100%);

    margin: 0 auto;
}


/* ============================================================
   HEADING
   ============================================================ */

.fv-auth-heading {
    margin-bottom: 28px;

    text-align: center;
}

.fv-auth-kicker {
    display: block;

    margin-bottom: 12px;

    color: #788da3;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: .32em;

    text-transform: uppercase;
}

.fv-auth-heading h1 {
    margin: 0;

    color: #d8e1ea;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(31px, 4vw, 46px);
    font-weight: 400;

    letter-spacing: .18em;

    text-shadow:
        0 5px 22px rgba(0,0,0,.85);
}

.fv-auth-heading p {
    margin: 0;

    color: #7e8ea1;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: .16em;

    text-transform: uppercase;
}


/* divider */

.fv-auth-divider {
    width: 290px;

    margin:
        17px auto
        18px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #72869b;
}

.fv-auth-divider span {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(104,176,220,.55)
        );
}

.fv-auth-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(141,82,184,.55),
            transparent
        );
}

.fv-auth-divider i {
    font-size: 7px;
}


/* ============================================================
   PANEL
   ============================================================ */

.fv-auth-panel {
    position: relative;

    padding: 1px;

    border-radius: 2px;

    background:
        linear-gradient(
            110deg,
            rgba(66,171,229,.55),
            rgba(68,98,150,.16) 37%,
            rgba(99,58,137,.16) 63%,
            rgba(151,72,198,.55)
        );

    box-shadow:
        0 28px 70px rgba(0,0,0,.52);
}

.fv-auth-panel::before,
.fv-auth-panel::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 2px;

    pointer-events: none;
}

.fv-auth-panel::before {
    left: 0;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(69,177,237,.65),
            transparent
        );
}

.fv-auth-panel::after {
    right: 0;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(153,72,209,.70),
            transparent
        );
}

.fv-auth-panel-glow {
    position: absolute;

    left: 12%;
    right: 12%;
    top: -25px;

    height: 80px;

    background:
        radial-gradient(
            ellipse,
            rgba(77,133,202,.14),
            rgba(130,66,184,.07) 50%,
            transparent 75%
        );

    filter: blur(20px);

    pointer-events: none;
}

.fv-auth-panel-inner {
    position: relative;

    padding:
        38px 42px
        32px;

    background:
        linear-gradient(
            145deg,
            rgba(7,13,23,.97),
            rgba(3,7,13,.985)
        );

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


/* decorative corner cuts */

.fv-auth-panel-inner::before,
.fv-auth-panel-inner::after {
    content: "";

    position: absolute;

    width: 48px;
    height: 1px;

    top: 0;
}

.fv-auth-panel-inner::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #58baf0,
            transparent
        );
}

.fv-auth-panel-inner::after {
    right: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #9d58d4
        );
}


/* ============================================================
   GRID
   ============================================================ */

.fv-auth-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px 18px;
}

.fv-auth-field {
    min-width: 0;
}

.fv-auth-field-full {
    grid-column: 1 / -1;
}


/* ============================================================
   LABELS
   ============================================================ */

.fv-auth-field label {
    display: block;

    margin-bottom: 7px;

    color: #9dadbd;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: .08em;

    text-transform: uppercase;
}


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

.fv-auth-input {
    position: relative;

    height: 52px;

    display: flex;
    align-items: center;

    background:
        rgba(4,10,19,.82);

    border:
        1px solid rgba(84,130,168,.28);

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

.fv-auth-input:focus-within {
    border-color:
        rgba(87,176,229,.60);

    background:
        rgba(5,12,22,.94);

    box-shadow:
        0 0 18px rgba(54,139,199,.10);
}

.fv-auth-field:nth-child(even)
.fv-auth-input:focus-within {
    border-color:
        rgba(143,79,198,.48);

    box-shadow:
        0 0 18px rgba(119,58,177,.10);
}


/* icon */

.fv-auth-input-icon {
    width: 49px;
    height: 100%;

    flex: 0 0 49px;

    display: flex;

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

    color: #7f94a8;

    border-right:
        1px solid rgba(255,255,255,.045);

    font-size: 13px;
}


/* actual input */

.fv-auth-input input {
    width: 100%;
    height: 100%;

    min-width: 0;

    padding:
        0 15px;

    color: #d9e1e9 !important;

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

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

    font-size: 14px;

    box-shadow: none !important;
}

.fv-auth-input input::placeholder {
    color: #536375;
}


/* Chrome autofill */

.fv-auth-input input:-webkit-autofill,
.fv-auth-input input:-webkit-autofill:hover,
.fv-auth-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: #d9e1e9;

    -webkit-box-shadow:
        0 0 0 1000px #07101d inset !important;

    transition:
        background-color 9999s ease-out;
}


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

.fv-auth-error {
    display: block;

    margin-top: 6px;

    color: #df6a78;

    font-size: 11px;
}

.fv-auth-error-block {
    margin-top: 8px;
}


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

.fv-auth-terms {
    position: relative;

    display: flex !important;

    align-items: flex-start;

    gap: 11px;

    margin: 2px 0 0 !important;

    cursor: pointer;
}

.fv-auth-terms > input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.fv-auth-checkmark {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin-top: 1px;

    display: flex;

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

    color: transparent;

    border:
        1px solid rgba(100,149,184,.42);

    background:
        rgba(5,11,19,.92);

    font-size: 9px;

    transition:
        .2s ease;
}

.fv-auth-terms > input:checked +
.fv-auth-checkmark {
    color: #fff;

    border-color:
        rgba(105,193,239,.75);

    background:
        linear-gradient(
            135deg,
            #247db2,
            #7140b0
        );

    box-shadow:
        0 0 12px rgba(69,143,203,.20);
}

.fv-auth-terms-text {
    color: #8595a7;

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

    font-size: 12px;

    line-height: 1.55;

    text-transform: none;
    letter-spacing: normal;
}

.fv-auth-terms-text a {
    color: #72b9e4;

    text-decoration: none;
}

.fv-auth-terms-text a:last-of-type {
    color: #ad7ad2;
}

.fv-auth-terms-text a:hover {
    color: #fff;
}


/* ============================================================
   CAPTCHA
   ============================================================ */

.fv-auth-captcha {
    display: flex;

    justify-content: center;

    margin-top: 2px;
}


/* ============================================================
   SUBMIT
   ============================================================ */

.fv-auth-submit {
    position: relative;

    width: 100%;
    height: 54px;

    margin-top: 28px;

    display: flex;

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

    gap: 12px;

    overflow: hidden;

    color: #eef7ff;

    border:
        1px solid rgba(111,171,219,.55);

    border-radius: 1px;

    background:
        linear-gradient(
            100deg,
            #1e76a6 0%,
            #285e99 35%,
            #6841a2 70%,
            #8949c0 100%
        );

    box-shadow:
        0 9px 28px rgba(35,91,149,.16);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .16em;

    cursor: pointer;

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

.fv-auth-submit::before {
    content: "";

    position: absolute;

    top: 0;
    left: -50%;

    width: 45%;
    height: 100%;

    transform: skewX(-25deg);

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

    transition:
        left .45s ease;
}

.fv-auth-submit:hover {
    transform: translateY(-1px);

    filter: brightness(1.08);

    box-shadow:
        0 12px 32px rgba(68,81,178,.25);
}

.fv-auth-submit:hover::before {
    left: 120%;
}


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

.fv-auth-bottom {
    margin-top: 28px;
    padding-top: 22px;

    display: flex;

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

    gap: 13px;

    border-top:
        1px solid rgba(255,255,255,.065);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: .10em;
}

.fv-auth-bottom > span {
    color: #687a8c;
}

.fv-auth-bottom a {
    color: #9d78c5;

    text-decoration: none;

    transition: color .2s ease;
}

.fv-auth-bottom a:hover {
    color: #d9c2f1;
}


/* ============================================================
   ALERTS INSIDE PANEL
   ============================================================ */

.fv-auth-panel .uk-alert {
    margin-top: 0;

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

    background:
        rgba(10,18,31,.92);

    color: #c2ceda;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 959px) {

    .fv-auth-page {
        min-height: 820px;

        padding-top: 155px;
    }

}


@media (max-width: 700px) {

    .fv-auth-page {
        padding:
            145px 13px
            70px;
    }

    .fv-auth-container {
        width: 100%;
    }

    .fv-auth-heading h1 {
        font-size: 29px;

        letter-spacing: .12em;
    }

    .fv-auth-heading p {
        font-size: 9px;

        letter-spacing: .10em;
    }

    .fv-auth-panel-inner {
        padding:
            28px 20px
            25px;
    }

    .fv-auth-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .fv-auth-field-full {
        grid-column: auto;
    }

    .fv-auth-bottom {
        flex-direction: column;

        gap: 7px;

        text-align: center;
    }

}


/* ============================================================
   AUTH — AJUSTE FINAL DE CENTRADO
   ============================================================ */

.fv-auth-page {
    box-sizing: border-box !important;
}

.fv-auth-container {
    position: relative !important;

    width: min(820px, calc(100vw - 40px)) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    left: auto !important;
    right: auto !important;

    box-sizing: border-box !important;
}

.fv-auth-heading,
.fv-auth-panel {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
}


/* ============================================================
   CHECKBOX — eliminar doble cuadro
   ============================================================ */

.fv-auth-terms > input[type="checkbox"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    pointer-events: none !important;
}


/* ============================================================
   BOTÓN PRINCIPAL — DARK FROST / VOID
   ============================================================ */

.fv-auth-submit {
    color: #dce8f3 !important;

    border:
        1px solid rgba(92,132,178,.52) !important;

    background:
        linear-gradient(
            100deg,
            #081827 0%,
            #0d2335 32%,
            #171a35 58%,
            #2b153c 78%,
            #351744 100%
        ) !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.035),
        0 8px 24px rgba(0,0,0,.38),
        0 0 18px rgba(63,105,163,.07) !important;
}

.fv-auth-submit::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #54b9ed,
            rgba(78,133,189,.45) 38%,
            rgba(111,68,156,.45) 62%,
            #9850c7
        );

    opacity: .75;
}

.fv-auth-submit:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            100deg,
            #0b2032 0%,
            #12304a 32%,
            #1e2144 58%,
            #351b48 78%,
            #431e56 100%
        ) !important;

    border-color:
        rgba(109,162,207,.66) !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.05),
        0 10px 30px rgba(0,0,0,.42),
        0 0 20px rgba(84,102,185,.10) !important;

    filter: none !important;
}


/* móvil */

@media (max-width: 700px) {
    .fv-auth-container {
        width: calc(100vw - 26px) !important;
    }
}


/* ============================================================
   LOGIN — AJUSTES ESPECÍFICOS
   ============================================================ */

.fv-auth-grid-login {
    grid-template-columns: 1fr !important;
}

.fv-auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 7px;
}

.fv-auth-label-row label {
    margin-bottom: 0 !important;
}

.fv-auth-inline-link {
    color: #8db7dd;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: .04em;

    text-decoration: none;

    transition: color .2s ease;
}

.fv-auth-inline-link:hover {
    color: #d9e7f5;
}


/* ============================================================
   RECORDARME
   ============================================================ */

.fv-auth-remember {
    position: relative;

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

    gap: 11px;

    cursor: pointer;
}

.fv-auth-remember > input {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    pointer-events: none !important;
}

.fv-auth-remember > input:checked +
.fv-auth-checkmark {
    color: #fff;

    border-color:
        rgba(105,193,239,.75);

    background:
        linear-gradient(
            135deg,
            #247db2,
            #7140b0
        );

    box-shadow:
        0 0 12px rgba(69,143,203,.20);
}

.fv-auth-remember-text {
    color: #9aaaba;

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

    font-size: 13px;
}


/* ============================================================
   LOGIN RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {

    .fv-auth-label-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .fv-auth-inline-link {
        font-size: 10px;
    }
}