/* Customer sign-in pages polished to match the portal (owner 24 Oct 2026:
   keep today's login, only improve it). Loaded only on the 5 customer pages;
   the staff ERP login keeps scc_auth_ui.css as it is. */
body[data-auth-audience="customer"] {
    --scc-auth-navy: #0A2540;
    --scc-auth-navy-deep: #071A2E;
    --scc-auth-navy-light: #0F3A66;
    --scc-auth-blue: #0A6ED1;
    --scc-auth-blue-dark: #0859A9;
    --scc-auth-page: #F2F4F7;
    --scc-auth-ink: #1D2D3E;
    --scc-auth-muted: #5B6B7D;
    --scc-auth-border: #E1E6EC;
}
body[data-auth-audience="customer"] .scc-auth-card::before { background: var(--scc-auth-blue); }
body[data-auth-audience="customer"] .scc-auth-card { width: min(100%, 460px); padding: 24px 30px 20px; border-radius: 14px; }
body[data-auth-audience="customer"] .customer-auth-form { gap: 11px !important; margin-top: 14px !important; }
body[data-auth-audience="customer"] .scc-auth-card-copy { margin-top: 6px; }
body[data-auth-audience="customer"] .customer-auth-alert:empty { display: none; }
/* Security check on one line: picture + New, then the 5-digit box */
body[data-auth-audience="customer"].scc-auth-page .customer-login-captcha.scc-auth-captcha { grid-template-columns: auto minmax(0, 1fr) !important; align-items: center; gap: 8px 10px !important; padding: 10px 10px 8px !important; }
body[data-auth-audience="customer"].scc-auth-page .customer-login-captcha.scc-auth-captcha .login-captcha-visual { grid-template-columns: 150px auto !important; }
body[data-auth-audience="customer"].scc-auth-page .customer-login-captcha.scc-auth-captcha .login-captcha-visual img { width: 150px !important; max-width: 150px !important; height: 44px !important; }
body[data-auth-audience="customer"].scc-auth-page .customer-login-captcha.scc-auth-captcha .login-captcha-answer > span:not(.scc-auth-input-shell) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body[data-auth-audience="customer"].scc-auth-page .customer-login-captcha.scc-auth-captcha .login-captcha-visual button { min-height: 40px !important; font-size: .72rem !important; }
body[data-auth-audience="customer"].scc-auth-page .customer-login-captcha.scc-auth-captcha > small { grid-column: 1 / -1; }
body[data-auth-audience="customer"].scc-auth-page .customer-login-captcha.scc-auth-captcha legend { font-size: .7rem !important; }
/* Sign-in button: text centred, arrow after it */
body[data-auth-audience="customer"] .customer-auth-submit.scc-auth-submit { font-size: .9rem !important; font-weight: 700 !important; background: var(--scc-auth-blue) !important; box-shadow: 0 8px 18px rgba(10, 110, 209, .22) !important; }
body[data-auth-audience="customer"] .customer-auth-submit.scc-auth-submit span { margin-left: 0; font-size: inherit; }
body[data-auth-audience="customer"] .customer-auth-submit.scc-auth-submit svg { order: 2; }
body[data-auth-audience="customer"] .customer-auth-submit.scc-auth-submit:hover { background: var(--scc-auth-blue-dark) !important; }
body[data-auth-audience="customer"] .scc-auth-form-footer { margin-top: 10px; }
@media (max-height: 760px) and (min-width: 881px) {
    body[data-auth-audience="customer"] .scc-auth-form-panel { padding-block: 10px; }
    body[data-auth-audience="customer"] .scc-auth-card { padding-block: 18px 16px; }
    body[data-auth-audience="customer"] .scc-auth-card-header h2 { font-size: 1.7rem; }
    body[data-auth-audience="customer"] .scc-auth-form-footer { display: none; }
}

/* OTP, forgot, reset and change password pages: same navy and blue */
.customer-auth-page { background: radial-gradient(circle at 85% 90%, rgba(76, 154, 255, .2), transparent 38%), linear-gradient(155deg, #071A2E 0%, #0A2540 45%, #0F3A66 100%); font-family: "Inter", "Segoe UI", -apple-system, Arial, sans-serif; }
.customer-auth-story .customer-kicker { color: #8FBFFF; }
.customer-auth-story h1 { font: 800 clamp(2.4rem, 4.6vw, 4.4rem)/1.02 "Inter", "Segoe UI", Arial, sans-serif; letter-spacing: -.035em; }
.customer-auth-story h1 span { color: #8FBFFF; }
.customer-auth-story p:not(.customer-kicker) { color: #C2D1E2; }
.customer-auth-panel { background: #F2F4F7; backdrop-filter: none; }
.customer-auth-card { border: 1px solid #E1E6EC; border-top: 4px solid #0A6ED1; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(10, 37, 64, .14); }
.customer-auth-card .customer-kicker { color: #0A6ED1; }
.customer-auth-card h2 { color: #1D2D3E; font: 800 clamp(1.7rem, 2.6vw, 2.2rem)/1.1 "Inter", "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; }
.customer-auth-form label { color: #354A5F; }
.customer-auth-form input { border-color: #C9D2DC; border-radius: 8px; }
.customer-auth-form input:focus { border-color: #0A6ED1; box-shadow: 0 0 0 3px #EBF5FE; }
.customer-auth-submit, .customer-auth-page .customer-button { background: #0A6ED1; border-radius: 8px; }
.customer-auth-submit:hover { background: #0859A9; }
.customer-auth-submit span { margin-left: 4px; }
.customer-auth-link { color: #0A6ED1; }
.customer-password-field button { color: #0A6ED1; background: #EBF5FE; }