/* ===================================================================
   Phone verification widget (includes/message-central.php → otp_widget)
   ===================================================================
   Self-contained on purpose: the site's Tailwind file is pre-built, so
   any new utility classes used here would be missing until the next
   `npm run build`. Plain CSS sidesteps that.

   Colour comes from --otp-accent. checkout.php (black & brass showroom)
   and account/register.php (blue dashboard) each set it on a wrapper.
   ------------------------------------------------------------------- */

.otp-widget {
    --otp-accent: #C89545;
    --otp-accent-ink: #0E1113;
    --otp-ok: #059669;
    --otp-err: #dc2626;
    margin-top: 0.6rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #374151;
}

.otp-step { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.otp-step[hidden] { display: none; }

.otp-hint { color: #6b7280; font-size: 0.8rem; }

.otp-btn {
    appearance: none;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    font: inherit;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    color: var(--otp-accent-ink);
    background: var(--otp-accent);
    cursor: pointer;
    transition: filter .15s, opacity .15s;
    white-space: nowrap;
}
.otp-btn:hover { filter: brightness(1.08); }
.otp-btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }

.otp-link {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.otp-link:hover { color: var(--otp-accent-ink); }
.otp-link:disabled { color: #9ca3af; text-decoration: none; cursor: default; }

.otp-step-code { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.otp-sent-to { margin: 0; }
.otp-code-row { display: flex; gap: 0.5rem; }
.otp-code {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 12rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-align: center;
    background: #fff;
    color: #111827;
}
.otp-code:focus { outline: 2px solid var(--otp-accent); outline-offset: 1px; border-color: var(--otp-accent); }
.otp-resend-row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: #6b7280; }
.otp-countdown:empty, .otp-sep:empty { display: none; }

.otp-step-done {
    padding: 0.55rem 0.85rem;
    border-radius: 0.5rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}
.otp-tick {
    display: inline-grid;
    place-items: center;
    width: 1.35rem; height: 1.35rem;
    border-radius: 999px;
    background: var(--otp-ok);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}
.otp-step-done .otp-link { margin-left: auto; color: #065f46; }

.otp-message { margin: 0.5rem 0 0; font-size: 0.8125rem; }
.otp-message[hidden] { display: none; }
.otp-message.is-error { color: var(--otp-err); }
.otp-message.is-ok    { color: var(--otp-ok); }
.otp-message.is-info  { color: #6b7280; }

/* The phone field itself gets this once verified, so it's obvious the
   number can't be silently changed after the fact. */
.otp-phone-locked { background: #f3f4f6 !important; color: #6b7280 !important; }

@media (max-width: 480px) {
    .otp-step-send { flex-direction: column; align-items: stretch; }
    .otp-step-send .otp-btn { width: 100%; }
    .otp-code { max-width: none; }
}

/* Account area (blue dashboard palette) — wrap the widget in this. */
.otp-theme-brand .otp-widget { --otp-accent: #465FFF; --otp-accent-ink: #ffffff; }