/*=====================================
 PREMIUM NAVBAR
=====================================*/

/* Navbar goes behind the modal when a modal is open */

body.modal-open{

    overflow:hidden;

}

body.modal-open .navbar{

    z-index:1000 !important;

}

/* Bootstrap modal */

.modal{

     z-index:1060 !important;

}

/* Bootstrap backdrop */

.modal-backdrop{

     z-index:1050 !important;

}

.page-focus{
    transition:.3s;
}

.modal-backdrop.show{
    background: transparent !important;
    opacity: 0 !important;
}

.navbar{

    position:fixed;

    top:18px;

    left:50%;

    transform:translateX(-50%);

    width:95%;

    max-width:1350px;

    padding:14px 30px;

    border-radius:22px;

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

    backdrop-filter:none;

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

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

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    transition:.4s ease;

    z-index:1030;

}

/* Navbar after scrolling */

.navbar.scrolled{

    padding:10px 25px;

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

    box-shadow:0 18px 50px rgba(0,0,0,.12);

}

/* Logo */

.navbar-brand{

    font-size:1.8rem;

    font-weight:700;

    color:#0d3b66 !important;

    letter-spacing:.5px;

    transition:.35s;

}

.navbar-brand:hover{

    transform:scale(1.05);

}

/* Links */

.navbar .nav-link{

    position:relative;

    margin:0 6px;

    color:#0d3b66;

    font-weight:600;

    padding:10px 18px;

    transition:.35s;

}

/* Animated underline */

.navbar .nav-link::after{

    content:"";

    position:absolute;

    bottom:0;

    left:50%;

    width:0;

    height:3px;

    border-radius:30px;

    background:#0d6efd;

    transition:.35s;

    transform:translateX(-50%);

}

.navbar .nav-link:hover::after{

    width:70%;

}

.navbar .nav-link:hover{

    color:#0d6efd;

}

/* Login Button */

.login-btn{

    padding:10px 22px;

    border-radius:40px;

    color:#0d3b66;

    font-weight:600;

    transition:.35s;

}

.login-btn:hover{

    background:#eef6ff;

}

/* Signup */

.signup-btn{

    background:#0d6efd;

    color:white !important;

    padding:11px 26px;

    border-radius:40px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 10px 25px rgba(13,110,253,.25);

}

.signup-btn:hover{

    background:#0056d6;

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(13,110,253,.35);

}

.navbar-toggler{

    border:none;

}

.custom-toggle-icon{

    color:#0d6efd;

    font-size:1.8rem;

}

.theme-toggle-mobile{

    display:none;

}

/*=========================================================
                AUTH GLASS CARD
=========================================================*/

#loginModal .modal-content,
#signupModal .modal-content{

    position:relative;

    overflow:hidden;

    border:none;

    border-radius:34px;

    background:transparent;

}

/*=====================================================
        AUTH CARD
======================================================*/

#loginModal .modal-content,
#signupModal .modal-content{

    position:relative;

    overflow:hidden;


    background:linear-gradient(
        135deg,
        rgba(15,23,42,.88),
        rgba(30,41,59,.82)
    );

    border:none;

    box-shadow:
    0 25px 60px rgba(0,0,0,.18);

    height:100%;

    max-height:100%;

    overflow-y:auto;

    border-radius:34px;

}

/*=========================================================
                PREMIUM AUTH CARD SIZE
=========================================================*/

#loginModal .modal-dialog,
#signupModal .modal-dialog{

   max-width:540px;
    margin:2rem auto;

    height:calc(100vh - 4rem);

}

#loginModal .modal-content,
#signupModal .modal-content{

    min-height:720px;

    border-radius:34px;

}

/* Beautiful blue glow */

#loginModal   .modal-content::before,
#signupModal .modal-content::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:

    radial-gradient(

        rgba(13,110,253,.35),

        transparent 70%

    );

    top:-180px;

    right:-150px;

    pointer-events:none;

}

#loginModal .modal-content::after,
#signupModal .modal-content::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    background:

    radial-gradient(

        rgba(56,189,248,.22),

        transparent 70%

    );

    bottom:-160px;

    left:-120px;

}

#loginModal .modal-body,
#signupModal .modal-body{

    position:relative;

    z-index:10;

    padding:40px;

   

}

#loginModal  h2,
#signupModal h2{

    color:white;

}
#loginModal p,
#signupModal p{

    color:#f8fafc;

}

#loginModal input,
#signupModal input{

    color:#f8fafc;

}

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

#loginModal .form-control,
#signupModal .form-control{

    background:transparent;

    border:none;

    border-bottom:

    2px solid rgba(255,255,255,.25);

    border-radius:0;

    padding:12px 4px;

    font-size:17px;

    color:#f7fbff;

    box-shadow:none;

}

#loginModal.form-control:focus,
#signupModal .form-control:focus{

    border-bottom:

    2px solid #38bdf8;

    box-shadow:

    0 8px 25px

    rgba(56,189,248,.25);


    box-shadow:none;

    background:transparent;

    color:#f8fafc;

}

#loginModal .form-control::placeholder,
#signupModal .form-control::placeholder{

    color:#f8fafc;

}

.input-group-text{

    background:transparent;

    border:none;

    border-bottom:2px solid rgba(255,255,255,.25);

    border-radius:0;

    color:#f8fafc;

    font-size:20px;

}




/*=========================================================
                PREMIUM BUTTONS
=========================================================*/

.login-btn-custom{

    position:relative;

    overflow:hidden;

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    font-size:18px;

    font-weight:700;

    color:white;

    background:

    linear-gradient(

        135deg,

        #0d6efd,

        #38bdf8

    );

    transition:.35s;

}

.login-btn-custom:hover{

    transform:

        translateY(-5px);

    box-shadow:

        0 18px 45px

        rgba(13,110,253,.35);

}

.login-btn-custom:active{

    transform:scale(.97);

}

.login-btn-custom::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

}

.login-btn-custom:hover::before{

    animation:

    shine .9s;

}

/*=========================================================
                Auth Header
=========================================================*/
.auth-header{

    text-align:center;

    margin-bottom:35px;

}

.auth-logo{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:46px;

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

    backdrop-filter:none;

    border:1px solid rgba(255,255,255,.18);

    animation:

    floatingLogo 4s infinite ease-in-out;

}

.auth-header h2{

    margin-top:20px;

    font-size:46px;

    font-weight:800;

}

.auth-header p{

    margin-top:8px;

    opacity:.8;
    

}

.auth-form{

    width:88%;

    max-width:430px;

    margin:auto;

}

.auth-links a{

    position:relative;

    z-index:101;

    color:#38bdf8;


}

.auth-links p{

    color:#f8fafc;
}

.auth-close{

position:absolute;

top:20px;

right:20px;

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#f8fafc;

color:#475569;

display:flex;

justify-content:center;

align-items:center;

font-size:18px;

transition:.35s;

z-index:100;

}

.auth-close:hover{

background:#0d6efd;

color:white;

transform:rotate(90deg);

}



.password-rules{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:15px;

}

.password-rule{

    padding:8px 15px;

    border-radius:30px;

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

    transition:.35s;

    font-size:14px;

}

.password-rule.active{

    background:#d1fae5;

    color:#047857;

}




/*=========================================================
                PREMIUM MOBILE NAVBAR
=========================================================*/

@media (max-width:768px){

.navbar{

    padding:18px 20px;

}

.navbar .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    position:relative;

}

/* Hide Desktop Theme */

.desktop-theme{

    display:none !important;

}

/* Hamburger */

.navbar-toggler{

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    background:transparent;

    padding:0;

    box-shadow:none;

    order:1;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.custom-toggle-icon{

    font-size:34px;

    color:#0d6efd;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* Logo */

.navbar-brand{

    order:2;

    margin:0;

    padding:0;

    flex:1;

    text-align:center;

}

.brand-name{

    font-size:2rem;

    font-weight:700;

    color:#0d3b66;

}

/* Theme Button */

.theme-toggle-mobile{

    order:3;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:#fff;

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

}

/* Mobile Menu */

.navbar-collapse{

    margin-top:22px;

    padding:18px;

    border-radius:20px;

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

    backdrop-filter:none;

}

.navbar-nav{

    gap:12px;

}

.navbar-nav .nav-link{

    text-align:center;

    padding:14px;

    border-radius:12px;

}

.login-btn,

.signup-btn{

    width:100%;

    margin-top:10px;

}

}

#loginModal .modal-content::-webkit-scrollbar,
#signupModal .modal-content::-webkit-scrollbar{

    width:8px;

}

#loginModal .modal-content::-webkit-scrollbar-track,
#signupModal .modal-content::-webkit-scrollbar-track{

    background:transparent;

}

#loginModal .modal-content::-webkit-scrollbar-thumb,
#signupModal .modal-content::-webkit-scrollbar-thumb{

    background:#3b82f6;

    border-radius:20px;

}

#loginModal .modal-content::-webkit-scrollbar-thumb:hover,
#signupModal .modal-content::-webkit-scrollbar-thumb:hover{

    background:#2563eb;

}