/* ── White-label login (non-default branding identity) ─────────────────
   Loaded after intro-login.css (+ verify-2fa.css) only when the published
   identity is not the built-in MERHAB one. Mirrors the GC Guest app badge
   screen: white card and client | MERHAB lockup on the brand background. Colours come from assets/branding-theme.php (--brand-*);
   band fills are SVG attributes because the page CSP blocks inline styles. */

html, body.il-body.il-brand { background: var(--brand-primary, #062838); }

.il-brand .il-shell {
  background: var(--brand-primary, #062838);
  --auth-card-width: 420px;
  --auth-card-pad-y: 44px;
  --auth-card-pad-x: 40px;
  --auth-control-height: 44px;
  --auth-control-radius: 12px;
  --auth-logo-size: 210px;
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

/* Background — brand bars on the primary colour, or the uploaded image under a veil */
.il-brand-bars { position: absolute; top: 0; bottom: 0; width: min(34vw, 420px); height: 100%; pointer-events: none; }
.il-brand-bars--start { inset-inline-start: 0; }
.il-brand-bars--end { inset-inline-end: 0; }
[dir="rtl"] .il-brand-bars { transform: scaleX(-1); }
.il-brand-veil { position: absolute; inset: 0; background: var(--brand-primary, #062838); opacity: .72; }

/* Language switch (on the dark background) */
.il-brand .il-langswitch { z-index: 3; }
.il-brand .il-langswitch a { color: rgba(255,255,255,.75); background: transparent; }
.il-brand .il-langswitch a:hover { color: #FFFFFF; }
.il-brand .il-langswitch a.active { background: #FFFFFF; color: var(--brand-primary, #062838); }
.il-brand .il-login-wrap { z-index: 2; }

/* Card */
.il-brand .il-login-wrap { opacity: 1; }
.il-brand .il-card {
  position: relative; overflow: hidden;
  background: var(--brand-card, #FFFFFF);
  backdrop-filter: none;
  border: 1px solid var(--brand-border, #E2E7EB);
  border-radius: 32px;
  box-shadow: 0 18px 48px rgba(6, 40, 56, .08);
}


.il-brand .il-card-logo { filter: none; width: var(--auth-logo-size); max-width: 100%; margin-bottom: 28px; }

/* Lockup: client logo | MERHAB */
.il-lockup { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 30px; }
.il-lockup-client { display: block; height: 64px; width: auto; max-width: 62%; }
.il-lockup-merhab { display: block; height: 46px; width: auto; max-width: 30%; }
.il-lockup-sep { width: 1px; height: 52px; background: var(--brand-border, #E2E7EB); flex-shrink: 0; }
.il-brand .il-card h2 { color: var(--brand-text-primary, #062838); font-size: 20px; }
.il-brand .il-card .il-sub2 { color: var(--brand-text-secondary, #5B6B77); font-size: 13px; font-weight: 400; }

/* Fields */
.il-brand .il-field-label { color: var(--brand-text-primary, #062838); font-size: 12.5px; }
.il-brand .il-input {
  background: #FFFFFF; border: 1px solid var(--brand-border, #E2E7EB);
  color: var(--brand-text-primary, #062838); font-size: 14px; color-scheme: light;
}
.il-brand .il-input::placeholder { color: #9AA7B1; }
.il-brand .il-input:focus { border-color: var(--brand-primary, #062838); background: #FFFFFF; }
.il-brand .il-input:focus-visible { outline: 3px solid var(--brand-primary-soft, #E7EEF2); outline-offset: 0; }
.il-brand .il-input:-webkit-autofill,
.il-brand .il-input:-webkit-autofill:hover,
.il-brand .il-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--brand-text-primary, #062838);
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
  box-shadow: 0 0 0 1000px #FFFFFF inset;
  caret-color: var(--brand-text-primary, #062838);
}
.il-brand .il-pw-toggle { color: #9AA7B1; }
.il-brand .il-pw-toggle:hover { color: var(--brand-primary, #062838); }
.il-brand .il-pw-toggle svg { width: 16px; height: 16px; }

.il-brand .il-remember { color: var(--brand-text-secondary, #5B6B77); font-size: 12px; }
.il-brand .il-remember .box { border-color: var(--brand-border, #C9D2D9); }
.il-brand .il-remember input:checked + .box { background: var(--brand-primary, #062838); border-color: var(--brand-primary, #062838); }
.il-brand .il-forgot,
.il-brand .il-back { color: var(--brand-secondary, #C72033); font-size: 12px; }
.il-brand .il-forgot:hover,
.il-brand .il-back:hover { color: var(--brand-primary, #062838); }

/* Primary action */
.il-brand .il-submit {
  background: var(--brand-primary, #062838); color: #FFFFFF; font-size: 14px;
  box-shadow: 0 8px 18px rgba(6, 40, 56, .18);
}
.il-brand .il-submit:hover { filter: none; background: var(--brand-primary-hover, #0B3B52); }
.il-brand .il-submit:focus-visible { outline: 3px solid var(--brand-accent, #F18C20); outline-offset: 2px; }
.il-brand .il-submit .il-spinner { border-color: rgba(255,255,255,.35); border-top-color: #FFFFFF; }

.il-brand .il-error { background: #FDECEE; border-color: #F3C3C9; color: #9B1C2B; }

/* 2FA */
.il-brand .il-otp-box { background: #FFFFFF; border-color: var(--brand-border, #E2E7EB); color: var(--brand-text-primary, #062838); color-scheme: light; }
.il-brand .il-otp-box:focus { border-color: var(--brand-primary, #062838); background: #FFFFFF; }
.il-brand .il-otp-box.filled { border-color: var(--brand-primary, #062838); background: var(--brand-primary-soft, #E7EEF2); }
.il-brand .il-otp-hint,
.il-brand .il-divider { color: var(--brand-text-secondary, #5B6B77); }
.il-brand .il-divider::before,
.il-brand .il-divider::after { background: var(--brand-border, #E2E7EB); }

/* Powered by GULF CAR — kept on every white-label install */
.il-credit {
  margin: 26px 0 0; text-align: center; font: 500 9.5px/1 'Poppins', sans-serif; letter-spacing: .16em;
  color: #8995A0; text-transform: uppercase;
}

/* Footer (on the dark background) */
.il-brand .il-footer { color: rgba(255,255,255,.55); }
.il-brand .il-footer a { color: rgba(255,255,255,.75); }
.il-brand .il-footer a:hover { color: #FFFFFF; }

@media (max-height: 800px) {
  .il-brand .il-shell { --auth-card-pad-y: 32px; --auth-logo-size: 180px; }
}
@media (max-width: 480px) {
  .il-brand .il-shell { --auth-card-pad-x: 24px; --auth-logo-size: 170px; }
  .il-lockup { gap: 12px; }
  .il-lockup-client { height: 50px; }
  .il-lockup-merhab { height: 36px; }
  .il-lockup-sep { height: 40px; }
  .il-brand-bars { width: 40vw; opacity: .55; }
  .il-brand .il-card { border-radius: 26px; }
}