/* WC OTP Verification – Modal Styles
 * Modern, accessible, responsive.
 * No external dependencies.
 */

/* ── Variables ──────────────────────────────────────────────── */
.wcotp-overlay {
  --wcotp-primary:        #6c63ff;
  --wcotp-primary-light:  #ede9ff;
  --wcotp-success:        #22c55e;
  --wcotp-error:          #ef4444;
  --wcotp-text:           #1a1a2e;
  --wcotp-muted:          #6b7280;
  --wcotp-border:         #e5e7eb;
  --wcotp-bg:             #ffffff;
  --wcotp-overlay:        rgba(0, 0, 0, 0.55);
  --wcotp-radius:         18px;
  --wcotp-shadow:         0 24px 64px rgba(0, 0, 0, 0.18);
  --wcotp-blur:           blur(4px);
  --wcotp-transition:     0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Overlay ─────────────────────────────────────────────────── */
.wcotp-overlay {
  position:         fixed;
  inset:            0;
  z-index:          999999;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          16px;
  background:       var(--wcotp-overlay);
  -webkit-backdrop-filter: var(--wcotp-blur);
  backdrop-filter:  var(--wcotp-blur);
  opacity:          0;
  transition:       opacity var(--wcotp-transition);
}
.wcotp-overlay.is-visible {
  opacity: 1;
}

/* ── Modal card ─────────────────────────────────────────────── */
.wcotp-modal {
  background:    var(--wcotp-bg);
  border-radius: var(--wcotp-radius);
  box-shadow:    var(--wcotp-shadow);
  max-width:     420px;
  width:         100%;
  padding:       40px 36px;
  position:      relative;
  transform:     scale(0.88) translateY(20px);
  transition:    transform var(--wcotp-transition), opacity var(--wcotp-transition);
  opacity:       0;
  will-change:   transform, opacity;
}
.wcotp-overlay.is-visible .wcotp-modal {
  transform: scale(1) translateY(0);
  opacity:   1;
}

/* Slide-up variant */
.wcotp-overlay[data-animation="slide-up"] .wcotp-modal {
  transform: translateY(40px);
}
.wcotp-overlay[data-animation="slide-up"].is-visible .wcotp-modal {
  transform: translateY(0);
}

/* ── Logo ───────────────────────────────────────────────────── */
.wcotp-modal__logo {
  text-align:    center;
  margin-bottom: 20px;
}
.wcotp-modal__logo img {
  max-height: 40px;
  width:      auto;
}

/* ── Icon circle ────────────────────────────────────────────── */
.wcotp-modal__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      var(--wcotp-primary-light);
  margin:          0 auto 20px;
}
.wcotp-modal__icon svg {
  width:  28px;
  height: 28px;
  color:  var(--wcotp-primary);
  fill:   none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── Title & subtitle ───────────────────────────────────────── */
.wcotp-modal__title {
  font-size:   22px;
  font-weight: 700;
  color:       var(--wcotp-text);
  text-align:  center;
  margin:      0 0 8px;
  line-height: 1.25;
}
.wcotp-modal__subtitle {
  font-size:   14px;
  color:       var(--wcotp-muted);
  text-align:  center;
  margin:      0 0 28px;
  line-height: 1.5;
}

/* ── OTP inputs ─────────────────────────────────────────────── */
.wcotp-inputs {
  display:         flex;
  gap:             10px;
  justify-content: center;
  margin-bottom:   20px;
}
.wcotp-inputs__digit {
  width:         48px;
  min-width:     48px;
  height:        58px;
  min-height:    58px;
  box-sizing:    border-box;
  padding:       0 !important;
  margin:        0;
  border:        2px solid var(--wcotp-border);
  border-radius: 12px;
  font-size:     24px;
  line-height:   normal;
  font-weight:   700;
  text-align:    center;
  color:         var(--wcotp-text);
  background:    #f9fafb;
  outline:       none;
  transition:    border-color 0.15s, box-shadow 0.15s, background 0.15s;
  caret-color:   transparent;
  font-family:   ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  overflow:      visible;
  -webkit-appearance: none;
  appearance:    none;
  -moz-appearance: textfield;
}
.wcotp-inputs__digit::-webkit-outer-spin-button,
.wcotp-inputs__digit::-webkit-inner-spin-button { display: none; }

/* Stronger reset against theme/WooCommerce input styles that add padding,
   min-height, line-height or shadows and can visually crop the digits. */
.wcotp-overlay .wcotp-modal .wcotp-inputs input.wcotp-inputs__digit[type="tel"] {
  width: 48px !important;
  min-width: 48px !important;
  height: 58px !important;
  min-height: 58px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none;
  vertical-align: middle;
}
.wcotp-inputs__digit:focus {
  border-color: var(--wcotp-primary);
  background:   #fff;
  box-shadow:   0 0 0 3px rgba(108, 99, 255, 0.15);
}
.wcotp-inputs__digit.is-filled {
  border-color: var(--wcotp-primary);
  background:   var(--wcotp-primary-light);
}
.wcotp-inputs.has-error .wcotp-inputs__digit {
  border-color: var(--wcotp-error);
  background:   #fff5f5;
  animation:    wcotp-shake 0.4s;
}
.wcotp-inputs.has-success .wcotp-inputs__digit {
  border-color: var(--wcotp-success);
  background:   #f0fdf4;
  color:        var(--wcotp-success);
}

/* ── Status message ─────────────────────────────────────────── */
.wcotp-modal__status {
  min-height:  20px;
  text-align:  center;
  font-size:   13px;
  margin:      0 0 20px;
  font-weight: 500;
}
.wcotp-modal__status.is-error   { color: var(--wcotp-error); }
.wcotp-modal__status.is-success { color: var(--wcotp-success); }

/* ── Loader ─────────────────────────────────────────────────── */
.wcotp-loader {
  display:     none;
  text-align:  center;
  color:       var(--wcotp-primary);
  font-size:   13px;
  margin:      0 0 16px;
}
.wcotp-loader.is-active { display: block; }
.wcotp-loader__spinner {
  width:       20px;
  height:      20px;
  border:      2px solid var(--wcotp-primary-light);
  border-top:  2px solid var(--wcotp-primary);
  border-radius: 50%;
  animation:   wcotp-spin 0.7s linear infinite;
  display:     inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

/* ── Resend button ───────────────────────────────────────────── */
.wcotp-resend {
  width:      100%;
  text-align: center;
  margin-top: 4px;
}
.wcotp-resend__btn {
  background:  transparent;
  border:      none;
  color:       var(--wcotp-primary);
  font-size:   13px;
  font-weight: 600;
  cursor:      pointer;
  padding:     6px 12px;
  border-radius: 8px;
  transition:  background 0.15s;
  text-decoration: none;
}
.wcotp-resend__btn:hover { background: var(--wcotp-primary-light); }
.wcotp-resend__btn:disabled {
  color:  var(--wcotp-muted);
  cursor: not-allowed;
}
.wcotp-resend__timer {
  display:     block;
  font-size:   13px;
  color:       var(--wcotp-muted);
  margin-top:  4px;
}

/* ── Success state overlay ──────────────────────────────────── */
.wcotp-success-overlay {
  position:    absolute;
  inset:       0;
  display:     flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:  var(--wcotp-bg);
  border-radius: var(--wcotp-radius);
  opacity:     0;
  pointer-events: none;
  transition:  opacity 0.3s;
}
.wcotp-success-overlay.is-active {
  opacity:        1;
  pointer-events: all;
}
.wcotp-success-overlay__check {
  width:       64px;
  height:      64px;
  background:  var(--wcotp-success);
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  animation:   wcotp-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.wcotp-success-overlay__check svg {
  width:  32px;
  height: 32px;
  stroke: #fff;
  fill:   none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wcotp-success-overlay__text {
  font-size:   16px;
  font-weight: 600;
  color:       var(--wcotp-text);
}

/* ── Modal shake animation ─────────────────────────────────── */
.wcotp-modal.is-shaking {
  animation: wcotp-shake-modal 0.4s;
}

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes wcotp-spin {
  to { transform: rotate(360deg); }
}
@keyframes wcotp-shake {
  0%,100%{ transform:translateX(0); }
  20%    { transform:translateX(-6px); }
  40%    { transform:translateX(6px); }
  60%    { transform:translateX(-4px); }
  80%    { transform:translateX(4px); }
}
@keyframes wcotp-shake-modal {
  0%,100%{ transform:scale(1) translateX(0); }
  20%    { transform:scale(1) translateX(-8px); }
  40%    { transform:scale(1) translateX(8px); }
  60%    { transform:scale(1) translateX(-5px); }
  80%    { transform:scale(1) translateX(5px); }
}
@keyframes wcotp-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .wcotp-modal { padding: 32px 24px; }
  .wcotp-inputs__digit {
    width: 44px;
    min-width: 44px;
    height: 52px;
    min-height: 52px;
    font-size: 20px;
    line-height: normal;
  }
  .wcotp-inputs { gap: 6px; }
  .wcotp-overlay .wcotp-modal .wcotp-inputs input.wcotp-inputs__digit[type="tel"] {
    width: 44px !important;
    min-width: 44px !important;
    height: 52px !important;
    min-height: 52px !important;
  }
}

.wcotp-verify__btn {
  width: 100%;
  margin: 14px 0 4px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--wcotp-primary, #6c63ff);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.wcotp-verify__btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Hide internal WooCommerce OTP sentinel notices before JS removes them. */
.wcotp-sentinel-notice,
.wcotp-internal-notice,
[data-wcotp-sentinel],
[data-wcotp-internal] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.woocommerce-error:has(.wcotp-sentinel-notice),
.woocommerce-error:has(.wcotp-internal-notice),
.woocommerce-error:has([data-wcotp-sentinel]),
.woocommerce-error:has([data-wcotp-internal]),
ul.woocommerce-error:has(.wcotp-sentinel-notice),
ul.woocommerce-error:has(.wcotp-internal-notice),
ul.woocommerce-error:has([data-wcotp-sentinel]),
ul.woocommerce-error:has([data-wcotp-internal]),
.woocommerce-notices-wrapper:has(.wcotp-sentinel-notice),
.woocommerce-notices-wrapper:has(.wcotp-internal-notice),
.woocommerce-notices-wrapper:has([data-wcotp-sentinel]),
.woocommerce-notices-wrapper:has([data-wcotp-internal]),
.woocommerce-NoticeGroup:has(.wcotp-sentinel-notice),
.woocommerce-NoticeGroup:has(.wcotp-internal-notice),
.woocommerce-NoticeGroup:has([data-wcotp-sentinel]),
.woocommerce-NoticeGroup:has([data-wcotp-internal]) {
  display: none !important;
}

/* ── Accessibility refinements ───────────────────────────────── */
.wcotp-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.wcotp-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wcotp-muted);
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
}

.wcotp-modal__close:hover {
  background: #f3f4f6;
  color: var(--wcotp-text);
}

.wcotp-inputs {
  flex-wrap: wrap;
}

.wcotp-overlay .wcotp-modal button:focus-visible,
.wcotp-overlay .wcotp-modal input:focus-visible,
.wcotp-overlay .wcotp-modal .wcotp-resend__btn:focus-visible,
.wcotp-overlay .wcotp-modal .wcotp-verify__btn:focus-visible,
.wcotp-overlay .wcotp-modal .wcotp-modal__close:focus-visible {
  outline: 3px solid var(--wcotp-primary) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

.wcotp-overlay .wcotp-modal .wcotp-inputs__digit:focus-visible {
  border-color: var(--wcotp-primary) !important;
}

.wcotp-verify__btn,
.wcotp-resend__btn,
.wcotp-modal__close,
.wcotp-inputs__digit {
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .wcotp-overlay,
  .wcotp-modal,
  .wcotp-loader__spinner,
  .wcotp-inputs__digit,
  .wcotp-modal.is-shaking,
  .wcotp-success-overlay,
  .wcotp-success-overlay__check {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Cancel registration button ─────────────────────────────── */
.wcotp-cancel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--wcotp-border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--wcotp-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.wcotp-cancel__btn:hover {
  background: #f9fafb;
  color: var(--wcotp-text);
}

.wcotp-cancel__btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.wcotp-overlay .wcotp-modal .wcotp-cancel__btn:focus-visible {
  outline: 3px solid var(--wcotp-primary) !important;
  outline-offset: 3px !important;
}

/* ── Theme isolation ──────────────────────────────────────────
 * WordPress themes and page builders frequently style every button, input,
 * heading and paragraph globally. These scoped, high-specificity rules keep the
 * OTP dialog visually deterministic without changing anything outside it. */
.wcotp-overlay,
.wcotp-overlay *,
.wcotp-overlay *::before,
.wcotp-overlay *::after {
  box-sizing: border-box !important;
}

.wcotp-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--wcotp-text) !important;
  color-scheme: light;
  isolation: isolate;
}

.wcotp-overlay .wcotp-modal {
  position: relative !important;
  float: none !important;
  display: block !important;
  width: min(100%, 420px) !important;
  min-width: 0 !important;
  max-width: 420px !important;
  max-height: calc(100dvh - 32px) !important;
  margin: 0 !important;
  padding: 40px 36px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: var(--wcotp-radius) !important;
  background: var(--wcotp-bg) !important;
  background-image: none !important;
  box-shadow: var(--wcotp-shadow) !important;
  color: var(--wcotp-text) !important;
  font: inherit !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.wcotp-overlay .wcotp-modal h2.wcotp-modal__title,
.wcotp-overlay .wcotp-modal p.wcotp-modal__subtitle,
.wcotp-overlay .wcotp-modal p.wcotp-success-overlay__text,
.wcotp-overlay .wcotp-modal .wcotp-modal__status,
.wcotp-overlay .wcotp-modal .wcotp-loader,
.wcotp-overlay .wcotp-modal .wcotp-resend,
.wcotp-overlay .wcotp-modal .wcotp-resend__timer {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.wcotp-overlay .wcotp-modal h2.wcotp-modal__title {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--wcotp-text) !important;
  font-family: inherit !important;
  font-size: 22px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

.wcotp-overlay .wcotp-modal p.wcotp-modal__subtitle {
  display: block !important;
  margin: 0 0 28px !important;
  color: var(--wcotp-muted) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.wcotp-overlay .wcotp-modal .wcotp-modal__icon {
  float: none !important;
  display: flex !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 auto 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--wcotp-primary-light) !important;
  box-shadow: none !important;
}

.wcotp-overlay .wcotp-modal svg {
  display: block !important;
  max-width: none !important;
}

.wcotp-overlay .wcotp-modal .wcotp-inputs {
  float: none !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px, 1.8vw, 10px) !important;
  width: 100% !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.wcotp-overlay .wcotp-modal input.wcotp-inputs__digit[type="tel"] {
  position: static !important;
  float: none !important;
  display: block !important;
  flex: 0 0 clamp(38px, 10.8vw, 48px) !important;
  width: clamp(38px, 10.8vw, 48px) !important;
  min-width: 0 !important;
  max-width: 48px !important;
  height: clamp(50px, 13vw, 58px) !important;
  min-height: 0 !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid var(--wcotp-border) !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wcotp-text) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: clamp(20px, 5vw, 24px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  vertical-align: middle !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.wcotp-overlay .wcotp-modal input.wcotp-inputs__digit[type="tel"]:focus {
  border-color: var(--wcotp-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wcotp-primary) 18%, transparent) !important;
}

.wcotp-overlay .wcotp-modal input.wcotp-inputs__digit.is-filled[type="tel"] {
  border-color: var(--wcotp-primary) !important;
  background: var(--wcotp-primary-light) !important;
}

.wcotp-overlay .wcotp-modal button {
  position: static;
  float: none !important;
  min-width: 0;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  font-family: inherit !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.wcotp-overlay .wcotp-modal button.wcotp-verify__btn {
  display: block !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 14px 0 4px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--wcotp-primary) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.wcotp-overlay .wcotp-modal button.wcotp-resend__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--wcotp-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.wcotp-overlay .wcotp-modal button.wcotp-cancel__btn {
  display: flex !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 14px 0 0 !important;
  padding: 10px 14px !important;
  border: 1px solid var(--wcotp-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--wcotp-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.wcotp-overlay .wcotp-modal button.wcotp-modal__close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--wcotp-muted) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.wcotp-overlay .wcotp-modal button.wcotp-verify__btn:hover:not(:disabled) {
  filter: brightness(.94) !important;
}

.wcotp-overlay .wcotp-modal button.wcotp-resend__btn:hover:not(:disabled),
.wcotp-overlay .wcotp-modal button.wcotp-modal__close:hover {
  background: var(--wcotp-primary-light) !important;
  color: var(--wcotp-primary) !important;
}

.wcotp-overlay .wcotp-modal button:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

.wcotp-overlay .wcotp-modal .wcotp-modal__status {
  display: block !important;
  min-height: 20px !important;
  margin: 0 0 20px !important;
  color: var(--wcotp-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

.wcotp-overlay .wcotp-modal .wcotp-modal__status.is-error {
  color: var(--wcotp-error) !important;
}

.wcotp-overlay .wcotp-modal .wcotp-modal__status.is-success {
  color: var(--wcotp-success) !important;
}

.wcotp-overlay .wcotp-modal .wcotp-resend {
  display: block !important;
  margin-top: 4px !important;
  text-align: center !important;
}

.wcotp-overlay .wcotp-modal .wcotp-resend__timer {
  display: block !important;
  margin-top: 4px !important;
  color: var(--wcotp-muted) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

@media (max-width: 480px) {
  .wcotp-overlay .wcotp-modal {
    padding: 32px 20px !important;
  }
}