/* Shriram Codename 10x — OTP field styles (2026-09-29).
   Single source of truth for the OTP box. The five-digit-box rules that used to
   live in style.css were removed; they sized each box at 15% (floating form) or
   40px (popup), which collapsed the single replacement field to one character.

   Two very different hosts:
     .floating_form_section  fixed bottom bar, horizontal, dark, 30px inputs
     .pricepopupnew          white modal card, vertical stack, 45px inputs      */

/* ── shared ─────────────────────────────────────────────────────────── */
.otp_box { position: relative; }

.otp_row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Both forms label every other field by placeholder alone (Name*, Email Id), and
   the input carries placeholder="Enter OTP" + aria-label="OTP" -- so the visible
   label is redundant and only added clutter. */
.otp_label { display: none; }

/* flex:1 + min-width:0 is what stops the field collapsing to its content. */
.otp_input {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-weight: 600;
}

.otp_foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.otp_foot button {
    background: none;
    border: 0;
    padding: 0;
    line-height: 1.3;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.otp_foot button[disabled] {
    opacity: 0.7;
    cursor: default;
    text-decoration: none;
}

.otp_status { margin: 0; }

/* letter-spacing is for the typed digits; it would stretch "Enter OTP" too.
   Restated per context because the context rules below outrank a bare
   .otp_input:placeholder-shown. */
.otp_input:placeholder-shown,
section.floating_form_section .otp_box .otp_input:placeholder-shown,
.pricepopupnew .otp_box .otp_input:placeholder-shown {
    letter-spacing: normal;
    text-indent: 0;
}

/* ── floating bottom bar ────────────────────────────────────────────── */
/* Slightly wider than its siblings: it has to hold the countdown and the
   change-number link, which Name/Email do not. */
section.floating_form_section .formwrapper .box.otp_box { flex: 1.5; }

section.floating_form_section .otp_box .otp_input {
    width: 95%;
    height: 30px;
    padding: 0 6px;
    font-size: 13px;
    letter-spacing: 0.35em;
    text-indent: 0.35em; /* re-centre: letter-spacing pads the right of each glyph */
}

/* The bar centres its .box children, so anything below the input would push the
   input up out of line with Name / Phone / Email. Taking the footer and status
   out of flow keeps the box exactly one input tall; they stack on two lines in
   the gap between the inputs and the consent checkbox, which form.otp-open
   widens to 40px. */
section.floating_form_section .otp_box .otp_foot,
section.floating_form_section .otp_box .otp_status {
    position: absolute;
    top: 100%;
    margin: 3px 0 0;
    font-size: 10px;
    color: #fff;
    white-space: nowrap;
}

section.floating_form_section .otp_box .otp_foot {
    left: 0;
    margin-top: 3px;
}

/* Its own line under the footer: messages like "Invalid OTP. Please try again."
   are far too long to share a line with the resend / change-number links. */
section.floating_form_section .otp_box .otp_status {
    left: 0;
    right: 0;
    margin-top: 19px;
    opacity: 0.85;
    white-space: normal;
}

/* On the dark teal bar a pale pink reads as plain white text, so errors get a
   stronger tint and weight to register as errors. */
section.floating_form_section .otp_box .otp_status.is-err {
    color: #ffb1b1;
    font-weight: 600;
    opacity: 1;
}

/* ── popup / modal card ─────────────────────────────────────────────── */
/* Full-width field, matching the Name / Email rhythm of the card. */
.pricepopupnew .otp_box { margin: 0 0 1rem; }

.pricepopupnew .otp_box .otp_input {
    width: 100%;
    height: 45px;
    border: 1px solid #000;
    font-size: 16px;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
}

.pricepopupnew .otp_box .otp_foot {
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: #333;
}

.pricepopupnew .otp_box .otp_status {
    margin-top: 6px;
    font-size: 12px;
    color: #333;
    min-height: 15px;
}

.pricepopupnew .otp_box .otp_status.is-err { color: #c0392b; }

/* ── phone field states ─────────────────────────────────────────────── */
input.otp_verified { border-color: #1e8e3e !important; }

section.floating_form_section input.otp_locked,
section.floating_form_section input.otp_verified {
    opacity: 0.85;
}

.pricepopupnew input.otp_locked,
.pricepopupnew input.otp_verified {
    background-color: #f3f3f3 !important;
}

/* The out-of-flow countdown line sits between the inputs and the consent
   checkbox; give it room only while the OTP box is actually open. */
section.floating_form_section form.otp-open .form-check {
    margin-top: 40px;
}

/* The longest message ("Too many wrong attempts. Please try again in N
   minute(s).") wraps to two lines at this width. */
section.floating_form_section form.otp-open.otp-error .form-check {
    margin-top: 54px;
}