:root {
    --cma-green: #087a4b;
    --cma-green-dark: #075b3e;
    --cma-green-soft: #eef8f2;
    --cma-mint: #f3fbf6;
    --cma-ink: #161616;
    --cma-muted: #5f6b65;
    --cma-border: #d7dfda;
    --cma-danger: #b42318;
    --cma-danger-soft: #fff4f2;
    --cma-shadow: 0 16px 40px rgba(16, 44, 31, .08);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body.external-auth-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f4fbf7 0 260px, #fff 260px 100%);
    color: var(--cma-ink);
    font-family: "TheSansArabic", "Bahij TheSansArabic", Tahoma, Arial, sans-serif;
}

.external-auth-brandbar {
    width: min(1440px, 100%);
    min-height: 78px;
    margin: 0 auto;
    padding: 15px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.external-auth-brand img { width: min(280px, 65vw); height: 48px; display: block; }
.external-auth-language {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--cma-green-dark); text-decoration: none; font-size: 13px; font-weight: 700;
    border: 1px solid transparent; padding: 8px 10px; border-radius: 8px;
}
.external-auth-language:hover { background: #edf7f1; }
.external-auth-language svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.external-auth-main {
    flex: 1;
    width: 100%;
    padding: 22px 20px 72px;
}
.auth-page { width: min(100%, 1020px); margin: 0 auto; }
.auth-page--narrow { width: min(100%, 520px); }
.auth-page--medium { width: min(100%, 760px); }
.auth-service-title {
    text-align: center;
    margin: 4px 0 24px;
}
.auth-service-title img { width: min(262px, 65vw); height: auto; margin-bottom: 9px; }
.auth-service-title h1 { margin: 0; font-size: clamp(25px, 3vw, 34px); font-weight: 800; }
.auth-service-title p { margin: 8px auto 0; max-width: 620px; color: var(--cma-muted); line-height: 1.8; }

.auth-card {
    width: 100%;
    padding: 28px;
    border: 1px solid var(--cma-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--cma-shadow);
}
.auth-card--wide { padding: 30px 34px; }
.auth-card__header { margin-bottom: 22px; }
.auth-card__header h1, .auth-card__header h2 { margin: 0; font-size: 25px; line-height: 1.5; font-weight: 800; }
.auth-card__header p { margin: 7px 0 0; color: var(--cma-muted); font-size: 14px; line-height: 1.7; }
.auth-card__header--center { text-align: center; }
.auth-card__header--center p { max-width: 520px; margin-inline: auto; }

.auth-tabs { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; border-bottom: 1px solid #e5ebe7; }
.auth-tab {
    min-height: 46px; display: flex; align-items: center; justify-content: center;
    text-decoration: none; color: #3d4943; font-weight: 700; font-size: 14px;
    border-bottom: 3px solid transparent;
}
.auth-tab.is-active { color: var(--cma-green-dark); border-bottom-color: var(--cma-green); }

.auth-section-heading {
    margin: 24px 0 14px; padding-bottom: 10px;
    border-bottom: 1px solid #e7ece9; color: var(--cma-green-dark); font-size: 16px; font-weight: 800;
}
.auth-grid { display: grid; gap: 16px; }
.auth-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.auth-field { min-width: 0; display: grid; gap: 7px; }
.auth-field label { color: #252b28; font-size: 13px; font-weight: 700; }
.auth-field label .required { color: #c4332d; }
.auth-control,
.auth-field input:not([type="checkbox"]):not([type="radio"]),
.auth-field select,
.auth-field textarea {
    width: 100%; min-height: 44px; margin: 0; padding: 9px 12px;
    border: 1px solid #aeb8b2; border-radius: 4px; background: #fff; color: #171b19;
    font: inherit; font-size: 14px; outline: none; transition: border .15s ease, box-shadow .15s ease;
}
.auth-field textarea { min-height: 110px; resize: vertical; }
.auth-control:focus,
.auth-field input:not([type="checkbox"]):not([type="radio"]):focus,
.auth-field select:focus,
.auth-field textarea:focus { border-color: var(--cma-green); box-shadow: 0 0 0 3px rgba(8, 122, 75, .11); }
.auth-field input[readonly] { background: #f6f8f7; color: #53615a; }
.auth-field .field-validation-error, .auth-field span[data-valmsg-for] { color: var(--cma-danger); font-size: 12px; line-height: 1.5; }
.auth-hint { color: #68756e; font-size: 12px; line-height: 1.6; }
.auth-password-wrap { position: relative; }
.auth-password-wrap input { padding-inline-end: 46px !important; }
.auth-password-toggle {
    position: absolute; inset-inline-end: 7px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 0; background: transparent; color: #68756e; cursor: pointer;
}
.auth-password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.auth-validation-summary, .auth-alert {
    margin: 0 0 16px; padding: 12px 14px; border: 1px solid #f0b7b2; border-radius: 7px;
    background: var(--cma-danger-soft); color: var(--cma-danger); font-size: 13px; line-height: 1.7;
}
.auth-validation-summary:empty, .auth-validation-summary.validation-summary-valid { display: none; }
.auth-validation-summary ul { margin: 0; padding-inline-start: 20px; }
.auth-alert--success { border-color: #a8d9bb; background: #edfaf2; color: #087642; }
.auth-alert--info { border-color: #b8d8c9; background: #f0f9f4; color: #155f42; }

.auth-actions { margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.auth-actions--stack { display: grid; }
.auth-button {
    min-height: 44px; padding: 10px 20px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--cma-green); border-radius: 4px;
    background: var(--cma-green); color: #fff; text-decoration: none; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.auth-button:hover { background: #06643e; }
.auth-button:active { transform: translateY(1px); }
.auth-button:disabled { opacity: .55; cursor: not-allowed; }
.auth-button--secondary { background: #fff; color: var(--cma-green-dark); border-color: #a9b8b0; }
.auth-button--secondary:hover { background: #f2f8f4; }
.auth-button--block { width: 100%; }
.auth-link { color: var(--cma-green-dark); text-decoration: none; font-size: 13px; font-weight: 700; }
.auth-link:hover { text-decoration: underline; }
.auth-row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: #68756e; font-size: 12px; margin: 22px 0; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: #e0e6e2; }
.auth-recaptcha { display: flex; justify-content: center; margin-top: 18px; overflow: hidden; }

.auth-nic-logo { width: min(263px, 70vw); height: auto; display: block; margin: 0 auto 18px; }
.auth-national-copy { text-align: center; color: #46524c; line-height: 1.8; margin-bottom: 22px; }
.auth-app-links { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.auth-app-links img { width: 122px; height: auto; display: block; }
.auth-code-box {
    width: 94px; min-height: 72px; margin: 14px auto; display: grid; place-items: center;
    border: 1px solid #8da69a; border-radius: 10px; background: #f4faf6; color: var(--cma-green-dark); font-size: 34px; font-weight: 900; letter-spacing: 3px; direction: ltr;
}
.auth-countdown { display: flex; align-items: center; justify-content: center; gap: 7px; color: #5f6b65; font-size: 13px; margin: 14px 0; }
.auth-countdown strong { color: var(--cma-green); direction: ltr; }
.auth-otp-input { text-align: center; direction: ltr; letter-spacing: 9px; font-size: 20px !important; font-weight: 800; }
.auth-email-emphasis { display: inline-block; direction: ltr; color: var(--cma-green-dark); font-weight: 800; }

.auth-password-rules { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; color: #4c5b54; font-size: 12px; }
.auth-password-rules li { display: flex; align-items: center; gap: 7px; }
.auth-password-rules li::before { content: "○"; color: #7b8b83; }
.auth-password-rules li.is-valid { color: #087642; }
.auth-password-rules li.is-valid::before { content: "✓"; font-weight: 900; }

.profile-summary {
    margin-bottom: 20px; padding: 16px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    border: 1px solid #dce6e0; border-radius: 8px; background: #f6fbf8;
}
.profile-summary__item { display: grid; gap: 3px; }
.profile-summary__item span { color: #68756e; font-size: 12px; }
.profile-summary__item strong { font-size: 14px; overflow-wrap: anywhere; }
.iti { width: 100%; }
.iti__country-container { direction: ltr; }

.external-auth-footer { background: var(--cma-green-dark); color: #fff; }
.external-auth-footer__inner {
    width: min(1240px, 100%); margin: 0 auto; padding: 34px 30px 26px;
    display: grid; grid-template-columns: minmax(250px, 1fr) minmax(300px, 1fr); gap: 36px;
}
.external-auth-footer__brand img { width: 245px; max-width: 100%; height: auto; }
.external-auth-footer__brand p { color: rgba(255,255,255,.78); font-size: 12px; margin: 12px 0 0; }
.external-auth-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.external-auth-footer__links div { display: grid; align-content: start; gap: 9px; }
.external-auth-footer__links strong { padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.28); font-size: 13px; }
.external-auth-footer__links a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 12px; }
.external-auth-footer__links a:hover { color: #fff; text-decoration: underline; }
.external-auth-footer__bottom { border-top: 1px solid rgba(255,255,255,.16); padding: 14px 24px; text-align: center; color: rgba(255,255,255,.75); font-size: 11px; }

.external-toast {
    position: fixed; z-index: 100; inset-inline-start: 20px; bottom: 20px;
    width: min(380px, calc(100vw - 40px)); min-height: 72px; padding: 14px 44px 14px 14px;
    display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px;
    border: 1px solid #a6d7b9; border-top: 4px solid #3bb37a; border-radius: 8px; background: #fff; color: #18462f;
    box-shadow: 0 14px 35px rgba(0,0,0,.16); font-size: 13px;
}
.external-toast[hidden] { display: none; }
.external-toast[data-type="error"] { border-color: #edb1aa; border-top-color: #dc4f41; color: #8b261d; }
.external-toast__icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e8f8ee; color: #188a53; font-weight: 900; }
.external-toast[data-type="error"] .external-toast__icon { background: #fff0ee; color: #c33c30; }
.external-toast button { position: absolute; top: 7px; inset-inline-end: 9px; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: inherit; }

.auth-loading { display: inline-block; width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: authSpin .7s linear infinite; }
@keyframes authSpin { to { transform: rotate(360deg); } }

@media (max-width: 920px) {
    .auth-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    body.external-auth-body { background: linear-gradient(180deg, #f4fbf7 0 210px, #fff 210px 100%); }
    .official-stamp__summary { padding-inline: 14px; flex-wrap: wrap; }
    .official-stamp__details { grid-template-columns: 1fr; padding-inline: 14px; }
    .external-auth-brandbar { padding: 13px 16px; min-height: 68px; }
    .external-auth-brand img { width: 205px; height: auto; }
    .external-auth-main { padding: 14px 14px 46px; }
    .auth-card, .auth-card--wide { padding: 22px 18px; }
    .auth-grid--2, .auth-grid--4, .profile-summary { grid-template-columns: 1fr; }
    .auth-row-between { align-items: flex-start; flex-direction: column; }
    .external-auth-footer__inner { grid-template-columns: 1fr; padding-inline: 20px; }
    .external-auth-footer__links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 390px) {
    .g-recaptcha { transform: scale(.88); transform-origin: center; }
    .external-auth-footer__links { grid-template-columns: 1fr; }
}
.external-auth-surface {
    width: 100%;
    min-height: 620px;
    padding: 32px 0 64px;
    background: linear-gradient( 180deg, #f4fbf7 0, #f4fbf7 230px, #ffffff 230px, #ffffff 100% );
}

    .external-auth-surface .external-auth-main {
        width: 100%;
        padding: 0 20px;
    }

@media (max-width: 720px) {
    .external-auth-surface {
        min-height: 520px;
        padding: 22px 0 42px;
    }

        .external-auth-surface .external-auth-main {
            padding-inline: 14px;
        }
}