/* ==========================================================
   TechnoStay Registration Page
========================================================== */

:root{

    --primary:#2563eb;
    --secondary:#7c3aed;

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

    --border:#dbe4f0;

    --bg:#f8fafc;

}

/* ==========================================================
   BODY
========================================================== */

body{

    min-height:100vh;

    background:
        radial-gradient(circle at top left,#dbeafe 0%,transparent 40%),
        radial-gradient(circle at bottom right,#ede9fe 0%,transparent 40%),
        var(--bg);

    font-family:'Inter',sans-serif;

}

/* ==========================================================
   TOP BAR
========================================================== */

.login-topbar{

    position:absolute;

    left:40px;

    top:30px;

}

.back-home{

    color:#64748b;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.back-home:hover{

    color:var(--primary);

}

/* ==========================================================
   WRAPPER
========================================================== */

.auth-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:80px 15px;

}

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


.login-card{

    width:100%;

    max-width:520px;

    background:#fff;

    border-radius:24px;

    padding:10px 40px 20px;

    box-shadow:

        0 25px 70px rgba(15,23,42,.08),

        0 8px 25px rgba(37,99,235,.05);

    animation:card .5s ease;

}

.register-card{

    width:100%;

    max-width:900px;

    background:#fff;

    border-radius:24px;

    padding:10px 40px 20px;

    box-shadow:

        0 25px 70px rgba(15,23,42,.08),

        0 8px 25px rgba(37,99,235,.05);

    animation:card .5s ease;

}

@keyframes card{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================================================
   LOGO
========================================================== */

.ts-logo{
    height:70px;
}

/* ==========================================================
   TITLES
========================================================== */

.login-card h2,
.register-card h2,
.otp-card h2 {
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
}

.login-card p,
.register-card p,
.otp-card p {
    color: var(--muted);
}
/* ==========================================================
   LABELS
========================================================== */

.form-label{

    font-weight:600;

    color:#334155;

}

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

.input-group{

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

    border-radius:14px;

    background:#fafbfd;

    overflow:hidden;

    transition:.25s;

}

.input-group-text{

    border:none;

    background:transparent;

    color:#64748b;

    padding-left:18px;

}

.form-control{

    border:none !important;

    background:transparent;

    height:56px;

    box-shadow:none !important;

    font-size:15px;

}


textarea.form-control{

    border:1px solid var(--border) !important;
    border-radius:14px;
    background:#fafbfd;
    min-height:10px;
    padding:15px;
    resize:none;
    box-shadow:none !important;

}

textarea.form-control:focus{

    border-color:var(--primary) !important;

    background:#fff;

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

}

.input-group:focus-within{

    border-color:var(--primary);

    background:#fff;

    box-shadow:

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

}

/* ==========================================================
   SELECT2
========================================================== */

.select2-container{

    width:100% !important;

}

.select2-container--default .select2-selection--single{

    height:56px;

    border-radius:14px;

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

    display:flex;

    align-items:center;

}

.select2-selection__rendered{

    line-height:56px !important;

    padding-left:15px !important;

}

.select2-selection__arrow{

    height:56px !important;

}

.select2-container--default.select2-container--focus
.select2-selection--single{

    border-color:var(--primary);

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

}

/* ==========================================================
   PASSWORD BUTTON
========================================================== */

.password-toggle{

    border:none;

    background:transparent;

    color:#64748b;

    padding-right:18px;

}

.password-toggle:hover{

    color:var(--primary);

}

/* ==========================================================
   PASSWORD STRENGTH
========================================================== */

.password-strength{

    width:100%;

    height:6px;

    border-radius:10px;

    background:#e5e7eb;

    overflow:hidden;

}

.strength-bar{

    width:0;

    height:100%;

    transition:.3s;

    background:#ef4444;

}

.strength-text{

    font-size:13px;

}

/* ==========================================================
   BUTTON
========================================================== */

.btn-login{

    height:56px;

    border:none;

    border-radius:14px;

    color:#fff;

    font-weight:600;

    font-size:16px;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    transition:.3s;

}

.btn-login:hover, .btn-login:focus, .btn-login:active, .btn-login:focus-visible{
    
    color: #fff !important;

    transform:translateY(-2px);

    box-shadow:

        0 15px 35px rgba(37,99,235,.25);

}

/* ==========================================================
   TERMS
========================================================== */

.form-check{

    margin-top:10px;

}

.form-check-input{

    width:20px;

    height:20px;

    margin-top:.2rem;

    cursor:pointer;

}

.form-check-label{

    margin-left:8px;

    color:#475569;

}

.form-check-label a{

    text-decoration:none;

    font-weight:600;

}

/* ==========================================================
   FLASH ERROR
========================================================== */

.login-error{

    background:#fef2f2;

    border:1px solid #fecaca;

    color:#dc2626;

    border-radius:12px;

    padding:14px 18px;

    margin-bottom:20px;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    text-decoration:none;

}

a:hover{

    text-decoration:none;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:768px){
    
    .register-card,
    .login-card{

        padding:10px 22px 30px;

    }

    .login-topbar{

        left:20px;

        top:20px;

    }

}


.otp-card{
    width:100%;
    background:#fff;

    border-radius:24px;

    padding:10px 40px 20px;

    box-shadow:

        0 25px 70px rgba(15,23,42,.08),

        0 8px 25px rgba(37,99,235,.05);

    animation:card .5s ease;
    max-width:520px;

}

.otp-inputs{

    display:flex;

    justify-content:center;

    gap:12px;

}

.otp-box{

    width:56px;

    height:56px;

    border:1px solid #dbe4f0;

    border-radius:14px;

    text-align:center;

    font-size:24px;

    font-weight:700;

    transition:.25s;

}

.otp-box:focus{

    outline:none;

    border-color:#2563eb;

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

}

.disabled{

    pointer-events:none;

    opacity:.5;

}




.success-card{

    max-width:760px;

    margin:auto;

    background:#fff;

    padding:50px;

    border-radius:24px;

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

    text-align:center;

}

.success-icon{

    width:110px;

    height:110px;

    margin:auto auto 25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#10b981,#22c55e);

    color:#fff;

    font-size:52px;

    box-shadow:0 20px 45px rgba(34,197,94,.25);

}

.subtitle{

    color:#64748b;

    margin-bottom:35px;

}

.success-summary{

    display:grid;

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

    gap:20px;

    margin-bottom:35px;

}

.summary-item{

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:14px;

    padding:18px;

}

.summary-item span{

    display:block;

    color:#64748b;

    font-size:13px;

    margin-bottom:6px;

}

.summary-item strong{

    color:#1e293b;

    font-size:15px;

}

.status-list{

    display:grid;

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

    gap:15px;

    margin:35px 0;

}

.status-item{

    background:#f0fdf4;

    border:1px solid #bbf7d0;

    color:#15803d;

    border-radius:12px;

    padding:15px;

    font-weight:600;

}

.status-item i{

    margin-right:8px;

}

.next-steps{

    text-align:left;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:18px;

    padding:30px;

    margin-top:30px;

}

.setup-item{

    display:flex;

    gap:18px;

    margin-bottom:24px;

}

.setup-item:last-child{

    margin-bottom:0;

}

.step-number{

    width:42px;

    height:42px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    flex-shrink:0;

}

.step-content h6{

    margin-bottom:6px;

    font-weight:600;

    color:#1e293b;

}

.step-content p{

    margin:0;

    color:#64748b;

    line-height:1.6;

    font-size:14px;

}

@media(max-width:768px){

.success-card{

padding:30px 22px;

}

.success-summary{

grid-template-columns:1fr;

}

.status-list{

grid-template-columns:1fr;

}

}