.auth-page > .container-fluid, .auth-page > .container-fluid > .row, .auth-page main { min-height: 100vh; }
.auth-page main { padding: 0; }
.login-page { display: flex; flex-direction: column; min-height: 100vh; padding: clamp(20px, 4vw, 48px) 20px 18px; background: radial-gradient(circle at 78% 18%, #d8eaff 0, transparent 34%), radial-gradient(circle at 8% 85%, #dceefa 0, transparent 32%), linear-gradient(135deg, #f8fbff, #eaf2fa); color: #19344e; }
.login-shell { display: grid; grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); align-items: start; gap: clamp(42px, 8vw, 140px); width: min(1180px, 100%); min-height: calc(100vh - 110px); margin: 0 auto; direction: ltr; }
.login-card, .login-intro { direction: rtl; }
.login-card { padding: clamp(24px, 3vw, 38px); border: 1px solid #d8e5f1; border-radius: 25px; background: #fff; box-shadow: 0 24px 70px rgba(18, 57, 95, .12); }
.login-card-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 28px; }
.login-card-icon { display: grid; place-items: center; flex: none; width: 49px; height: 49px; border-radius: 14px; background: #e8f3ff; overflow: hidden; }
.login-card-icon img { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; }
.login-card h2 { margin: 0 0 4px; color: #12395f; font-size: 1.35rem; font-weight: 800; }
.login-card-heading p { margin: 0; color: #6d7c8d; font-size: .85rem; }
.login-field { margin-bottom: 18px; }
.login-field label { display: block; margin-bottom: 8px; color: #314d68; font-size: .85rem; font-weight: 700; }
.login-input-wrap { position: relative; }
.login-input-wrap > i { position: absolute; z-index: 1; top: 50%; right: 14px; transform: translateY(-50%); color: #7791aa; }
.login-input-wrap .form-control { min-height: 48px; padding-inline: 42px 42px; border: 1px solid #d5e3ef; border-radius: 11px; background: #fbfdff; font-size: .9rem; }
.login-input-wrap .form-control:focus { border-color: #116cc8; box-shadow: 0 0 0 3px rgba(17, 108, 200, .12); }
.login-password-toggle { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); display: grid; place-items: center; width: 33px; height: 33px; border: 0; border-radius: 8px; background: transparent; color: #617389; }
.login-password-toggle:hover, .login-password-toggle:focus-visible { background: #e8f3ff; color: #116cc8; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 4px 0 22px; font-size: .8rem; }
.login-remember { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 700; }
.login-remember input { width: 16px; height: 16px; accent-color: #116cc8; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 47px; border-radius: 10px; background: #116cc8; color: #fff; font-size: .95rem; font-weight: 700; }
.login-submit:hover, .login-submit:focus-visible { background: #0b4d8d; color: #fff; }
.login-intro { max-width: 570px; justify-self: end; align-self: center; }
.login-brand { display: flex; align-items: center; gap: 15px; margin-bottom: 27px; }
.login-logo { display: block; width: 94px; height: 94px; flex: none; object-fit: contain; border-radius: 50%; background: #fff; box-shadow: 0 12px 32px rgba(18, 57, 95, .12); }
.login-eyebrow { color: #116cc8; font-size: .91rem; font-weight: 800; }
.login-eyebrow span { margin: 0 4px; color: #8ba6bd; }
.login-intro h1 { margin: 0 0 16px; color: #12395f; font-size: clamp(2.15rem, 4.2vw, 3.45rem); font-weight: 800; line-height: 1.27; }
.login-intro h1 span { color: #116cc8; }
.login-lead { max-width: 530px; margin: 0; color: #5e7288; font-size: clamp(.98rem, 1.4vw, 1.12rem); line-height: 1.95; }
.login-features-section { width: min(1180px, 100%); margin: 44px auto 0; direction: rtl; }
.login-features-heading { max-width: 650px; margin-bottom: 28px; }
.login-section-eyebrow { display: inline-block; padding: 7px 12px; border-radius: 99px; background: #e3f1ff; color: #116cc8; font-size: .78rem; font-weight: 800; }
.login-features-heading h2 { margin: 13px 0 8px; color: #12395f; font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 800; }
.login-features-heading p { margin: 0; color: #667c90; font-size: .9rem; line-height: 1.8; }
.login-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.login-feature { display: flex; align-items: flex-start; gap: 14px; min-width: 0; min-height: 116px; padding: 22px 20px; border: 1px solid #dce8f3; border-radius: 17px; background: #fff; box-shadow: 0 10px 26px rgba(18, 57, 95, .055); }
.login-feature-icon { display: grid; place-items: center; flex: none; width: 45px; height: 45px; border-radius: 12px; background: #e4f1ff; color: #116cc8; font-size: 1.15rem; }
.login-feature strong, .login-feature small { display: block; }
.login-feature strong { color: #12395f; font-size: .94rem; }
.login-feature small { margin-top: 4px; color: #667c90; font-size: .81rem; line-height: 1.5; }
.login-service-summary { display: flex; align-items: center; gap: 13px; margin-top: 27px; padding: 20px 0 0; border-top: 1px solid #cddfed; }
.login-service-summary-icon { display: grid; place-items: center; flex: none; width: 43px; height: 43px; border-radius: 12px; background: #116cc8; color: #fff; font-size: 1.15rem; }
.login-service-summary strong, .login-service-summary span:not(.login-service-summary-icon) { display: block; }
.login-service-summary strong { color: #12395f; font-size: .88rem; }
.login-service-summary div > span { margin-top: 4px; color: #54718c; font-size: .76rem; line-height: 1.6; }
.login-intro-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: #54718c; font-size: .8rem; }
.login-intro-note i { color: #16835c; font-size: 1.08rem; }
.login-footer { width: min(1180px, 100%); margin: 42px auto 0; padding: 24px 12px 4px; border-top: 1px solid #cfdfed; color: #617b93; text-align: center; direction: rtl; }
.login-footer-support { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.login-footer-label { color: #294b69; font-size: .85rem; font-weight: 700; }
.login-footer-links { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.login-footer-links a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; border: 1px solid #cddfed; border-radius: 9px; background: #fff; color: #145d9c; font-size: .82rem; font-weight: 700; text-decoration: none; }
.login-footer-links a:hover, .login-footer-links a:focus-visible { border-color: #116cc8; background: #edf6ff; color: #0b4d8d; }
.login-footer-links a:last-child { border-color: #bce3cf; color: #16835c; }
.login-footer-links a:last-child:hover, .login-footer-links a:last-child:focus-visible { border-color: #16835c; background: #edfaf3; }
.login-footer-bottom { margin-top: 18px; color: #8197aa; font-size: .75rem; }
@media (max-width: 900px) {
    .login-shell { grid-template-columns: minmax(0, 1fr); gap: 38px; width: min(540px, 100%); min-height: 0; padding-top: 8px; }
    .login-intro { justify-self: stretch; max-width: none; }
    .login-features-section { max-width: 700px; margin-top: 50px; }
    .login-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .login-page { padding: 14px 13px 18px; }
    .login-shell { gap: 30px; padding-top: 0; }
    .login-card { padding: 23px 20px; border-radius: 18px; }
    .login-card-heading { margin-bottom: 22px; }
    .login-brand { gap: 11px; margin-bottom: 17px; }
    .login-logo { width: 72px; height: 72px; }
    .login-eyebrow { font-size: .78rem; }
    .login-intro h1 { font-size: 1.85rem; }
    .login-lead { font-size: .89rem; }
    .login-features-section { margin-top: 34px; }
    .login-features { grid-template-columns: 1fr; gap: 9px; }
    .login-feature { min-height: 0; padding: 16px; }
    .login-footer { margin-top: 32px; padding-top: 20px; }
}