/* === OTP modal (matches your current HTML exactly) === */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

:root{
  --otp-bg:#fff;
  --otp-text:#101828;
  --otp-muted:#667085;
  --otp-primary:#e41c34;
  --otp-ring:rgba(228,28,52,.18);
  --otp-border:#E5E7EB;
  --otp-shadow:0 24px 60px rgba(16,24,40,.16);
}

/* Apply font to the whole modal tree */
#wotp-modal, #wotp-modal *{
  font-family:'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Overlay + modal containers (you toggle hidden/display via JS) */
#wotp-overlay{
  position:fixed; inset:0;
  background:rgba(16,24,40,.5);
  backdrop-filter:blur(6px);
  z-index:99998;
}
#wotp-modal{
  position:fixed; inset:0;
  display:none; place-items:center;
  z-index:99999;
}

/* Card shell */
.wotp-card{
  width:25vw; max-width:640px; min-width:320px;
  background:var(--otp-bg); color:var(--otp-text);
  border-radius:20px; border:1px solid var(--otp-border);
  box-shadow:var(--otp-shadow);
  transform:translateY(12px) scale(.98); opacity:1; /* shown by JS */
  overflow:hidden;
  animation:wotpIn .28s ease forwards;
}
@media (max-width:900px){ .wotp-card{ width:92vw; } }
@keyframes wotpIn{ to{ transform:translateY(0) scale(1); opacity:1 } }

/* Header + body (your HTML uses .wotp-header / .wotp-body) */
.wotp-header{
  position:relative;
  padding:16px 18px;
  border-bottom:1px solid var(--otp-border);
  background:linear-gradient(180deg,#fff,#fff6);
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}
.wotp-body{ padding:18px; }

/* Close button (your HTML has #wotp-close) */
#wotp-close{
  position:absolute; top:8px; right:8px;
  width:36px; height:36px;
  display:grid; place-items:center;
  border:0; background:#e41c34cc;
  border-radius:18px; cursor:pointer;
  font-size:16px; color:#fff;
  box-shadow:0 4px 12px rgba(228,28,52,.25);
}
#wotp-close:hover{ background:#c8182c; }

/* Channel row */
.wotp-channel{ display:flex; gap:14px; margin-bottom:10px; }
.wotp-channel label{ font-size:14px; color:#344054; }

/* Inputs */
#wotp-phone,
#wotp-email,
#wotp-email2,
#wotp-phone2{
  width:100%; height:54px;
  border:1px solid var(--otp-border);
  border-radius:20px;
  background:#fff; color:#111;
  padding:0 14px;
  font-size:16px; outline:none;
  transition:box-shadow .15s, border-color .15s;
  margin-bottom:10px;
}
#wotp-phone{ padding-left:60px; } /* space for intl-tel-input flag */
#wotp-phone:focus,
#wotp-email:focus,
#wotp-email2:focus,
#wotp-phone2:focus{
  border-color:var(--otp-primary);
  box-shadow:0 0 0 4px var(--otp-ring);
}

/* intl-tel-input bits (you load the lib already) */
.iti{ width:100%; }
.iti--separate-dial-code .iti__selected-flag{
  width:88px; height:54px;
  border-right:1px solid var(--otp-border);
  border-top-left-radius:20px; border-bottom-left-radius:20px;
  background:#fff; justify-content:center; display:flex; align-items:center; gap:6px;
}
.iti__selected-dial-code{ font-weight:800; }
.iti__country-list{
  z-index:100000; border-radius:14px;
  border:1px solid var(--otp-border); box-shadow:var(--otp-shadow);
  max-height:260px;
}

/* Buttons */
.wotp-btn{
  height:46px; border-radius:20px;
  border:1px solid var(--otp-border);
  cursor:pointer; font-weight:900; letter-spacing:.01em;
  transition:transform .06s, background .2s, color .2s, border-color .2s;
}
.wotp-btn:active{ transform:translateY(1px); }
.wotp-primary{ background:#000; color:#fff; border-color:#000; }
.wotp-primary:hover{ background:#111; border-color:#111; }
.wotp-ghost{ background:#fff; color:#111; border-color:var(--otp-border); }
.wotp-ghost:hover{ border-color:#D0D5DD; background:#F9FAFB; }

/* Code grid (works for any 4–6 digit length your JS builds) */
.wotp-code-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(48px, 1fr));
  gap:10px; margin:6px 0 10px;
}
.wotp-code-grid .otp-digit{
  height:56px;
  border:1px solid var(--otp-border);
  border-radius:12px;
  text-align:center;
  font-size:16px; font-weight:800; letter-spacing:.02em;
  outline:none; background:#fff; color:#111;
  transition:box-shadow .15s, border-color .15s;
}
.wotp-code-grid .otp-digit:focus{
  border-color:var(--otp-primary);
  box-shadow:0 0 0 4px var(--otp-ring);
}

/* Grid helpers */
.wotp-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.wotp-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.wotp-divider{ height:1px; background:#E5E7EB; margin:14px 0; }

/* Status toasts */
.wotp-status{
  display:none;
  margin-top:10px; padding:10px 12px;
  border:1px solid var(--otp-border);
  border-radius:12px; background:#F9FAFB;
  font-size:13px; line-height:1.3;
}
.wotp-status.ok{ display:block; color:#0a7a3c; }
.wotp-status.err{ display:block; color:#b00020; }

/* Disabled resend */
#wotp-resend[disabled]{ opacity:.5; cursor:not-allowed; pointer-events:none; }