/**
 * Payam Resan - WooCommerce OTP widget.
 *
 * Layout glue only. All colours, borders, padding, buttons and inputs come from
 * WooCommerce itself: the widget reuses WooCommerce's own classes (classic
 * `woocommerce-*` / `form-row` / `input-text`, block `wc-block-components-*`),
 * so it always matches the active theme. Do not add cosmetic rules here.
 */

.payam-resan-wc-otp {
    margin-top: 1em;
}

/* The block address form is a flex row (each field is ~50% wide); the widget
   must claim a full row of its own instead of sharing one with a field. */
.payam-resan-wc-otp--block {
    flex: 0 0 100%;
    width: 100%;
}

.payam-resan-wc-otp-timer {
    margin-inline-start: 0.75em;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.payam-resan-wc-otp-verify-row,
.payam-resan-wc-otp-code-row {
    margin-top: 0.75em !important;
}

/* Verification code reads as a code entry. */
.payam-resan-wc-otp-code-input {
    letter-spacing: 0.2em;
    text-align: center;
    direction: ltr;
}