/* BD OTP Login Popup — Stylesheet v1.1 */

/* ── Google Fonts: Bangla (Hind Siliguri) ── */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════
   FULL THEME RESET inside the popup
   Kills border/outline/background that
   themes apply to h2, p, div etc.
════════════════════════════════════════ */
#bd-otp-overlay,
#bd-otp-overlay * {
  font-family: 'Hind Siliguri', -apple-system, sans-serif !important;
  box-sizing: border-box !important;
}

/* Strip ALL inherited styles from block-level elements */
#bd-otp-modal h1, #bd-otp-modal h2, #bd-otp-modal h3, #bd-otp-modal h4,
#bd-otp-modal p,  #bd-otp-modal span, #bd-otp-modal label {
  all: unset !important;
  display: block !important;
  font-family: 'Hind Siliguri', sans-serif !important;
}
/* Strip div overrides but keep box-model */
#bd-otp-modal div {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Overlay ── */
#bd-otp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 15, 0.75);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
#bd-otp-overlay.active { display: flex; animation: bdFadeIn .22s ease; }
@keyframes bdFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Modal ── */
#bd-otp-modal {
  background: #ffffff !important;
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  animation: bdSlideUp .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bdSlideUp {
  from { transform: translateY(36px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Header ── */
.bd-otp-header {
  padding: 26px 24px 22px !important;
  text-align: center;
  position: relative;
}
.bd-brand {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px !important;
}
.bd-brand-icon {
  font-size: 26px;
  line-height: 1;
  background: rgba(255,255,255,.15) !important;
  border-radius: 10px;
  padding: 6px 8px !important;
}
.bd-brand-name {
  color: rgba(255,255,255,.92) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
}
.bd-popup-title {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  background: none !important;
  letter-spacing: -.2px;
  line-height: 1.4 !important;
}
.bd-popup-sub {
  color: rgba(255,255,255,.78) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  background: none !important;
  line-height: 1.5 !important;
}
.bd-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,.2) !important;
  border: none !important;
  color: #fff !important;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  transition: background .2s;
  padding: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.bd-close-btn:hover { background: rgba(255,255,255,.35) !important; }

/* ── Body ── */
.bd-otp-body { padding: 26px !important; }

/* ── Steps ── */
.bd-step { display: none; }
.bd-step.active { display: block; animation: bdStepIn .22s ease; }
@keyframes bdStepIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Label ── */
.bd-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 8px !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  background: none !important;
}

/* ── Phone Row ── */
.bd-phone-row {
  display: flex !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  margin-bottom: 6px;
  outline: none !important;
  box-shadow: none !important;
}
.bd-phone-row:focus-within {
  border-color: var(--bd-primary, #1a6b3c) !important;
  box-shadow: 0 0 0 3px rgba(26,107,60,.1) !important;
}
.bd-flag-box {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 14px !important;
  background: #f9fafb !important;
  border-right: 2px solid #e5e7eb !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  white-space: nowrap;
  min-width: 88px;
  border-radius: 0 !important;
  outline: none !important;
}
.bd-flag-box span:first-child { font-size: 22px; }
.bd-phone-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  padding: 13px 14px !important;
  font-size: 16px !important;
  color: #111827 !important;
  background: #fff !important;
  font-family: 'Hind Siliguri', sans-serif !important;
  box-shadow: none !important;
}
.bd-phone-input::placeholder { color: #9ca3af; }

/* ── Error ── */
.bd-error {
  color: #dc2626 !important;
  font-size: 13px !important;
  margin-top: 6px !important;
  min-height: 18px;
  display: none;
  border: none !important;
  outline: none !important;
  background: none !important;
  padding: 0 !important;
}
.bd-error.show { display: block; }

/* ── Security Note ── */
.bd-security-note {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  background: #f9fafb !important;
  border-radius: 8px;
  padding: 10px 12px !important;
  margin-top: 14px !important;
  font-size: 12px !important;
  color: #6b7280 !important;
  line-height: 1.5;
  border: none !important;
  outline: none !important;
}
.bd-lock { font-size: 15px; flex-shrink: 0; }

/* ── Main Button ── */
.bd-btn {
  display: block !important;
  width: 100% !important;
  padding: 14px !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer;
  margin-top: 18px !important;
  font-family: 'Hind Siliguri', sans-serif !important;
  letter-spacing: .3px;
  transition: opacity .2s, transform .1s;
  outline: none !important;
  box-shadow: none !important;
  text-align: center;
  line-height: 1.4 !important;
}
.bd-btn:hover:not(:disabled)  { opacity: .9; }
.bd-btn:active:not(:disabled) { transform: scale(.98); }
.bd-btn:disabled { background: #9ca3af !important; cursor: not-allowed; }

/* ── Phone Tag (step 2) ── */
.bd-phone-tag {
  background: #f0faf4 !important;
  border: 1.5px solid #bbf7d0 !important;
  border-radius: 8px;
  padding: 9px 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a6b3c !important;
  text-align: center;
  margin-bottom: 18px !important;
  letter-spacing: .5px;
  outline: none !important;
}

/* ── OTP Boxes ── */
.bd-otp-boxes {
  display: flex !important;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 !important;
}
.bd-otp-box {
  width: 50px;
  height: 54px;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px;
  text-align: center;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  outline: none !important;
  font-family: 'Hind Siliguri', sans-serif !important;
  transition: border-color .18s, box-shadow .18s, background .18s;
  background: #fff !important;
  caret-color: transparent;
  padding: 0 !important;
  box-shadow: none !important;
}
.bd-otp-box:focus {
  border-color: #1a6b3c !important;
  box-shadow: 0 0 0 3px rgba(26,107,60,.12) !important;
}
.bd-otp-box.filled {
  border-color: #1a6b3c !important;
  background: #f0faf4 !important;
}
.bd-otp-box.error {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  animation: bdShake .35s ease;
}
@keyframes bdShake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ── Resend ── */
.bd-resend {
  text-align: center;
  font-size: 13px !important;
  color: #6b7280 !important;
  margin-top: 14px !important;
  border: none !important;
  outline: none !important;
  background: none !important;
  padding: 0 !important;
}
.bd-resend button {
  background: none !important;
  border: none !important;
  color: #1a6b3c !important;
  font-weight: 700 !important;
  cursor: pointer;
  font-family: 'Hind Siliguri', sans-serif !important;
  font-size: 13px !important;
  padding: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.bd-resend button:disabled { color: #9ca3af !important; cursor: default; }

/* ── Back button ── */
.bd-back-btn {
  display: block !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  margin-top: 10px !important;
  cursor: pointer;
  font-family: 'Hind Siliguri', sans-serif !important;
  text-align: center;
  padding: 4px 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.bd-back-btn:hover { color: #374151 !important; }

/* ── Success Step ── */
.bd-success { text-align: center; padding: 12px 0; }
.bd-success-icon {
  font-size: 52px;
  margin-bottom: 14px !important;
  display: block;
  animation: bdPopIn .4s cubic-bezier(.34,1.56,.64,1);
  border: none !important;
  outline: none !important;
  background: none !important;
  padding: 0 !important;
}
@keyframes bdPopIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.bd-success h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
  color: #111827 !important;
  border: none !important;
  outline: none !important;
  background: none !important;
  padding: 0 !important;
}
.bd-success p {
  color: #6b7280 !important;
  font-size: 14px !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  background: none !important;
  padding: 0 !important;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  #bd-otp-modal { border-radius: 16px; }
  .bd-otp-box { width: 42px; height: 46px; font-size: 18px !important; }
  .bd-otp-boxes { gap: 6px; }
  .bd-otp-body { padding: 20px !important; }
}