/* File: assets/css/nex-otp-main.css */
.nex-otp-wrapper {
    --nex-otp-page-bg: #f1f5f9;
    --nex-otp-surface: #ffffff;
    --nex-otp-surface-border: #e2e8f0;
    --nex-otp-surface-shadow: var(--nex-otp-shadow, 0 10px 30px -12px rgba(15, 23, 42, 0.18), 0 2px 6px -2px rgba(15, 23, 42, 0.08));
    --nex-otp-heading: #0f172a;
    --nex-otp-text: #334155;
    --nex-otp-muted: #64748b;
    --nex-otp-field-bg: #ffffff;
    --nex-otp-field-border: #cbd5e1;
    --nex-otp-field-text: #0f172a;
    --nex-otp-field-placeholder: #94a3b8;
    --nex-otp-otp-bg: #f1f5f9;
    --nex-otp-otp-filled-bg: #ffffff;
    --nex-otp-action-bg: var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba));
    --nex-otp-action-hover: color-mix(in srgb, var(--nex-otp-action-bg) 92%, #000000);
    --nex-otp-action-text: #ffffff;
    --nex-otp-focus: var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba));
    --nex-otp-banner-surface: #f8fafc;
    --nex-otp-back-hover: #f1f5f9;
    --nex-otp-timer-track: #e2e8f0;
    --nex-otp-logo-surface: transparent;
    font-family: inherit;
    color: var(--nex-otp-text);
    width: 100%;
    max-width: var(--nex-otp-form-width, 440px);
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
    line-height: 1.5;
}

/* Keep theme and WooCommerce form/button rules from changing the component
   geometry. The reset is deliberately scoped to the OTP wrapper. */
.nex-otp-wrapper,
.nex-otp-wrapper *,
.nex-otp-wrapper *::before,
.nex-otp-wrapper *::after {
    box-sizing: border-box;
}

/* Prevent parent/theme white-space overrides from clipping form text and titles */
.nex-otp-wrapper,
.nex-otp-title,
.nex-otp-subtitle,
.nex-otp-msg {
    white-space: normal !important;
}

.nex-otp-wrapper .nex-otp-form {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

.nex-otp-logo-container {
    text-align: center;
    margin-bottom: 16px;
}

.nex-otp-logo-img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
}

.nex-otp-form-container {
    background: var(--nex-otp-surface);
    border: 1px solid var(--nex-otp-surface-border);
    border-radius: var(--nex-otp-radius, 8px);
    padding: 28px;
    box-shadow: var(--nex-otp-surface-shadow);
}

.nex-otp-title {
    margin-top: 0;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    color: var(--nex-otp-heading);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.nex-otp-subtitle {
    text-align: center;
    font-size: 0.9rem;
    color: var(--nex-otp-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.nex-otp-link {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    color: var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba));
    text-decoration: none;
    margin-bottom: 16px;
    padding: 10px 8px;
    border-radius: 4px;
    transition: color 0.15s ease;
}

/* Some `.nex-otp-link` controls are real <button> elements (edit-phone,
   password-login toggle/back) for correct semantics; normalize the native
   button chrome so they render identically to the anchor links. */
button.nex-otp-link {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.nex-otp-link:hover {
    text-decoration: underline;
}

.nex-otp-form-group {
    margin-bottom: 18px;
}

.nex-otp-form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--nex-otp-text);
}

.nex-otp-input {
    width: 100%;
    min-height: var(--nex-otp-field-height, 44px);
    padding: 10px 12px !important;
    border: 1px solid var(--nex-otp-field-border) !important;
    border-radius: max(4px, calc(var(--nex-otp-radius, 8px) - 4px));
    font-size: 16px !important; /* Prevents iOS zoom */
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    background-color: var(--nex-otp-field-bg);
    color: var(--nex-otp-field-text);
}

.nex-otp-input:hover {
    border-color: #94a3b8 !important;
}

.nex-otp-input:focus {
    outline: none !important;
    border-color: var(--nex-otp-focus) !important;
    box-shadow: 0 0 0 1px var(--nex-otp-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nex-otp-focus) 18%, transparent) !important;
}

.nex-otp-input:focus-visible {
    outline: 2px solid var(--nex-otp-focus) !important;
    outline-offset: 1px;
}

.ltr-input {
    direction: ltr !important;
    text-align: left !important;
}

[dir="rtl"] .nex-otp-phone-input {
    direction: ltr !important;
    text-align: right !important;
}

[dir="rtl"] .nex-otp-phone-input::placeholder {
    direction: rtl;
    text-align: right;
}

.nex-otp-input-otp {
    text-align: center !important;
    letter-spacing: 0.8em;
    font-size: 2rem !important;
    font-family: 'SF Mono', 'Courier New', monospace, sans-serif !important;
    font-weight: bold;
    padding: 16px 16px 16px 32px !important;
    direction: ltr !important;
    border-radius: var(--nex-otp-radius, 12px);
    background-color: var(--nex-otp-otp-bg);
    border: 2px solid var(--nex-otp-field-border) !important;
    transition: all 0.3s ease;
    width: 100%;
}

.nex-otp-input-otp:hover {
    border-color: #94a3b8 !important;
}

.nex-otp-input-otp:focus {
    background-color: var(--nex-otp-field-bg);
    border-color: var(--nex-otp-focus) !important;
    box-shadow: 0 4px 12px rgba(0, 124, 186, 0.15) !important;
    outline: none !important;
}

.nex-otp-input-otp:focus-visible {
    outline: 2px solid var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba)) !important;
    outline-offset: 2px;
}

/* ── Phase VUI-4: segmented per-digit OTP overlay ────────────────────────
   JS (enhanceOtpInput) renders `.nex-otp-otp-segments` (a row of
   `.nex-otp-otp-cell`) inside `.nex-otp-otp-container` and adds
   `.nex-otp-otp-has-segments` to the real input. The real input stays the
   source of truth but is made visually transparent and laid over the cells.
   Keyboard/paste/autofill keep working while the native caret is hidden and
   the active cell provides the focus indicator. If JS doesn't run, none of
   these classes exist and the plain single OTP input shows as before. */
.nex-otp-otp-container {
    position: relative;
}

.nex-otp-otp-segments {
    display: flex;
    gap: 8px;
    justify-content: center;
    direction: ltr;
}

.nex-otp-otp-cell {
    flex: 1 1 0;
    min-width: 0;
    max-width: 56px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Courier New', monospace, sans-serif;
    color: var(--nex-otp-field-text);
    background-color: var(--nex-otp-otp-bg);
    border: 2px solid var(--nex-otp-field-border);
    border-radius: max(6px, calc(var(--nex-otp-radius, 12px) - 4px));
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.nex-otp-otp-cell.is-filled {
    background-color: var(--nex-otp-otp-filled-bg);
    border-color: #94a3b8;
}

.nex-otp-otp-cell.is-active {
    border-color: var(--nex-otp-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nex-otp-focus) 18%, transparent);
    background-color: var(--nex-otp-otp-filled-bg);
}

/* The real input overlays the cells, transparent but still focusable/typable. */
.nex-otp-input-otp.nex-otp-otp-has-segments {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    color: transparent !important;
    letter-spacing: normal;
    caret-color: transparent;
    -webkit-text-fill-color: transparent;
}

.nex-otp-wrapper .nex-otp-input-otp.nex-otp-otp-has-segments:focus,
.nex-otp-wrapper .nex-otp-input-otp.nex-otp-otp-has-segments:focus-visible,
.nex-otp-wrapper .nex-otp-input-otp.nex-otp-otp-has-segments:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Dim the cells while the request is in flight (input disabled by setBusy).
   Progressive: browsers without :has() simply skip this brief busy styling. */
.nex-otp-otp-container:has(.nex-otp-input-otp:disabled) .nex-otp-otp-cell {
    opacity: 0.7;
}

.nex-otp-btn {
    width: 100% !important;
    max-width: none !important;
    min-height: var(--nex-otp-field-height, 44px);
    padding: 12px;
    background-color: var(--nex-otp-action-bg) !important;
    color: var(--nex-otp-action-text) !important;
    border: none !important;
    border-radius: max(4px, calc(var(--nex-otp-radius, 8px) - 4px));
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    float: none !important;
    margin-inline: 0 !important;
    font-family: inherit;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}

.nex-otp-btn:hover {
    background-color: var(--nex-otp-action-hover) !important;
    opacity: 0.96;
}

.nex-otp-btn:active {
    transform: translateY(1px);
}

.nex-otp-btn:focus-visible {
    outline: 2px solid var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba)) !important;
    outline-offset: 2px;
}

.nex-otp-btn:disabled,
.nex-otp-btn.is-loading {
    background-color: #94a3b8 !important;
    cursor: not-allowed;
    opacity: 0.85;
}

.nex-otp-btn-secondary {
    background: transparent !important;
    border: 1px solid var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba)) !important;
    color: var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba)) !important;
    padding: 8px 16px;
    border-radius: max(4px, calc(var(--nex-otp-radius, 8px) - 4px));
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.nex-otp-btn-secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba)) 8%, transparent) !important;
}

.nex-otp-btn-secondary:focus-visible {
    outline: 2px solid var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba)) !important;
    outline-offset: 2px;
}

.nex-otp-btn-secondary:disabled {
    border-color: #cbd5e1 !important;
    color: #94a3b8 !important;
    cursor: not-allowed;
}

.nex-otp-link:focus-visible {
    outline: 2px solid var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba));
    outline-offset: 2px;
    border-radius: 4px;
}

.nex-otp-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: none;
}

.nex-otp-msg {
    padding: 10px 14px;
    border-radius: max(4px, calc(var(--nex-otp-radius, 8px) - 4px));
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.6;
    border-inline-start-width: 3px;
}

.nex-otp-error {
    background-color: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-inline-start-color: #dc2626;
}

.nex-otp-success {
    background-color: #dcfce3;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-inline-start-color: #16a34a;
}

.nex-otp-resend-container {
    margin-top: 16px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--nex-otp-muted);
}

.nex-otp-resend-container .nex-otp-resend-btn {
    margin-bottom: 0;
}

.nex-otp-resend-container strong {
    color: var(--nex-otp-heading);
    font-weight: 700;
}

/* ── Phase VUI-1: circular SVG countdown timer (idea from Otino) ──────────
   The text countdown number (`data-role="timer"`) is preserved and now sits at
   the center of an animated SVG ring. The ring is purely decorative
   (aria-hidden) and a visually-hidden label keeps the resend context for
   screen readers. The progress stroke animates `stroke-dashoffset` over a
   duration set by JS via `--nex-otp-timer-duration` (defaults to 60s), so it
   stays in sync with the server cooldown. Disabled under safe mode and
   reduced motion (ring shown static, full). */
.nex-otp-timer-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.nex-otp-timer-ring {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
}

.nex-otp-timer-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.nex-otp-timer-ring-track {
    fill: none;
    stroke: var(--nex-otp-timer-track);
    stroke-width: 3;
}

.nex-otp-timer-ring-progress {
    fill: none;
    stroke: var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba));
    stroke-width: 3;
    stroke-linecap: round;
    /* circumference of r=18 ≈ 113.097 */
    stroke-dasharray: 113.097;
    stroke-dashoffset: 0;
    animation: nex-otp-timer-ring var(--nex-otp-timer-duration, 60s) linear forwards;
}

@keyframes nex-otp-timer-ring {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 113.097; }
}

.nex-otp-timer-ring-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--nex-otp-heading);
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

.nex-otp-timer-label {
    font-size: 0.85rem;
    color: var(--nex-otp-muted);
}

.nex-otp-safe-mode .nex-otp-timer-ring-progress {
    animation: none;
    stroke-dashoffset: 0;
}

.nex-otp-spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border-left-color: #fff;
    animation: nex-otp-spin 1s linear infinite;
    margin-inline-start: 8px; /* logical: correct side in RTL and LTR */
}

@keyframes nex-otp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Split Layout */
.nex-otp-style-split {
    max-width: 900px;
    padding: 0;
    margin: 40px auto;
    display: flex;
    background: var(--nex-otp-surface);
    border-radius: var(--nex-otp-radius, 12px);
    overflow: hidden;
    box-shadow: var(--nex-otp-surface-shadow);
}

.nex-otp-style-split .nex-otp-banner-section {
    flex: 1 1 50%;
    background-color: var(--nex-otp-banner-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.nex-otp-style-split .nex-otp-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nex-otp-style-split .nex-otp-banner-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.nex-otp-style-split .nex-otp-banner-icon {
    font-size: 80px;
    opacity: 0.2;
}

.nex-otp-style-split .nex-otp-form-section {
    flex: 1 1 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.nex-otp-style-split .nex-otp-logo-container {
    text-align: center;
    margin-bottom: 24px;
}

.nex-otp-style-split .nex-otp-logo-img {
    max-height: 60px;
    max-width: 100%;
}

.nex-otp-style-split .nex-otp-form-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

@media (max-width: 768px) {
    .nex-otp-style-split {
        flex-direction: column;
        margin: 15px auto;
    }
    .nex-otp-style-split .nex-otp-banner-section {
        display: none;
    }
    .nex-otp-style-split .nex-otp-form-section {
        padding: 24px;
    }
}

/* Minimal Style */
.nex-otp-style-minimal {
    max-width: var(--nex-otp-form-width, 440px);
    margin: 40px auto;
    background: var(--nex-otp-surface);
    border: 1px solid var(--nex-otp-surface-border);
    border-radius: var(--nex-otp-radius, 16px);
    padding: 40px 32px;
    box-shadow: var(--nex-otp-surface-shadow);
    box-sizing: border-box;
    font-family: inherit;
}

/* Banner Layout */
.nex-otp-style-banner {
    max-width: var(--nex-otp-form-width, 440px);
    margin: 32px auto;
    padding: 0;
    border-radius: var(--nex-otp-radius, 14px);
    overflow: hidden;
    background: var(--nex-otp-surface);
    box-shadow: var(--nex-otp-surface-shadow);
}

.nex-otp-style-banner .nex-otp-form-section {
    padding: 0;
}

.nex-otp-inline-banner {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--nex-otp-banner-surface);
}

.nex-otp-inline-banner .nex-otp-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nex-otp-style-banner .nex-otp-form-header {
    padding: 20px 24px 0;
}

.nex-otp-style-banner .nex-otp-logo-container {
    text-align: center;
    margin-bottom: 12px;
}

.nex-otp-style-banner .nex-otp-logo-img {
    max-height: 48px;
    max-width: 100%;
}

.nex-otp-style-banner .nex-otp-form-container {
    border: none;
    box-shadow: none;
}

/* Style Presets */
.nex-otp-preset-minimal {
    --nex-otp-shadow: none;
    --nex-otp-surface-shadow: none;
}

.nex-otp-preset-premium {
    --nex-otp-page-bg: #f1f5f9;
}

.nex-otp-preset-glass {
    --nex-otp-page-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --nex-otp-surface: rgba(255, 255, 255, 0.84);
    --nex-otp-surface-border: rgba(148, 163, 184, 0.32);
    --nex-otp-logo-surface: rgba(15, 23, 42, 0.18);
}

.nex-otp-preset-dark {
    --nex-otp-page-bg: #070b14;
    --nex-otp-surface: #111827;
    --nex-otp-surface-border: #273244;
    --nex-otp-heading: #f8fafc;
    --nex-otp-text: #e5e7eb;
    --nex-otp-muted: #cbd5e1;
    --nex-otp-field-bg: #0f172a;
    --nex-otp-field-border: #334155;
    --nex-otp-field-text: #f8fafc;
    --nex-otp-field-placeholder: #94a3b8;
    --nex-otp-otp-bg: #1e293b;
    --nex-otp-otp-filled-bg: #0f172a;
    --nex-otp-banner-surface: #0f172a;
    --nex-otp-back-hover: rgba(255, 255, 255, 0.08);
    --nex-otp-timer-track: #334155;
}

.nex-otp-preset-woodmart {
    --nex-otp-page-bg: #f5f0eb;
    --nex-otp-surface-border: #e5e7eb;
    --nex-otp-surface-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

.nex-otp-preset-soft {
    --nex-otp-page-bg: linear-gradient(180deg, #fffaf6 0%, #f8eee7 100%);
    --nex-otp-surface: linear-gradient(180deg, #ffffff 0%, #fdf7f2 100%);
    --nex-otp-surface-border: #f1e4da;
    --nex-otp-surface-shadow: 0 14px 34px -16px rgba(180, 120, 80, 0.28), 0 2px 6px -2px rgba(120, 80, 50, 0.10);
    --nex-otp-heading: #7c3f1d;
    --nex-otp-focus: #d97742;
}

.nex-otp-preset-aurora {
    --nex-otp-page-bg: linear-gradient(135deg, #4c1d95 0%, #2563eb 48%, #0891b2 100%);
    --nex-otp-surface: rgba(255, 255, 255, 0.92);
    --nex-otp-surface-border: rgba(255, 255, 255, 0.5);
    --nex-otp-surface-shadow: 0 24px 50px -20px rgba(76, 29, 149, 0.45);
    --nex-otp-heading: #6d28d9;
    --nex-otp-focus: #8b5cf6;
    --nex-otp-logo-surface: rgba(15, 23, 42, 0.18);
}

.nex-otp-preset-marketplace {
    --nex-otp-page-bg: #f5f5f5;
    --nex-otp-surface: #ffffff;
    --nex-otp-surface-border: #e5e7eb;
    --nex-otp-surface-shadow: 0 6px 18px rgba(35, 37, 78, 0.08);
    --nex-otp-heading: #23254e;
    --nex-otp-text: #3f4064;
    --nex-otp-muted: #81858b;
    --nex-otp-field-bg: #ffffff;
    --nex-otp-field-border: #d8d8df;
    --nex-otp-field-text: #23254e;
    --nex-otp-field-placeholder: #a1a3a8;
    --nex-otp-action-bg: #ef4056;
    --nex-otp-action-hover: #d9364c;
    --nex-otp-focus: #ef4056;
    --nex-otp-banner-surface: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
}

.nex-otp-preset-brand {
    --nex-otp-page-bg: linear-gradient(135deg, #08172d 0%, #173b61 100%);
    --nex-otp-surface: #ffffff;
    --nex-otp-surface-border: #dbe7f1;
    --nex-otp-surface-shadow: 0 24px 56px -24px rgba(8, 23, 45, 0.48);
    --nex-otp-heading: #102a43;
    --nex-otp-text: #334e68;
    --nex-otp-muted: #627d98;
    --nex-otp-field-bg: #f6f9fc;
    --nex-otp-field-border: #bcccdc;
    --nex-otp-field-text: #102a43;
    --nex-otp-field-placeholder: #829ab1;
    --nex-otp-action-bg: #0b7fab;
    --nex-otp-action-hover: #08678b;
    --nex-otp-focus: #0b7fab;
    --nex-otp-banner-surface: linear-gradient(145deg, #08172d 0%, #0b7fab 100%);
}

.nex-otp-preset-decorative {
    --nex-otp-page-bg: linear-gradient(135deg, #fdf4ff 0%, #ecfeff 100%);
    --nex-otp-surface: #fffaff;
    --nex-otp-surface-border: #ead7f5;
    --nex-otp-surface-shadow: 0 24px 54px -24px rgba(126, 34, 206, 0.35);
    --nex-otp-heading: #581c87;
    --nex-otp-text: #4a3560;
    --nex-otp-muted: #806b91;
    --nex-otp-field-bg: #ffffff;
    --nex-otp-field-border: #dec8eb;
    --nex-otp-field-text: #581c87;
    --nex-otp-field-placeholder: #a78bb8;
    --nex-otp-action-bg: #c026d3;
    --nex-otp-action-hover: #a21caf;
    --nex-otp-focus: #c026d3;
    --nex-otp-banner-surface: linear-gradient(135deg, #fae8ff 0%, #cffafe 100%);
}

.nex-otp-preset-glass .nex-otp-form-container,
.nex-otp-preset-glass.nex-otp-style-minimal,
.nex-otp-preset-glass.nex-otp-style-banner,
.nex-otp-preset-glass.nex-otp-style-split {
    background: rgba(255, 255, 255, 0.84);
    border-color: rgba(148, 163, 184, 0.32);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.nex-otp-preset-glass.nex-otp-style-split .nex-otp-form-section {
    background: rgba(255, 255, 255, 0.32);
}

.nex-otp-preset-glass .nex-otp-logo-container,
.nex-otp-preset-aurora .nex-otp-logo-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-inline: auto;
}

.nex-otp-preset-dark {
    color: #e5e7eb;
}

.nex-otp-preset-dark .nex-otp-form-container,
.nex-otp-preset-dark.nex-otp-style-minimal,
.nex-otp-preset-dark.nex-otp-style-banner,
.nex-otp-preset-dark.nex-otp-style-split {
    background: #111827;
    border-color: #273244;
    color: #e5e7eb;
}

.nex-otp-preset-dark.nex-otp-style-split .nex-otp-banner-section {
    background-color: #0f172a;
}

.nex-otp-preset-dark .nex-otp-title,
.nex-otp-preset-dark .nex-otp-subtitle,
.nex-otp-preset-dark .nex-otp-form-group label,
.nex-otp-preset-dark .nex-otp-legal-notice,
.nex-otp-preset-dark .nex-otp-resend-container {
    color: #cbd5e1;
}

.nex-otp-preset-dark .nex-otp-title {
    color: #f8fafc;
}

.nex-otp-preset-dark .nex-otp-resend-container strong {
    color: #f8fafc;
}

.nex-otp-preset-dark .nex-otp-timer-ring-track {
    stroke: #334155;
}

.nex-otp-preset-dark .nex-otp-timer-ring-num {
    color: #f8fafc;
}

.nex-otp-preset-dark .nex-otp-timer-label {
    color: #cbd5e1;
}

.nex-otp-preset-dark .nex-otp-input {
    background: #0f172a;
    border-color: #334155 !important;
    color: #f8fafc;
}

.nex-otp-preset-dark .nex-otp-input-otp {
    background-color: #1e293b;
}

.nex-otp-preset-dark .nex-otp-input-otp:focus {
    background-color: #0f172a;
}

/* VUI-4: dark-preset segmented OTP cells */
.nex-otp-preset-dark .nex-otp-otp-cell {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

.nex-otp-preset-dark .nex-otp-otp-cell.is-filled {
    background-color: #0f172a;
    border-color: #475569;
}

.nex-otp-preset-dark .nex-otp-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06) !important;
}

.nex-otp-preset-dark .nex-otp-back-button {
    color: #e5e7eb;
}

.nex-otp-preset-dark .nex-otp-back-button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.nex-otp-preset-woodmart .nex-otp-form-container,
.nex-otp-preset-woodmart.nex-otp-style-minimal,
.nex-otp-preset-woodmart.nex-otp-style-banner {
    border-color: #e5e7eb;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

/* ── Phase VUI-2: extra visual presets (ideas adapted from Otino) ─────────
   Two additional `form_style_preset` values layered on the existing layouts,
   scoped to `.nex-otp-*` only. No layout/markup/contract change. */

/* Soft — warm, light, gentle gradient card with a soft shadow. */
.nex-otp-preset-soft .nex-otp-form-container,
.nex-otp-preset-soft.nex-otp-style-minimal,
.nex-otp-preset-soft.nex-otp-style-banner {
    background: linear-gradient(180deg, #ffffff 0%, #fdf7f2 100%);
    border-color: #f1e4da;
    box-shadow: 0 14px 34px -16px rgba(180, 120, 80, 0.28), 0 2px 6px -2px rgba(120, 80, 50, 0.10);
}

.nex-otp-preset-soft .nex-otp-title {
    color: #7c3f1d;
}

.nex-otp-preset-soft .nex-otp-input:focus,
.nex-otp-preset-soft .nex-otp-input-otp:focus {
    border-color: #d97742 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 66, 0.16) !important;
}

/* Aurora — colorful gradient ambiance behind a glassy, translucent card. The
   gradient sits on the wrapper; the card is translucent so it reads through. */
.nex-otp-preset-aurora {
    position: relative;
    overflow: hidden;
    background: var(--nex-otp-page-bg);
    padding: 28px 18px;
    border-radius: var(--nex-otp-radius, 16px);
}

/* ── Phase VUI-3: decorative animated background circles (idea from Otino) ──
   Purely decorative floating shapes on the aurora gradient. CSS-only, no new
   markup: two pseudo-elements, each cloned into several soft circles via
   box-shadow, drifting slowly. They sit behind the form (z-index) and are
   clipped by the wrapper's overflow:hidden. Disabled (held static) under safe
   mode and reduced motion. */
.nex-otp-preset-aurora::before,
.nex-otp-preset-aurora::after {
    content: "";
    position: absolute;
    top: 12%;
    left: 14%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
    z-index: 0;
}

.nex-otp-preset-aurora::before {
    box-shadow:
        70px 120px 0 -6px rgba(255, 255, 255, 0.12),
        220px 40px 0 -10px rgba(255, 255, 255, 0.14),
        180px 200px 0 -4px rgba(255, 255, 255, 0.10);
    animation: nex-otp-aurora-float-a 14s ease-in-out infinite alternate;
}

.nex-otp-preset-aurora::after {
    top: auto;
    left: auto;
    bottom: 10%;
    right: 12%;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        -90px -60px 0 -4px rgba(255, 255, 255, 0.12),
        -200px 30px 0 -8px rgba(255, 255, 255, 0.10),
        -40px -150px 0 -2px rgba(255, 255, 255, 0.08);
    animation: nex-otp-aurora-float-b 18s ease-in-out infinite alternate;
}

/* Keep the actual form above the decorative circles. */
.nex-otp-preset-aurora .nex-otp-form-section {
    position: relative;
    z-index: 1;
}

@keyframes nex-otp-aurora-float-a {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(18px, -22px, 0) rotate(20deg); }
}

@keyframes nex-otp-aurora-float-b {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(-16px, 20px, 0) rotate(-18deg); }
}

.nex-otp-safe-mode.nex-otp-preset-aurora::before,
.nex-otp-safe-mode.nex-otp-preset-aurora::after {
    animation: none;
}

.nex-otp-preset-aurora .nex-otp-form-container,
.nex-otp-preset-aurora.nex-otp-style-minimal,
.nex-otp-preset-aurora.nex-otp-style-banner {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 24px 50px -20px rgba(76, 29, 149, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.nex-otp-preset-aurora.nex-otp-style-split .nex-otp-form-section {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.nex-otp-preset-aurora.nex-otp-style-split .nex-otp-form-container {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.nex-otp-preset-aurora .nex-otp-title {
    color: var(--nex-otp-heading);
}

.nex-otp-preset-aurora .nex-otp-input:focus,
.nex-otp-preset-aurora .nex-otp-input-otp:focus {
    border-color: var(--nex-otp-focus) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18) !important;
}

.nex-otp-style-minimal .nex-otp-form-section {
    padding: 0;
    display: block;
}

.nex-otp-form-header {
    position: relative;
    width: 100%;
}

.nex-otp-back-button {
    position: absolute;
    top: -5px;
    inset-inline-start: -5px;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    transition: all 0.2s ease;
    padding: 0;
}

.nex-otp-back-button:hover {
    background: #f1f5f9;
}

.nex-otp-back-button:focus-visible {
    outline: 2px solid var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba));
    outline-offset: 2px;
    background: #f1f5f9;
}

.nex-otp-back-button svg {
    width: 20px;
    height: 20px;
}

[dir="ltr"] .nex-otp-back-button,
.nex-otp-wrapper[dir="ltr"] .nex-otp-back-button {
    transform: scaleX(-1);
}

.nex-otp-style-minimal .nex-otp-logo-container {
    text-align: center;
    margin-bottom: 32px;
}

.nex-otp-style-minimal .nex-otp-logo-img {
    max-height: 48px;
    max-width: 100%;
}

.nex-otp-style-minimal .nex-otp-form-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.nex-otp-style-minimal .nex-otp-title {
    text-align: right;
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 24px;
    color: #0f172a;
}

.nex-otp-style-minimal .nex-otp-subtitle {
    text-align: right;
    font-size: 0.95rem;
    color: #475569;
    margin-bottom: 24px;
    line-height: 1.6;
}

.nex-otp-style-minimal .nex-otp-form-group label {
    /* Visually hidden but still available to assistive technologies */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nex-otp-style-minimal .nex-otp-step-3 .nex-otp-form-group label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 6px;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.nex-otp-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.nex-otp-style-minimal .nex-otp-input {
    border-radius: max(4px, calc(var(--nex-otp-radius, 12px) - 2px));
    border: 1px solid #cbd5e1;
    padding: 14px 16px !important;
    font-size: 1.05rem !important;
    transition: all 0.3s ease;
}

.nex-otp-style-minimal .nex-otp-input:focus {
    border-color: var(--nex-otp-primary-color, var(--nex-otp-primary));
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba)) 14%, transparent) !important;
}

.nex-otp-style-minimal .nex-otp-btn {
    border-radius: max(4px, calc(var(--nex-otp-radius, 12px) - 2px));
    font-weight: 700;
    padding: 16px;
    font-size: 1.05rem;
    margin-top: 16px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px -1px rgba(0, 124, 186, 0.2);
}

.nex-otp-legal-notice {
    text-align: center;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 32px;
    line-height: 1.8;
    display: none;
}

/* Show the consent notice on the phone (first) step across every layout,
   not just the minimal style. The notice markup lives inside the step-1
   send-form, so this stays scoped to the initial step. */
.nex-otp-step-1 .nex-otp-legal-notice {
    display: block;
}

/* Layout rules are declared after preset rules, so keep the dark preset's
   readable text contrast as the final authority across every layout. */
.nex-otp-preset-dark .nex-otp-title,
.nex-otp-preset-dark.nex-otp-style-minimal .nex-otp-title {
    color: #f8fafc;
}

.nex-otp-preset-dark .nex-otp-subtitle,
.nex-otp-preset-dark .nex-otp-form-group label,
.nex-otp-preset-dark .nex-otp-legal-notice,
.nex-otp-preset-dark .nex-otp-resend-container,
.nex-otp-preset-dark.nex-otp-style-minimal .nex-otp-subtitle {
    color: #cbd5e1;
}

.nex-otp-preset-dark .nex-otp-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

/* Phase 2 semantic appearance contract. Presets define tokens; layouts keep
   structural responsibility. These final consumers prevent layout-specific
   hardcoded colors from leaking across preset changes. */
.nex-otp-wrapper .nex-otp-form-container {
    background: var(--nex-otp-surface);
    border-color: var(--nex-otp-surface-border);
    color: var(--nex-otp-text);
    box-shadow: var(--nex-otp-surface-shadow);
}

.nex-otp-wrapper.nex-otp-style-minimal,
.nex-otp-wrapper.nex-otp-style-banner,
.nex-otp-wrapper.nex-otp-style-split {
    background: var(--nex-otp-surface);
    border-color: var(--nex-otp-surface-border);
    color: var(--nex-otp-text);
    box-shadow: var(--nex-otp-surface-shadow);
}

.nex-otp-wrapper.nex-otp-style-minimal .nex-otp-form-container,
.nex-otp-wrapper.nex-otp-style-split .nex-otp-form-container {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.nex-otp-wrapper .nex-otp-title,
.nex-otp-wrapper .nex-otp-resend-container strong,
.nex-otp-wrapper .nex-otp-timer-ring-num {
    color: var(--nex-otp-heading);
}

.nex-otp-wrapper .nex-otp-subtitle,
.nex-otp-wrapper .nex-otp-legal-notice,
.nex-otp-wrapper .nex-otp-resend-container,
.nex-otp-wrapper .nex-otp-timer-label {
    color: var(--nex-otp-muted);
}

.nex-otp-wrapper .nex-otp-form-group label {
    color: var(--nex-otp-text);
}

.nex-otp-wrapper .nex-otp-input {
    background: var(--nex-otp-field-bg);
    border-color: var(--nex-otp-field-border) !important;
    color: var(--nex-otp-field-text);
}

.nex-otp-wrapper .nex-otp-input::placeholder {
    color: var(--nex-otp-field-placeholder);
    opacity: 1;
}

.nex-otp-wrapper .nex-otp-input:not(.nex-otp-otp-has-segments):focus,
.nex-otp-wrapper .nex-otp-input-otp:not(.nex-otp-otp-has-segments):focus {
    border-color: var(--nex-otp-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nex-otp-focus) 18%, transparent) !important;
}

.nex-otp-wrapper .nex-otp-input-otp.nex-otp-otp-has-segments,
.nex-otp-wrapper .nex-otp-input-otp.nex-otp-otp-has-segments:focus,
.nex-otp-wrapper .nex-otp-input-otp.nex-otp-otp-has-segments:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.nex-otp-wrapper .nex-otp-otp-cell {
    background: var(--nex-otp-otp-bg);
    border-color: var(--nex-otp-field-border);
    color: var(--nex-otp-field-text);
}

.nex-otp-wrapper .nex-otp-otp-cell.is-filled,
.nex-otp-wrapper .nex-otp-otp-cell.is-active {
    background: var(--nex-otp-otp-filled-bg);
}

.nex-otp-wrapper .nex-otp-otp-cell.is-active {
    border-color: var(--nex-otp-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nex-otp-focus) 18%, transparent);
}

.nex-otp-wrapper .nex-otp-btn,
.nex-otp-wrapper .nex-otp-btn-inline {
    background-color: var(--nex-otp-action-bg) !important;
    color: var(--nex-otp-action-text) !important;
}

.nex-otp-wrapper .nex-otp-btn:hover,
.nex-otp-wrapper .nex-otp-btn-inline:hover {
    background-color: var(--nex-otp-action-hover) !important;
}

.nex-otp-wrapper .nex-otp-back-button {
    color: var(--nex-otp-text);
}

.nex-otp-wrapper .nex-otp-back-button:hover,
.nex-otp-wrapper .nex-otp-back-button:focus-visible {
    background: var(--nex-otp-back-hover);
}

.nex-otp-wrapper .nex-otp-timer-ring-track {
    stroke: var(--nex-otp-timer-track);
}

.nex-otp-wrapper .nex-otp-banner-section,
.nex-otp-wrapper .nex-otp-inline-banner {
    background: var(--nex-otp-banner-surface);
}

/* Phase 4 presets: distinctive details remain scoped and token-driven. */
.nex-otp-preset-marketplace .nex-otp-form-container {
    border-top: 4px solid var(--nex-otp-action-bg);
}

.nex-otp-preset-marketplace .nex-otp-btn,
.nex-otp-preset-marketplace .nex-otp-btn-inline {
    min-height: max(48px, var(--nex-otp-field-height, 48px));
    font-weight: 800;
}

.nex-otp-preset-marketplace .nex-otp-input,
.nex-otp-preset-marketplace .nex-otp-otp-cell {
    box-shadow: inset 0 1px 2px rgba(35, 37, 78, 0.04);
}

.nex-otp-preset-brand .nex-otp-logo-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-inline: auto;
}

.nex-otp-preset-brand.nex-otp-style-split .nex-otp-banner-section {
    position: relative;
    isolation: isolate;
}

.nex-otp-preset-brand.nex-otp-style-split .nex-otp-banner-section::after {
    content: "";
    position: absolute;
    inset: 16px;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: max(12px, var(--nex-otp-radius, 18px));
    pointer-events: none;
}

.nex-otp-preset-decorative .nex-otp-form-container,
.nex-otp-preset-decorative.nex-otp-style-minimal,
.nex-otp-preset-decorative.nex-otp-style-banner,
.nex-otp-preset-decorative.nex-otp-style-split {
    background:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--nex-otp-action-bg) 11%, transparent) 0 34px, transparent 35px),
        radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--nex-otp-focus) 9%, transparent) 0 48px, transparent 49px),
        var(--nex-otp-surface);
}

.nex-otp-preset-decorative .nex-otp-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--nex-otp-action-bg), var(--nex-otp-focus));
}

/* Popup Style */
.nex-otp-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Allow the overlay itself to scroll when the content (or the on-screen
       mobile keyboard) is taller than the viewport, so the submit button is
       always reachable instead of being clipped. */
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* WooCommerce My Account fullscreen login template */
body.nex-otp-fullscreen-page {
    margin: 0;
    min-width: 0;
    background: var(--nex-otp-page-bg, #f1f5f9);
}

.nex-otp-fullscreen-main {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.nex-otp-fullscreen-form {
    width: 100%;
    max-width: var(--nex-otp-form-width, 440px);
}

.nex-otp-fullscreen-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nex-otp-fullscreen-form > .nex-otp-wrapper {
    margin-inline: auto;
}

.nex-otp-fullscreen-fallback {
    display: block;
    width: fit-content;
    margin: 18px auto 0;
    color: #475569;
    font-size: 0.85rem;
    text-align: center;
}

.nex-otp-fullscreen-preset-dark {
    --nex-otp-page-bg: #070b14;
}

.nex-otp-fullscreen-preset-dark .nex-otp-fullscreen-fallback {
    color: #cbd5e1;
}

.nex-otp-fullscreen-preset-glass {
    --nex-otp-page-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.nex-otp-fullscreen-preset-soft {
    --nex-otp-page-bg: linear-gradient(180deg, #fffaf6 0%, #f8eee7 100%);
}

.nex-otp-fullscreen-preset-aurora {
    --nex-otp-page-bg: linear-gradient(135deg, #4c1d95 0%, #2563eb 48%, #0891b2 100%);
}

.nex-otp-fullscreen-preset-woodmart {
    --nex-otp-page-bg: #f5f0eb;
}

.nex-otp-fullscreen-preset-marketplace {
    --nex-otp-page-bg: #f5f5f5;
}

.nex-otp-fullscreen-preset-brand {
    --nex-otp-page-bg: linear-gradient(135deg, #08172d 0%, #173b61 100%);
}

.nex-otp-fullscreen-preset-brand .nex-otp-fullscreen-fallback {
    color: #dbe7f1;
}

.nex-otp-fullscreen-preset-decorative {
    --nex-otp-page-bg:
        radial-gradient(circle at 12% 18%, rgba(192, 38, 211, 0.12) 0 80px, transparent 81px),
        radial-gradient(circle at 88% 82%, rgba(8, 145, 178, 0.12) 0 110px, transparent 111px),
        linear-gradient(135deg, #fdf4ff 0%, #ecfeff 100%);
}

.nex-otp-popup-content {
    position: relative;
    width: 100%;
    max-width: var(--nex-otp-form-width, 440px);
    margin: auto;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: nex-otp-popup-in 0.18s ease-out;
    padding: 32px;
    box-sizing: border-box;
}

@keyframes nex-otp-popup-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.nex-otp-safe-mode .nex-otp-popup-content {
    animation: none;
}

/* Honor the OS-level reduced-motion preference (mirrors enable_safe_mode):
   disable the popup entrance animation and decorative transitions. The OTP
   spinner keeps animating because it communicates an in-progress request,
   which is functional rather than decorative motion. */
@media (prefers-reduced-motion: reduce) {
    .nex-otp-popup-content,
    .nex-otp-step.active,
    .nex-otp-msg,
    .nex-otp-preset-aurora::before,
    .nex-otp-preset-aurora::after {
        animation: none;
    }

    .nex-otp-timer-ring-progress {
        animation: none;
        stroke-dashoffset: 0;
    }

    .nex-otp-wrapper .nex-otp-input,
    .nex-otp-wrapper .nex-otp-input-otp,
    .nex-otp-wrapper .nex-otp-btn,
    .nex-otp-wrapper .nex-otp-btn-inline,
    .nex-otp-wrapper .nex-otp-btn-secondary,
    .nex-otp-wrapper .nex-otp-link,
    .nex-otp-wrapper .nex-otp-back-button,
    .nex-otp-popup-close,
    .nex-otp-completed .nex-otp-form-container {
        transition: none !important;
    }

    .nex-otp-btn:active {
        transform: none;
    }
}

/* Fast Buy trigger */
.nex-otp-fastbuy-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.nex-otp-fastbuy-trigger {
    flex: 1 1 150px;
    margin-top: 0;
}

.nex-otp-fastbuy-trigger--outline {
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba)) 55%, #cbd5e1) !important;
    color: var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba)) !important;
}

.nex-otp-fastbuy-trigger--outline:hover:not(:disabled) {
    background: color-mix(in srgb, var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba)) 10%, transparent) !important;
}

.nex-otp-fastbuy-quantity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: max(6px, calc(var(--nex-otp-radius, 8px) - 2px));
    background: #fff;
    color: #334155;
    font-size: 0.85rem;
    line-height: 1.4;
}

.nex-otp-fastbuy-quantity input {
    width: 64px;
    min-height: 30px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 6px;
    text-align: center;
    direction: ltr;
    font: inherit;
}

.nex-otp-fastbuy-quantity input:focus-visible {
    outline: 2px solid var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba));
    outline-offset: 1px;
}

@media (max-width: 480px) {
    .nex-otp-fastbuy-wrap {
        flex-direction: column;
    }

    .nex-otp-fastbuy-trigger,
    .nex-otp-fastbuy-quantity {
        width: 100%;
    }

    .nex-otp-fastbuy-quantity {
        justify-content: space-between;
    }
}

.nex-otp-popup-content .nex-otp-style-minimal {
    margin: 0;
    padding: 0 !important;
    border: none;
    box-shadow: none;
}

.nex-otp-popup-close {
    position: absolute;
    top: 20px;
    inset-inline-end: 20px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    transition: all 0.2s;
}

.nex-otp-popup-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.nex-otp-popup-close:focus-visible {
    outline: 2px solid var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba));
    outline-offset: 2px;
    background: #f1f5f9;
    color: #0f172a;
}

/* Landing Checkout */
.nex-otp-landing-checkout {
    --nex-otp-landing-bg: var(--nex-otp-surface, #ffffff);
    --nex-otp-landing-border: var(--nex-otp-surface-border, #e2e8f0);
    --nex-otp-landing-text: var(--nex-otp-text, #334155);
    --nex-otp-landing-heading: var(--nex-otp-heading, #0f172a);
    --nex-otp-landing-muted: var(--nex-otp-muted, #64748b);
    --nex-otp-landing-field-bg: var(--nex-otp-field-bg, #ffffff);
    --nex-otp-landing-field-border: var(--nex-otp-field-border, #cbd5e1);
    --nex-otp-landing-action: var(--nex-otp-action-bg, var(--nex-otp-primary-color, #007cba));
    --nex-otp-landing-action-hover: var(--nex-otp-action-hover, color-mix(in srgb, var(--nex-otp-landing-action) 92%, #000000));
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    color: var(--nex-otp-landing-text);
    font-family: inherit;
    line-height: 1.6;
}

.nex-otp-landing-checkout,
.nex-otp-landing-checkout *,
.nex-otp-landing-checkout *::before,
.nex-otp-landing-checkout *::after {
    box-sizing: border-box;
}

.nex-otp-landing-card {
    background: var(--nex-otp-landing-bg);
    border: 1px solid var(--nex-otp-landing-border);
    border-radius: max(14px, var(--nex-otp-radius, 16px));
    box-shadow: var(--nex-otp-surface-shadow, 0 18px 44px rgba(15, 23, 42, 0.12));
    padding: 24px;
}

.nex-otp-landing-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    margin-bottom: 18px;
}

.nex-otp-landing-kicker {
    display: inline-flex;
    margin-bottom: 6px;
    color: var(--nex-otp-landing-action);
    font-size: 0.78rem;
    font-weight: 800;
}

.nex-otp-landing-header h3 {
    margin: 0 0 6px;
    color: var(--nex-otp-landing-heading);
    font-size: 1.35rem;
    font-weight: 800;
}

.nex-otp-landing-header p,
.nex-otp-landing-copy {
    margin: 0;
    color: var(--nex-otp-landing-muted);
    font-size: 0.92rem;
}

.nex-otp-landing-product {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 150px;
    padding: 12px;
    border: 1px solid var(--nex-otp-landing-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--nex-otp-landing-bg) 92%, var(--nex-otp-landing-action) 8%);
    text-align: start;
}

.nex-otp-landing-product img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--nex-otp-landing-border);
    grid-row: span 2;
}

.nex-otp-landing-product strong,
.nex-otp-landing-product span {
    display: block;
    min-width: 0;
}

.nex-otp-landing-product strong {
    color: var(--nex-otp-landing-heading);
    font-size: 0.9rem;
}

.nex-otp-landing-product span {
    margin-top: 4px;
    color: var(--nex-otp-landing-action);
    font-weight: 800;
}

.nex-otp-landing-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.nex-otp-landing-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--nex-otp-landing-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--nex-otp-landing-bg) 96%, #000000 4%);
    color: var(--nex-otp-landing-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.nex-otp-landing-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--nex-otp-landing-muted) 14%, transparent);
    color: inherit;
    font-size: 0.76rem;
}

.nex-otp-landing-steps strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nex-otp-landing-steps li.is-active,
.nex-otp-landing-steps li.is-complete {
    border-color: color-mix(in srgb, var(--nex-otp-landing-action) 42%, var(--nex-otp-landing-border));
    color: var(--nex-otp-landing-heading);
}

.nex-otp-landing-steps li.is-active span,
.nex-otp-landing-steps li.is-complete span {
    background: var(--nex-otp-landing-action);
    color: var(--nex-otp-action-text, #ffffff);
}

.nex-otp-landing-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(110px, 0.6fr) minmax(0, 0.8fr);
    gap: 10px;
    margin-bottom: 16px;
}

.nex-otp-landing-summary > div,
.nex-otp-landing-summary > label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70px;
    padding: 10px 12px;
    border: 1px solid var(--nex-otp-landing-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--nex-otp-landing-bg) 96%, #000000 4%);
}

.nex-otp-landing-summary span {
    color: var(--nex-otp-landing-muted);
    font-size: 0.78rem;
}

.nex-otp-landing-summary strong {
    color: var(--nex-otp-landing-heading);
    font-size: 0.95rem;
}

.nex-otp-landing-summary small {
    display: block;
    margin-top: 3px;
    color: var(--nex-otp-landing-muted);
    font-size: 0.78rem;
}

.nex-otp-landing-summary--detailed {
    grid-template-columns: minmax(0, 1.2fr) minmax(96px, 0.6fr) minmax(0, 0.8fr);
}

.nex-otp-landing-summary__rows {
    grid-column: 1 / -1;
    min-height: 0 !important;
    gap: 8px;
}

.nex-otp-landing-summary__rows > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.nex-otp-landing-summary__rows > div[hidden] {
    display: none;
}

.nex-otp-landing-summary input,
.nex-otp-landing-field input,
.nex-otp-landing-field textarea,
.nex-otp-landing-field select {
    width: 100%;
    min-height: var(--nex-otp-field-height, 46px);
    padding: 10px 12px;
    border: 1px solid var(--nex-otp-landing-field-border);
    border-radius: max(8px, calc(var(--nex-otp-radius, 12px) - 4px));
    background: var(--nex-otp-landing-field-bg);
    color: var(--nex-otp-field-text, #0f172a);
    font: inherit;
}

.nex-otp-landing-field textarea {
    min-height: 88px;
    resize: vertical;
}

.nex-otp-landing-summary input {
    margin-top: 4px;
    text-align: center;
    direction: ltr;
}

.nex-otp-landing-field {
    margin-bottom: 14px;
}

.nex-otp-landing-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--nex-otp-landing-heading);
    font-size: 0.88rem;
    font-weight: 700;
}

.nex-otp-landing-coupon {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: stretch;
}

.nex-otp-landing-chip-btn {
    min-height: var(--nex-otp-field-height, 46px);
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--nex-otp-landing-action) 48%, var(--nex-otp-landing-border));
    border-radius: max(8px, calc(var(--nex-otp-radius, 12px) - 4px));
    background: color-mix(in srgb, var(--nex-otp-landing-action) 10%, transparent);
    color: var(--nex-otp-landing-action);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.nex-otp-landing-chip-btn--muted {
    border-color: var(--nex-otp-landing-border);
    background: transparent;
    color: var(--nex-otp-landing-muted);
}

.nex-otp-landing-chip-btn[hidden] {
    display: none;
}

.nex-otp-landing-coupon-note {
    grid-column: 1 / -1;
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--nex-otp-landing-muted) 8%, transparent);
    color: var(--nex-otp-landing-muted);
    font-size: 0.82rem;
}

.nex-otp-landing-coupon-note[hidden] {
    display: none;
}

.nex-otp-landing-coupon-note.is-valid {
    background: #ecfdf5;
    color: #047857;
}

.nex-otp-landing-coupon-note.is-pending {
    background: #fffbeb;
    color: #92400e;
}

.nex-otp-landing-coupon-note.is-invalid {
    background: #fef2f2;
    color: #b91c1c;
}

.nex-otp-landing-field input:focus,
.nex-otp-landing-field textarea:focus,
.nex-otp-landing-field select:focus,
.nex-otp-landing-summary input:focus {
    outline: none;
    border-color: var(--nex-otp-focus, var(--nex-otp-landing-action));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nex-otp-focus, var(--nex-otp-landing-action)) 18%, transparent);
}

.nex-otp-landing-step {
    display: none;
}

.nex-otp-landing-step.active {
    display: block;
    animation: nex-otp-step-in 0.22s ease-out;
}

.nex-otp-landing-message {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
}

.nex-otp-landing-message[hidden] {
    display: none;
}

.nex-otp-landing-btn {
    width: 100%;
    min-height: var(--nex-otp-field-height, 48px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: max(8px, calc(var(--nex-otp-radius, 12px) - 4px));
    background: var(--nex-otp-landing-action);
    color: var(--nex-otp-action-text, #ffffff);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.nex-otp-landing-btn:hover:not(:disabled) {
    background: var(--nex-otp-landing-action-hover);
}

.nex-otp-landing-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.nex-otp-landing-btn:focus-visible,
.nex-otp-landing-link:focus-visible,
.nex-otp-landing-chip-btn:focus-visible,
.nex-otp-landing-receipt a:focus-visible,
.nex-otp-landing-payment-method:focus-within {
    outline: 2px solid var(--nex-otp-focus, var(--nex-otp-landing-action));
    outline-offset: 2px;
}

.nex-otp-landing-btn:disabled {
    cursor: not-allowed;
    opacity: 0.76;
}

.nex-otp-landing-btn--secondary,
.nex-otp-landing-btn--outline {
    background: transparent;
    border-color: color-mix(in srgb, var(--nex-otp-landing-action) 55%, var(--nex-otp-landing-border));
    color: var(--nex-otp-landing-action);
}

.nex-otp-landing-btn--secondary:hover:not(:disabled),
.nex-otp-landing-btn--outline:hover:not(:disabled) {
    background: color-mix(in srgb, var(--nex-otp-landing-action) 10%, transparent);
}

.nex-otp-landing-link {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--nex-otp-landing-action);
    font: inherit;
    cursor: pointer;
}

.nex-otp-landing-otp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin-top: 10px;
}

.nex-otp-landing-otp-actions .nex-otp-landing-link {
    width: auto;
    margin-top: 0;
}

.nex-otp-landing-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 34px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--nex-otp-landing-action) 10%, transparent);
    color: var(--nex-otp-landing-action);
    font-weight: 800;
    direction: ltr;
}

.nex-otp-landing-timer:empty,
.nex-otp-landing-timer[hidden] {
    display: none;
}

.nex-otp-landing-payment-methods {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.nex-otp-landing-payment-method {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--nex-otp-landing-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--nex-otp-landing-bg) 96%, #000000 4%);
    cursor: pointer;
}

.nex-otp-landing-payment-method input {
    margin-top: 4px;
}

.nex-otp-landing-payment-method strong,
.nex-otp-landing-payment-method small {
    display: block;
}

.nex-otp-landing-payment-method strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--nex-otp-landing-heading);
}

.nex-otp-landing-payment-method em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--nex-otp-landing-action) 12%, transparent);
    color: var(--nex-otp-landing-action);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
}

.nex-otp-landing-payment-method small {
    color: var(--nex-otp-landing-muted);
    font-size: 0.8rem;
}

.nex-otp-landing-payment-warning {
    margin-top: 5px;
    color: #92400e !important;
}

.nex-otp-landing-receipt {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--nex-otp-landing-action) 36%, var(--nex-otp-landing-border));
    border-radius: max(12px, var(--nex-otp-radius, 16px));
    background: color-mix(in srgb, var(--nex-otp-landing-action) 8%, var(--nex-otp-landing-bg));
    text-align: center;
}

.nex-otp-landing-receipt[hidden] {
    display: none;
}

.nex-otp-landing-receipt__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: var(--nex-otp-landing-action);
    color: var(--nex-otp-action-text, #ffffff);
    font-weight: 900;
}

.nex-otp-landing-receipt h4 {
    margin: 0 0 6px;
    color: var(--nex-otp-landing-heading);
    font-size: 1.1rem;
    font-weight: 900;
}

.nex-otp-landing-receipt p {
    margin: 0 0 12px;
    color: var(--nex-otp-landing-muted);
}

.nex-otp-landing-receipt dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.nex-otp-landing-receipt dl > div {
    padding: 10px;
    border: 1px solid var(--nex-otp-landing-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--nex-otp-landing-bg) 92%, #000000 8%);
}

.nex-otp-landing-receipt dt,
.nex-otp-landing-receipt dd {
    margin: 0;
}

.nex-otp-landing-receipt dt {
    color: var(--nex-otp-landing-muted);
    font-size: 0.78rem;
}

.nex-otp-landing-receipt dd {
    color: var(--nex-otp-landing-heading);
    font-weight: 900;
}

.nex-otp-landing-complete .nex-otp-landing-summary,
.nex-otp-landing-complete .nex-otp-landing-payment-methods,
.nex-otp-landing-complete [data-role="landing-pay"] {
    opacity: 0.68;
    pointer-events: none;
}

@media (max-width: 560px) {
    .nex-otp-landing-card {
        padding: 18px;
    }

    .nex-otp-landing-header,
    .nex-otp-landing-summary {
        grid-template-columns: 1fr;
    }

    .nex-otp-landing-steps {
        gap: 6px;
    }

    .nex-otp-landing-steps li {
        justify-content: center;
        padding: 8px;
    }

    .nex-otp-landing-steps strong {
        display: none;
    }

    .nex-otp-landing-product {
        grid-template-columns: auto minmax(0, 1fr);
        min-width: 0;
    }

    .nex-otp-landing-coupon {
        grid-template-columns: 1fr;
    }

    .nex-otp-landing-chip-btn {
        width: 100%;
    }

    .nex-otp-landing-receipt dl {
        grid-template-columns: 1fr;
    }
}

.nex-otp-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.nex-otp-btn-inline {
    min-height: var(--nex-otp-field-height, 44px);
    background-color: var(--nex-otp-primary-color, var(--nex-otp-primary, #007cba)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: max(4px, calc(var(--nex-otp-radius, 8px) - 4px));
    padding: 0 16px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    font-size: 0.9rem;
    max-width: none;
    float: none !important;
    margin-inline: 0 !important;
    font-family: inherit;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}

.nex-otp-btn-inline:hover {
    opacity: 0.9;
}

.nex-otp-btn-inline:disabled {
    background-color: #cbd5e1 !important;
    cursor: not-allowed;
}

.nex-otp-input:disabled {
    background-color: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.85;
}

/* While a request is in flight, JS disables the inputs (setBusy). Give the OTP
   box the same calm "processing" treatment as the text inputs so the busy
   state reads consistently across both. */
.nex-otp-input-otp:disabled {
    background-color: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.85;
}

/* Phase 2 scoped UX improvements */
.nex-otp-wrapper,
.nex-otp-wrapper * {
    box-sizing: border-box;
}

.nex-otp-step {
    width: 100%;
}

/* ── Phase UI-3: state / animation polish (CSS-only) ─────────────────────
   Step entrance: JS sets the target step to display:block and adds `.active`
   (see showStep() in nex-otp-main.js). Animating `.nex-otp-step.active` gives a
   subtle fade + slide as the user moves phone -> OTP -> profile/password,
   without changing any JS behavior or the display toggling itself.
   Disabled under safe mode and reduced motion. */
.nex-otp-step.active {
    animation: nex-otp-step-in 0.22s ease-out;
}

@keyframes nex-otp-step-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nex-otp-safe-mode .nex-otp-step.active {
    animation: none;
}

/* Message entrance: gentle fade-in when an error/success/status message is
   revealed by JS (it sets display:block on a hidden element). */
.nex-otp-msg {
    animation: nex-otp-msg-in 0.2s ease-out;
}

@keyframes nex-otp-msg-in {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nex-otp-safe-mode .nex-otp-msg {
    animation: none;
}

/* Lockout / rate-limit "wait" treatment. Distinct from the red typo-error: a
   calmer amber palette that reads as "wait, not wrong". The `.nex-otp-lockout`
   modifier is applied by nex-otp-main.js (showMessage) when the server returns
   a `rate_limited` or `verify_locked` code (see NEX_OTP_LOCKOUT_CODES; activated
   in UI-3J). Enumeration-safe generic errors (e.g. blocked phones, which return
   `send_failed`) deliberately do NOT get this class. It overrides the
   `.nex-otp-error` colors when both classes are present. */
.nex-otp-msg.nex-otp-lockout,
.nex-otp-error.nex-otp-lockout {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-inline-start-color: #d97706;
}

.nex-otp-hp {
    display: none !important;
    visibility: hidden !important;
}

.nex-otp-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.nex-otp-wrapper .nex-otp-msg[aria-live] {
    min-height: 0;
}

.nex-otp-btn.is-loading,
.nex-otp-btn-inline.is-loading,
.nex-otp-btn-secondary.is-loading,
.nex-otp-link.is-loading {
    pointer-events: none;
}

.nex-otp-login-card {
    max-width: var(--nex-otp-form-width, 440px);
    margin: 0 0 24px;
}

.nex-otp-login-card .nex-otp-wrapper {
    margin: 0;
}

.nex-otp-woo-login.nex-otp-login-card {
    margin-bottom: 28px;
}

.nex-otp-myaccount .nex-otp-form-container,
.nex-otp-woocommerce-checkout-login .nex-otp-form-container {
    border-radius: 8px;
}

.nex-otp-woocommerce-checkout-login {
    width: 100%;
    max-width: none;
    margin: 0 0 24px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.nex-otp-woocommerce-checkout-login summary {
    cursor: pointer;
    font-weight: 700;
    color: #0f172a;
}

.nex-otp-checkout-copy {
    margin: 12px 0;
    color: #64748b;
    font-size: 0.92rem;
}

.nex-otp-context-checkout {
    max-width: var(--nex-otp-form-width, 440px);
    margin: 16px 0 0;
    padding: 0;
}

.nex-otp-context-checkout .nex-otp-form-container {
    box-shadow: none;
}

/* Completed state (set after a successful checkout login, before the
   fragment-refresh/redirect settles): fade the card slightly and signal it is
   no longer the active control surface. CSS-only; the class is added by
   existing JS on success. */
.nex-otp-completed .nex-otp-form-container {
    opacity: 0.92;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.nex-otp-safe-mode.nex-otp-completed .nex-otp-form-container,
.nex-otp-completed.nex-otp-safe-mode .nex-otp-form-container {
    transition: none;
}

.nex-otp-theme-woodmart .nex-otp-woodmart-account,
.nex-otp-theme-woodmart .nex-otp-woo-login,
.nex-otp-theme-woodmart .nex-otp-woocommerce-checkout-login {
    font-family: inherit;
}

.nex-otp-theme-woodmart .nex-otp-login-card {
    width: 100%;
}

.nex-otp-theme-woodmart .nex-otp-wrapper {
    max-width: var(--nex-otp-form-width, 440px);
}

.nex-otp-theme-woodmart .nex-otp-popup-content .nex-otp-wrapper {
    max-width: 100%;
}

@media (max-width: 520px) {
    .nex-otp-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .nex-otp-woocommerce-checkout-login {
        padding: 12px;
    }

    .nex-otp-popup-content {
        padding: 24px 20px;
    }

    .nex-otp-style-minimal {
        margin: 15px auto;
        padding: 32px 20px;
        border: none;
        max-width: 100%;
    }

    .nex-otp-fullscreen-main {
        align-items: flex-start;
        padding: 16px 0;
    }

    .nex-otp-fullscreen-form {
        width: 100%;
    }

    .nex-otp-logo-img {
        max-height: 48px;
    }

    .nex-otp-input-otp {
        letter-spacing: 0.45em;
        font-size: 1.55rem !important;
        padding-left: 22px !important;
    }

    .nex-otp-form-container {
        padding: 20px;
    }

    .nex-otp-preset-brand.nex-otp-style-split .nex-otp-banner-section::after {
        inset: 10px;
    }

    .nex-otp-preset-decorative .nex-otp-form-container,
    .nex-otp-preset-decorative.nex-otp-style-minimal,
    .nex-otp-preset-decorative.nex-otp-style-banner,
    .nex-otp-preset-decorative.nex-otp-style-split {
        background:
            radial-gradient(circle at 5% 5%, color-mix(in srgb, var(--nex-otp-action-bg) 8%, transparent) 0 22px, transparent 23px),
            var(--nex-otp-surface);
    }

    .nex-otp-btn,
    .nex-otp-btn-inline {
        min-height: max(var(--nex-otp-field-height, 44px), 44px);
    }

    .nex-otp-resend-btn {
        min-height: 40px;
        padding: 8px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nex-otp-preset-marketplace *,
    .nex-otp-preset-brand *,
    .nex-otp-preset-decorative * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Extra-narrow phones: keep long OTP codes (7-8 digits) from overflowing
   the single input by reducing the per-digit spacing/size further. */
@media (max-width: 380px) {
    .nex-otp-input-otp {
        letter-spacing: 0.3em;
        font-size: 1.3rem !important;
        padding-left: 14px !important;
    }
}