/* =============================================
   Split-screen auth layout — shared by Index & ResetPassword
   ============================================= */

html, body {
    height: 100%;
    margin: 0;
}

.split-screen {
    display: flex;
    min-height: 100vh;
}

/* --- Left image panel --- */

.split-left {
    flex: 0 0 55%;
    background-image: url('../bg.avif');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem;
}

.split-left::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(8,15,40,0.45) 0%, rgba(8,15,40,0.82) 100%);
}

.split-left .overlay-content {
    position: relative;
    z-index: 1;
    color: #fff;
}

.split-left h1 {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.2;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: .02em;
}

.brand-link i {
    font-size: 1.35rem;
    opacity: .9;
}

/* --- Right form panel --- */

.split-right {
    flex: 0 0 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 4rem;
    background: #fff;
}

.form-panel {
    width: 100%;
    max-width: 380px;
}

.icon-badge {
    display: flex;
    margin-bottom: 2rem;
}

/* --- Buttons --- */

.btn-primary {
    background: #1a296d;
    border-color: #1a296d;
    border-radius: .5rem;
    font-weight: 600;
    padding: .625rem 1rem;
    transition: background .15s, box-shadow .15s;
}

.btn-primary:hover {
    background: #3a57e8;
    border-color: #3a57e8;
    box-shadow: 0 4px 14px rgba(79,110,247,.35);
}

.btn-outline-primary {
    border-radius: .5rem;
    font-weight: 600;
    padding: .625rem 1rem;
}

/* --- Input with leading icon (Index) --- */

.form-control-icon-wrap .input-group-text {
    background: #f8f9fa;
    border-right: 0;
    border-radius: .5rem 0 0 .5rem;
}

.form-control-icon-wrap .form-control {
    border-left: 0;
    border-radius: 0 .5rem .5rem 0;
    padding-left: .25rem;
}

.form-control-icon-wrap .form-control:focus {
    box-shadow: none;
}

.form-control-icon-wrap:focus-within .input-group-text,
.form-control-icon-wrap:focus-within .form-control {
    border-color: #86b7fe;
}

/* --- Password input with show/hide toggle (ResetPassword) --- */

.pw-wrap .input-group-text {
    background: #f8f9fa;
    border-right: 0;
    border-radius: .5rem 0 0 .5rem;
}

.pw-wrap .form-control {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: .25rem;
}

.pw-wrap .btn-pw-toggle {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: 0;
    border-radius: 0 .5rem .5rem 0;
    color: #6c757d;
    padding: 0 .75rem;
    cursor: pointer;
}

.pw-wrap .form-control:focus,
.pw-wrap .btn-pw-toggle:focus {
    box-shadow: none;
}

.pw-wrap:focus-within .input-group-text,
.pw-wrap:focus-within .form-control,
.pw-wrap:focus-within .btn-pw-toggle {
    border-color: #86b7fe;
}

/* --- Status / feedback icons --- */

.success-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f0fdf4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #16a34a;
    flex-shrink: 0;
}

.status-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* --- Responsive --- */

/* --- Password policy checklist --- */

.pw-policy {
    background: #f8faff;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    padding: .6rem .85rem .65rem;
    margin-top: .45rem;
}

.pw-policy-title {
    font-size: .72rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .4rem;
}

.pw-policy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .2rem .75rem;
}

.pw-req {
    font-size: .8rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: .3rem;
    transition: color .2s;
}

.pw-req i {
    font-size: .95rem;
    flex-shrink: 0;
}

.pw-req.ok {
    color: #16a34a;
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .split-left {
        display: none;
    }

    .split-right {
        flex: 1;
        padding: 2.5rem 1.5rem;
    }
}