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

.form-group{

    margin-bottom:0;

}

.form-label{

    display:block;

    margin-bottom:6px;

    font-size:12px;

    font-weight:600;

}

.form-input,
.form-select,
.form-textarea{

    width:100%;

    height:42px;

    padding:0 18px;

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

    border-radius:12px;

    background:#fff;

    font-size:15px;

    transition:.25s;

}

.form-input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(227,6,19,.08);

}

.form-input::placeholder,
.form-textarea::placeholder{

    
    font-size:13px;
    
    color:#9ca3af;

}

.auth-button{

    width:100%;

    height:54px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.auth-button:hover{

    background:var(--primary-hover);

}

.auth-link{
    
    margin-top:5px;

    color:var(--primary);

    text-decoration:none;

    font-size:12px;

    transition:.25s;

}

.auth-link:hover{

    text-decoration:underline;

}

.auth-divider{

    margin:30px 0;

    display:flex;

    align-items:center;

    gap:15px;

}

.auth-divider::before,
.auth-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#ececec;

}

.auth-divider span{

    color:#888;

    font-size:13px;

}

.checkbox{
    
    margin-top:5px;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:12px;

    color:#374151;

    font-weight:500;

}

.checkbox label{

    font-size:12px;

    cursor:pointer;

}

.checkbox input{

    width:14px;

    height:14px;

    cursor:pointer;

    accent-color:var(--primary);

}

.auth-alert{

    display:none;

    margin-bottom:20px;

    padding:15px;

    border-radius:10px;

    font-size:14px;

}

.auth-alert.success{

    background:#ecfdf5;

    color:#047857;

}

.auth-alert.error{

    background:#fef2f2;

    color:#dc2626;

}

.password-wrapper{

    position:relative;

}

.form-password{

    padding-right:55px;

}

.password-toggle{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    cursor:pointer;

    padding:0;

}

.eye-icon{

    width:22px;

    height:22px;

    fill:#9ca3af;

    transition:.25s;

}

.password-toggle:hover .eye-icon{

    fill:var(--primary);

}

.phone-wrapper{

    display:flex;

    align-items:center;

    height:42px;

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

    border-radius:12px;

    overflow:hidden;

    transition:.25s;

}

.phone-wrapper:focus-within{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(227,6,19,.08);

}

.phone-code{

    min-width:70px;

    text-align:center;

    background:#f7f8fa;

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

    font-weight:600;

    padding:0 14px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.phone-input{

    flex:1;

    height:100%;

    border:none!important;

    box-shadow:none!important;

    border-radius:0!important;

}

.phone-input:focus{

    outline:none;

}

.form-row{

    display:grid;

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

    gap:18px 24px;

}

.form-full{

    grid-column:1 / -1;

}

.auth-submit{

    width:100%;

    height:56px;

}

@media(max-width:768px){

    .form-row{

        grid-template-columns:1fr;

    }

    .form-full{

        grid-column:auto;

    }

}