:root {
    --iz-a11y-focus: #005fcc;
    --iz-a11y-text: #262626;
    --iz-a11y-muted: #595959;
    --a11y-hl-color: #ffe600;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    color: var(--iz-a11y-text);
    line-height: 1.55;
}

p,
li,
td,
th,
label,
input,
select,
textarea,
button,
a {
    line-height: 1.5;
}

img,
svg,
canvas {
    max-width: 100%;
}

button,
.btn,
.nav-link,
.dropdown-item {
    min-height: 44px;
    white-space: normal;
}

/* The 44px minimum tap target above leaves a button's inline-block label pinned
   to the top with empty space beneath it (clearly visible on the header Login /
   Open an Account buttons). Centre the label vertically and horizontally so the
   button looks balanced. */
.btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    vertical-align: middle;
}

/* Same 44px-tap-target fix for dropdown menu items (e.g. the EKYC / MF 2.0
   items under "Open an Account"); keep them left-aligned, just centre
   vertically. */
.dropdown-item {
    align-items: center;
    display: flex;
}

/* And for navbar links — most visible on the mobile menu, where the 44px
   min-height would otherwise top-align the label. Kept left-aligned; the
   ".menudropdown-toggle" caret stays inline next to the text. */
.nav-link {
    align-items: center;
    display: flex;
}

a[href]:not(.btn):not(.navbar-brand):not(.nav-link):not(.dropdown-item) {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.08em;
}

.link-orange {
    color: #b34400;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.link-orange:hover,
.link-orange:focus {
    color: #7a2f00;
    text-decoration-thickness: 0.12em;
}

:where(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible {
    outline: 3px solid var(--iz-a11y-focus) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px #fff !important;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: 0.75rem;
    z-index: 100000;
    transform: translateY(-150%);
    background: #fff;
    border: 2px solid var(--iz-a11y-focus);
    border-radius: 4px;
    color: var(--iz-a11y-focus);
    font-weight: 700;
    padding: 0.65rem 1rem;
    transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
}

.sr-only,
.visually-hidden:not(:focus):not(:active),
.a11y-live-region {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.login-container {
    width: min(400px, calc(100vw - 2rem));
    margin: clamp(1rem, 8vh, 5rem) auto;
    border-radius: 12px;
}

.login-container img {
    height: auto;
    max-width: 230px;
}

.login-container .form-label {
    color: var(--iz-a11y-text);
    font-weight: 600;
    text-align: left;
    width: 100%;
}

.login-container .input-group-text {
    background: #f7f4fb;
    border-color: #8d7aa8;
    color: #493276;
}

.login-container .input-group-text .bi,
.login-container .input-group-text i {
    color: #493276;
}

.password-toggle {
    border: 1px solid #8d7aa8;
    border-left: 0;
    border-radius: 0 12px 12px 0;
}

.btn-purple:focus-visible,
.btn-purple:hover {
    color: #fff;
}

.text-light-gray,
.main-heading p,
.text-main,
.investment-percentage {
    color: var(--iz-a11y-muted) !important;
}

.text-Subtext {
    color: #4a4a4a !important;
}

.text-danger {
    color: #b00020 !important;
}

.text-success {
    color: #176b35 !important;
}

.icon-action-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.35rem;
}

.icon-action-button img {
    display: block;
}

.table-responsive,
.div-overflow,
.tab-content {
    overflow-wrap: anywhere;
}

.modal[aria-hidden="true"]:not(.show) {
    display: none;
}

.a11y-status-message {
    color: var(--iz-a11y-text);
    font-weight: 600;
    margin: 0.5rem 0;
}

@media (max-width: 360px), (max-height: 400px) {
    body {
        min-width: 320px;
    }

    .login-container {
        margin: 1rem auto;
        padding: 1rem;
    }

    .login-container .input-group {
        flex-wrap: wrap;
    }

    .login-container .input-group > .form-control,
    .login-container .input-group > .form-select,
    .login-container .input-group > .input-group-text,
    .login-container .input-group > .password-toggle {
        border-radius: 10px !important;
        flex: 1 1 100%;
        margin-top: 0.35rem;
        max-width: 100% !important;
    }
}

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

/* ===================== Accessibility toolbar ===================== */
.a11y-toggle {
    align-items: center;
    background: #d3633d;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.4rem;
    height: 44px;
    justify-content: center;
    margin: 0 0.5rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    width: 44px;
}

.a11y-toggle:hover,
.a11y-toggle:focus-visible {
    background: #2f1f52;
    color: #fff;
}

/* Floating variant injected on pages that do not render through _Layout */
.a11y-toggle-floating {
    bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-size: 1.6rem;
    left: 1rem;
    position: fixed;
    z-index: 100045;
}

.a11y-overlay {
    background: rgba(0, 0, 0, 0.4);
    inset: 0;
    position: fixed;
    z-index: 100040;
}

.a11y-panel {
    background: #fff;
    border-right: 1px solid #d0d0d0;
    bottom: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
    color: #1f1f1f;
    display: flex;
    flex-direction: column;
    font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    left: 0;
    max-width: 92vw;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    width: 340px;
    z-index: 100050;
}

.a11y-panel.open {
    transform: translateX(0);
}

.a11y-panel-header {
    align-items: center;
    background: #493276;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.a11y-panel-title {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 1.15rem;
    font-weight: 600;
    gap: 0.5rem;
    margin: 0;
}

.a11y-panel-close {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
}

.a11y-panel-body {
    padding: 0.5rem 1.25rem 1.25rem;
}

.a11y-group {
    border-bottom: 1px solid #ececec;
    padding: 1rem 0;
}

.a11y-group:last-child {
    border-bottom: 0;
}

.a11y-group-label {
    align-items: center;
    color: #2f1f52;
    display: flex;
    font-weight: 600;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.a11y-group-label .bi {
    color: #493276;
    font-size: 1.1rem;
}

.a11y-reset .bi {
    margin-right: 0.4rem;
}

.a11y-btn-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.a11y-btn {
    background: #f1edf7;
    border: 1px solid #c7bcdd;
    border-radius: 6px;
    color: #2f1f52;
    cursor: pointer;
    font-weight: 600;
    min-height: 44px;
    padding: 0.4rem 0.8rem;
}

.a11y-btn:hover,
.a11y-btn:focus-visible {
    background: #e3dbf2;
}

.a11y-btn-wide {
    width: 100%;
}

.a11y-value {
    font-weight: 700;
    min-width: 3.2rem;
    text-align: center;
}

.a11y-option {
    align-items: center;
    background: #f7f5fb;
    border: 1px solid #d8cfe9;
    border-radius: 8px;
    color: #1f1f1f;
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.6rem 0.9rem;
    width: 100%;
}

.a11y-option .bi {
    font-size: 1.2rem;
}

.a11y-option[aria-pressed="true"] {
    background: #493276;
    border-color: #493276;
    color: #fff;
}

.a11y-option:hover,
.a11y-option:focus-visible {
    border-color: #493276;
}

/* On/Off state pill so each feature clearly shows it can be enabled or disabled */
.a11y-option::after {
    border: 1px solid currentColor;
    border-radius: 999px;
    content: "Off";
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: auto;
    padding: 0.05rem 0.55rem;
}

.a11y-option[aria-pressed="true"]::after {
    content: "On";
}

/* Reset / turn-off-all button */
.a11y-reset {
    background: #fff;
    border-color: #b00020;
    color: #b00020;
    font-weight: 700;
}

.a11y-reset:hover,
.a11y-reset:focus-visible {
    background: #b00020;
    color: #fff;
}

.a11y-select {
    border: 1px solid #c7bcdd;
    border-radius: 6px;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
    width: 100%;
}

.a11y-hint {
    color: #595959;
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}

.a11y-translate-hidden {
    height: 0;
    overflow: hidden;
}

/* Hide Google Translate's injected banner/gadget chrome (translation is driven via cookie) */
.goog-te-banner-frame,
.goog-te-gadget,
.skiptranslate iframe {
    display: none !important;
}

body {
    top: 0 !important;
}

@media (max-width: 480px) {
    .a11y-panel {
        max-width: 100%;
        width: 100%;
    }
}

/* Disable animations toggle */
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
}

/* High contrast and colour-blind simulation are applied to body.style.filter in
   accessibility.js so they can be composed together. */

/* Dark mode toggle (root invert, with media and the toolbar re-inverted) */
html.a11y-theme-dark {
    background: #ffffff;
    filter: invert(1) hue-rotate(180deg);
}

html.a11y-theme-dark img,
html.a11y-theme-dark video,
html.a11y-theme-dark picture,
html.a11y-theme-dark svg,
html.a11y-theme-dark iframe,
html.a11y-theme-dark [style*="background-image"],
html.a11y-theme-dark .a11y-panel,
html.a11y-theme-dark .a11y-toggle,
html.a11y-theme-dark .a11y-overlay {
    filter: invert(1) hue-rotate(180deg);
}

/* ===================== Additional accessibility profiles ===================== */

/* Large cursor */
html.a11y-cursor-big,
html.a11y-cursor-big * {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M6%202L6%2026L12%2020L16%2030L21%2028L17%2018L26%2018Z'%20fill='white'%20stroke='black'%20stroke-width='1.5'/%3E%3C/svg%3E") 6 2, auto !important;
}

/* Highlight headings */
html.a11y-highlight-headings h1,
html.a11y-highlight-headings h2,
html.a11y-highlight-headings h3,
html.a11y-highlight-headings h4,
html.a11y-highlight-headings h5,
html.a11y-highlight-headings h6 {
    background-color: var(--a11y-hl-color) !important;
    color: #1a1a1a !important;
    box-shadow: 0 0 0 2px var(--a11y-hl-color) !important;
}

/* Highlight text: paint body text with the chosen highlight colour (shares
   --a11y-hl-color with Highlight headings). */
html.a11y-highlight-text p,
html.a11y-highlight-text li,
html.a11y-highlight-text dd,
html.a11y-highlight-text dt,
html.a11y-highlight-text td,
html.a11y-highlight-text th,
html.a11y-highlight-text blockquote,
html.a11y-highlight-text label,
html.a11y-highlight-text a:not(.btn):not(.a11y-option) {
    background-color: var(--a11y-hl-color) !important;
    color: #1a1a1a !important;
}

/* Hide images */
html.a11y-hide-images img,
html.a11y-hide-images picture {
    visibility: hidden !important;
}

/* Show alt text labels (inserted next to each image by JS) */
.a11y-alt-label {
    background: #fff3cd;
    border: 1px solid #d9c77a;
    border-radius: 4px;
    color: #222;
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    margin: 0.15rem;
    padding: 0.1rem 0.4rem;
    vertical-align: middle;
}

/* Enlarge buttons (toolbar's own controls excluded) */
html.a11y-big-buttons button:not([class*="a11y"]):not(.navbar-toggler),
html.a11y-big-buttons .btn:not([class*="a11y"]),
html.a11y-big-buttons [role="button"]:not([class*="a11y"]),
html.a11y-big-buttons input[type="submit"],
html.a11y-big-buttons input[type="button"] {
    font-size: 1.15em !important;
    min-height: 48px !important;
    padding: 0.6em 1em !important;
}

/* Readable line / letter / word spacing */
html.a11y-text-spacing p,
html.a11y-text-spacing li,
html.a11y-text-spacing td,
html.a11y-text-spacing th,
html.a11y-text-spacing dd,
html.a11y-text-spacing dt,
html.a11y-text-spacing a,
html.a11y-text-spacing label,
html.a11y-text-spacing span:not(.bi):not([class*="icon"]) {
    letter-spacing: 0.12em !important;
    line-height: 2 !important;
    word-spacing: 0.16em !important;
}

/* Enhanced focus visibility */
html.a11y-strong-focus a:focus,
html.a11y-strong-focus button:focus,
html.a11y-strong-focus input:focus,
html.a11y-strong-focus select:focus,
html.a11y-strong-focus textarea:focus,
html.a11y-strong-focus [tabindex]:focus,
html.a11y-strong-focus [role="button"]:focus {
    outline: 4px solid #ff6a00 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(255, 106, 0, 0.35) !important;
}

/* Text magnifier tooltip */
/* Text magnifier rendered as a real magnifying glass: a round glass lens
   with a handle that shows the hovered text enlarged and follows the cursor. */
.a11y-magnifier {
    display: none;
    pointer-events: none;
    position: fixed;
    z-index: 100060;
}

/* The handle, drawn diagonally off the bottom-right of the lens. */
.a11y-magnifier::after {
    background: #493276;
    border-radius: 10px;
    bottom: -24px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    content: "";
    height: 18px;
    position: absolute;
    right: -28px;
    transform: rotate(45deg);
    transform-origin: left center;
    width: 76px;
}

/* The glass lens itself, with the zoomed text centred inside. */
.a11y-magnifier-lens {
    align-items: center;
    background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f3effb 68%, #e7def5 100%);
    border: 9px solid #493276;
    border-radius: 50%;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35), inset 0 0 30px rgba(73, 50, 118, 0.12);
    box-sizing: border-box;
    color: #1a1a1a;
    display: flex;
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    height: 230px;
    justify-content: center;
    line-height: 1.3;
    overflow: hidden;
    padding: 1.4rem;
    position: relative;
    text-align: center;
    width: 230px;
}

/* A soft highlight so the lens reads as glass. */
.a11y-magnifier-lens::before {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    content: "";
    filter: blur(2px);
    height: 26px;
    left: 26px;
    pointer-events: none;
    position: absolute;
    top: 20px;
    width: 46px;
}

/* Virtual keyboard */
.a11y-keyboard {
    background: #2f1f52;
    bottom: 0;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.35);
    display: none;
    left: 0;
    padding: 0.5rem;
    position: fixed;
    right: 0;
    z-index: 100055;
}

.a11y-keyboard.open {
    display: block;
}

.a11y-kb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    margin-bottom: 0.3rem;
}

.a11y-kb-key {
    background: #fff;
    border: 1px solid #c7bcdd;
    border-radius: 6px;
    color: #2f1f52;
    cursor: pointer;
    flex: 0 0 auto;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    min-height: 44px;
    min-width: 40px;
    padding: 0.4rem;
}

.a11y-kb-key:hover,
.a11y-kb-key:focus-visible {
    background: #e3dbf2;
}

.a11y-kb-wide {
    min-width: 200px;
}
/* =======================================================
   ACCESSIBILITY PANEL — compact icon-tile layout
   Single source of truth for the sidebar look. This matches the
   .a11y-section-full / .a11y-grid / .a11y-option markup rendered
   by _Layout.cshtml. The earlier COMPACT / MODERN / "Wider panel"
   blocks were removed: they redefined the same selectors and
   fought each other (panel 340/430/420/520px, row vs tile options,
   a 2-column body grid that leaked onto the new stacked sections).
======================================================= */

/* Keep the panel narrow so it covers as little of the page as possible. */
.a11y-panel {
    width: 320px;
    max-width: 92vw;
}

.a11y-panel-body {
    display: block;
    padding: 0.65rem 0.85rem 0.85rem;
}

/* Full-width stacked sections: Text size, Read page, Colour blind, Language, Reset. */
.a11y-section-full {
    margin-bottom: 0.65rem;
}

.a11y-section-full:last-child {
    margin-bottom: 0;
}

/* Icon-tile grid. */
.a11y-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin-bottom: 0.65rem;
}

/* Compact tiles: icon stacked over a short label. Border, background and
   colour are inherited from the base .a11y-option rule above. */
.a11y-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 62px;
    padding: 0.45rem 0.3rem;
    text-align: center;
    border-radius: 10px;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.a11y-option .bi {
    font-size: 1.25rem;
    line-height: 1;
}

.a11y-option span {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
}

.a11y-option:hover,
.a11y-option:focus-visible {
    transform: translateY(-1px);
    border-color: #493276;
}

.a11y-option[aria-pressed="true"] {
    background: #493276;
    border-color: #493276;
    color: #fff;
}

.a11y-option[aria-pressed="true"] .bi {
    color: #fff;
}

/* On / Off pill pinned to the tile corner (content/border come from the
   base .a11y-option::after rule; here we just reposition and shrink it). */
.a11y-option::after {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
    border-radius: 999px;
    font-size: 9px;
    padding: 1px 5px;
    line-height: 1.3;
}

/* Compact labels, controls and select. */
.a11y-group-label {
    font-size: 13px;
    margin-bottom: 0.4rem;
}

.a11y-btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.a11y-btn {
    min-height: 38px;
    padding: 0.35rem 0.65rem;
    font-size: 13px;
}

.a11y-value {
    min-width: 46px;
    font-size: 13px;
}

.a11y-select {
    min-height: 40px;
    font-size: 13px;
}

/* Reset: full-width compact action button. */
#a11yResetAll {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 42px;
    font-size: 14px;
}

/* Read Page lives in the icon grid as a normal .a11y-option tile, so it
   inherits the same look as the toggles. It is a one-shot action, not a
   toggle, so it must NOT show the On/Off state pill. */
#a11yReadPage::after {
    content: none;
}

/* Colour-blind mode: a single row of colour-swatch radio buttons
   (replaces the old dropdown). The native radio is visually hidden and
   the swatch itself is the control. */
.a11y-cb-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.3rem;
}

.a11y-cb-swatch {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.2rem 0;
    border-radius: 8px;
    color: var(--iz-a11y-text);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
}

.a11y-cb-swatch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.a11y-cb-dot {
    align-items: center;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #fff;
    display: flex;
    height: 30px;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    width: 30px;
}

.a11y-cb-dot.cb-none {
    background: #fff;
    color: #b00020;
    font-size: 1rem;
}

.a11y-cb-dot.cb-protanopia {
    background: #e23b3b;
}

.a11y-cb-dot.cb-deuteranopia {
    background: #2faa4f;
}

.a11y-cb-dot.cb-tritanopia {
    background: #2f6fe0;
}

.a11y-cb-dot.cb-mono {
    background: linear-gradient(135deg, #111 0 50%, #c2c2c2 50% 100%);
}

.a11y-cb-swatch:hover .a11y-cb-dot {
    transform: scale(1.08);
}

.a11y-cb-swatch input:checked + .a11y-cb-dot {
    border-color: #493276;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #493276;
}

.a11y-cb-swatch input:checked ~ .a11y-cb-name {
    color: #493276;
    font-weight: 700;
}

.a11y-cb-swatch input:focus-visible + .a11y-cb-dot {
    outline: 3px solid var(--iz-a11y-focus);
    outline-offset: 2px;
}

/* Language: a grid of radio tiles, each showing the script sign + the
   language name (replaces the old dropdown), mirroring the swatches above. */
.a11y-lang-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}

.a11y-lang-opt {
    align-items: center;
    background: #f7f5fb;
    border: 1px solid #d8cfe9;
    border-radius: 8px;
    color: var(--iz-a11y-text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 600;
    gap: 0.1rem;
    justify-content: center;
    margin: 0;
    padding: 0.35rem 0.2rem;
    text-align: center;
}

.a11y-lang-opt input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.a11y-lang-sign {
    color: #493276;
    font-size: 1.15rem;
    line-height: 1.1;
}

.a11y-lang-name {
    line-height: 1.15;
}

.a11y-lang-opt:hover {
    border-color: #493276;
}

.a11y-lang-opt:has(input:checked) {
    background: #493276;
    border-color: #493276;
    color: #fff;
}

.a11y-lang-opt:has(input:checked) .a11y-lang-sign {
    color: #fff;
}

.a11y-lang-opt:has(input:focus-visible) {
    outline: 3px solid var(--iz-a11y-focus);
    outline-offset: 2px;
}

/* =======================================================
   IMAGE BACKGROUND PLATES (logo & product icons)
   -------------------------------------------------------
   The Investmentz logo is a dark/coloured mark, while the product
   icons are white marks made for the dark product cards. They need
   OPPOSITE backings to stay legible on dark surfaces and in dark mode.

   Trick: in dark mode every <img> is re-inverted (the
   "html.a11y-theme-dark img" rule above), so a background-color
   declared on an image is inverted twice and renders as written in
   BOTH modes. One declaration therefore covers light and dark.
======================================================= */

/* Coloured brand logo -> white plate. In light mode this lights up the
   logo on the dark footer; in dark mode it keeps the white plate behind
   the logo on the inverted (dark) navbar. Covers header, footer and login. */
img[src*="investmentz_logo"] {
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
}

/* In dark mode the footer logo should NOT keep the white plate (the header
   logo still does). The inverted footer band is light enough for the logo on
   its own, so drop the backing there. */
html.a11y-theme-dark footer img[src*="investmentz_logo"] {
    background: transparent;
    padding: 0;
}

/* Product icons need OPPOSITE plates because the two card styles hold opposite
   artwork, and only in dark mode (light mode already looks right):

   - "Trending Products" / MA campaign: white icons on a dark .bg-color-Bdark
     card. In dark mode the card inverts to light lavender, so the white icons
     would vanish -> give them a DARK plate.
   - "Other Products": dark/coloured icons on a light .bg-dgrey card. The icon
     keeps its original dark colour (it is re-inverted), but the card inverts to
     near-black, so a dark plate would be muddy -> give them a WHITE plate, which
     reproduces the clean light-mode tile (dark icon on white). */
html.a11y-theme-dark .bg-color-Bdark img[src*="/products/"] {
    background: #2f1f52;
    border-radius: 12px;
    padding: 6px;
}

html.a11y-theme-dark .bg-dgrey img[src*="/products/"] {
    background: #fff;
    border-radius: 12px;
    padding: 6px;
}

/* =======================================================
   GROUPED SECTIONS + new controls (Profiles, Colour
   Adjustment, Page structure)
   ======================================================= */

/* Section heading that breaks the panel into feature groups. */
.a11y-sec-title {
    align-items: center;
    border-top: 1px solid #ece7f4;
    color: #2f1f52;
    display: flex;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 0.4rem;
    letter-spacing: 0.04em;
    margin: 0.85rem 0 0.55rem;
    padding-top: 0.7rem;
    text-transform: uppercase;
}

.a11y-sec-title:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.a11y-sec-title .bi {
    color: #493276;
    font-size: 0.95rem;
}

/* Colour Adjustment: a row of native colour pickers. */
.a11y-color-adjust {
    display: flex;
    gap: 0.5rem;
}

.a11y-color-field {
    align-items: center;
    background: #f7f5fb;
    border: 1px solid #d8cfe9;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0.45rem 0.3rem;
    text-align: center;
}

.a11y-color-field span {
    font-size: 11px;
    font-weight: 600;
}

.a11y-color-field input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    height: 34px;
    padding: 0;
    width: 34px;
}

.a11y-color-field input[type="color"]::-webkit-color-swatch-wrapper {
    border-radius: 50%;
    padding: 0;
}

.a11y-color-field input[type="color"]::-webkit-color-swatch {
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #c7bcdd;
}

/* User-chosen text / background colours (opt-in, applied with !important).
   The panel itself and the on-screen helpers are excluded so they stay usable. */
html.a11y-user-bg body {
    background-color: var(--a11y-user-bg) !important;
}

html.a11y-user-bg body :where(div, section, header, footer, main, article, aside, nav, ul, ol, li, table, tbody, tr, td, th, form, p):not(#a11yPanel):not(#a11yPanel *):not(#a11yStructure):not(#a11yStructure *):not(.a11y-keyboard):not(.a11y-keyboard *):not(.a11y-toggle) {
    background-color: transparent !important;
    background-image: none !important;
}

html.a11y-user-text body :where(h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, strong, em, small, div):not(.bi):not([class*="a11y-"]):not(#a11yPanel *):not(#a11yStructure *) {
    color: var(--a11y-user-text) !important;
}

/* Page structure dialog (headings outline). */
.a11y-structure {
    background: #fff;
    border: 1px solid #d0c8e4;
    border-radius: 12px;
    bottom: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    color: #1f1f1f;
    display: none;
    left: 50%;
    max-height: 70vh;
    max-width: 92vw;
    overflow-y: auto;
    position: fixed;
    top: 12vh;
    transform: translateX(-50%);
    width: 360px;
    z-index: 100070;
}

.a11y-structure.open {
    display: block;
}

.a11y-structure-head {
    align-items: center;
    background: #493276;
    border-radius: 12px 12px 0 0;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    position: sticky;
    top: 0;
}

.a11y-structure-head .bi {
    margin-right: 0.3rem;
}

.a11y-structure-close {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    min-height: 32px;
    min-width: 32px;
}

.a11y-structure-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
}

.a11y-structure-item {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #2f1f52;
    cursor: pointer;
    display: block;
    font-size: 0.9rem;
    padding: 0.45rem 0.6rem;
    text-align: left;
    width: 100%;
}

.a11y-structure-item:hover,
.a11y-structure-item:focus-visible {
    background: #f1edf7;
}

.a11y-structure-item.lvl-1 { font-weight: 700; padding-left: 0.6rem; }
.a11y-structure-item.lvl-2 { padding-left: 1.4rem; }
.a11y-structure-item.lvl-3 { padding-left: 2.2rem; }
.a11y-structure-item.lvl-4 { padding-left: 3rem; }
.a11y-structure-item.lvl-5 { padding-left: 3.8rem; }
.a11y-structure-item.lvl-6 { padding-left: 4.6rem; }

/* =======================================================
   COLLAPSIBLE (ACCORDION) SECTIONS
   Each feature group is a section the user can open/close, so the
   panel stays short and needs far less scrolling.
   ======================================================= */

.a11y-panel-hint {
    color: #595959;
    font-size: 0.78rem;
    margin: 0.1rem 0 0.6rem;
}

.a11y-acc {
    border: 1px solid #e3dcf0;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.a11y-acc:last-child {
    margin-bottom: 0;
}

/* Section header doubles as the open/close trigger. */
.a11y-acc-head {
    align-items: center;
    background: #f7f5fb;
    border: 0;
    color: #2f1f52;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    gap: 0.5rem;
    justify-content: space-between;
    min-height: 46px;
    padding: 0.6rem 0.85rem;
    text-align: left;
    width: 100%;
}

.a11y-acc-head:hover,
.a11y-acc-head:focus-visible {
    background: #efe9f8;
}

.a11y-acc-title {
    align-items: center;
    display: flex;
    font-size: 0.9rem;
    font-weight: 700;
    gap: 0.45rem;
}

.a11y-acc-title .bi {
    color: #493276;
    font-size: 1rem;
}

/* Chevron rotates to point up when the section is open. */
.a11y-acc-chevron {
    color: #493276;
    flex: 0 0 auto;
    font-size: 0.95rem;
    transition: transform 0.2s ease;
}

.a11y-acc-open .a11y-acc-head {
    background: #ece5f7;
}

.a11y-acc-open .a11y-acc-chevron {
    transform: rotate(180deg);
}

.a11y-acc-body {
    padding: 0.7rem 0.75rem 0.85rem;
}

html.a11y-no-motion .a11y-acc-chevron {
    transition: none !important;
}

/* =======================================================
   PROFILE LIST (icon + name + description rows)
   ======================================================= */

.a11y-profile-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.a11y-profile {
    align-items: flex-start;
    background: #f7f5fb;
    border: 1px solid #d8cfe9;
    border-left: 4px solid #c7bcdd;
    border-radius: 10px;
    color: #1f1f1f;
    cursor: pointer;
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
    width: 100%;
}

.a11y-profile:hover,
.a11y-profile:focus-visible {
    background: #efe9f8;
    border-color: #493276;
}

.a11y-profile-icon {
    color: #493276;
    flex: 0 0 auto;
    font-size: 1.3rem;
    line-height: 1.4;
}

.a11y-profile-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.a11y-profile-name {
    font-size: 0.92rem;
    font-weight: 700;
}

.a11y-profile-desc {
    color: #595959;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.35;
}

/* Active profile: a calm lavender wash with a strong purple accent bar —
   clearly "on" without a harsh, high-glare flood of solid colour. */
.a11y-profile[aria-pressed="true"] {
    background: #ece5f7;
    border-color: #493276;
    border-left-color: #493276;
}

.a11y-profile[aria-pressed="true"] .a11y-profile-name {
    color: #2f1f52;
}

.a11y-profile[aria-pressed="true"] .a11y-profile-name::after {
    background: #493276;
    border-radius: 999px;
    color: #fff;
    content: "On";
    font-size: 0.62rem;
    font-weight: 700;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    vertical-align: middle;
}

.a11y-structure-empty {
    color: #595959;
    padding: 0.8rem;
    text-align: center;
}
/* Disable all animations and transitions */
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Stop marquee if any */
body.a11y-reduce-motion marquee {
    display: none;
}

/* Pause CSS animated elements */
body.a11y-reduce-motion .animated,
body.a11y-reduce-motion .animate,
body.a11y-reduce-motion [class*="animate"],
body.a11y-reduce-motion [class*="animation"] {
    animation-play-state: paused !important;
}