/* Shriram 122 West — OTP field styles (2026-10-22).
   Single source of truth for the OTP box. The five-digit-box rules that used to
   live in style.css (.box.otp_box ...) were removed with it; they sized five
   35px boxes and would have collapsed this single field.

   Two hosts:
     #inquiryForm   fixed bottom bar (desktop only), dark blue, white text,
                    fields are .box > .input-group > input.form-control
     #price         enquiry modal, textured dark card, white labels,
                    fields are .input-group.input-group-space > label + input  */

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

.otp_input {
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.35em;
}

/* letter-spacing is for the typed digits; it would stretch "Enter OTP" too.
   Restated per host because those rules outrank a bare .otp_input. */
.otp_input:placeholder-shown,
#inquiryForm .otp_box .otp_input:placeholder-shown,
#price .otp_box .otp_input:placeholder-shown {
    letter-spacing: normal;
    font-weight: 400;
}

.otp_foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.3;
    color: #fff;
}

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

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

.otp_status {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.3;
    color: #fff;
    opacity: 0.9;
}

.otp_status:empty { display: none; }

.otp_status.is-err {
    color: #ffb1b1;
    font-weight: 600;
    opacity: 1;
}

/* ── footer bar ─────────────────────────────────────────────────────── */
/* Wide enough for "Resend OTP in 14:59" + "Change number" on one line. */
#inquiryForm .otp_box { min-width: 190px; }

#inquiryForm .otp_box .otp_input { padding-left: 6px; padding-right: 6px; }

#inquiryForm .otp_foot { white-space: nowrap; }

/* A little air between the status line and the consent row under the bar. */
#inquiryForm .otp_box { padding-bottom: 6px; }

/* ── enquiry popup ──────────────────────────────────────────────────── */
/* Clear gap before the consent checkboxes, which otherwise ran straight on
   from the "attempt(s) left" line. */
#price .otp_box { margin-bottom: 20px; }

#price .otp_box .input-group { padding: 5px 0; }

#price .otp_foot {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
}

#price .otp_status {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12px;
    line-height: 1.4;
}

#price .otp_status:not(.is-err) { opacity: 0.75; }

/* ── phone field states ─────────────────────────────────────────────── */
input.otp_locked,
input.otp_verified {
    background-color: #f3f3f3 !important;
}

input.otp_verified {
    border-bottom-color: #1e8e3e !important;
}

/* ── toast position (2026-10-22, after the first live test) ─────────── */
/* ohsnap.css pins #ohsnap 25px from the bottom, exactly where the fixed
   footer form (desktop) or the Enquire / Call Now bar (phones) sits, so every
   message covered the OTP field and the Submit button. Lift it above both. */
/* desktop: above the fixed footer form */
@media (min-width: 992px) {
    #ohsnap { bottom: 130px; }
}

/* phones / tablets: at the top of the screen instead, so it never covers the
   enquiry popup's fields or the Enquire / Call Now bar */
@media (max-width: 991.98px) {
    #ohsnap { bottom: auto; top: 12px; }
}