/* ============================
   Flowpesa – Create Account only
   (scoped to avoid leaking styles)
   ============================ */

body.theme-dark { background:#111; color:#f8f9fa; }

/* Top bar */
body.theme-dark .top-bar{ position:fixed; inset:0 0 auto 0; height:72px; z-index:10; background:transparent; }
body.theme-dark .top{ max-width:480px; margin:0 auto; padding:0 16px; display:flex; align-items:center; justify-content:space-between; }
body.theme-dark .icon-btn{ width:40px; height:40px; border:0; border-radius:999px; background:#202124; color:#f8f9fa; display:grid; place-items:center; }
body.theme-dark .top-title{ margin:0; font:600 20px/1 Inter,system-ui,sans-serif; }

/* Screen + intro */
body.theme-dark .screen{
  min-height:100dvh;
  padding:96px 16px calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center;
}
body.theme-dark .intro{ width:100%; max-width:361px; margin:0 auto 4px; }
body.theme-dark .heading{ margin:0 0 8px; font:700 clamp(28px,7vw,40px)/1.25 Inter,system-ui,sans-serif; color:#f8f9fa; }
body.theme-dark .subheading{ margin:0; color:#c9c9c9; font:400 16px/1.4 Inter,system-ui,sans-serif; }

/* Card wrapper */
body.theme-dark .card{ width:100%; max-width:361px; margin:10px auto 0; background:transparent; padding:0; }

/* ---- Inline pills row ---- */
body.theme-dark .phone-row{
  width:100%; display:flex; align-items:center; gap:12px;
  flex-wrap:nowrap;         /* keep on one line */
}

/* Country code pill */
body.theme-dark .cc-select{
  flex:0 0 auto; width:115px; height:56px;
  border:0; outline:0; border-radius:16px;
  background:#17181b; color:#f8f9fa;
  padding:0 14px; font:400 16px/20px Inter,system-ui,sans-serif;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}

/* Phone pill */
body.theme-dark .input-pill{
  flex:1; display:flex; align-items:center; gap:8px;
  height:56px; border-radius:16px; background:#17181b; padding:0 14px;
}
body.theme-dark .input-pill input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:#f8f9fa; font:400 16px/20px Inter,system-ui,sans-serif;
}
body.theme-dark .clear-btn{
  width:28px; height:28px; border:0; border-radius:999px;
  background:#2a2a2a; color:#d6d6d6; cursor:pointer;
}

/* Error */
body.theme-dark .error{ margin:8px 0 0; color:#ff6b6b; font:400 14px/18px Inter,system-ui,sans-serif; }

/* CTA */
body.theme-dark .regular-button{
  display:block; width:100%; max-width:361px;
  height:56px; margin:28px auto 0; border:0; border-radius:20px;
  background:#b7d8fd; cursor:not-allowed;
}
body.theme-dark .button-label{ color:#2b2b2b; font:600 16px/20px Inter,system-ui,sans-serif; }
body.theme-dark .regular-button:not([disabled]){ background:#1682f9; cursor:pointer; }
body.theme-dark .regular-button:not([disabled]) .button-label{ color:#fff; }

/* Footer link */
body.theme-dark .auth-foot{ width:100%; max-width:361px; margin:12px auto 0; }
body.theme-dark .auth-foot .link{ color:#1682f9; text-decoration:none; }
body.theme-dark .auth-foot .link:hover{ text-decoration:underline; }

/* Focus visibility (keyboard a11y) */
body.theme-dark .cc-select:focus,
body.theme-dark .input-pill:has(input:focus),
body.theme-dark .regular-button:focus{
  outline:2px solid rgba(22,130,249,.55);
  outline-offset:2px;
}

/* Small phones: stack gracefully */
@media (max-width:360px){
  body.theme-dark .phone-row{ flex-wrap:wrap; }
  body.theme-dark .cc-select,
  body.theme-dark .input-pill{ width:100%; }
}
