/*==================================================
  ClevfBoost Authentication Styles
  Part 1
==================================================*/

/*=========================
    Google Font
=========================*/

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700;800&display=swap');

/*=========================
    CSS Variables
=========================*/

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#60a5fa;

    --secondary:#0f172a;

    --success:#16a34a;
    --danger:#dc2626;
    --warning:#f59e0b;

    --white:#ffffff;

    --bg:#f4f7fd;

    --text:#1e293b;
    --muted:#64748b;

    --border:#dbe4f0;

    --glass:rgba(255,255,255,.78);

    --glass-border:rgba(255,255,255,.45);

    --shadow:
        0 25px 60px rgba(37,99,235,.10);

    --shadow-hover:
        0 30px 70px rgba(37,99,235,.18);

    --radius:26px;

    --transition:.35s ease;

}

/*=========================
        Reset
=========================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'League Spartan',sans-serif;

    background:var(--bg);

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

}

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

::selection{

    background:var(--primary);

    color:#fff;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef3fb;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

/*=========================
     Auth Wrapper
=========================*/

.auth-wrapper{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:40px 18px;

    background:

        radial-gradient(circle at top left,
        rgba(37,99,235,.12),
        transparent 45%),

        radial-gradient(circle at bottom right,
        rgba(96,165,250,.15),
        transparent 40%),

        linear-gradient(135deg,
        #f8fbff 0%,
        #eef5ff 100%);

}

/*=========================
   Floating Shapes
=========================*/

.shape{

    position:absolute;

    border-radius:50%;

    filter:blur(35px);

    animation:float 12s ease-in-out infinite;

    opacity:.8;

    pointer-events:none;

}

.shape-1{

    width:320px;
    height:320px;

    top:-120px;
    left:-120px;

    background:#60a5fa;

}

.shape-2{

    width:260px;
    height:260px;

    bottom:-90px;
    right:-70px;

    background:#2563eb;

    animation-delay:2s;

}

.shape-3{

    width:170px;
    height:170px;

    top:25%;

    right:10%;

    background:#bfdbfe;

    animation-delay:5s;

}

.shape-4{

    width:130px;
    height:130px;

    left:8%;

    bottom:18%;

    background:#93c5fd;

    animation-delay:8s;

}

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

.container{

    position:relative;

    z-index:2;

}

/*=========================
       Grid
=========================*/

.row{

    position:relative;

}

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

@keyframes float{

    0%{

        transform:
            translateY(0)
            translateX(0)
            rotate(0deg);

    }

    50%{

        transform:
            translateY(-30px)
            translateX(20px)
            rotate(8deg);

    }

    100%{

        transform:
            translateY(0)
            translateX(0)
            rotate(0deg);

    }

}

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

.auth-card{

    position:relative;

    background:var(--glass);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

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

    border-radius:var(--radius);

    padding:50px;

    box-shadow:var(--shadow);

    overflow:hidden;

    transition:var(--transition);

    animation:cardFade .8s ease;

}

.auth-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-hover);

}

/* Decorative Glow */

.auth-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

    background:rgba(37,99,235,.08);

    top:-90px;
    right:-90px;

    filter:blur(10px);

}

.auth-card::after{

    content:"";

    position:absolute;

    width:160px;
    height:160px;

    border-radius:50%;

    background:rgba(96,165,250,.10);

    bottom:-80px;
    left:-80px;

    filter:blur(12px);

}

/*==================================================
        Logo
==================================================*/

.logo{

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-size:2.3rem;

    font-weight:800;

    margin-bottom:18px;

    transition:var(--transition);

}

.logo:hover{

    transform:scale(1.05);

}

.logo-blue{

    color:var(--primary);

}

.logo-dark{

    color:var(--secondary);

}

/*==================================================
        Title
==================================================*/

.auth-title{

    font-size:2rem;

    font-weight:700;

    color:var(--secondary);

    margin-bottom:10px;

    letter-spacing:-.5px;

}

.auth-subtitle{

    color:var(--muted);

    font-size:1rem;

    line-height:1.6;

    margin-bottom:0;

}

/*==================================================
      Form Labels
==================================================*/

.form-label{

    font-weight:600;

    color:var(--secondary);

    margin-bottom:10px;

    font-size:.98rem;

}

/*==================================================
      Section Spacing
==================================================*/

.auth-card .mb-3,
.auth-card .mb-4{

    position:relative;

}

/*==================================================
     Card Entrance
==================================================*/

@keyframes cardFade{

    from{

        opacity:0;

        transform:
            translateY(40px)
            scale(.97);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

/*==================================================
       Fade Up Utility
==================================================*/

.fade-up{

    animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
      Card Shine Effect
==================================================*/

.auth-card:hover::before{

    animation:shineMove 6s linear infinite;

}

@keyframes shineMove{

    0%{

        transform:translateX(0)
                  translateY(0);

    }

    50%{

        transform:translateX(20px)
                  translateY(-20px);

    }

    100%{

        transform:translateX(0)
                  translateY(0);

    }

}

/*==================================================
    Input Groups
==================================================*/

.auth-input{

    position:relative;

    display:flex;

    align-items:center;

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

    border-radius:18px;

    background:#fff;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:0 8px 18px rgba(15,23,42,.03);

}

.auth-input:hover{

    border-color:#b8c8e8;

}

.auth-input:focus-within{

    border-color:var(--primary);

    box-shadow:

        0 0 0 4px rgba(37,99,235,.12),

        0 12px 30px rgba(37,99,235,.12);

}

/*==================================================
      Input Icons
==================================================*/

.auth-input .input-group-text{

    border:none;

    background:transparent;

    color:var(--muted);

    font-size:1rem;

    padding:0 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.auth-input:focus-within .input-group-text{

    color:var(--primary);

}

/*==================================================
        Form Controls
==================================================*/

.auth-input .form-control{

    border:none;

    box-shadow:none !important;

    background:transparent;

    height:58px;

    padding:0 16px;

    font-size:1rem;

    font-weight:500;

    color:var(--text);

}

.auth-input .form-control:focus{

    border:none;

    outline:none;

    background:transparent;

}

.auth-input .form-control::placeholder{

    color:#94a3b8;

    font-weight:400;

}

/*==================================================
      Password Toggle
==================================================*/

.toggle-password{

    border:none !important;

    background:transparent !important;

    color:var(--muted);

    padding:0 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.toggle-password:hover{

    color:var(--primary);

    background:rgba(37,99,235,.05) !important;

}

.toggle-password:focus{

    box-shadow:none !important;

}

.toggle-password i{

    transition:.3s ease;

}

.toggle-password:hover i{

    transform:scale(1.12);

}

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

.auth-input .form-control.is-invalid{

    background:transparent;

}

.auth-input:has(.is-invalid){

    border-color:var(--danger);

    box-shadow:

        0 0 0 4px rgba(220,38,38,.10);

}

.invalid-feedback{

    display:block;

    margin-top:8px;

    margin-left:8px;

    color:var(--danger);

    font-size:.9rem;

    font-weight:600;

}

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

.auth-input:has(.is-valid){

    border-color:var(--success);

    box-shadow:

        0 0 0 4px rgba(22,163,74,.10);

}

/*==================================================
       Autofill Fix
==================================================*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{

    -webkit-text-fill-color:var(--text);

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

    box-shadow:0 0 0 1000px #fff inset;

}

/*==================================================
      Disabled Fields
==================================================*/

.form-control:disabled{

    cursor:not-allowed;

    opacity:.75;

    background:#f8fafc;

}

/*==================================================
      Readonly Fields
==================================================*/

.form-control[readonly]{

    background:#f8fafc;

    color:var(--muted);

}

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

.form-check{

    display:flex;

    align-items:center;

    gap:10px;

}

.form-check-input{

    width:20px;

    height:20px;

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

    cursor:pointer;

    transition:var(--transition);

}

.form-check-input:checked{

    background-color:var(--primary);

    border-color:var(--primary);

}

.form-check-input:focus{

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.form-check-label{

    color:var(--muted);

    font-weight:500;

    cursor:pointer;

    user-select:none;

}

/*==================================================
      Primary Button
==================================================*/

.auth-btn{

    position:relative;

    height:58px;

    border:none;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.3px;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:
        0 14px 30px rgba(37,99,235,.28);

}

.auth-btn span{

    position:relative;

    z-index:2;

}

.auth-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.8s;

}

.auth-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 20px 42px rgba(37,99,235,.38);

}

.auth-btn:hover::before{

    left:120%;

}

.auth-btn:active{

    transform:scale(.98);

}

.auth-btn:focus{

    box-shadow:
        0 0 0 4px rgba(37,99,235,.18),
        0 16px 34px rgba(37,99,235,.30);

}

/*==================================================
      Loading Button
==================================================*/

.auth-btn.loading{

    pointer-events:none;

    opacity:.85;

}

.auth-btn.loading span{

    visibility:hidden;

}

.auth-btn.loading::after{

    content:"";

    position:absolute;

    width:22px;

    height:22px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    animation:buttonSpin .8s linear infinite;

}

@keyframes buttonSpin{

    to{

        transform:
            translate(-50%,-50%)
            rotate(360deg);

    }

}

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

.divider{

    position:relative;

    text-align:center;

    margin:34px 0;

}

.divider::before{

    content:"";

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    height:1px;

    background:#e5edf9;

}

.divider span{

    position:relative;

    display:inline-block;

    padding:0 18px;

    background:rgba(255,255,255,.95);

    color:var(--muted);

    font-size:.9rem;

    font-weight:600;

}

/*==================================================
      Forgot Password
==================================================*/

.forgot-link{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}

.forgot-link:hover{

    color:var(--primary-dark);

    text-decoration:none;

}

/*==================================================
      Register Link
==================================================*/

.register-link{

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    transition:var(--transition);

}

.register-link:hover{

    color:var(--primary-dark);

}

/*==================================================
      Flash Alerts
==================================================*/

.alert{

    border:none;

    border-radius:16px;

    padding:15px 18px;

    margin-bottom:24px;

    font-weight:600;

    animation:fadeAlert .45s ease;

}

.alert-success{

    background:rgba(22,163,74,.10);

    color:var(--success);

}

.alert-danger{

    background:rgba(220,38,38,.10);

    color:var(--danger);

}

.alert-warning{

    background:rgba(245,158,11,.12);

    color:#b45309;

}

.alert-info{

    background:rgba(37,99,235,.10);

    color:var(--primary);

}

@keyframes fadeAlert{

    from{

        opacity:0;

        transform:translateY(-12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
      Footer
==================================================*/

.copyright{

    display:inline-block;

    color:var(--muted);

    font-size:.92rem;

    font-weight:500;

    letter-spacing:.2px;

}

.copyright a{

    color:var(--primary);

    text-decoration:none;

}

.copyright a:hover{

    color:var(--primary-dark);

}

/*==================================================
      Text Helpers
==================================================*/

.text-muted{

    color:var(--muted) !important;

}

.text-primary{

    color:var(--primary) !important;

}

/*==================================================
      Small Fade Animation
==================================================*/

.fade-in{

    animation:fadeIn .5s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

/*==============================
        Large Screens
==============================*/

@media (max-width:1400px){

    .auth-card{

        padding:45px;

    }

}

/*==============================
        Laptop
==============================*/

@media (max-width:1200px){

    .auth-card{

        padding:42px;

    }

    .auth-title{

        font-size:1.9rem;

    }

}

/*==============================
        Tablet
==============================*/

@media (max-width:992px){

    .auth-wrapper{

        padding:35px 18px;

    }

    .auth-card{

        padding:40px;

    }

    .logo{

        font-size:2rem;

    }

    .auth-title{

        font-size:1.8rem;

    }

    .shape-1{

        width:260px;
        height:260px;

    }

    .shape-2{

        width:220px;
        height:220px;

    }

}

/*==============================
      Small Tablet
==============================*/

@media (max-width:768px){

    .auth-wrapper{

        padding:25px 15px;

    }

    .auth-card{

        padding:35px 28px;

        border-radius:22px;

    }

    .logo{

        font-size:1.85rem;

    }

    .auth-title{

        font-size:1.65rem;

    }

    .auth-subtitle{

        font-size:.95rem;

    }

    .form-control{

        font-size:16px;

    }

    .auth-btn{

        height:55px;

    }

    .divider{

        margin:28px 0;

    }

    .shape-3,
    .shape-4{

        display:none;

    }

}

/*==============================
        Mobile
==============================*/

@media (max-width:576px){

    .auth-wrapper{

        padding:20px 12px;

    }

    .auth-card{

        padding:28px 22px;

        border-radius:20px;

    }

    .logo{

        font-size:1.7rem;

    }

    .auth-title{

        font-size:1.5rem;

    }

    .auth-subtitle{

        font-size:.9rem;

    }

    .form-label{

        font-size:.95rem;

    }

    .auth-input .form-control{

        height:54px;

        font-size:.95rem;

    }

    .auth-btn{

        height:54px;

        font-size:.95rem;

    }

    .forgot-link,
    .register-link{

        font-size:.92rem;

    }

    .divider span{

        font-size:.82rem;

    }

    .copyright{

        font-size:.82rem;

    }

}

/*==============================
      Extra Small Phones
==============================*/

@media (max-width:420px){

    .auth-card{

        padding:24px 18px;

    }

    .logo{

        font-size:1.55rem;

    }

    .auth-title{

        font-size:1.35rem;

    }

    .auth-subtitle{

        font-size:.88rem;

    }

    .auth-btn{

        font-size:.92rem;

    }

    .form-check{

        flex-wrap:wrap;

        gap:8px;

    }

}

/*==================================================
      Reduce Motion
==================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*==================================================
      Dark Mode Support
==================================================*/

@media (prefers-color-scheme:dark){

    :root{

        --bg:#0f172a;

        --glass:rgba(15,23,42,.82);

        --glass-border:rgba(255,255,255,.08);

        --text:#f8fafc;

        --muted:#cbd5e1;

        --secondary:#ffffff;

        --border:#334155;

    }

    body{

        background:var(--bg);

    }

    .auth-input{

        background:#1e293b;

    }

    .auth-input .form-control{

        color:#fff;

    }

    .divider span{

        background:#162133;

    }

}

/*==================================================
      Utility Classes
==================================================*/

.w-100{

    width:100%;

}

.text-center{

    text-align:center;

}

.d-none{

    display:none !important;

}

.opacity-0{

    opacity:0;

}

.opacity-100{

    opacity:1;

}

.pointer{

    cursor:pointer;

}

.shadow-hover:hover{

    box-shadow:var(--shadow-hover);

}

.rounded-xl{

    border-radius:var(--radius);

}

/*==================================================
      Hover Utilities
==================================================*/

.hover-lift{

    transition:var(--transition);

}

.hover-lift:hover{

    transform:translateY(-4px);

}

.hover-scale{

    transition:var(--transition);

}

.hover-scale:hover{

    transform:scale(1.03);

}

.hover-shadow{

    transition:var(--transition);

}

.hover-shadow:hover{

    box-shadow:var(--shadow-hover);

}

/*==================================================
      Focus Helpers
==================================================*/

.focus-ring:focus{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.15);

}

/*==================================================
      Loading State
==================================================*/

.loading{

    pointer-events:none;

    user-select:none;

    opacity:.75;

}

.loading *{

    cursor:wait !important;

}

/*==================================================
      Fade Animations
==================================================*/

.fade-up{

    animation:fadeUp .7s ease both;

}

.fade-down{

    animation:fadeDown .7s ease both;

}

.fade-left{

    animation:fadeLeft .7s ease both;

}

.fade-right{

    animation:fadeRight .7s ease both;

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-25px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(25px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

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

.float{

    animation:floatElement 5s ease-in-out infinite;

}

@keyframes floatElement{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==================================================
      Smooth Icon Animation
==================================================*/

.auth-btn i,
.register-link,
.forgot-link,
.logo{

    transition:var(--transition);

}

.auth-btn:hover i{

    transform:translateX(4px);

}

/*==================================================
      Accessibility
==================================================*/

button,
a,
input{

    -webkit-tap-highlight-color:transparent;

}

button:focus-visible,
a:focus-visible{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:4px;

}

/*==================================================
      Prevent Image Selection
==================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}

/*==================================================
      Performance
==================================================*/

.auth-card,
.auth-btn,
.auth-input,
.shape{

    will-change:transform;

}

/*==================================================
      Print
==================================================*/

@media print{

    body{

        background:#fff;

    }

    .shape{

        display:none;

    }

    .auth-card{

        box-shadow:none;

        border:1px solid #ddd;

        backdrop-filter:none;

    }

}

/*==================================================
      End of File
==================================================*/