/* ============================================================
   A4C Community Platform — Signup Page  v3.0
   signup.css  |  namespace: a4c-su-

   ROOT CAUSE FIXES (v3):
   1. .a4c-su-page now has position:relative + isolation:isolate
      → creates its own stacking context, immune to base-template
        overlays (fixed navbars, mobile drawers, etc.)
   2. .a4c-su-panel removed from DOM flow on mobile with
      display:none !important + pointer-events:none !important
      → cannot absorb any taps even if base CSS overrides display
   3. All interactive elements: position:relative, z-index≥1,
      touch-action:manipulation (removes 300ms iOS tap delay)
   4. NO overflow:hidden anywhere except inside the panel itself
      → touch events propagate freely
   5. Pure LIGHT theme — no dark-mode media query at all
   6. Removed panel>* z-index rule that was leaking stacking context
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS  (light-only — no dark overrides)
══════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --su-primary:        #2563eb;
  --su-primary-dk:     #1d4ed8;
  --su-primary-lt:     #eff6ff;
  --su-primary-glow:   rgba(37,99,235,.15);
  --su-accent:         #7c3aed;
  --su-accent-lt:      #f5f3ff;

  /* Semantic */
  --su-success:        #059669;
  --su-success-lt:     #f0fdf4;
  --su-success-border: #bbf7d0;
  --su-danger:         #dc2626;
  --su-danger-lt:      #fff1f2;
  --su-danger-border:  #fecaca;
  --su-warning:        #d97706;
  --su-warning-lt:     #fffbeb;
  --su-info:           #0891b2;
  --su-info-lt:        #ecfeff;

  /* Surface — pure white light theme */
  --su-bg:             #f5f7ff;
  --su-bg-2:           #eef1fb;
  --su-card:           #ffffff;
  --su-card-2:         #f9fafb;
  --su-border:         #e2e8f0;
  --su-border-focus:   #2563eb;
  --su-border-strong:  #cbd5e1;

  /* Text */
  --su-text:           #0f172a;
  --su-text-2:         #334155;
  --su-label:          #1e293b;
  --su-muted:          #64748b;
  --su-placeholder:    #94a3b8;

  /* Radius */
  --su-r-xs:   6px;
  --su-r-sm:   10px;
  --su-r:      14px;
  --su-r-lg:   20px;
  --su-r-xl:   28px;
  --su-r-pill: 9999px;

  /* Shadows */
  --su-shadow:    0 1px 3px rgba(15,23,42,.06), 0 4px 20px rgba(37,99,235,.07);
  --su-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 8px 32px rgba(37,99,235,.08);
  --su-shadow-lg: 0 8px 24px rgba(15,23,42,.10), 0 20px 60px rgba(37,99,235,.10);

  /* Typography */
  --su-font-h: 'Space Grotesk', system-ui, sans-serif;
  --su-font-b: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Motion */
  --su-ease: 0.18s cubic-bezier(.4,0,.2,1);

  /* Touch */
  --su-tap: 48px;
}

/* ══════════════════════════════════════════════════════════
   SCOPED BOX-SIZING RESET
══════════════════════════════════════════════════════════ */
.a4c-su-page,
.a4c-su-page *,
.a4c-su-page *::before,
.a4c-su-page *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════
   PAGE SHELL
   
   CRITICAL: position:relative + isolation:isolate creates an
   independent stacking context. Any fixed/absolute elements from
   home_base.html (navbars, mobile drawers, overlays) with
   z-index inside our page will be scoped here instead of
   bleeding over our form.
   
   We do NOT use overflow:hidden or overflow:auto at page level —
   that traps iOS touch events and breaks natural scroll.
══════════════════════════════════════════════════════════ */
.a4c-su-page {
  position: relative;          /* ← establishes stacking context */
  isolation: isolate;          /* ← immune to parent z-index bleed */
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  background: var(--su-bg);
  font-family: var(--su-font-b);
  color: var(--su-text);
  /* NO overflow hidden */
}

/* ══════════════════════════════════════════════════════════
   LEFT PANEL  (desktop ≥ 1024px ONLY)

   MOBILE: display:none !important + pointer-events:none !important
   The !important guards against base-template CSS that might
   override display to flex/block, which would let the panel
   absorb taps on mobile.
══════════════════════════════════════════════════════════ */
.a4c-su-panel {
  display: none !important;           /* ← !important: base CSS cannot override */
  pointer-events: none !important;    /* ← belt-and-suspenders */
  flex: 0 0 420px;
  background: linear-gradient(150deg, #1e1b4b 0%, #1d4ed8 50%, #7c3aed 100%);
  padding: 52px 44px;
  position: relative;
  overflow: hidden;                   /* safe: only on panel, not page */
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .a4c-su-panel {
    display: flex !important;
    pointer-events: auto !important;
  }
}

/* Panel decorative pseudo — pointer-events:none always */
.a4c-su-panel::before,
.a4c-su-panel::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.a4c-su-panel::before {
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E") repeat;
}
.a4c-su-panel::after {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(124,58,237,.5), transparent 70%);
  top: -100px; right: -100px;
  border-radius: 50%;
  filter: blur(60px);
}

/* Panel blobs — pointer-events:none always */
.a4c-su-panel-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.a4c-su-panel-blob-1 { width: 280px; height: 280px; background: #7c3aed; top: -80px; right: -80px; }
.a4c-su-panel-blob-2 { width: 220px; height: 220px; background: #2563eb; bottom: 40px; left: -70px; }

/* Panel content — sits above blobs, pointer-events restored */
.a4c-su-panel-logo,
.a4c-su-panel-body,
.a4c-su-panel-footer { position: relative; z-index: 1; pointer-events: auto; }

.a4c-su-panel-logo { display: flex; align-items: center; gap: 12px; }
.a4c-su-panel-logo-icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.15);
  border-radius: var(--su-r);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 19px;
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
}
.a4c-su-panel-logo-name {
  font-family: var(--su-font-h);
  font-weight: 700; font-size: 22px; color: white; letter-spacing: -.3px;
}

.a4c-su-panel-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
.a4c-su-panel-headline {
  font-family: var(--su-font-h);
  font-size: 30px; font-weight: 700; color: white;
  line-height: 1.22; margin-bottom: 14px; letter-spacing: -.5px;
}
.a4c-su-panel-sub {
  color: rgba(255,255,255,.72); font-size: 14.5px;
  line-height: 1.65; margin-bottom: 32px;
}

.a4c-su-panel-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.a4c-su-panel-step  { display: flex; align-items: flex-start; gap: 12px; }
.a4c-su-step-dot {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 13px; backdrop-filter: blur(4px);
}
.a4c-su-step-text { color: rgba(255,255,255,.85); font-size: 13.5px; line-height: 1.5; padding-top: 5px; }
.a4c-su-step-text strong { color: white; display: block; font-weight: 600; margin-bottom: 2px; }

.a4c-su-panel-footer { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; }
.a4c-su-panel-trust  { display: flex; gap: 8px; flex-wrap: wrap; }
.a4c-su-trust-pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--su-r-pill);
  padding: 5px 12px; color: rgba(255,255,255,.85);
  font-size: 11.5px; font-weight: 500; backdrop-filter: blur(4px);
}

/* ══════════════════════════════════════════════════════════
   MAIN FORM AREA

   position:relative + z-index:1 ensures our form sits
   above any fixed/absolute elements from home_base.html
   (nav overlays, modals, cookie banners, etc.)
══════════════════════════════════════════════════════════ */
.a4c-su-main {
  position: relative;
  z-index: 1;                    /* ← beats base-template overlays */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 16px 60px;
  min-width: 0;
  /* NO overflow — let the page body scroll naturally */
}

@media (min-width: 640px)  { .a4c-su-main { padding: 36px 20px 64px; } }
@media (min-width: 1024px) { .a4c-su-main { padding: 44px 32px 72px; } }

/* ══════════════════════════════════════════════════════════
   MOBILE HEADER  (logo strip, hidden on desktop)
══════════════════════════════════════════════════════════ */
.a4c-su-mobile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 540px;
}
.a4c-su-mobile-logo-icon {
  width: 38px; height: 38px;
  border-radius: var(--su-r-sm);
  background: linear-gradient(135deg, var(--su-primary), var(--su-accent));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 16px; flex-shrink: 0;
}
.a4c-su-mobile-logo-name {
  font-family: var(--su-font-h);
  font-weight: 700; font-size: 18px; color: var(--su-text);
}
@media (min-width: 1024px) { .a4c-su-mobile-header { display: none; } }

/* ══════════════════════════════════════════════════════════
   CARD
══════════════════════════════════════════════════════════ */
.a4c-su-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  background: var(--su-card);
  border-radius: var(--su-r-xl);
  box-shadow: var(--su-shadow-md);
  padding: 28px 20px;
  border: 1px solid var(--su-border);
}
@media (min-width: 480px) { .a4c-su-card { padding: 32px 28px; } }
@media (min-width: 640px) { .a4c-su-card { padding: 40px 36px; border-radius: var(--su-r-xl); } }

/* ══════════════════════════════════════════════════════════
   STEP PROGRESS BAR
══════════════════════════════════════════════════════════ */
.a4c-su-stepper {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  padding: 16px 0 4px;
}
.a4c-su-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
  pointer-events: none; /* connector line must not block taps */
}
.a4c-su-step-num { pointer-events: auto; }

/* Connector line */
.a4c-su-step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px; left: calc(50% + 15px);
  right: calc(-50% + 15px);
  height: 2px;
  background: var(--su-border);
  z-index: 0;
  pointer-events: none;
  transition: background var(--su-ease);
}
.a4c-su-step-item.a4c-su-step-done:not(:last-child)::after  { background: var(--su-success); }
.a4c-su-step-item.a4c-su-step-active:not(:last-child)::after { background: var(--su-primary); }

/* Step circle */
.a4c-su-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--su-bg-2);
  border: 2px solid var(--su-border);
  color: var(--su-muted);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  transition: all var(--su-ease);
  font-family: var(--su-font-h);
}
.a4c-su-step-item.a4c-su-step-active .a4c-su-step-num {
  background: var(--su-primary);
  border-color: var(--su-primary);
  color: white;
  box-shadow: 0 0 0 4px var(--su-primary-glow);
}
.a4c-su-step-item.a4c-su-step-done .a4c-su-step-num {
  background: var(--su-success);
  border-color: var(--su-success);
  color: white;
}

/* Step label */
.a4c-su-step-label {
  font-size: 10px; font-weight: 600;
  color: var(--su-muted);
  text-transform: uppercase; letter-spacing: .6px;
  white-space: nowrap;
  pointer-events: none;
  transition: color var(--su-ease);
}
.a4c-su-step-item.a4c-su-step-active .a4c-su-step-label { color: var(--su-primary); }
.a4c-su-step-item.a4c-su-step-done .a4c-su-step-label  { color: var(--su-success); }

/* ══════════════════════════════════════════════════════════
   CARD HEADER
══════════════════════════════════════════════════════════ */
.a4c-su-card-header { margin-bottom: 24px; }
.a4c-su-card-title {
  font-family: var(--su-font-h);
  font-size: 22px; font-weight: 700; color: var(--su-text);
  letter-spacing: -.4px; margin-bottom: 4px;
}
@media (min-width: 480px) { .a4c-su-card-title { font-size: 24px; } }
.a4c-su-card-sub { font-size: 13.5px; color: var(--su-muted); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════
   SPONSOR BANNER  (pre-filled from referral link)
══════════════════════════════════════════════════════════ */
.a4c-su-sponsor-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--su-primary-lt), var(--su-accent-lt));
  border: 1px solid #c7d7fe;
  border-radius: var(--su-r);
  padding: 12px 14px; margin-bottom: 20px;
}
.a4c-su-sponsor-icon {
  flex-shrink: 0; width: 36px; height: 36px;
  border-radius: var(--su-r-sm);
  background: linear-gradient(135deg, var(--su-primary), var(--su-accent));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 14px;
}
.a4c-su-sponsor-text { flex: 1; min-width: 0; }
.a4c-su-sponsor-label { font-size: 10px; color: var(--su-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.a4c-su-sponsor-name  { font-size: 14px; font-weight: 700; color: var(--su-primary); }
.a4c-su-sponsor-check { color: var(--su-success); font-size: 17px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   SECTION DIVIDER
══════════════════════════════════════════════════════════ */
.a4c-su-section-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 18px;
  pointer-events: none;
}
.a4c-su-section-divider-line  { flex: 1; height: 1px; background: var(--su-border); }
.a4c-su-section-divider-label {
  font-size: 10.5px; font-weight: 700; color: var(--su-muted);
  text-transform: uppercase; letter-spacing: .8px; white-space: nowrap;
  padding: 3px 10px;
  background: var(--su-bg-2);
  border-radius: var(--su-r-pill);
  border: 1px solid var(--su-border);
}

/* ══════════════════════════════════════════════════════════
   STEP PANELS  —  display:none hides from hit-test tree
══════════════════════════════════════════════════════════ */
.a4c-su-step-panel             { display: none; }
.a4c-su-step-panel.a4c-su-active { display: block; animation: suFadeUp .22s ease forwards; }

@keyframes suFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════
   FORM GROUPS
══════════════════════════════════════════════════════════ */
.a4c-su-fg { margin-bottom: 18px; }
@media (min-width: 640px) { .a4c-su-fg { margin-bottom: 20px; } }

.a4c-su-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--su-label);
  margin-bottom: 7px;
}
.a4c-su-label-req { color: var(--su-danger); font-size: 11px; }
.a4c-su-label-opt {
  font-size: 10px; color: var(--su-muted); font-weight: 500;
  background: var(--su-bg-2); border: 1px solid var(--su-border);
  border-radius: var(--su-r-pill); padding: 1px 8px;
}

/* ── Input wrapper ── */
.a4c-su-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Leading icon — pointer-events:none always */
.a4c-su-input-icon {
  position: absolute;
  left: 13px;
  color: var(--su-placeholder);
  font-size: 14px;
  pointer-events: none;
  transition: color var(--su-ease);
  z-index: 2;
}
.a4c-su-input-wrap:focus-within .a4c-su-input-icon { color: var(--su-primary); }

/* ── Text inputs ──
   CRITICAL: position:relative + z-index:1 ensures the input
   is always above any base-template overlay on mobile        */
.a4c-su-input {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: var(--su-tap);
  padding: 11px 14px 11px 40px;
  border: 1.5px solid var(--su-border);
  border-radius: var(--su-r);
  font-family: var(--su-font-b);
  font-size: 16px;           /* 16px: prevents iOS auto-zoom */
  color: var(--su-text);
  background: white;
  transition: border-color var(--su-ease), box-shadow var(--su-ease);
  outline: none;
  -webkit-appearance: none;
  touch-action: manipulation; /* removes 300ms iOS tap delay */
  -webkit-tap-highlight-color: transparent;
}
.a4c-su-input::placeholder { color: var(--su-placeholder); font-size: 14px; }
.a4c-su-input:hover        { border-color: var(--su-border-strong); }
.a4c-su-input:focus {
  border-color: var(--su-border-focus);
  box-shadow: 0 0 0 3.5px var(--su-primary-glow);
}
.a4c-su-input.a4c-su-valid   { border-color: var(--su-success); }
.a4c-su-input.a4c-su-invalid { border-color: var(--su-danger); }
.a4c-su-input.a4c-su-input-readonly { background: var(--su-card-2); color: var(--su-muted); cursor: default; }





/* 2-column row */
.a4c-su-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .a4c-su-row { grid-template-columns: 1fr; } }

/* Hint text */
.a4c-su-hint {
  font-size: 12px; color: var(--su-muted);
  margin-top: 6px;
  display: flex; align-items: flex-start; gap: 5px;
  line-height: 1.5;
  pointer-events: none;
}
.a4c-su-hint i { font-size: 11px; margin-top: 2px; flex-shrink: 0; }

/* Field validation message */
.a4c-su-field-msg {
  font-size: 12px; margin-top: 6px;
  display: flex; align-items: flex-start; gap: 5px;
  min-height: 16px; line-height: 1.4;
}
.a4c-su-field-msg.a4c-su-ok  { color: var(--su-success); }
.a4c-su-field-msg.a4c-su-err { color: var(--su-danger);  }
.a4c-su-field-msg.a4c-su-inf { color: var(--su-info);    }

/* ══════════════════════════════════════════════════════════
   PHONE FIELD  — intl-tel-input  v4 (correct approach)

   Strategy: the WRAPPER div gets the visual border/shadow.
   ITI's internal layout (position:absolute flag container,
   auto padding-left on input) is left COMPLETELY UNTOUCHED.
   This is the only way ITI's JS-calculated padding is right.

   ┌─ .a4c-su-phone-wrap (border lives here) ──────────────┐
   │  .iti (display:block, no border)                       │
   │   ├─ .iti__flag-container (position:absolute — ITI)   │
   │   │     └─ .iti__selected-flag [🇺🇬 +256 ▾]          │
   │   └─ input[type=tel]  (padding-left set by ITI JS)    │
   └────────────────────────────────────────────────────────┘
══════════════════════════════════════════════════════════ */

/* Wrapper holds the border — NOT the .iti element */
.a4c-su-phone-wrap {
  position: relative;
  border: 1.5px solid var(--su-border);
  border-radius: var(--su-r);
  background: white;
  transition: border-color var(--su-ease), box-shadow var(--su-ease);
}
.a4c-su-phone-wrap:focus-within {
  border-color: var(--su-border-focus);
  box-shadow: 0 0 0 3px var(--su-primary-glow);
}
.a4c-su-phone-wrap.iti-valid   { border-color: var(--su-success); }
.a4c-su-phone-wrap.iti-invalid { border-color: var(--su-danger);  }

/* ITI block — full width, no border, no display override */
.a4c-su-phone-wrap .iti {
  width: 100%;
  display: block;              /* ITI's natural layout — do NOT flex */
}

/* ── Flag / dial-code button ─────────────────────────
   ITI keeps this position:absolute on the left.
   We only change colours & size — never position.
───────────────────────────────────────────────────── */
.a4c-su-phone-wrap .iti__flag-container {
  /* position:absolute  ← ITI sets this, do not override */
  bottom: 0; top: 0; left: 0;  /* ITI already sets these */
  z-index: 2;
}
.a4c-su-phone-wrap .iti__selected-flag {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 12px;
  background: var(--su-bg-2);
  border-right: 1.5px solid var(--su-border);
  border-radius: calc(var(--su-r) - 1.5px) 0 0 calc(var(--su-r) - 1.5px);
  cursor: pointer;
  transition: background var(--su-ease);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
}
.a4c-su-phone-wrap .iti__selected-flag:hover  { background: var(--su-primary-lt); }
.a4c-su-phone-wrap .iti__selected-flag:focus-visible {
  background: var(--su-primary-lt);
  outline: 2px solid var(--su-primary);
  outline-offset: -2px;
}

.a4c-su-phone-wrap .iti__selected-dial-code {
  font-family: var(--su-font-h);
  font-size: 14px; font-weight: 700;
  color: var(--su-text); letter-spacing: .3px;
  white-space: nowrap;
}
.a4c-su-phone-wrap .iti__arrow {
  border-top-color: var(--su-muted);
  transition: transform var(--su-ease);
}
.a4c-su-phone-wrap .iti__selected-flag:hover .iti__arrow { border-top-color: var(--su-primary); }
.a4c-su-phone-wrap .iti--open .iti__arrow {
  transform: rotate(180deg);
  border-top-color: var(--su-primary);
}

/* ── Tel input ───────────────────────────────────────
   ITI's JS sets padding-left to flag-container-width + gap.
   DO NOT set padding-left here — it will double-offset text.
   DO remove the input's own border (wrapper has it).
───────────────────────────────────────────────────── */
.a4c-su-phone-wrap input[type="tel"] {
  width: 100%;
  min-height: var(--su-tap);
  padding-top: 11px;
  padding-bottom: 11px;
  padding-right: 14px;
  /* padding-left → ITI sets this via inline style, never override */
  border: none;
  border-radius: var(--su-r);
  font-family: var(--su-font-b);
  font-size: 16px;
  color: var(--su-text);
  background: transparent;
  outline: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: block;
}
.a4c-su-phone-wrap input[type="tel"]::placeholder {
  color: var(--su-placeholder);
  font-size: 14px;
}

/* ── Country list dropdown ─────────────────────────── */
.a4c-su-phone-wrap .iti__country-list {
  min-width: 280px; max-width: 360px;
  max-height: 280px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: white;
  border: 1.5px solid var(--su-border);
  border-radius: var(--su-r);
  box-shadow: 0 12px 36px rgba(37,99,235,.13), 0 2px 8px rgba(0,0,0,.06);
  z-index: 9999;
  font-family: var(--su-font-b); font-size: 13.5px;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--su-border) transparent;
}
.a4c-su-phone-wrap .iti__country-list::-webkit-scrollbar { width: 4px; }
.a4c-su-phone-wrap .iti__country-list::-webkit-scrollbar-thumb { background: var(--su-border); border-radius: 4px; }

.a4c-su-phone-wrap .iti__search-input {
  width: 100%; padding: 10px 14px 10px 36px;
  border: none; border-bottom: 1px solid var(--su-border);
  font-family: var(--su-font-b); font-size: 14px;
  color: var(--su-text); background: var(--su-bg-2);
  outline: none; position: sticky; top: 0; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
}
.a4c-su-phone-wrap .iti__search-input:focus { background-color: white; border-bottom-color: var(--su-primary); }

.a4c-su-phone-wrap .iti__country {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; min-height: 44px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background var(--su-ease);
}
.a4c-su-phone-wrap .iti__country:hover,
.a4c-su-phone-wrap .iti__country.iti__highlight { background: var(--su-primary-lt); }
.a4c-su-phone-wrap .iti__flag          { flex-shrink: 0; }
.a4c-su-phone-wrap .iti__country-name  { flex: 1; color: var(--su-text); }
.a4c-su-phone-wrap .iti__dial-code     { color: var(--su-muted); font-size: 12.5px; font-weight: 500; }
.a4c-su-phone-wrap .iti__divider       { border-top: 1px solid var(--su-border); margin: 4px 0; }

/* ══════════════════════════════════════════════════════════
   PASSWORD STRENGTH
══════════════════════════════════════════════════════════ */
.a4c-su-pw-bar-wrap {
  margin-top: 8px; height: 5px;
  background: var(--su-bg-2); border-radius: var(--su-r-pill);
  overflow: hidden; pointer-events: none;
}
.a4c-su-pw-bar {
  height: 100%; width: 0%;
  border-radius: var(--su-r-pill);
  transition: width .4s ease, background .3s ease;
}
.a4c-su-pw-bar.a4c-su-weak   { background: var(--su-danger);  width: 25%; }
.a4c-su-pw-bar.a4c-su-fair   { background: var(--su-warning); width: 50%; }
.a4c-su-pw-bar.a4c-su-good   { background: var(--su-info);    width: 75%; }
.a4c-su-pw-bar.a4c-su-strong { background: var(--su-success); width: 100%; }

.a4c-su-pw-strength-label {
  font-size: 11px; font-weight: 600; text-align: right;
  margin-top: 4px; transition: color var(--su-ease); pointer-events: none;
}

.a4c-su-pw-reqs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5px 12px; margin-top: 12px; pointer-events: none;
}
@media (max-width: 374px) { .a4c-su-pw-reqs { grid-template-columns: 1fr; } }

.a4c-su-pw-req {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--su-muted);
  transition: color var(--su-ease);
}
.a4c-su-pw-req.a4c-su-met { color: var(--su-success); }
.a4c-su-pw-req i { font-size: 11px; width: 13px; text-align: center; }

/* ══════════════════════════════════════════════════════════
   TERMS CHECKBOX
══════════════════════════════════════════════════════════ */
.a4c-su-terms {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px;
  background: var(--su-card-2); border: 1.5px solid var(--su-border);
  border-radius: var(--su-r);
  cursor: pointer;
  transition: border-color var(--su-ease), background var(--su-ease);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative; z-index: 1;
}
.a4c-su-terms:has(input:checked) {
  border-color: var(--su-primary); background: var(--su-primary-lt);
}
.a4c-su-terms input[type="checkbox"] {
  flex-shrink: 0; width: 18px; height: 18px;
  accent-color: var(--su-primary);
  margin-top: 2px; cursor: pointer;
  touch-action: manipulation;
}
.a4c-su-terms-text  { font-size: 13px; color: var(--su-label); line-height: 1.55; }
.a4c-su-terms-link  {
  color: var(--su-primary); font-weight: 600; text-decoration: none;
  touch-action: manipulation;
}
.a4c-su-terms-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
   CRITICAL: position:relative + z-index:2 ensures buttons
   are always above any invisible base-template overlays
══════════════════════════════════════════════════════════ */
.a4c-su-btn {
  position: relative;
  z-index: 2;                        /* ← above any overlay */
  min-height: var(--su-tap);
  padding: 12px 22px;
  border: none;
  border-radius: var(--su-r);
  font-family: var(--su-font-h);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--su-ease);
  letter-spacing: .2px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.a4c-su-btn-primary {
  background: linear-gradient(135deg, var(--su-primary), var(--su-accent));
  color: white;
  box-shadow: 0 3px 12px rgba(37,99,235,.28);
}
.a4c-su-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37,99,235,.36);
}
.a4c-su-btn-primary:active:not(:disabled) { transform: none; box-shadow: 0 2px 8px rgba(37,99,235,.2); }
.a4c-su-btn-primary:focus { outline: 2px solid var(--su-primary); outline-offset: 3px; }
.a4c-su-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.a4c-su-btn-secondary {
  background: white; color: var(--su-primary);
  border: 1.5px solid var(--su-primary);
}
.a4c-su-btn-secondary:hover:not(:disabled) { background: var(--su-primary-lt); }
.a4c-su-btn-secondary:focus { outline: 2px solid var(--su-primary); outline-offset: 3px; }

/* Nav row */
.a4c-su-nav-btns {
  display: flex; gap: 10px;
  margin-top: 24px; align-items: stretch;
}
.a4c-su-nav-btns .a4c-su-btn-secondary { flex: 0 0 auto; min-width: 90px; }
.a4c-su-nav-btns .a4c-su-btn-primary   { flex: 1; }
#a4c-su-submit { display: none; flex: 1; }

/* ══════════════════════════════════════════════════════════
   SPINNER
══════════════════════════════════════════════════════════ */
.a4c-su-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: white; border-radius: 50%;
  animation: suSpin .65s linear infinite;
  flex-shrink: 0;
}
@keyframes suSpin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   ALERTS  +  GLOBAL ERROR
══════════════════════════════════════════════════════════ */
.a4c-su-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; border-radius: var(--su-r-sm);
  font-size: 13.5px; margin-bottom: 14px; line-height: 1.5;
}
.a4c-su-alert i { flex-shrink: 0; margin-top: 1px; }
.a4c-su-alert-error   { background: var(--su-danger-lt);  border: 1px solid var(--su-danger-border);  color: #b91c1c; }
.a4c-su-alert-success { background: var(--su-success-lt); border: 1px solid var(--su-success-border); color: #065f46; }
.a4c-su-alert-info    { background: var(--su-primary-lt); border: 1px solid #bfdbfe;                  color: #1e40af; }

#a4c-su-global-err {
  display: none;
  margin-bottom: 16px;
  padding: 13px 15px;
  background: var(--su-danger-lt);
  border: 1px solid var(--su-danger-border);
  border-radius: var(--su-r-sm);
  color: #b91c1c;
  font-size: 13.5px; line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   SPONSOR VERIFY / CARD
══════════════════════════════════════════════════════════ */
.a4c-su-sponsor-verify {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; font-size: 13px; min-height: 20px;
}
.a4c-su-sponsor-verify.a4c-su-ok      { color: var(--su-success); }
.a4c-su-sponsor-verify.a4c-su-err     { color: var(--su-danger);  }
.a4c-su-sponsor-verify.a4c-su-loading { color: var(--su-muted);   }

.a4c-su-sponsor-card {
  display: none; margin-top: 10px;
  padding: 12px 14px; background: var(--su-success-lt);
  border: 1px solid var(--su-success-border);
  border-radius: var(--su-r-sm);
  gap: 10px; align-items: center;
}
.a4c-su-sponsor-card.a4c-su-show { display: flex; }
.a4c-su-sponsor-card-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--su-primary), var(--su-accent));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.a4c-su-sponsor-card-name  { font-weight: 700; font-size: 13.5px; color: var(--su-text); }
.a4c-su-sponsor-card-role  { font-size: 11.5px; color: var(--su-muted); }
.a4c-su-sponsor-card-badge {
  margin-left: auto; flex-shrink: 0;
  background: var(--su-success); color: white;
  font-size: 10.5px; font-weight: 600;
  padding: 2px 9px; border-radius: var(--su-r-pill);
}

/* ══════════════════════════════════════════════════════════
   AVATAR UPLOAD
══════════════════════════════════════════════════════════ */
.a4c-su-avatar-upload {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 16px;
  border: 2px dashed var(--su-border);
  border-radius: var(--su-r); cursor: pointer;
  transition: border-color var(--su-ease), background var(--su-ease);
  background: var(--su-card-2); text-align: center;
  min-height: var(--su-tap);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.a4c-su-avatar-upload:hover { border-color: var(--su-primary); background: var(--su-primary-lt); }

.a4c-su-avatar-preview {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #e0e7ff, #ddd6fe);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 28px; color: var(--su-primary);
  border: 3px solid var(--su-border);
  transition: border-color var(--su-ease);
  pointer-events: none;
}
.a4c-su-avatar-preview img   { width: 100%; height: 100%; object-fit: cover; }
.a4c-su-avatar-upload:hover .a4c-su-avatar-preview { border-color: var(--su-primary); }
.a4c-su-avatar-upload-label  { font-size: 13px; color: var(--su-muted); pointer-events: none; line-height: 1.5; }
.a4c-su-avatar-upload-label strong { color: var(--su-primary); }

/* ══════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════════════════════════ */
.a4c-su-toast {
  position: fixed; bottom: 24px; right: 20px;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-radius: var(--su-r);
  font-family: var(--su-font-b); font-size: 14px; font-weight: 500;
  color: white;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  z-index: 99999;                  /* above everything */
  max-width: calc(100vw - 40px);
  opacity: 0; transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.a4c-su-toast.a4c-su-toast-in { opacity: 1; transform: none; }
.a4c-su-toast-success { background: #059669; }
.a4c-su-toast-error   { background: #dc2626; }
.a4c-su-toast-info    { background: #2563eb; }
.a4c-su-toast i { font-size: 15px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   CARD FOOTER
══════════════════════════════════════════════════════════ */
.a4c-su-card-foot {
  text-align: center; margin-top: 20px;
  font-size: 14px; color: var(--su-muted);
  padding-top: 18px;
  border-top: 1px solid var(--su-border);
}
.a4c-su-card-foot a {
  color: var(--su-primary); font-weight: 600; text-decoration: none;
  touch-action: manipulation;
}
.a4c-su-card-foot a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   DJANGO MESSAGES
══════════════════════════════════════════════════════════ */
.a4c-su-django-msgs { margin-bottom: 14px; }
.a4c-su-django-msgs .a4c-su-alert { margin-bottom: 6px; }

/* ══════════════════════════════════════════════════════════
   INLINE FIELD ERRORS (injected by JS)
══════════════════════════════════════════════════════════ */
.a4c-su-field-inline-err {
  font-size: 12px; margin-top: 6px;
  display: flex; align-items: flex-start; gap: 5px;
  color: var(--su-danger); line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE

   Mobile-first — small overrides only
══════════════════════════════════════════════════════════ */

/* Tiny phones < 375px */
@media (max-width: 374px) {
  .a4c-su-card       { padding: 20px 14px; border-radius: var(--su-r); }
  .a4c-su-card-title { font-size: 19px; }
  .a4c-su-btn        { font-size: 14px; padding: 11px 14px; }
  .a4c-su-pw-reqs    { grid-template-columns: 1fr; }
  .a4c-su-nav-btns   { flex-direction: column; }
  .a4c-su-nav-btns .a4c-su-btn-secondary { width: 100%; }
}

/* Small phones 375–639 */
@media (max-width: 639px) {
  .a4c-su-main { padding: 20px 12px 52px; }
    #a4c-su-country-list { max-height: 240px; }
}

/* Stack nav buttons vertically on narrow screens */
@media (max-width: 400px) {
  .a4c-su-nav-btns { flex-direction: column; }
  .a4c-su-nav-btns .a4c-su-btn-secondary { width: 100%; order: 2; }
  .a4c-su-nav-btns .a4c-su-btn-primary   { order: 1; }
  #a4c-su-submit { order: 1; }
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .a4c-su-page *, .a4c-su-page *::before, .a4c-su-page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ══════════════════════════════════════════════════════════
   ENHANCED FIELD STATES  —  pro-level visual feedback
══════════════════════════════════════════════════════════ */

/* Subtle left-accent on any focused field */
.a4c-su-input:focus::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--su-primary);
  border-radius: 0 3px 3px 0;
}

/* Valid state — green border + icon glow */
.a4c-su-input.a4c-su-valid {
  border-color: var(--su-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* Invalid state — red border + icon */
.a4c-su-input.a4c-su-invalid {
  border-color: var(--su-danger);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* ITI wrapper valid/invalid border (phone field) */
.a4c-su-phone-wrap .iti.iti--valid   { border-color: var(--su-success); }
.a4c-su-phone-wrap .iti.iti--invalid { border-color: var(--su-danger);  }

/* Focus ring — slightly softer on white */
.a4c-su-input:focus {
  border-color: var(--su-border-focus);
  box-shadow: 0 0 0 3px var(--su-primary-glow);
  background-color: #fafcff;
}

/* Label lifts slightly when field is focused */
.a4c-su-fg:focus-within .a4c-su-label {
  color: var(--su-primary);
}
.a4c-su-fg:focus-within .a4c-su-label i {
  color: var(--su-primary);
}

/* Select valid/invalid */
.a4c-su-select.a4c-su-valid   { border-color: var(--su-success); }
.a4c-su-select.a4c-su-invalid { border-color: var(--su-danger);  }

/* ── Availability badge — better typography ── */
.a4c-su-avail-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 2px 8px;
  border-radius: var(--su-r-pill);
  right: 42px;
}
.a4c-su-avail-badge.a4c-su-ok  { color: var(--su-success); background: var(--su-success-lt); }
.a4c-su-avail-badge.a4c-su-err { color: var(--su-danger);  background: var(--su-danger-lt);  }

/* ── Field messages — more compact + readable ── */
.a4c-su-field-msg {
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: 5px;
  padding: 0 2px;
  animation: suFadeIn .15s ease;
}
@keyframes suFadeIn { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }

.a4c-su-field-msg.a4c-su-ok  i { color: var(--su-success); }
.a4c-su-field-msg.a4c-su-err i { color: var(--su-danger);  }
.a4c-su-field-msg.a4c-su-inf i { color: var(--su-info);    }

/* ── Hint text — de-emphasised ── */
.a4c-su-hint {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 5px;
  line-height: 1.5;
}

/* ── Password inputs — always pad right for the eye toggle button ── */
#a4c-su-password1,
#a4c-su-password2 {
  padding-right: 52px;  /* clears the 48px toggle button + buffer */
}
/* Suppress the background check/X icon — eye button is already there */
#a4c-su-password1.a4c-su-valid,
#a4c-su-password1.a4c-su-invalid,
#a4c-su-password2.a4c-su-valid,
#a4c-su-password2.a4c-su-invalid {
  background-image: none;
}

/* ── Field group: slight card background on hover ── */
.a4c-su-fg:has(.a4c-su-input:not(:placeholder-shown):not(.a4c-su-invalid)) .a4c-su-label {
  color: var(--su-success);
}

/* ── Phone wrap ITI — ensure outer wrapper matches input height ── */
.a4c-su-phone-wrap .iti--separate-dial-code { min-height: var(--su-tap); }

/* ── Step done checkmark ── */
.a4c-su-step-item.a4c-su-step-done .a4c-su-step-num::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 11px;
  position: absolute;
}

/* ── Nav buttons — bigger on mobile so they're easy to tap ── */
@media (max-width: 480px) {
  .a4c-su-btn { min-height: 52px; font-size: 15px; }
}

/* ── Sponsor field verify status animations ── */
.a4c-su-sponsor-verify i { animation: suFadeIn .15s ease; }

/* ══════════════════════════════════════════════════════════
   INLINE ERROR MESSAGES (JS-injected)
══════════════════════════════════════════════════════════ */
.a4c-su-field-inline-err {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 11.5px;
  color: var(--su-danger);
  margin-top: 5px;
  line-height: 1.45;
  animation: suFadeIn .15s ease;
}

/* ══════════════════════════════════════════════════════════
   AVATAR UPLOAD  —  redesigned drag-zone
══════════════════════════════════════════════════════════ */
.a4c-su-avatar-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 2px dashed var(--su-border-strong);
  border-radius: var(--su-r);
  cursor: pointer;
  transition: border-color var(--su-ease), background var(--su-ease), box-shadow var(--su-ease);
  background: var(--su-bg-2);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1;
}
.a4c-su-avatar-upload:hover {
  border-color: var(--su-primary);
  background: var(--su-primary-lt);
  box-shadow: 0 0 0 3px var(--su-primary-glow);
}
.a4c-su-avatar-upload:focus-visible {
  outline: 2px solid var(--su-primary);
  outline-offset: 2px;
}
.a4c-su-avatar-upload.a4c-su-avatar-has-image {
  border-style: solid;
  border-color: var(--su-success);
  background: var(--su-success-lt);
}
.a4c-su-avatar-preview {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e7ff, #ddd6fe);
  border: 2.5px solid var(--su-border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-size: 26px; color: var(--su-primary);
  transition: border-color var(--su-ease), transform var(--su-ease);
  pointer-events: none;
}
.a4c-su-avatar-upload:hover .a4c-su-avatar-preview { border-color: var(--su-primary); transform: scale(1.04); }
.a4c-su-avatar-upload.a4c-su-avatar-has-image .a4c-su-avatar-preview { border-color: var(--su-success); }
.a4c-su-avatar-preview img { width:100%; height:100%; object-fit:cover; }

.a4c-su-avatar-upload-label {
  display: flex; flex-direction: column; gap: 3px;
  pointer-events: none;
  font-size: 13.5px; color: var(--su-text);
  line-height: 1.4;
}
.a4c-su-avatar-upload-label strong { color: var(--su-primary); font-weight: 700; }
.a4c-su-avatar-sub { font-size: 11.5px; color: var(--su-placeholder); }

/* ══════════════════════════════════════════════════════════
   NATIVE SELECT  (gender, etc.)
══════════════════════════════════════════════════════════ */
.a4c-su-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.a4c-su-select-wrap .a4c-su-input-icon { pointer-events: none; z-index: 2; }
.a4c-su-select-chevron {
  position: absolute; right: 13px;
  font-size: 11px; color: var(--su-placeholder);
  pointer-events: none;
  transition: color var(--su-ease), transform var(--su-ease);
  z-index: 2;
}
.a4c-su-select-wrap:focus-within .a4c-su-input-icon,
.a4c-su-select-wrap:focus-within .a4c-su-select-chevron { color: var(--su-primary); }
.a4c-su-select-wrap:focus-within .a4c-su-select-chevron { transform: rotate(180deg); }

.a4c-su-select {
  position: relative; z-index: 1;
  width: 100%; min-height: var(--su-tap);
  padding: 11px 36px 11px 40px;
  border: 1.5px solid var(--su-border);
  border-radius: var(--su-r);
  font-family: var(--su-font-b); font-size: 16px;
  color: var(--su-text); background: white;
  appearance: none; -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color var(--su-ease), box-shadow var(--su-ease);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.a4c-su-select:hover { border-color: var(--su-border-strong); }
.a4c-su-select:focus {
  border-color: var(--su-border-focus);
  box-shadow: 0 0 0 3px var(--su-primary-glow);
}

/* ══════════════════════════════════════════════════════════
   PASSWORD STRENGTH BAR  — taller + animated
══════════════════════════════════════════════════════════ */
.a4c-su-pw-bar-wrap {
  margin-top: 10px;
  height: 6px;
  background: var(--su-bg-2);
  border-radius: var(--su-r-pill);
  overflow: hidden;
}
.a4c-su-pw-bar {
  height: 100%; width: 0%;
  border-radius: var(--su-r-pill);
  transition: width .45s cubic-bezier(.4,0,.2,1), background .3s ease;
}
.a4c-su-pw-bar.a4c-su-weak   { width: 25%;  background: var(--su-danger);  }
.a4c-su-pw-bar.a4c-su-fair   { width: 50%;  background: var(--su-warning); }
.a4c-su-pw-bar.a4c-su-good   { width: 75%;  background: var(--su-info);    }
.a4c-su-pw-bar.a4c-su-strong { width: 100%; background: var(--su-success); }

.a4c-su-pw-strength-row {
  display: flex; justify-content: flex-end;
  margin-top: 4px; min-height: 18px;
}
.a4c-su-pw-strength-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .4px;
  transition: color .3s ease;
}

/* Password requirements checklist */
.a4c-su-pw-reqs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--su-bg-2);
  border-radius: var(--su-r-sm);
  border: 1px solid var(--su-border);
}
@media (max-width: 374px) { .a4c-su-pw-reqs { grid-template-columns: 1fr; } }

.a4c-su-pw-req {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--su-muted);
  transition: color var(--su-ease);
}
.a4c-su-pw-req.a4c-su-met { color: var(--su-success); }
.a4c-su-pw-req i { font-size: 11px; width: 13px; text-align: center; flex-shrink: 0; transition: color var(--su-ease); }
.a4c-su-pw-req.a4c-su-met i { color: var(--su-success); }

/* ══════════════════════════════════════════════════════════
   TERMS CHECKBOX  — pill card style
══════════════════════════════════════════════════════════ */
.a4c-su-terms {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--su-bg-2);
  border: 1.5px solid var(--su-border);
  border-radius: var(--su-r);
  cursor: pointer;
  transition: border-color var(--su-ease), background var(--su-ease), box-shadow var(--su-ease);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative; z-index: 1;
  user-select: none;
}
.a4c-su-terms:has(input:checked) {
  border-color: var(--su-primary);
  background: var(--su-primary-lt);
  box-shadow: 0 0 0 3px var(--su-primary-glow);
}
.a4c-su-terms input[type="checkbox"] {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
  accent-color: var(--su-primary); cursor: pointer;
  touch-action: manipulation;
}
.a4c-su-terms-text  { font-size: 13px; color: var(--su-label); line-height: 1.6; }
.a4c-su-terms-link  {
  color: var(--su-primary); font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color var(--su-ease);
}
.a4c-su-terms-link:hover { text-decoration-color: var(--su-primary); }

/* ══════════════════════════════════════════════════════════
   STEPPER — done-state checkmark (spans)
══════════════════════════════════════════════════════════ */
.a4c-su-step-item.a4c-su-step-done .a4c-su-step-num span { display: none; }
.a4c-su-step-item.a4c-su-step-done .a4c-su-step-num::after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
  content: '\f00c';
}

/* ══════════════════════════════════════════════════════════
   INPUT TRAIL BUTTON  (password eye, lock icon)
══════════════════════════════════════════════════════════ */
.a4c-su-input-trail {
  position: absolute; right: 0;
  width: 52px; height: 100%;    /* full height of input, 52px wide */
  min-height: var(--su-tap);
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  cursor: pointer; color: var(--su-placeholder); font-size: 16px;
  transition: color var(--su-ease), background var(--su-ease);
  z-index: 4;                   /* above input (z-index:1) */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 0 var(--su-r) var(--su-r) 0;
  -webkit-appearance: none;
  user-select: none;
}
.a4c-su-input-trail:hover {
  color: var(--su-primary);
  background: rgba(37,99,235,.05);
}
.a4c-su-input-trail:focus-visible {
  outline: 2px solid var(--su-primary);
  outline-offset: -3px;
  color: var(--su-primary);
}
.a4c-su-input-trail:active { background: rgba(37,99,235,.1); }

/* ══════════════════════════════════════════════════════════
   SPONSOR VERIFY CARD
══════════════════════════════════════════════════════════ */
.a4c-su-sponsor-verify {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; font-size: 13px; min-height: 22px;
  font-weight: 500;
}
.a4c-su-sponsor-verify.a4c-su-ok      { color: var(--su-success); }
.a4c-su-sponsor-verify.a4c-su-err     { color: var(--su-danger);  }
.a4c-su-sponsor-verify.a4c-su-loading { color: var(--su-muted);   }
.a4c-su-sponsor-verify.a4c-su-inf     { color: var(--su-info);    }

.a4c-su-sponsor-card {
  display: none; margin-top: 10px;
  padding: 12px 14px;
  background: var(--su-success-lt);
  border: 1px solid var(--su-success-border);
  border-radius: var(--su-r-sm);
  gap: 12px; align-items: center;
}
.a4c-su-sponsor-card.a4c-su-show { display: flex; animation: suFadeIn .2s ease; }
.a4c-su-sponsor-card-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--su-primary), var(--su-accent));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 15px; font-weight: 700; flex-shrink: 0;
  font-family: var(--su-font-h);
}
.a4c-su-sponsor-card-name { font-weight: 700; font-size: 14px; color: var(--su-text); }
.a4c-su-sponsor-card-role { font-size: 12px; color: var(--su-muted); margin-top: 1px; }
.a4c-su-sponsor-card-badge {
  margin-left: auto; flex-shrink: 0;
  background: var(--su-success); color: white;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--su-r-pill);
  letter-spacing: .3px;
}

/* ══════════════════════════════════════════════════════════
   CARD FOOTER
══════════════════════════════════════════════════════════ */
.a4c-su-card-foot {
  text-align: center; margin-top: 22px;
  font-size: 14px; color: var(--su-muted);
  padding-top: 18px;
  border-top: 1px solid var(--su-border);
}
.a4c-su-card-foot a {
  color: var(--su-primary); font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
}
.a4c-su-card-foot a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   PHONE WRAP — pulse highlight when city is tapped first
══════════════════════════════════════════════════════════ */
@keyframes suPhonePulse {
  0%,100% { border-color: var(--su-border); box-shadow: none; }
  30%     { border-color: var(--su-primary); box-shadow: 0 0 0 4px var(--su-primary-glow); }
  70%     { border-color: var(--su-primary); box-shadow: 0 0 0 4px var(--su-primary-glow); }
}
.a4c-su-phone-wrap.a4c-su-pulse {
  animation: suPhonePulse .8s ease;
}

/* ══════════════════════════════════════════════════════════
   CITY SELECT  — native <select>, styled to match the rest

   Uses the same .a4c-su-select-wrap + .a4c-su-select pattern
   as the gender field (proven to work everywhere).
══════════════════════════════════════════════════════════ */

/* Disabled state — while country not yet chosen or loading */
#a4c-su-city:disabled {
  background-color: var(--su-bg-2);
  color: var(--su-placeholder);
  cursor: not-allowed;
  border-color: var(--su-border);
  border-style: dashed;
  opacity: .8;
}
#a4c-su-city:disabled + .a4c-su-select-chevron,
.a4c-su-select-wrap:has(#a4c-su-city:disabled) .a4c-su-input-icon {
  color: var(--su-placeholder);
}

/* Enabled + focused */
#a4c-su-city:not(:disabled):hover {
  border-color: var(--su-border-strong);
}
#a4c-su-city:not(:disabled):focus {
  border-color: var(--su-border-focus);
  box-shadow: 0 0 0 3px var(--su-primary-glow);
  outline: none;
}

/* Flash green border when cities reload for a new country */
@keyframes suCityUpdate {
  0%,100% { border-color: var(--su-border); }
  40%,60% { border-color: var(--su-success); box-shadow: 0 0 0 3px rgba(5,150,105,.15); }
}
#a4c-su-city.a4c-su-city-updated {
  animation: suCityUpdate .65s ease;
}

/* Valid selection */
#a4c-su-city.a4c-su-valid {
  border-color: var(--su-success);
}
#a4c-su-city.a4c-su-invalid {
  border-color: var(--su-danger);
}