/**
 * UM Email OTP — Frontend Styles
 *
 * Uses CSS custom properties so the form blends with any theme.
 *
 * @package UM_Email_OTP
 */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --um-otp-primary:     #2271b1;
  --um-otp-primary-dk:  #135e96;
  --um-otp-danger:      #d63638;
  --um-otp-success:     #1e7e34;
  --um-otp-warning:     #946f00;
  --um-otp-bg:          #ffffff;
  --um-otp-border:      #dcdcde;
  --um-otp-text:        #1d2327;
  --um-otp-muted:       #646970;
  --um-otp-radius:      10px;
  --um-otp-shadow:      0 4px 24px rgba(0, 0, 0, .10);
  --um-otp-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
}

/* ── Wrapper ────────────────────────────────────────────────────────────── */
.um-otp-wrap {
  background:    var(--um-otp-bg);
  border:        1px solid var(--um-otp-border);
  border-radius: var(--um-otp-radius);
  box-shadow:    var(--um-otp-shadow);
  font-family:   var(--um-otp-font);
  max-width:     480px;
  margin:        0 auto;
  overflow:      hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.um-otp-header {
  background:  var(--um-otp-primary);
  padding:     32px 32px 24px;
  text-align:  center;
  color:       #fff;
}

.um-otp-icon {
  width:  56px;
  height: 56px;
  margin-bottom: 12px;
}

.um-otp-title {
  font-size:     22px;
  font-weight:   700;
  margin:        0 0 8px;
  color:         #fff;
}

.um-otp-subtitle {
  font-size:  14px;
  margin:     0;
  opacity:    .85;
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.um-otp-body {
  padding: 28px 32px 32px;
}

/* ── Messages ───────────────────────────────────────────────────────────── */
.um-otp-messages {
  margin: 0 0 16px;
}

.um-otp-notice {
  border-radius: 6px;
  padding:       12px 16px;
  font-size:     14px;
  line-height:   1.5;
  border-left:   4px solid transparent;
}

.um-otp-notice--success {
  background:  #edfaef;
  border-color: var(--um-otp-success);
  color:        var(--um-otp-success);
}

.um-otp-notice--error {
  background:  #fef0f0;
  border-color: var(--um-otp-danger);
  color:        var(--um-otp-danger);
}

.um-otp-notice--warning {
  background:  #fff8e5;
  border-color: var(--um-otp-warning);
  color:        var(--um-otp-warning);
}

.um-otp-notice--info {
  background:  #f0f6fc;
  border-color: var(--um-otp-primary);
  color:        var(--um-otp-primary);
}

/* ── OTP Input ──────────────────────────────────────────────────────────── */
.um-otp-input-group {
  margin-bottom: 20px;
}

.um-otp-input {
  display:       block;
  width:         100%;
  box-sizing:    border-box;
  padding:       14px 16px;
  font-size:     28px;
  font-weight:   700;
  letter-spacing: 8px;
  text-align:    center;
  border:        2px solid var(--um-otp-border);
  border-radius: var(--um-otp-radius);
  color:         var(--um-otp-text);
  background:    #fafafa;
  transition:    border-color .2s, box-shadow .2s;
  outline:       none;
}

.um-otp-input:focus {
  border-color: var(--um-otp-primary);
  box-shadow:   0 0 0 3px rgba(34, 113, 177, .18);
  background:   #fff;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.um-otp-btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  border:         none;
  border-radius:  var(--um-otp-radius);
  cursor:         pointer;
  font-family:    var(--um-otp-font);
  font-weight:    600;
  line-height:    1;
  text-decoration: none;
  transition:     background .18s, opacity .18s, box-shadow .18s;
}

.um-otp-btn--primary {
  width:      100%;
  padding:    15px 24px;
  font-size:  16px;
  background: var(--um-otp-primary);
  color:      #fff;
  box-shadow: 0 2px 8px rgba(34, 113, 177, .3);
}

.um-otp-btn--primary:hover:not(:disabled) {
  background: var(--um-otp-primary-dk);
  box-shadow: 0 4px 12px rgba(34, 113, 177, .4);
}

.um-otp-btn--secondary {
  padding:    10px 20px;
  font-size:  14px;
  background: #f0f6fc;
  color:      var(--um-otp-primary);
  border:     1px solid var(--um-otp-primary);
}

.um-otp-btn--secondary:hover:not(:disabled) {
  background: var(--um-otp-primary);
  color:      #fff;
}

.um-otp-btn--link {
  background:  transparent;
  color:       var(--um-otp-primary);
  font-size:   14px;
  padding:     4px 0;
  text-decoration: underline;
}

.um-otp-btn--link:hover:not(:disabled) {
  color: var(--um-otp-primary-dk);
}

.um-otp-btn:disabled,
.um-otp-btn[disabled] {
  opacity: .55;
  cursor:  not-allowed;
}

/* ── Spinner ────────────────────────────────────────────────────────────── */
.um-otp-spinner {
  display:          none;
  width:            16px;
  height:           16px;
  border:           2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius:    50%;
  animation:        um-otp-spin .65s linear infinite;
  flex-shrink:      0;
}

.um-otp-btn--link .um-otp-spinner,
.um-otp-btn--secondary .um-otp-spinner {
  border-color:     rgba(34, 113, 177, .3);
  border-top-color: var(--um-otp-primary);
}

.um-otp-btn.is-loading .um-otp-spinner { display: block; }
.um-otp-btn.is-loading .um-otp-btn-text { opacity: .7; }

@keyframes um-otp-spin {
  to { transform: rotate(360deg); }
}

/* ── Resend section ─────────────────────────────────────────────────────── */
.um-otp-resend {
  display:        flex;
  align-items:    center;
  flex-wrap:      wrap;
  gap:            6px;
  margin-top:     20px;
  font-size:      14px;
  color:          var(--um-otp-muted);
}

.um-otp-countdown {
  font-size:   13px;
  color:       var(--um-otp-muted);
  font-weight: 600;
}

/* ── Back link ──────────────────────────────────────────────────────────── */
.um-otp-back {
  margin-top:  24px;
  text-align:  center;
  font-size:   13px;
  color:       var(--um-otp-muted);
}

.um-otp-back a {
  color:           var(--um-otp-primary);
  text-decoration: none;
}

.um-otp-back a:hover {
  text-decoration: underline;
}

/* ── Standalone resend widget ───────────────────────────────────────────── */
.um-otp-resend-standalone {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         10px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .um-otp-header { padding: 24px 20px 18px; }
  .um-otp-body   { padding: 20px; }
  .um-otp-input  { font-size: 22px; letter-spacing: 6px; }
  .um-otp-title  { font-size: 20px; }
}


/* Back links */
.um-otp-back-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
}

.um-otp-back-link {
    color: #646970;
    text-decoration: none;
}

.um-otp-back-link:hover {
    color: #2271b1;
    text-decoration: underline;
}

.um-otp-back-sep {
    color: #ccc;
}