/* Mobile-first OTP registration wizard — "Junagadh Info" branded card (forest green /
   gold / sandstone palette, Marcellus + Mukta type) matching the register.html UI
   reference, layered on top of the site's existing Bootstrap-ish form-control/btn
   classes (so focus states, validation etc. stay structurally consistent with the
   rest of the site). Every custom property and rule is scoped under .otp-wizard so
   none of it leaks into other uSkinned pages. */

.otp-wizard {
    --otp-forest: #1B4332;
    --otp-forest-mid: #2D6A4F;
    --otp-forest-soft: #E8F0EA;
    --otp-sandstone: #F6F1E6;
    --otp-sandstone-deep: #E7DCC6;
    --otp-amber: #B4741A;
    --otp-gold: #D9A520;
    --otp-ink: #232019;
    --otp-ink-soft: #6B6357;
    --otp-danger: #9B2C2C;

    /* Kept as the button/link/focus-ring accent so the rest of the markup below can
       stay written against one semantic name instead of --otp-forest directly. */
    --otp-accent: var(--otp-forest);
    --otp-accent-soft: rgba(27, 67, 50, 0.12);
    --otp-accent-softer: rgba(27, 67, 50, 0.06);

    position: relative;
    font-family: 'Mukta', system-ui, sans-serif;
    background: #ffffff;
    border: 1px solid var(--otp-sandstone-deep);
    border-radius: 20px;
    box-shadow: 0 18px 44px -28px rgba(27, 67, 50, 0.45), 0 2px 8px rgba(20, 20, 30, 0.05);
    padding: 2rem 1.9rem 1.9rem;
    max-width: 460px;
    margin: 0 auto;
    overflow: hidden;
}

/* ── Card header: eyebrow + title + subtitle ─────────────────────────────────── */

.otp-wizard__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--otp-amber);
    margin: 0 0 0.55rem;
}

.otp-wizard__eyebrow svg {
    display: block;
}

/* The theme's own h1 is sized/weighted for a full-width hero banner (huge, uppercase) —
   wrong for a compact card heading, so every visual property is reset explicitly here
   rather than relying on inherited page-title styling. */
.otp-wizard__title {
    font-family: 'Marcellus', Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    font-size: 1.7rem;
    text-transform: none;
    line-height: 1.25;
    color: var(--otp-ink);
    text-align: center;
    margin: 0 0 0.3rem;
}

.otp-wizard__title::before,
.otp-wizard__title::after {
    display: none;
}

.otp-wizard__subtitle {
    text-align: center;
    color: var(--otp-ink-soft);
    font-size: 0.95rem;
    margin: 0 0 1.35rem;
}

/* ── Girnar two-peak ridge step indicator ─────────────────────────────────────── */

.otp-wizard__ridge {
    margin: 0 0 0.35rem;
}

.otp-wizard__ridge svg {
    width: 100%;
    height: 44px;
    display: block;
}

.otp-wizard__ridge .otp-wizard__ridge-dim {
    stroke: var(--otp-sandstone-deep);
}

.otp-wizard__ridge .otp-wizard__ridge-live {
    stroke: var(--otp-gold);
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.otp-wizard__ridge[data-ridge-step="1"] .otp-wizard__ridge-live {
    stroke-dashoffset: 230;
}

.otp-wizard__ridge[data-ridge-step="2"] .otp-wizard__ridge-live {
    stroke-dashoffset: 0;
}

.otp-wizard__ridge-peak {
    fill: var(--otp-sandstone-deep);
    transition: fill 0.4s ease;
}

.otp-wizard__ridge-peak.on {
    fill: var(--otp-gold);
}

.otp-wizard__step-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--otp-ink-soft);
    margin: -0.15rem 0 1.5rem;
}

.otp-wizard__step-labels span.on {
    color: var(--otp-forest);
    font-weight: 600;
}

/* ── Form controls ────────────────────────────────────────────────────────────── */

.otp-wizard .control-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--otp-forest);
}

.otp-wizard .control-label .req {
    color: var(--otp-amber);
    font-style: normal;
}

.otp-wizard .form-control {
    border: 1px solid var(--otp-sandstone-deep);
    border-radius: 10px;
    background: #FDFCF9;
}

.otp-wizard .form-control:focus {
    border-color: var(--otp-forest-mid);
    box-shadow: 0 0 0 0.2rem var(--otp-accent-soft);
    background: #fff;
}

.otp-wizard input[type="checkbox"] {
    accent-color: var(--otp-forest);
}

/* ── Step panels ──────────────────────────────────────────────────────────────── */

.otp-wizard__step {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 280ms ease, transform 280ms ease;
}

.otp-wizard__step--active {
    opacity: 1;
    transform: translateY(0);
}

.otp-wizard__step[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .otp-wizard__step,
    .otp-wizard__ridge-live {
        transition-duration: 0.01ms !important;
    }
}

/* ── Alerts / inline field errors ─────────────────────────────────────────────── */

.otp-wizard__alert {
    display: none;
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.otp-wizard__alert--visible {
    display: block;
}

.otp-wizard__alert--error {
    background: #fdecea;
    color: var(--otp-danger);
}

.otp-wizard__field-error {
    display: block;
    min-height: 1.1em;
    color: var(--otp-danger);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.otp-wizard__hint {
    display: block;
    color: var(--otp-ink-soft);
    margin-top: 0.25rem;
}

/* ── Buttons with inline spinner ──────────────────────────────────────────────── */

/* The theme's own .btn > span rule (misc_buttons.css) absolutely-positions and hides
   every direct <span> child of a .btn — it's a decorative hover-fill overlay meant for
   one *empty* <span></span> per button (see the plain-text-label pattern already used
   by RegisterPage/LoginPage's own buttons). Our buttons carry two more spans that ARE
   real content (the spinner + the label) and must not be swallowed by that rule, so
   this re-asserts normal, visible, in-flow rendering for those two specifically —
   higher specificity (2 classes) than the theme's `.btn > span` (1 class + 1 type),
   so it wins without needing !important. The plain `<span></span>` still gets the
   theme's hover-fill effect untouched, matching every other button on the site.
   Without this override the button visually collapses to just its padding, with the
   "Send OTP" label present in the DOM but invisible — see git history / PR discussion
   if this regresses again. */
.otp-wizard__btn > .otp-wizard__spinner,
.otp-wizard__btn > .otp-wizard__btn-label {
    position: static;
    opacity: 1;
    z-index: auto;
}

.otp-wizard__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 10px;
    /* !important: Bootstrap's .btn-primary carries the same specificity (one class) and
       sets its own background/border-color, so a plain override here would win or lose
       purely by chance of stylesheet load order. Matches this theme's own convention of
       using !important to override generic .btn variants (see .underline-buttons .btn
       in uSkinned/modules/misc/misc_buttons.css). */
    background-color: var(--otp-forest) !important;
    border-color: var(--otp-forest) !important;
}

.otp-wizard__btn:not(:disabled):hover,
.otp-wizard__btn:not(:disabled):focus {
    background-color: var(--otp-forest-mid) !important;
}

.otp-wizard__btn:disabled {
    background-color: #B9C4BC !important;
    border-color: #B9C4BC !important;
    cursor: not-allowed;
}

.otp-wizard__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: otp-wizard-spin 700ms linear infinite;
}

.otp-wizard__btn.is-busy .otp-wizard__spinner {
    display: inline-block;
}

@keyframes otp-wizard-spin {
    to { transform: rotate(360deg); }
}

.otp-wizard__link {
    background: none;
    border: 1px solid var(--otp-sandstone-deep);
    border-radius: 10px;
    padding: 0.55rem 1rem;
    color: var(--otp-forest);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
}

.otp-wizard__link:hover:not(:disabled) {
    background: var(--otp-forest-soft);
}

.otp-wizard__link:disabled {
    color: #9ca3af;
    cursor: not-allowed;
}

/* ── Step 2: phone row + expiry ───────────────────────────────────────────────── */

.otp-wizard__phone-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--otp-forest-soft);
    border-left: 3px solid var(--otp-gold);
    border-radius: 0 10px 10px 0;
    padding: 0.75rem 0.95rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.otp-wizard__phone-row strong {
    color: var(--otp-forest);
}

.otp-wizard__expiry {
    text-align: center;
    font-size: 0.85rem;
    color: var(--otp-ink-soft);
    margin-bottom: 0.75rem;
}

.otp-wizard__expiry strong {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--otp-amber);
}

.otp-wizard__expiry--expired strong {
    color: var(--otp-danger);
}

/* ── OTP digit boxes ──────────────────────────────────────────────────────────── */

.otp-wizard__otp-boxes {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.otp-wizard__otp-box {
    width: 46px;
    height: 54px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--otp-forest);
    border: 1px solid var(--otp-sandstone-deep);
    border-radius: 10px;
    background: #FDFCF9;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.otp-wizard__otp-box:focus {
    outline: none;
    border-color: var(--otp-forest-mid);
    box-shadow: 0 0 0 0.2rem var(--otp-accent-soft);
    background: #fff;
}

.otp-wizard__otp-box.otp-wizard__otp-box--filled {
    border-color: var(--otp-gold);
    background: #FFFDF5;
}

.otp-wizard__otp-box:disabled {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
}

.otp-wizard__otp-boxes--shake {
    animation: otp-wizard-shake 400ms ease;
}

@keyframes otp-wizard-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

.otp-wizard__otp-status {
    text-align: center;
    min-height: 1.1em;
    font-size: 0.85rem;
    color: var(--otp-ink-soft);
    margin-bottom: 0.75rem;
}

.otp-wizard__resend {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ── Locked / unlocked detail fields ──────────────────────────────────────────── */

.otp-wizard__locked-fields {
    border-top: 1px dashed var(--otp-sandstone-deep);
    padding-top: 1.25rem;
}

.otp-wizard__lock-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f9fafb;
    color: var(--otp-ink-soft);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.otp-wizard__lock-icon {
    flex: none;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.otp-wizard__locked-fields input:disabled {
    background: #f3f4f6;
    color: #9ca3af;
}

.otp-wizard__locked-fields:not(.otp-wizard__locked-fields--unlocked) .form-group {
    opacity: 0.75;
}

.otp-wizard__locked-fields--unlocked .form-group {
    opacity: 1;
    transition: opacity 320ms ease;
}

/* ── Section divider ("About you" / "Set a password") ─────────────────────────── */

.otp-wizard__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--otp-ink-soft);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 1.6rem 0 1.1rem;
}

.otp-wizard__divider::before,
.otp-wizard__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--otp-sandstone-deep);
}

/* ── Password: show/hide toggle + strength meter ──────────────────────────────── */

.otp-wizard__pw-wrap {
    position: relative;
}

.otp-wizard__pw-wrap .form-control {
    padding-right: 3.2rem;
}

.otp-wizard__pw-toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--otp-ink-soft);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
}

.otp-wizard__pw-toggle:hover {
    color: var(--otp-forest);
    background: var(--otp-forest-soft);
}

.otp-wizard__pw-toggle:disabled {
    color: #9ca3af;
    cursor: not-allowed;
}

.otp-wizard__pw-meter {
    display: flex;
    gap: 5px;
    margin-top: 0.5rem;
}

.otp-wizard__pw-meter i {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--otp-sandstone-deep);
    transition: background 0.25s ease;
    font-style: normal;
}

.otp-wizard__pw-meter i.otp-wizard__pw-meter--weak { background: #C25B3A; }
.otp-wizard__pw-meter i.otp-wizard__pw-meter--ok { background: var(--otp-gold); }
.otp-wizard__pw-meter i.otp-wizard__pw-meter--strong { background: var(--otp-forest-mid); }

/* ── Step 3: success ───────────────────────────────────────────────────────────── */

.otp-wizard__step--success {
    text-align: center;
    padding: 1.5rem 0 0.5rem;
}

.otp-wizard__success-icon {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--otp-forest-soft);
    margin: 0 auto 1rem;
    animation: otp-wizard-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.otp-wizard__step--success h2 {
    font-family: 'Marcellus', Georgia, serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--otp-ink);
    margin-bottom: 0.4rem;
}

.otp-wizard__step--success p {
    color: var(--otp-ink-soft);
}

@keyframes otp-wizard-pop {
    0% { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Footer link below the card ───────────────────────────────────────────────── */

.otp-wizard-foot {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.86rem;
    color: var(--otp-ink-soft);
}

.otp-wizard-foot a {
    color: var(--otp-forest);
    font-weight: 600;
}

/* ── Small screens ─────────────────────────────────────────────────────────────── */

@media (max-width: 380px) {
    .otp-wizard {
        padding: 1.5rem 1.15rem 1.25rem;
        border-radius: 16px;
    }

    .otp-wizard__otp-box {
        width: 40px;
        height: 48px;
        font-size: 1.15rem;
    }
}