/**
 * Smart OTP Verification Pro – Frontend Styles
 * Supports: Light mode, Dark mode (@media prefers-color-scheme), RTL
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap');

/* ── CSS Custom Properties ───────────────────────────────────────────────── */

:root {
  --sotp-primary:      #eb1c24;
  --sotp-primary-dark: #c8151c;
  --sotp-success:      #22c55e;
  --sotp-error:        #ef4444;
  --sotp-warn:         #f97316;

  --sotp-bg:           #ffffff;
  --sotp-surface:      #f8fafc;
  --sotp-border:       #e2e8f0;
  --sotp-text:         #000000;
  --sotp-text-muted:   #475569;
  --sotp-radius:       12px;
  --sotp-shadow:       0 4px 24px rgba(0,0,0,.08);
  --sotp-transition:   .2s cubic-bezier(.4,0,.2,1);
  --sotp-font:         'Noto Kufi Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sotp-bg:         #ffffff;
    --sotp-surface:    #f8fafc;
    --sotp-border:     #e2e8f0;
    --sotp-text:       #000000;
    --sotp-text-muted: #475569;
    --sotp-shadow:     0 4px 24px rgba(0,0,0,.08);
  }
}

/* ── Block Container ─────────────────────────────────────────────────────── */

.sotp-block {
  background:    var(--sotp-surface);
  border:        2px solid var(--sotp-border);
  border-radius: var(--sotp-radius);
  padding:       20px 24px;
  margin:        16px 0;
  font-family:   var(--sotp-font);
  color:         var(--sotp-text);
  position:      relative;
  box-shadow:    var(--sotp-shadow);
  transition:    border-color var(--sotp-transition), box-shadow var(--sotp-transition);
}

.sotp-block:focus-within {
  border-color: var(--sotp-primary);
  box-shadow:   0 0 0 3px rgba(235,28,36,.15), var(--sotp-shadow);
}

.sotp-block-title {
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--sotp-text-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin:      0 0 14px;
}

/* ── Send Row ────────────────────────────────────────────────────────────── */

.sotp-send-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.sotp-send-btn,
.sotp-verify-btn,
.sotp-resend-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              6px;
  padding:          10px 22px;
  font-size:        .9rem;
  font-weight:      600;
  border-radius:    8px;
  cursor:           pointer;
  transition:       all var(--sotp-transition);
  border:           none;
  outline:          none;
  letter-spacing:   .02em;
}

.sotp-send-btn,
.sotp-verify-btn {
  background:  var(--sotp-primary);
  color:       #fff;
  box-shadow:  0 2px 8px rgba(235,28,36,.3);
}

.sotp-send-btn:hover,
.sotp-verify-btn:hover {
  background:  var(--sotp-primary-dark);
  transform:   translateY(-1px);
  box-shadow:  0 4px 16px rgba(235,28,36,.4);
}

.sotp-send-btn:active,
.sotp-verify-btn:active {
  transform: translateY(0);
}

.sotp-resend-btn {
  background:  transparent;
  color:       var(--sotp-primary);
  border:      2px solid var(--sotp-primary);
}

.sotp-resend-btn:hover:not(:disabled) {
  background: rgba(235,28,36,.08);
}

.sotp-resend-btn:disabled,
.sotp-send-btn:disabled,
.sotp-verify-btn:disabled {
  opacity:    0.6;
  cursor:     not-allowed;
  transform:  none !important;
  box-shadow: none !important;
}

/* ── Send Status ─────────────────────────────────────────────────────────── */

.sotp-send-status {
  font-size:  .85rem;
  color:      var(--sotp-text-muted);
  transition: color var(--sotp-transition);
}

.sotp-send-status.is-sending {
  color: var(--sotp-primary);
}

/* ── Verify Panel ────────────────────────────────────────────────────────── */

.sotp-verify-panel {
  margin-top: 18px;
  animation:  sotpFadeIn .3s ease;
}

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

/* ── Timer ───────────────────────────────────────────────────────────────── */

.sotp-timer-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-bottom: 14px;
  font-size:   .82rem;
  color:       var(--sotp-text-muted);
}

.sotp-timer {
  font-size:   .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color:       var(--sotp-primary);
  min-width:   42px;
}

.sotp-timer.is-expiring {
  color:     var(--sotp-error);
  animation: sotpPulse 1s ease infinite;
}

@keyframes sotpPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

/* ── Single Digit Input ──────────────────────────────────────────────────────── */

.sotp-digit-inputs {
  margin-bottom: 16px;
}

.sotp-single-input {
  width:         100%;
  max-width:     300px;
  height:        58px;
  text-align:    center;
  font-size:     1.6rem;
  letter-spacing: 0.5em;
  font-weight:   700;
  border:        2px solid var(--sotp-border);
  border-radius: 10px;
  background:    var(--sotp-bg);
  color:         var(--sotp-text);
  outline:       none;
  transition:    border-color var(--sotp-transition), box-shadow var(--sotp-transition);
  caret-color:   var(--sotp-primary);
  direction:     ltr !important;
  -moz-appearance: textfield;
}

.sotp-single-input::placeholder {
  font-size: 1rem;
  letter-spacing: normal;
  color: #94a3b8;
  font-weight: 500;
}

.sotp-single-input::-webkit-outer-spin-button,
.sotp-single-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sotp-single-input:focus {
  border-color: var(--sotp-primary);
  box-shadow:   0 0 0 3px rgba(235,28,36,.15);
}

.sotp-single-input.is-filled {
  border-color: var(--sotp-primary);
  background:   rgba(235,28,36,.04);
}

/* Shake animation on invalid code */
.sotp-digit-inputs.shake {
  animation: sotpShake .4s ease;
}

@keyframes sotpShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-6px); }
  80%       { transform: translateX(6px); }
}

/* ── Action Row ──────────────────────────────────────────────────────────── */

.sotp-action-row {
  display:     flex;
  gap:         10px;
  flex-wrap:   wrap;
  align-items: center;
}

/* ── Messages ────────────────────────────────────────────────────────────── */

.sotp-verify-message {
  margin:        10px 0 0;
  padding:       10px 14px;
  border-radius: 8px;
  font-size:     .875rem;
  font-weight:   500;
  display:       none;
}

.sotp-verify-message.is-success {
  display:    block;
  background: rgba(34,197,94,.1);
  color:      var(--sotp-success);
  border:     1px solid rgba(34,197,94,.3);
}

.sotp-verify-message.is-error {
  display:    block;
  background: rgba(239,68,68,.1);
  color:      var(--sotp-error);
  border:     1px solid rgba(239,68,68,.3);
}

.sotp-verify-message.is-warn {
  display:    block;
  background: rgba(249,115,22,.1);
  color:      var(--sotp-warn);
  border:     1px solid rgba(249,115,22,.3);
}

/* ── Verified Badge ──────────────────────────────────────────────────────── */

.sotp-verified-badge {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-top:    16px;
  padding:       12px 18px;
  background:    rgba(34,197,94,.1);
  border:        2px solid rgba(34,197,94,.4);
  border-radius: 10px;
  color:         var(--sotp-success);
  font-weight:   700;
  font-size:     .95rem;
  animation:     sotpFadeIn .35s ease;
}

.sotp-badge-icon {
  font-size: 1.3rem;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */

.sotp-spinner {
  display:       inline-block;
  width:         14px;
  height:        14px;
  border:        2px solid rgba(255,255,255,.4);
  border-top:    2px solid #fff;
  border-radius: 50%;
  animation:     sotpSpin .7s linear infinite;
  vertical-align: middle;
}

.sotp-spinner--dark {
  border-color:     rgba(235,28,36,.3);
  border-top-color: var(--sotp-primary);
}

@keyframes sotpSpin {
  to { transform: rotate(360deg); }
}

/* ── Resend Cooldown Progress ──────────────────────────────────────────────── */

.sotp-cooldown-bar {
  height:        3px;
  background:    var(--sotp-border);
  border-radius: 2px;
  margin-top:    8px;
  overflow:      hidden;
}

.sotp-cooldown-bar-fill {
  height:     100%;
  background: var(--sotp-primary);
  transition: width 1s linear;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .sotp-block {
    padding: 16px;
  }

  .sotp-block-title,
  .sotp-send-status,
  .sotp-timer-row {
    font-size: 0.75rem;
  }

  .sotp-single-input {
    max-width: 100%;
    font-size: 1.3rem;
  }

  .sotp-action-row {
    flex-direction: column;
    align-items:    stretch;
  }

  .sotp-send-btn,
  .sotp-verify-btn,
  .sotp-resend-btn {
    width:          100%;
    justify-content: center;
    font-size:      0.8rem;
  }

  .sotp-verify-message {
    font-size: 0.75rem;
    padding:   8px 12px;
  }

  .sotp-verified-badge {
    font-size: 0.8rem;
    padding:   10px 14px;
  }

  .sotp-badge-icon {
    font-size: 1.1rem;
  }
}

/* ── RTL Support ─────────────────────────────────────────────────────────── */

[dir="rtl"] .sotp-btn-icon {
  transform: scaleX(-1);
}