/* ==========================================
   HIT AUCTION AUTH CSS
   Part 2.2A
========================================== */

:root{

    --primary:#2596BE;
    --primary-dark:#1b7fa2;
    --secondary:#f5f9fc;
    --white:#ffffff;
    --black:#222222;
    --border:#d9e3ea;
    --danger:#dc3545;
    --success:#198754;
    --warning:#ffc107;
    --shadow:0 15px 40px rgba(0,0,0,.12);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

    background:
    linear-gradient(
    135deg,
    #eef7fb,
    #dceff7);

    min-height:100vh;

    color:var(--black);

}

/* ===========================
Container
=========================== */

.container{

    max-width:1200px;

}

/* ===========================
Auth Card
=========================== */

.auth-card{

    background:var(--white);

    border-radius:20px;

    padding:40px;

    box-shadow:var(--shadow);

    border:1px solid rgba(0,0,0,.05);

    animation:fadeIn .6s ease;

}

/* ===========================
Heading
=========================== */

.auth-card h2{

    color:var(--primary);

    font-weight:700;

}

.auth-card p{

    color:#777;

}

/* ===========================
Avatar
=========================== */

.avatar-wrapper{

    position:relative;

    width:140px;

    height:140px;

    margin:auto;

}

.profile-avatar{

    width:140px;

    height:140px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid var(--primary);

    background:#f4f4f4;

    transition:.3s;

}

.profile-avatar:hover{

    transform:scale(1.03);

}

/* ===========================
Camera Button
=========================== */

.camera-btn{

    position:absolute;

    right:8px;

    bottom:8px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    border:3px solid #fff;

    transition:.3s;

    text-decoration:none;

}

.camera-btn:hover{

    background:var(--primary-dark);

    transform:scale(1.08);

    color:#fff;

}

/* ===========================
Form Label
=========================== */

.form-label{

    font-weight:600;

    margin-bottom:6px;

}

/* ===========================
Inputs
=========================== */

.form-control,
.form-select{

    border-radius:12px;

    min-height:50px;

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

    transition:.25s;

    font-size:15px;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:
    0 0 0 .2rem
    rgba(37,150,190,.20);

}

/* ===========================
Input Group
=========================== */

.input-group .btn{

    border-radius:0 12px 12px 0;

}

/* ===========================
intl-tel-input
=========================== */

.iti{

    width:100%;

}

.iti__tel-input{

    height:50px !important;

}

.iti__country-list{

    border-radius:12px;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    font-size:14px;

}

.iti__selected-flag{

    border-radius:10px 0 0 10px;

}

/* ===========================
Small Text
=========================== */

small{

    font-size:13px;

}



/* ==========================================
   HIT AUCTION AUTH CSS
   Part 2.2B
========================================== */

/* ===========================
Buttons
=========================== */

.btn{
    border-radius:12px;
    min-height:50px;
    font-weight:600;
    transition:.3s;
}

.btn-primary{
    background:var(--primary);
    border-color:var(--primary);
}

.btn-primary:hover{
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    transform:translateY(-2px);
}

.btn-primary:focus{
    box-shadow:0 0 0 .2rem rgba(37,150,190,.25);
}

.google-btn{
    background:#fff;
    color:#444;
    font-weight:600;
}

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

/* ===========================
Links
=========================== */

a{
    color:var(--primary);
    text-decoration:none;
}

a:hover{
    color:var(--primary-dark);
    text-decoration:underline;
}

/* ===========================
Checkbox
=========================== */

.form-check-input{
    cursor:pointer;
}

.form-check-input:checked{
    background-color:var(--primary);
    border-color:var(--primary);
}

.form-check-label{
    cursor:pointer;
    user-select:none;
}

/* ===========================
Password Strength
=========================== */

.progress{
    height:8px;
    border-radius:20px;
    background:#e9ecef;
    overflow:hidden;
}

.progress-bar{
    transition:width .4s ease;
}

.strength-weak{
    background:#dc3545;
}

.strength-medium{
    background:#ffc107;
}

.strength-good{
    background:#0dcaf0;
}

.strength-strong{
    background:#198754;
}

/* ===========================
Validation Text
=========================== */

.text-success{
    font-weight:600;
}

.text-danger{
    font-weight:600;
}

.text-warning{
    font-weight:600;
}

/* ===========================
Divider
=========================== */

.or-divider{
    display:flex;
    align-items:center;
    margin:25px 0;
}

.or-divider::before,
.or-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:#ddd;
}

.or-divider span{
    padding:0 15px;
    color:#888;
    font-weight:600;
}

/* ===========================
Avatar Animation
=========================== */

.avatar-wrapper:hover .profile-avatar{
    transform:scale(1.03);
}

.avatar-wrapper:hover .camera-btn{
    transform:scale(1.10);
}

/* ===========================
Error Input
=========================== */

.is-invalid{
    border-color:#dc3545 !important;
}

.is-valid{
    border-color:#198754 !important;
}

/* ===========================
Responsive
=========================== */

@media(max-width:991px){

    .auth-card{
        padding:30px;
    }

}

@media(max-width:768px){

    .container{
        padding:20px;
    }

    .auth-card{
        padding:25px;
        border-radius:18px;
    }

    .profile-avatar{
        width:120px;
        height:120px;
    }

    .avatar-wrapper{
        width:120px;
        height:120px;
    }

    .camera-btn{
        width:38px;
        height:38px;
    }

}

@media(max-width:576px){

    body{
        background:#f4f8fb;
    }

    .container{
        padding:12px;
    }

    .auth-card{
        padding:20px;
        border-radius:15px;
    }

    .profile-avatar{
        width:110px;
        height:110px;
    }

    .avatar-wrapper{
        width:110px;
        height:110px;
    }

    .camera-btn{
        width:36px;
        height:36px;
        font-size:16px;
    }

    h2{
        font-size:26px;
    }

    .form-control,
    .form-select,
    .btn{
        min-height:48px;
        font-size:15px;
    }

}

/* ===========================
Animation
=========================== */

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ===========================
Scrollbar
=========================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:10px;
}

::-webkit-scrollbar-track{
    background:#f1f1f1;
}

/* ===========================
Selection
=========================== */

::selection{
    background:var(--primary);
    color:#fff;
}