.auth {
    display: flex;
    justify-content: center;
}

.auth__card {
    background: #ffffff;
    border-radius: 8px;
    padding: 30px;
    width: 570px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.auth__notice p {
    background: #fff6df;
    padding: 14px;
    font-size: 0.95rem;
}


.auth__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 15px;
    font-family: var( --font-family-montserrat);
}

.auth__wave {
    font-size: 1.7rem;
}

.auth__social-btn {
    width: 100%;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

    .auth__social-btn:disabled {
        background-color: #f4f4f4;
    }

.auth__divider {
    text-align: center;
    margin: 20px 0;
    color: #888;
}


.auth__divider {
    text-align: center;
    color: #b3b3b3;
    margin: 20px 0;
    position: relative;
}

    .auth__divider::before,
    .auth__divider::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 35%;
        height: 1px;
        background: #e5e5e5;
    }

    .auth__divider::before {
        left: 0;
    }

    .auth__divider::after {
        right: 0;
    }

.btn-primary {
    background: var(--brand-primary);
    border: none;
    height: 48px;
    font-weight: var( --font-weight-medium);
    transition: background-color 0.2s ease;
   
}

    .btn-primary:hover {
        background-color: color-mix(in srgb, var(--brand-primary) 95%, black) !important;
    }

.btn:disabled {
    background: var(--brand-primary);
    color: #fff;
}

.link-primary {
    color: var(--brand-primary) !important;
    font-family: var(--font-family-inter);
    font-weight: var( --font-weight-medium);
    font-size: 16px;
    line-height: 20.80px;
    word-wrap: break-word;
    transition: background-color 0.2s ease;
    text-decoration-color: var(--brand-primary) !important;
}

    .link-primary:hover {
        color: color-mix(in srgb, var(--brand-primary) 95%, black) !important;
        text-decoration-color: color-mix(in srgb, var(--brand-primary) 95%, black) !important;
    }


.auth__social-btn {
    background: #f4f4f4;
    border: none;
    height: 48px;
    gap: 10px;
    font-weight: var( --font-weight-medium);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .auth__social-btn:hover {
        background: #ededed;
        transform: translateY(-2px);
    }

    .auth__social-btn img {
        height: 22px;
    }



.input-container .form-control {
    height: 52px;
    border-radius: 6px;
    border: 2px solid #DFE4EA;
    font-family: var(--font-family-inter);
}

.input-container .form-control {
    height: 52px;
    border-radius: 6px;
    border: 2px solid #DFE4EA;
    font-family: var(--font-family-inter);
}

    .input-container .form-control:read-only {
        background-color: #F3F4F6;
        color: #9CA3AF;
        border: none;
    }

    .input-container .form-control.input-validation-error {
        border-color: #F23030 !important;
        background-color: #FEF5F5;
    }

.input-container {
    position: relative;
    display: grid;
}

    .input-container .field-validation-error {
        color: #F23030;
        font-size: 14px;
        font-family: var(--font-family-inter);
        font-weight: var( --font-weight-regular);
        line-height: 22px;
        word-wrap: break-word
    }

    .input-container .input-icon {
        position: relative;
    }

        .input-container .input-icon input {
            padding-left: 45px;
        }

            .input-container .input-icon input::placeholder {
                color: #9CA3AF;
                font-weight: var( --font-weight-regular);
            }

        .input-container .input-icon::before {
            content: "";
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background-size: contain;
            background-repeat: no-repeat;
        }

    .input-container .icon-email::before {
        background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6667 4.66699L8.67267 8.48499C8.46927 8.60313 8.23823 8.66536 8.003 8.66536C7.76778 8.66536 7.53674 8.60313 7.33334 8.48499L1.33334 4.66699M2.66667 2.66699H13.3333C14.0697 2.66699 14.6667 3.26395 14.6667 4.00033V12.0003C14.6667 12.7367 14.0697 13.3337 13.3333 13.3337H2.66667C1.93029 13.3337 1.33334 12.7367 1.33334 12.0003V4.00033C1.33334 3.26395 1.93029 2.66699 2.66667 2.66699Z" stroke="%236B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    }

    .input-container .icon-lock::before {
        background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.66667 7.33301V4.66634C4.66667 3.78229 5.01786 2.93444 5.64298 2.30932C6.2681 1.6842 7.11595 1.33301 8 1.33301C8.88406 1.33301 9.7319 1.6842 10.357 2.30932C10.9821 2.93444 11.3333 3.78229 11.3333 4.66634V7.33301M3.33333 7.33301H12.6667C13.403 7.33301 14 7.92996 14 8.66634V13.333C14 14.0694 13.403 14.6663 12.6667 14.6663H3.33333C2.59695 14.6663 2 14.0694 2 13.333V8.66634C2 7.92996 2.59695 7.33301 3.33333 7.33301Z" stroke="%236B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    }

    .input-container .input-icon__toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        width: 22px;
        height: 22px;
    }

        .input-container .input-icon__toggle::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="%236B7280 "><path d="M19.5 16L17.0248 12.6038" stroke="%236B7280 " stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 17.5V14" stroke="%236B7280 " stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.5 16L6.96895 12.6124" stroke="%236B7280 " stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 8C6.6 16 17.4 16 21 8" stroke="%236B7280 " stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'); /* closed eye */
            background-size: contain;
            background-repeat: no-repeat;
        }

        .input-container .input-icon__toggle.active::after {
            background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="%236B7280 "><path d="M3 13C6.6 5 17.4 5 21 13" stroke="%236B7280 " stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z" stroke="%236B7280 " stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'); /* open eye */
        }