/* ------------------------------------------------------------------
   Accessibility (high contrast) toggle button.

   The same rules exist in style.css, which most eKYC screens load. They
   are repeated here, with identical values, so the button also looks
   right on the screens that do not load style.css - error, success and
   payment pages among them. Keep the two copies in step.
   ------------------------------------------------------------------ */
.a11y-toggle-btn{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #007a5c;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 1000;
}

.a11y-toggle-btn:hover{
    background: #00543f;
}

.a11y-toggle-btn:focus-visible{
    outline: 3px solid #000;
    outline-offset: 2px;
}

.a11y-toggle-btn[aria-pressed="true"]{
    background: #000;
}

html.high-contrast .a11y-toggle-btn{
    background: #000;
    outline: 2px solid #fff;
}

/* ============================================================
   HIGH CONTRAST - the rest of the eKYC journey.

   The rules above only match .introMain / .cardBox, which is the
   markup of the mobile number and OTP screens. Every later screen
   (PAN, DigiLocker, personal details, bank, signature, IPV, e-sign,
   success) uses a different shell, so switching high contrast on
   there set the class but changed almost nothing on screen.

   These rules are written against elements rather than one screen's
   containers, so they apply across the journey. Each selector repeats
   html.high-contrast on purpose - a comma separated list does not
   inherit the scope from the line above it.
   ============================================================ */

/* page and panel backgrounds: plain white, no decorative artwork.

   .logoPanel is deliberately NOT in this list. It sits on top of the green
   strip drawn by .kycMain::before, so giving it a white background punched
   a white notch out of that strip. It carries no background of its own and
   does not need one. */
html.high-contrast .kycMain,
html.high-contrast .leftPanel,
html.high-contrast .rightPanel,
html.high-contrast .auth-body,
html.high-contrast .status-body{
    background-image: none !important;
    background-color: #fff !important;
}

/* .kycMain draws two decorative strips as pseudo elements: a solid green
   bar down the left (::before) and a pale green tint down the right
   (::after, rgba(0,179,134,.1) - about 1.1:1). Setting a background on
   .kycMain does not touch either of them.

   The pale right strip is dropped in high contrast: it is decoration only
   and reads as a stray smudge against the white. The left bar is left
   alone - it is solid branding, not a low contrast tint. */
html.high-contrast .kycMain::after{
    display: none !important;
}

/* text */
html.high-contrast h2,
html.high-contrast h3,
html.high-contrast h4,
html.high-contrast h5,
html.high-contrast h6,
html.high-contrast p,
html.high-contrast span,
html.high-contrast label,
html.high-contrast li,
html.high-contrast td,
html.high-contrast th,
html.high-contrast strong,
html.high-contrast b,
html.high-contrast .form-label,
html.high-contrast .form-check-label{
    color: #000 !important;
}

/* the toggle keeps its white icon on black */
html.high-contrast .a11y-toggle-btn,
html.high-contrast .a11y-toggle-btn i,
html.high-contrast .a11y-toggle-btn span{
    color: #fff !important;
}

/* form fields */
html.high-contrast input,
html.high-contrast select,
html.high-contrast textarea,
html.high-contrast .form-control,
html.high-contrast .form-select{
    border: 2px solid #000 !important;
    color: #000 !important;
    background-color: #fff !important;
}

html.high-contrast input::placeholder,
html.high-contrast textarea::placeholder{
    color: #333 !important;
}

/* checkboxes and radios need a visible edge of their own */
html.high-contrast .form-check-input{
    border: 2px solid #000 !important;
}

html.high-contrast .form-check-input:checked{
    background-color: #000 !important;
    border-color: #000 !important;
}

/* buttons - the toggle is excluded, it has its own rule above */
html.high-contrast .btn,
html.high-contrast button[type="submit"]{
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

html.high-contrast .btn:disabled,
html.high-contrast button[type="submit"]:disabled{
    background: #4a4a4a !important;
    border-color: #4a4a4a !important;
    color: #fff !important;
}

/* links are underlined so they are not identified by colour alone */
html.high-contrast a{
    color: #000 !important;
    text-decoration: underline !important;
}

/* cards and boxes get a visible edge instead of a soft shadow */
html.high-contrast .card,
html.high-contrast .cardBox,
html.high-contrast .status-card{
    box-shadow: none !important;
    border: 2px solid #000 !important;
    background-color: #fff !important;
}

/* keyboard focus must stay obvious against the black on white */
html.high-contrast a:focus-visible,
html.high-contrast button:focus-visible,
html.high-contrast input:focus-visible,
html.high-contrast select:focus-visible,
html.high-contrast textarea:focus-visible,
html.high-contrast .ico-calendar:focus-visible,
html.high-contrast .cross-button:focus-visible,
html.high-contrast #ui-datepicker-div a:focus-visible,
html.high-contrast #ui-datepicker-div select:focus-visible,
html.high-contrast [tabindex="0"]:focus-visible{
    outline: 3px solid #000 !important;
    outline-offset: 2px !important;
}

/* ------------------------------------------------------------------
   "Go Back" removed from the eKYC screens.

   visibility:hidden rather than display:none on purpose: the link sat in
   the .logoPanel flex row with margin-right:40px, so removing its box
   would pull the logo left. Hidden this way it still occupies exactly the
   space it did, and the logo stays where it was.

   It is also out of the tab order and out of the accessibility tree
   (tabindex="-1" and aria-hidden on the element), so nobody can reach it.
   ------------------------------------------------------------------ */
.ekyc-back-removed{
    visibility: hidden;
}

/* ------------------------------------------------------------------
   Progress steps (KYC Details, Personal Details, ...) - WCAG 1.4.3.

   Normally the list is #525355 at opacity .7, which renders as #868788
   against white = 3.6:1, and the active step is #00b386 = 2.7:1. Both
   are under the 4.5:1 minimum, which is what the audit measured.

   In high contrast the steps go to full strength black (21:1) and the
   active one to #007a5c (5.3:1) - the darker brand green already used
   for the accessibility button, so the active step stays recognisable
   rather than looking the same as the rest.

   Both the li and an a inside it are listed: most screens put the label
   straight in the li, but bank.html wraps it in a link, and the generic
   "links are black" rule above would otherwise win there.
   ------------------------------------------------------------------ */
html.high-contrast .kycContent .leftPanel ul li,
html.high-contrast .kycContent .leftPanel ul li a{
    color: #000 !important;
    opacity: 1 !important;
}

/* Only one step ("Bank Verification") wraps its text in an <a>, so the
   generic "links are underlined" rule above singled it out with an
   underline the other steps do not have. The steps are a progress list,
   not body copy, and nothing here is distinguished by colour alone, so
   the underline is dropped and they all read the same. */
html.high-contrast .kycContent .leftPanel ul li a{
    text-decoration: none !important;
}

html.high-contrast .kycContent .leftPanel ul li.active,
html.high-contrast .kycContent .leftPanel ul li.active a{
    color: #007a5c !important;
}

/* the ring around the active step's icon, and the connector line between
   completed steps, are the same failing green - 1.4.11 wants 3:1 for
   these too, so they move to the darker green as well */
html.high-contrast .kycContent .leftPanel ul li.active img{
    border-color: #007a5c !important;
}

html.high-contrast .kycContent .leftPanel ul li.complete::before{
    background: #007a5c !important;
}

/* ------------------------------------------------------------------
   Gaps found when sweeping for the same failing colours the audit named
   ("same issue is applicable for same color").

   h1 is #00b386 (2.7:1) and inline icons are too. They were covered by
   style.css, but seven eKYC screens do not load it, so they are repeated
   here where every screen gets them.

   Link states matter separately: .dropdown-content a:hover sets #00b386
   and, as a class plus a pseudo-class, outranks the plain "a" rule above,
   so the Logout menu turned green on hover. Hover, focus and active are
   named explicitly to win that.
   ------------------------------------------------------------------ */
html.high-contrast h1,
html.high-contrast i,
html.high-contrast small,
html.high-contrast button,
html.high-contrast legend,
html.high-contrast option,
html.high-contrast dt,
html.high-contrast dd{
    color: #000 !important;
}

html.high-contrast a:hover,
html.high-contrast a:focus,
html.high-contrast a:active,
html.high-contrast .dropdown-content a:hover{
    color: #000 !important;
}

/* ------------------------------------------------------------------
   Field labels on the PAN screen (WCAG 1.3.1 / 3.3.2).

   The fields previously had only a placeholder, which disappears as soon
   as the client types and is not a label at all as far as a screen reader
   is concerned. Each field now has a real <label for="..."> tied to its
   id, so it is announced whatever the toggle is set to.

   The label is always off screen - never shown, in either mode - so the
   form looks exactly as it is designed. It is still in the accessibility
   tree and still tied to its field, so screen readers announce it.

   The text matches the placeholder word for word, so what is shown and
   what is announced are the same (WCAG 2.5.3 Label in Name).

   Do not give this class a visible state: making the labels visible
   pushes every field down and drives the Continue button off screen.
   ------------------------------------------------------------------ */
.a11y-field-label{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------
   Focus indicator on buttons (WCAG 1.4.11 / 2.4.11) - always on, not
   only in high contrast.

   Bootstrap's default is
       box-shadow: 0 0 0 .25rem rgba(60,153,110,.5)
   which blends to #9ECCB6 over white: 1.78:1, under the 3:1 minimum and
   exactly what the audit measured on "Verify Email". The same default
   applies to every button in the journey (Continue, Verify OTP, ...),
   so the fix is applied to .btn rather than that one button.

   Replaced with a solid outline in the darker brand green, 5.3:1 on
   white. !important is needed because Bootstrap re-applies the shadow
   through higher specificity selectors such as .btn-success:active:focus.

   :focus-visible, so the ring shows for keyboard focus and not on a
   mouse click. In high contrast the rule further up turns it black.
   ------------------------------------------------------------------ */
.btn:focus,
.btn:focus-visible{
    box-shadow: none !important;
}

.btn:focus-visible{
    outline: 3px solid #007a5c;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Focus indicator for the Select2 dropdowns (WCAG 2.1.1 / 2.4.11) -
   always on, not only in high contrast.

   Marital Status, Annual Income, Occupation and Trading Experience are
   native <select> elements enhanced by Select2, which hides the real
   control and renders its own. Select2 gives that rendered control
   tabindex="0", so it can be reached and opened from the keyboard - but
   its default theme ships no :focus rule at all (only the unused
   "classic" theme has one), so nothing happens on screen when it is
   focused. That is what reads as "not keyboard accessible".

   select2-container--open is included so the ring stays while the list
   is showing, and --focus covers the multi-select form.
   ------------------------------------------------------------------ */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus,
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection{
    outline: 3px solid #007a5c !important;
    outline-offset: 2px;
}

/* the option highlighted with the arrow keys needs to be obvious too */
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color: #007a5c !important;
    color: #fff !important;
}

html.high-contrast .select2-container--default .select2-selection--single:focus,
html.high-contrast .select2-container--default.select2-container--focus .select2-selection,
html.high-contrast .select2-container--default.select2-container--open .select2-selection{
    outline: 3px solid #000 !important;
}

html.high-contrast .select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color: #000 !important;
    color: #fff !important;
}

/* ------------------------------------------------------------------
   Focus indicator on the dialog close (x) - always on.

   Bootstrap's .btn-close:focus is
       outline: 0; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25)
   which blends to #C2DBFE over white: 1.41:1, under the 3:1 minimum and
   exactly what the audit measured. Note it also sets outline:0, so there
   is nothing else to see.

   Same treatment as the other buttons: solid outline, 5.3:1 on white,
   black in high contrast via the rule further up.
   ------------------------------------------------------------------ */
.btn-close:focus,
.btn-close:focus-visible{
    box-shadow: none !important;
}

.btn-close:focus-visible{
    outline: 3px solid #007a5c !important;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Focus indicator on radios and checkboxes (WCAG 2.4.7) - always on.

   Two separate problems:
     - userdetail3.css has
           .form-check-input:focus { outline: none !important; box-shadow: none }
       so the Yes/No radios on the derivatives screen showed nothing at all
       when focused.
     - everywhere else Bootstrap's default applies,
           box-shadow: 0 0 0 .25rem rgba(13,110,253,.25)
       which blends to #C2DBFE over white: 1.4:1, under the 3:1 minimum.

   Both are replaced with a solid outline, 5.3:1 on white. !important and
   source order are both needed to beat the "outline: none !important"
   above - this file is loaded at the end of the body, after it.
   ------------------------------------------------------------------ */
.form-check-input:focus,
.form-check-input:focus-visible{
    box-shadow: none !important;
}

.form-check-input:focus-visible{
    outline: 3px solid #007a5c !important;
    outline-offset: 2px !important;
}

html.high-contrast .form-check-input:focus-visible{
    outline: 3px solid #000 !important;
}

/* ------------------------------------------------------------------
   "Sign using the finger or stylus" becomes an <h2> in high contrast.

   Its class fixes width:245px and height:19px. A <span> is inline and
   ignores both; an <h2> is block and would honour them, which can clip
   the text. Released here so the heading sizes to its content. Font,
   margin and colour still come from the class, so it looks the same.
   ------------------------------------------------------------------ */
html.high-contrast .Sign-using-the-finger-or-stylus{
    width: auto !important;
    height: auto !important;
}

/* ------------------------------------------------------------------
   Keyboard access to "Upload" (WCAG 2.1.1) - always on.

   The control is a <label class="takeaphoto"> wrapping a file input, and
   style.css has
       .dropImage input[type="file"] { display: none }
   display:none takes an element out of the tab order altogether, so the
   input could never be focused and the label has no tab stop of its own -
   Upload was unreachable by keyboard.

   The input is hidden visually instead of removed, so it keeps its native
   tab stop and its native Enter/Space behaviour (both open the file
   picker). No script needed. The wrapping label supplies its name, so it
   announces as "Upload, file upload button".

   The ring is drawn on the label with :focus-within, because the input
   itself is invisible.
   ------------------------------------------------------------------ */
.dropImage input[type="file"]{
    display: block !important;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.takeaphoto:focus-within{
    outline: 3px solid #007a5c;
    outline-offset: 2px;
    border-radius: 4px;
}

html.high-contrast .takeaphoto:focus-within{
    outline-color: #000;
}

/* ------------------------------------------------------------------
   Field labels on the e-sign page that were marked up as <h6>.

   They are turned into plain divs in high contrast so they stop being
   announced as level 6 headings. Their styling came from
       .readonlyBox h6 { font-size:12px; color:#999; opacity:.9 }
   plus h6 defaults, all of which stop matching once the tag changes -
   so the same values are repeated here against the class instead, and
   the labels look identical either way.
   ------------------------------------------------------------------ */
.a11y-readonly-label{
    font-size: 12px;
    font-weight: 600;
    color: #999;
    opacity: 0.9;
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

/* #999 is 2.85:1 on white - black while high contrast is on */
html.high-contrast .a11y-readonly-label{
    color: #000 !important;
    opacity: 1 !important;
}