/*
 * Functional fallback only.
 * Account UI remains responsible for DigiwareStore's final visual design.
 * These rules isolate the OTP component from broad theme/button styles and
 * guarantee that it cannot overflow the registration box.
 */
.ds-account-validation[hidden] { display: none !important; }
.ds-account-validation,
.ds-account-validation *,
.ds-account-validation *::before,
.ds-account-validation *::after { box-sizing: border-box; }

.ds-account-validation {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 0;
    min-width: 0;
}

.ds-account-validation__challenge {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: center;
}

.ds-account-validation__title { margin: 0 0 8px; font-weight: 600; }
.ds-account-validation__description { margin: 0 0 18px; }
.ds-account-validation__email { display: block; margin-top: 3px; overflow-wrap: anywhere; word-break: break-word; }

.ds-account-validation__otp {
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    gap: clamp(4px, 1.6vw, 8px);
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.ds-account-validation__digit {
    flex: 0 1 46px;
    width: min(46px, calc((100% - 20px) / 6)) !important;
    min-width: 0 !important;
    max-width: 46px !important;
    height: 52px;
    padding: 0 !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 10px !important;
    text-align: center;
    font: 600 20px/1 Poppins, Helvetica, Arial, sans-serif;
    appearance: textfield;
}
.ds-account-validation__digit:focus { outline: 2px solid currentColor; outline-offset: 2px; }

.ds-account-validation__verify {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    align-items: center;
    justify-content: center;
}

.ds-account-validation__secondary-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    gap: 6px 8px;
    margin-top: 12px;
    font-size: .9em;
}

.ds-account-validation__resend,
.ds-account-validation__change-email {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    line-height: inherit !important;
    text-decoration: underline;
    cursor: pointer;
    font: inherit !important;
    white-space: normal;
}
.ds-account-validation__resend:disabled { cursor: default; opacity: .55; text-decoration: none; }

.ds-account-validation__status,
.ds-account-validation__registration-status { margin: 10px 0 0; }
.ds-account-validation__registration-status[data-state="error"],
.ds-account-validation[data-state="error"] .ds-account-validation__status { font-weight: 500; }
.ds-account-validation[data-state="verified"] .ds-account-validation__status { font-weight: 600; }

/* Structural guard: while OTP is active, the original WooCommerce registration
 * submit control must never remain visible, even if Account UI has moved it. */
form.ds-account-validation--challenge-active button[name="register"],
form.ds-account-validation--challenge-active input[name="register"] {
    display: none !important;
}

@media (max-width: 420px) {
    .ds-account-validation__otp { gap: 4px; }
    .ds-account-validation__digit {
        flex-basis: 42px;
        width: min(42px, calc((100% - 20px) / 6)) !important;
        height: 48px;
        border-radius: 9px !important;
    }
    .ds-account-validation__secondary-actions > span[aria-hidden="true"] { display: none; }
    .ds-account-validation__secondary-actions { flex-direction: column; gap: 8px; }
}