/* ==========================================================
   Voxterisk CRM
   Guest Layout
========================================================== */

body{

    background:
        radial-gradient(circle at top left,#312e81 0%,transparent 35%),
        radial-gradient(circle at bottom right,#2563eb 0%,transparent 30%),
        #0f172a;

}

/* ========================================================== */

.guest-wrapper{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;

    position:relative;

    overflow:hidden;

}

/* ========================================================== */

.background-blur{

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:#6C5CE7;

    opacity:.12;

    filter:blur(140px);

    z-index:0;

}

/* ========================================================== */

.guest-container{

    width:100%;

    max-width:460px;

    position:relative;

    z-index:5;

}

/* ========================================================== */

.guest-logo{

    text-align:center;

    margin-bottom:35px;

}

.guest-logo h1{

    font-size:42px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:8px;

}

.guest-logo span{

    color:#94A3B8;

    font-size:15px;

}

/* ========================================================== */

.guest-card{

    background:rgba(30,41,59,.88);

    backdrop-filter:blur(18px);

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

    border-radius:18px;

    padding:35px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);

}

/* ========================================================== */

.guest-card h2{

    text-align:center;

    margin-bottom:25px;

    font-size:28px;

}

/* ========================================================== */

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

/* ========================================================== */

.form-control{

    width:100%;

    padding:14px 16px;

    border-radius:12px;

    border:1px solid #334155;

    background:#0f172a;

    color:#fff;

    transition:.25s;

}

.form-control:focus{

    outline:none;

    border-color:#6C5CE7;

    box-shadow:0 0 0 4px rgba(108,92,231,.18);

}

/* ========================================================== */

.form-check{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:15px;

    margin-bottom:20px;

    color:#cbd5e1;

}

/* ========================================================== */

.btn{

    width:100%;

    border:none;

    border-radius:12px;

    padding:14px;

    font-size:16px;

    font-weight:600;

    transition:.25s;

    cursor:pointer;

}

.btn-primary{

    background:#6C5CE7;

    color:#fff;

}

.btn-primary:hover{

    background:#5A4BD1;

    transform:translateY(-2px);

}

.btn-success{

    background:#10B981;

    color:#fff;

}

.btn-danger{

    background:#EF4444;

    color:#fff;

}

/* ========================================================== */

.links{

    margin-top:22px;

    display:flex;

    justify-content:space-between;

    font-size:14px;

}

.links a{

    color:#60A5FA;

}

.links a:hover{

    text-decoration:underline;

}

/* ========================================================== */

.guest-footer{

    margin-top:30px;

    text-align:center;

    color:#94A3B8;

    font-size:13px;

}

/* ========================================================== */

.alert{

    border-radius:12px;

    padding:14px 16px;

    margin-bottom:20px;

}

.alert-success{

    background:#064E3B;

    color:#fff;

}

.alert-danger{

    background:#7F1D1D;

    color:#fff;

}

.alert-warning{

    background:#78350F;

    color:#fff;

}

.alert-info{

    background:#164E63;

    color:#fff;

}

/* ========================================================== */

.input-icon{

    position:relative;

}

.input-icon i{

    position:absolute;

    top:50%;

    left:14px;

    transform:translateY(-50%);

    color:#94A3B8;

}

.input-icon input{

    padding-left:45px;

}

/* ========================================================== */

.logo-image{

    width:90px;

    margin-bottom:18px;

}

/* ========================================================== */

.divider{

    display:flex;

    align-items:center;

    gap:15px;

    margin:25px 0;

}

.divider::before,

.divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#334155;

}

.divider span{

    color:#94A3B8;

    font-size:13px;

}

/* ========================================================== */

@media(max-width:768px){

    .guest-wrapper{

        padding:20px;

    }

    .guest-card{

        padding:25px;

    }

    .guest-logo h1{

        font-size:34px;

    }

}