/* ==========================================================================
   Accessibility overrides (WCAG 2.2 AA) — merchant onboarding
   Load AFTER custom.css. Adds no colour, size or layout changes for
   mouse/touch users; the focus ring only appears for keyboard focus.
   ========================================================================== */

/* 2.4.7 Focus Visible — custom.css removes all outlines (`:focus { outline: 0 !important }`) */
:focus-visible,
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.otpinput:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible,
.select2-container .select2-selection:focus-visible {
    outline: 2px solid #0068A7 !important;
    outline-offset: 2px !important;
}

/* Upload boxes clip overflow, so draw the ring inside the link */
.box a:focus-visible {
    outline-offset: -2px !important;
}

/* Programmatic focus targets (skip-link target, Bootstrap .modal, dialogs) should not show a ring */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: 0 !important;
}

/* flatpickr days are tabindex="-1" (excluded above); show a ring when keyboard moves focus between days */
.flatpickr-day:focus {
    outline: 2px solid #0068A7 !important;
    outline-offset: -2px !important;
}

/* 1.4.13 / 2.1.1 — info tooltips open on keyboard focus as they do on hover (custom.css .infodiv:hover) */
.infodiv:focus-within .infodata {
    display: flex;
    align-items: center;
}
.infodiv.a11y-dismissed .infodata {
    display: none;
}

/* 2.4.1 Bypass Blocks — skip link, hidden until focused (Bootstrap .visually-hidden-focusable) */
.a11y-skip-link:focus,
.a11y-skip-link:focus-within {
    position: fixed !important;
    top: 8px;
    left: 8px;
    z-index: 100000;
    padding: 8px 16px;
    background: #0068A7;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none;
}

/* 2.3.3 / user preference — reduce motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   1.4.3 Contrast (Minimum) — darkened text colours (approved).
   Same hue, nearest shade that reaches 4.5:1 on white and #f8fafc cards.
   !important because login.css / signup-flow.css load after this file.
   ========================================================================== */

/* #A4A4A4 (2.49:1) -> #707070 */
.text-body-tertiary,
.h3titlegreay,
.input-group .inr-icon,
.upload-card .upload-info .sub,
.stepth .stepnum,
.otptime {
    color: #707070 !important;
}

/* separate rules: an unknown vendor pseudo-element would invalidate a combined selector list */
.form-control::placeholder {
    color: #707070 !important;
}
.form-control::-webkit-input-placeholder {
    color: #707070 !important;
}
.form-control::-moz-placeholder {
    color: #707070 !important;
}

/* select2 placeholder #999 (2.82:1) -> #717171 */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #717171 !important;
}

/* Errors and required marker #FF5E5E (2.99:1) -> #C14747 */
.errormsg:not(.text-success),
.asterisk {
    color: #C14747 !important;
}

/* Status messages */
.errmsg.fail,
.errmsgbox.fail {
    color: #D6312B !important;     /* was #EE3730 (4.02:1) */
}
.errmsg.success,
.errmsgbox.success {
    color: #0B834B !important;     /* was #0E9B59 (3.59:1) */
}

/* "Done" badge: white on #2DB573 (2.63:1) -> white on #1E8050 (4.93:1) */
.accordion-button .text-bg-success {
    background-color: #1E8050 !important;
}

/* EEFC helper text: inline color:darkgray #A9A9A9 on #F3F7FA (2.18:1) -> #6B6B6B (4.95:1) */
#a11y-bank-eefc-desc,
#a11y-pbank-eefc-desc {
    color: #6B6B6B !important;
}

/* Signup flow muted text */
.signup-flow-footer-note {
    color: #70707F !important;     /* was #8B8B9D */
}
.signup-success-reference {
    color: #70707E !important;     /* was #9A9AAD */
}

/* 1.4.1 Use of Color — links inside sentences need more than colour (approved) */
.form-check-label a,
a.modallink,
p a.link-primary {
    text-decoration: underline !important;
}

/* ==========================================================================
   1.4.10 Reflow — phones (<= 575px, incl. 320px "Display Zoom"). Desktop unchanged.
   ========================================================================== */
@media (max-width: 575.98px) {
    /* six OTP boxes (role=group; not the single-field signup OTP) always on one row */
    .otpingroup[role="group"] {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
    }
    .otpingroup[role="group"] .otpinput {
        flex: 0 1 40px;
        min-width: 28px;
    }
    /* popups: let "no-wrap" text wrap and use smaller padding so content fits */
    .modal-body .text-nowrap {
        white-space: normal !important;
    }
    .modal-body.p-5 {
        padding: 1.5rem !important;
    }
}