/* =====================================================
   Digixel IT Login Page
===================================================== */

.auth-page { min-height: 70vh; }
.auth-section { padding: 52px 0 75px; }
.auth-shell { overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: #fff; box-shadow: 0 28px 70px rgba(24,20,57,.11); }
.auth-brand-panel { position: relative; min-height: 690px; height: 100%; overflow: hidden; padding: 72px 58px; color: #fff; background: radial-gradient(circle at 15% 15%, rgba(255,255,255,.13), transparent 24%), radial-gradient(circle at 88% 84%, rgba(255,183,3,.27), transparent 25%), linear-gradient(135deg, #171229 0%, var(--brand-dark) 52%, #6847ee 100%); }
.auth-brand-panel > * { position: relative; z-index: 2; }
.auth-badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.1); font-size: 13px; font-weight: 800; }
.auth-brand-panel h1 { max-width: 540px; margin: 25px 0 18px; color: #fff; font-size: clamp(40px, 5vw, 62px); line-height: 1.04; letter-spacing: -2.2px; font-weight: 950; }
.auth-brand-panel > p { max-width: 540px; margin: 0; color: rgba(255,255,255,.74); font-size: 16px; line-height: 1.75; }
.auth-feature-list { display: grid; gap: 16px; margin-top: 40px; }
.auth-feature-item { max-width: 500px; padding: 16px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.auth-feature-item > span { width: 45px; height: 45px; flex: 0 0 45px; display: grid; place-items: center; border-radius: 13px; color: #ffd166; background: rgba(255,255,255,.11); }
.auth-feature-item strong { display: block; color: #fff; font-size: 14px; }
.auth-feature-item small { display: block; margin-top: 3px; color: rgba(255,255,255,.61); font-size: 11px; line-height: 1.5; }
.auth-brand-decoration { position: absolute; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.auth-decoration-one { width: 330px; height: 330px; top: -185px; right: -70px; }
.auth-decoration-two { width: 440px; height: 440px; right: -260px; bottom: -270px; }
.auth-form-panel { min-height: 690px; height: 100%; padding: 67px 58px; display: flex; flex-direction: column; justify-content: center; }
.auth-form-heading { margin-bottom: 28px; }
.auth-form-heading h2 { margin: 7px 0 8px; color: var(--ink); font-size: clamp(31px, 4vw, 43px); font-weight: 950; letter-spacing: -1.3px; }
.auth-form-heading p { margin: 0; color: var(--muted); }
.auth-alert { margin-bottom: 22px; padding: 15px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid #ffd4dc; border-radius: 14px; background: #fff3f5; }
.auth-alert > span { color: #dc3545; }
.auth-alert strong { display: block; color: #85202d; font-size: 13px; }
.auth-alert p { margin: 3px 0 0; color: #a03d4b; font-size: 12px; }
.auth-form { display: grid; gap: 20px; }
.auth-field label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 850; }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.auth-label-row a { margin-bottom: 8px; color: var(--brand); font-size: 12px; font-weight: 750; }
.auth-input-wrap { height: 54px; padding: 0 15px; display: flex; align-items: center; gap: 11px; border: 1px solid #dcdcea; border-radius: 14px; background: #fff; transition: .2s ease; }
.auth-input-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(91,54,242,.10); }
.auth-input-wrap.has-error { border-color: #dc3545; background: #fffafa; }
.auth-input-wrap > i { color: #8a899a; }
.auth-input-wrap input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; }
.auth-password-toggle { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 0; border-radius: 10px; color: var(--muted); background: transparent; }
.auth-password-toggle:hover { color: var(--brand); background: var(--brand-soft); }
.auth-field-error { display: block; margin-top: 7px; color: #dc3545; font-size: 11px; font-weight: 700; }
.auth-remember { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--brand); }
.auth-submit { width: 100%; min-height: 54px; border: 0; }
.auth-divider { position: relative; margin: 28px 0 20px; text-align: center; }
.auth-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line); }
.auth-divider span { position: relative; z-index: 1; padding: 0 13px; color: var(--muted); background: #fff; font-size: 11px; font-weight: 750; }
.auth-register-link { min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; font-size: 13px; font-weight: 850; transition: .2s ease; }
.auth-register-link:hover { color: var(--brand); border-color: rgba(91,54,242,.3); background: var(--brand-soft); }
.auth-legal { margin: 22px 0 0; color: var(--muted); text-align: center; font-size: 10px; line-height: 1.6; }
.auth-legal a { color: var(--brand); font-weight: 750; }

@media (max-width: 1199.98px) {
    .auth-brand-panel, .auth-form-panel { padding: 58px 42px; }
}

@media (max-width: 991.98px) {
    .auth-brand-panel, .auth-form-panel { min-height: auto; }
    .auth-brand-panel { padding: 48px 35px; }
    .auth-brand-panel h1 { font-size: 44px; }
    .auth-form-panel { padding: 48px 35px; }
}

@media (max-width: 767.98px) {
    .auth-section { padding: 20px 0 52px; }
    .auth-shell { border-radius: 21px; }
    .auth-brand-panel { padding: 39px 22px; }
    .auth-brand-panel h1 { font-size: 36px; letter-spacing: -1.5px; }
    .auth-brand-panel > p { font-size: 14px; }
    .auth-form-panel { padding: 40px 22px; }
    .auth-form-heading h2 { font-size: 32px; }
}

@media (max-width: 480px) {
    .auth-brand-panel, .auth-form-panel { padding-left: 17px; padding-right: 17px; }
    .auth-brand-panel h1 { font-size: 32px; }
    .auth-feature-item { align-items: flex-start; }
}



/* Login Bootstrap Alerts */
.auth-bootstrap-alert {
    position: relative;
    margin-bottom: 22px;
    padding: 15px 48px 15px 16px;
    border-radius: 14px;
    font-size: 13px;
}

.auth-bootstrap-alert .btn-close {
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
}

.auth-bootstrap-alert strong {
    display: block;
    font-size: 13px;
}