/* VLADIO AUTH — consolidated styles */

/* ===== register.css ===== */
:root {
    --vladio-bg: #060d14;
    --vladio-bg-soft: #09131d;

    --vladio-blue: #7ec8ff;
    --vladio-blue-light: #a6d8ff;
    --vladio-blue-strong: #5faee8;

    --vladio-navy: #071b3a;
    --vladio-white: #ffffff;

    --vladio-text: #eef6ff;
    --vladio-text-soft: #91a4b8;
    --vladio-text-muted: #64778a;

    --vladio-border: rgba(166, 216, 255, 0.16);
    --vladio-border-focus: rgba(126, 200, 255, 0.75);

    --vladio-input: rgba(255, 255, 255, 0.025);
    --vladio-input-focus: rgba(126, 200, 255, 0.05);

    --vladio-error: #ff6b6b;
    --vladio-success: #62d29b;
}


* {
    box-sizing: border-box;
}


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


body {
    min-height: 100vh;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(126, 200, 255, 0.035),
            transparent 38%
        ),
        var(--vladio-bg);

    color: var(--vladio-text);
}


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

.register-page {
    width: 100%;
    min-height: 100vh;

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

    padding:
        48px
        24px;
}


/* =========================================================
   MAIN
========================================================= */

.register-main {
    width: 100%;

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


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

.register-main-inner {
    width: 100%;
    max-width: 512px;

    margin:
        0
        auto;
}


/* =========================================================
   MOBILE TOP / LOGO
========================================================= */

.register-mobile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 42px;
}


.register-logo {
    color: var(--vladio-blue);

    text-decoration: none;

    font-size: 22px;
    font-weight: 800;

    letter-spacing: 0.12em;
}


.register-languages {
    display: flex;
    align-items: center;

    gap: 14px;
}


.register-languages a {
    color: var(--vladio-text-muted);

    text-decoration: none;

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

    transition:
        color
        0.2s
        ease;
}


.register-languages a:hover {
    color: var(--vladio-blue);
}


.register-languages a.active {
    color: var(--vladio-blue);
}


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

.register-heading {
    margin-bottom: 40px;
}


.register-stage {
    display: block;

    margin-bottom: 16px;

    color: var(--vladio-blue);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.16em;
}


.register-heading h2 {
    margin:
        0
        0
        12px;

    color: var(--vladio-text);

    font-size: 42px;
    font-weight: 750;

    line-height: 1.08;

    letter-spacing: -0.035em;
}


.register-heading p {
    margin: 0;

    color: var(--vladio-text-soft);

    font-size: 15px;

    line-height: 1.6;
}


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

.register-form {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 22px;
}


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

.register-form-error {
    padding:
        14px
        16px;

    border:
        1px solid
        rgba(255, 107, 107, 0.3);

    border-radius: 12px;

    background:
        rgba(255, 107, 107, 0.08);

    color:
        var(--vladio-error);

    font-size:
        13px;

    line-height:
        1.5;
}


/* =========================================================
   ROW
========================================================= */

.register-row {
    width: 100%;

    display: grid;

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

    gap: 16px;
}


/* =========================================================
   FIELD
========================================================= */

.register-field {
    width: 100%;
}


.register-field label {
    display: block;

    margin-bottom: 8px;

    color: var(--vladio-text-soft);

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

    letter-spacing: 0.02em;
}


/* =========================================================
   INPUTS
========================================================= */

.register-field input {
    width: 100%;
    height: 52px;

    padding:
        0
        16px;

    border:
        1px solid
        var(--vladio-border);

    border-radius:
        12px;

    outline:
        none;

    background:
        var(--vladio-input);

    color:
        var(--vladio-text);

    font-size:
        14px;

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


.register-field input::placeholder {
    color:
        var(--vladio-text-muted);

    opacity:
        1;
}


.register-field input:hover {
    border-color:
        rgba(166, 216, 255, 0.26);
}


.register-field input:focus {
    border-color:
        var(--vladio-border-focus);

    background:
        var(--vladio-input-focus);

    box-shadow:
        0 0 0 4px
        rgba(126, 200, 255, 0.08);
}


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

.register-field input[type="date"] {
    color-scheme:
        dark;

    cursor:
        pointer;
}


/* =========================================================
   PHONE
========================================================= */

.register-phone {
    width: 100%;
    height: 52px;

    display: flex;
    align-items: center;

    border:
        1px solid
        var(--vladio-border);

    border-radius:
        12px;

    overflow:
        hidden;

    background:
        var(--vladio-input);

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


.register-phone:focus-within {
    border-color:
        var(--vladio-border-focus);

    background:
        var(--vladio-input-focus);

    box-shadow:
        0 0 0 4px
        rgba(126, 200, 255, 0.08);
}


.register-phone span {
    height: 100%;

    display: flex;
    align-items: center;

    padding:
        0
        15px;

    border-right:
        1px solid
        var(--vladio-border);

    color:
        var(--vladio-blue-light);

    font-size:
        13px;

    font-weight:
        600;
}


.register-phone input {
    height: 100% !important;

    padding-left:
        15px !important;

    border:
        none !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    background:
        transparent !important;
}


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

.register-password {
    position: relative;

    width: 100%;
}


.register-password input {
    padding-right:
        56px;
}


/* =========================================================
   PASSWORD EYE BUTTON
========================================================= */

.register-password-toggle {
    position: absolute;

    top: 50%;
    right: 0;

    width: 52px;
    height: 52px;

    transform:
        translateY(-50%);

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

    padding: 0;

    border:
        none;

    outline:
        none;

    background:
        transparent;

    cursor:
        pointer;

    color:
        var(--vladio-text-soft);
}


/*
    ВАЖНО:
    SVG path в твоём HTML не имеет fill/stroke.

    Поэтому мы задаём stroke здесь,
    чтобы глаз НЕ был чёрным.
*/

.register-password-toggle svg {
    width: 20px;
    height: 20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        color
        0.2s
        ease;
}


.register-password-toggle svg circle {
    fill:
        none;

    stroke:
        currentColor;
}


.register-password-toggle:hover {
    color:
        var(--vladio-blue);
}


.eye-closed {
    display:
        none;
}


/*
    Когда JS добавляет .is-visible
*/

.register-password-toggle.is-visible .eye-open {
    display:
        none;
}


.register-password-toggle.is-visible .eye-closed {
    display:
        block;
}


/* =========================================================
   PASSWORD RULES
========================================================= */

.register-password-rules {
    display: flex;
    flex-wrap: wrap;

    gap:
        8px;

    margin-top:
        8px;
}


.register-password-rules span {
    padding:
        5px
        9px;

    border:
        1px solid
        rgba(166, 216, 255, 0.12);

    border-radius:
        6px;

    color:
        var(--vladio-text-muted);

    font-size:
        9px;

    line-height:
        1;
}


.register-password-rules span.is-valid {
    border-color:
        rgba(98, 210, 155, 0.3);

    color:
        var(--vladio-success);

    background:
        rgba(98, 210, 155, 0.05);
}


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

.register-error {
    display: block;

    margin-top:
        7px;

    color:
        var(--vladio-error);

    font-size:
        11px;

    line-height:
        1.4;
}


.register-field.has-error input,
.register-field.has-error .register-phone {
    border-color:
        rgba(255, 107, 107, 0.75);
}


/* =========================================================
   CONSENT
========================================================= */

.register-consent {
    position: relative;

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

    gap:
        10px;

    cursor:
        pointer;

    color:
        var(--vladio-text-soft);

    font-size:
        11px;

    line-height:
        1.6;
}


.register-consent input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.register-checkbox {
    width: 17px;
    height: 17px;

    flex:
        0
        0
        17px;

    margin-top:
        1px;

    border:
        1px solid
        var(--vladio-border);

    border-radius:
        5px;

    background:
        transparent;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;

    position:
        relative;
}


.register-consent input:checked
+ .register-checkbox {
    border-color:
        var(--vladio-blue);

    background:
        var(--vladio-blue);
}


.register-consent input:checked
+ .register-checkbox::after {
    content:
        "";

    position:
        absolute;

    left:
        5px;

    top:
        2px;

    width:
        4px;

    height:
        8px;

    border:
        solid
        var(--vladio-navy);

    border-width:
        0
        2px
        2px
        0;

    transform:
        rotate(45deg);
}


.register-consent a {
    color:
        var(--vladio-blue);

    text-decoration:
        none;
}


.register-consent a:hover {
    text-decoration:
        underline;
}


.register-consent-error {
    display: block;

    margin-top:
        7px;

    color:
        var(--vladio-error);

    font-size:
        11px;
}


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

.register-submit {
    width: 100%;
    height: 54px;

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

    padding:
        0
        20px;

    border:
        none;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #7ec8ff,
            #5f9fda
        );

    color:
        #071b3a;

    cursor:
        pointer;

    font-size:
        13px;

    font-weight:
        800;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


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

    box-shadow:
        0 12px 30px
        rgba(126, 200, 255, 0.15);
}


.register-submit:active {
    transform:
        translateY(0);
}


.register-submit span:last-child {
    font-size:
        20px;

    font-weight:
        500;
}


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

.register-login {
    margin-top:
        4px;

    text-align:
        center;

    color:
        var(--vladio-text-muted);

    font-size:
        11px;
}


.register-login a {
    margin-left:
        5px;

    color:
        var(--vladio-blue-light);

    font-weight:
        700;

    text-decoration:
        none;
}


.register-login a:hover {
    text-decoration:
        underline;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 700px) {

    .register-page {
        align-items:
            flex-start;

        padding:
            32px
            20px;
    }


    .register-main-inner {
        max-width:
            100%;
    }


    .register-heading h2 {
        font-size:
            36px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

    .register-page {
        padding:
            24px
            16px;
    }


    .register-mobile-top {
        margin-bottom:
            36px;
    }


    .register-row {
        grid-template-columns:
            1fr;

        gap:
            22px;
    }


    .register-heading {
        margin-bottom:
            32px;
    }


    .register-heading h2 {
        font-size:
            32px;
    }


    .register-form {
        gap:
            20px;
    }

}
/* =========================================
   VLADIO REGISTER
   FIX CHROME AUTOFILL
========================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;

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

    box-shadow:
        0 0 0 1000px #0d141a inset !important;

    caret-color:
        #ffffff !important;

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


/* Firefox autofill */

input:autofill {
    background-color:
        #0d141a !important;

    color:
        #ffffff !important;
}


/* Если поле с паролем */

input[type="password"]:-webkit-autofill,
input[type="email"]:-webkit-autofill,
input[type="text"]:-webkit-autofill,
input[type="tel"]:-webkit-autofill,
input[type="date"]:-webkit-autofill {
    -webkit-text-fill-color:
        #ffffff !important;

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

    box-shadow:
        0 0 0 1000px #0d141a inset !important;
}
/* =========================================
   VLADIO BUSINESS — VERIFY
========================================= */

.business-verify {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.business-verify-card {
    padding: 20px;

    border: 1px solid var(--vladio-line);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.025);

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

.business-verify-card.is-verified {
    border-color: rgba(61, 220, 151, 0.35);

    background:
        rgba(61, 220, 151, 0.045);
}

.business-verify-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.business-verify-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.055);
}

.business-verify-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: var(--vladio-text);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.business-verify-info {
    min-width: 0;

    display: flex;
    flex: 1;
    flex-direction: column;

    gap: 3px;
}

.business-verify-info strong {
    color: var(--vladio-text);

    font-size: 14px;
    font-weight: 700;
}

.business-verify-info span {
    overflow: hidden;

    color: var(--vladio-text-soft);

    font-size: 13px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-verify-status {
    flex: 0 0 auto;

    color: var(--vladio-text-soft);

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

    text-transform: uppercase;
}

.business-verify-card.is-verified
.business-verify-status {
    color: #3ddc97;
}

.business-verify-send {
    width: 100%;

    margin-top: 18px;
    padding: 12px 16px;

    border: 1px solid var(--vladio-line);
    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.045);

    color: var(--vladio-text);

    font: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

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

.business-verify-send:hover {
    background:
        rgba(255, 255, 255, 0.075);

    border-color:
        rgba(255, 255, 255, 0.17);
}


/* CODE */

.business-code-area {
    margin-top: 20px;
}

.business-code-area > label {
    display: block;

    margin-bottom: 10px;

    color: var(--vladio-text-soft);

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

.business-code-inputs {
    display: grid;

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

    gap: 8px;
}

.business-code-digit {
    width: 100%;
    height: 52px;

    padding: 0;

    border: 1px solid var(--vladio-line);
    border-radius: 12px;

    outline: none;

    background: #0d141a;

    color: var(--vladio-text);

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

    text-align: center;

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

.business-code-digit:focus {
    border-color:
        rgba(255, 255, 255, 0.32);

    box-shadow:
        0 0 0 3px
        rgba(255, 255, 255, 0.04);
}

.business-code-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 14px;
}

.business-code-confirm,
.business-code-resend {
    min-height: 40px;

    padding: 0 15px;

    border-radius: 10px;

    font: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.business-code-confirm {
    border: 0;

    background: var(--vladio-text);

    color: #081015;
}

.business-code-resend {
    border: 1px solid var(--vladio-line);

    background: transparent;

    color: var(--vladio-text-soft);
}

.business-code-resend:disabled {
    opacity: .5;

    cursor: default;
}

.business-code-error,
.business-verify-global-error {
    margin-top: 10px;

    color: #ff6b6b;

    font-size: 12px;
    line-height: 1.45;
}

.business-verify-continue {
    margin-top: 4px;
}

.business-verify-continue:disabled {
    opacity: .45;

    cursor: not-allowed;
}


/* MOBILE */

@media (max-width: 560px) {

    .business-verify-card {
        padding: 16px;
    }

    .business-verify-card-top {
        align-items: flex-start;
    }

    .business-verify-status {
        display: none;
    }

    .business-code-inputs {
        gap: 5px;
    }

    .business-code-digit {
        height: 48px;

        border-radius: 10px;

        font-size: 18px;
    }

    .business-code-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .business-code-confirm,
    .business-code-resend {
        width: 100%;
    }
}