/*

STYLING FOR A11Y WIDGET PANEL AND TRIGGER BUTTON

*/


:root {
    --a11y-theme-color: #2f6298;
    --a11y-theme-focus: #d4a430;
    --a11y-panel-width: 480px;
    --a11y-panel-background: hsl(0, 0%, 95%);
    --a11y-panel-color: hsl(0, 0%, 0%);
    --a11y-panel-zIndex: 100;
    --a11y-handle-background: var(--a11y-theme-color);
    --a11y-handle-color: hsl(0, 0%, 100%);
    --a11y-handle-focus-border: var(--a11y-theme-focus);
    --a11y-title-background: var(--a11y-theme-color);
    --a11y-title-color: hsl(0, 0%, 100%);
    --a11y-button-background: hsl(0, 0%, 100%);
    --a11y-button-color: hsl(0, 0%, 10%);
    --a11y-button-zIndex: 1;
    --a11y-button-zIndex-focus: 2;
    --a11y-button-border-hover: var(--a11y-theme-color);
    --a11y-button-border-focus: var(--a11y-theme-focus);
    --a11y-icon-color: hsl(0, 0%, 25%);
    --a11y-name-color: var(--a11y-button-color);
    --a11y-step-background: hsl(0, 0%, 85%);
    --a11y-step-active-background: var(--a11y-theme-color);
    /* --a11y-step-border: hsl(0, 0%, 100%); */
}

@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/premiumrewards/a11y-widget-assets/fonts/Lexend-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/premiumrewards/a11y-widget-assets/fonts/Lexend-Bold.woff2) format('woff2');
}

/* a11y widget open/close buttons styling */

.a11y-button-trigger {
    aspect-ratio: 1;
    background: var(--a11y-handle-background);
    color: var(--a11y-handle-color);
    /* position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(-100%, -50%, 0); */
    margin: 0;
    border: 0;
    padding: 4px;
    cursor: pointer;
    font-size: 40px;
}

    .a11y-button-trigger:focus-visible {
        outline: 2px solid var(--a11y-theme-color);
        outline-offset: 2px;
    }

    .a11y-button-trigger svg {
        display: block;
        width: 1em;
        height: 1em;
        fill: currentColor;
        pointer-events: none;
    }

.a11y-button-close {
    margin: 0;
    border: 0;
    padding: 4px;
    background: hsl(0, 0%, 95%);
    color: hsl(0, 0%, 0%);
    font-size: 32px;
    cursor: pointer;
}

    .a11y-button-close:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .a11y-button-close svg {
        display: block;
        width: 1em;
        height: 1em;
        fill: currentColor;
        pointer-events: none;
    }

/* a11y widget panel styling */

.a11y-panel {
    position: fixed;
    z-index: var(--a11y-panel-zIndex);
    top: 0;
    bottom: 0;
    right: 0;
    /* right: calc(var(--a11y-panel-width) * -1); */
    width: min(80vw, var(--a11y-panel-width));
    /* transition: right 0.3s; */
    /* margin-block: auto; */
    margin-block: 16px;
    margin-inline-start: auto;
    margin-inline-end: 16px;
    max-height: calc(100% - 32px);
    padding: 0;
    font-family: 'Lexend', sans-serif;
    background: var(--a11y-panel-background);
    color: var(--a11y-panel-color);
    box-shadow: 0 0 0 4px;
    overscroll-behavior: contain;
    display: none;
}

    .a11y-panel::backdrop {
        background-color: hsl(0, 0%, 0%, 0.125);
    }

    .a11y-panel[open],
    .a11y-panel[data-state='expanded'] {
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 16px;
        max-height: calc(100% - 32px);
        overflow: hidden;
    }

    .a11y-panel * {
        margin: 0;
    }

.a11y-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--a11y-title-background);
    color: var(--a11y-title-color);
    padding: 8px;
}

.a11y-title {
    font-weight: 400 !important;
    font-size: 18px;
    line-height: normal !important;
    letter-spacing: 0.1ex;
    text-align: center;
    flex-grow: 1;
}

.a11y-buttons-list {
    height: 100%;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 12px;
    align-content: start;
    padding: 4px 16px;
}

.a11y-button,
.a11y-reset {
    position: relative;
    z-index: var(--a11y-button-zIndex);
    width: 100%;
    font-size: 16px;
    background: var(--a11y-button-background);
    color: var(--a11y-button-color);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 8px 16px;
}

.a11y-reset {
    flex-direction: row;
    justify-content: center;
    background-color: var(--a11y-theme-color);
    color: #fff;
}

    .a11y-reset .a11y-button__icon {
        font-size: 24px;
    }

    .a11y-reset .a11y-button__name,
    .a11y-reset .a11y-button__icon {
        color: inherit;
    }

    .a11y-button:hover,
    .a11y-reset:hover {
        border-color: var(--a11y-button-border-hover);
    }

.a11y-button[data-selected]:not([data-selected='0']) {
    border-color: var(--a11y-button-border-hover);
}

.a11y-button:focus-visible,
.a11y-reset:focus-visible {
    outline: none;
    z-index: var(--a11y-button-zIndex-focus);
    box-shadow: 0 0 0 4px var(--a11y-button-border-focus);
}

.a11y-button__icon {
    display: block;
    font-weight: 400;
    font-size: 32px;
    color: var(--a11y-icon-color);
    pointer-events: none;
    text-align: center;
}

    .a11y-button__icon svg {
        display: block;
        width: 1em;
        height: 1em;
        fill: currentColor;
        margin-inline: auto;
        pointer-events: none;
    }

.a11y-button__name {
    flex-grow: 1;
    display: block;
    word-break: break-word;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.05ch !important;
    color: var(--a11y-name-color);
    margin-block: auto;
    pointer-events: none;
}

.a11y-button .a11y-button__name {
    text-align: left;
}

.a11y-footer {
    padding: 0 16px 16px;
}

/*
steps styling
*/

.a11y-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: auto;
    padding-left: 0;
    list-style: none;
    pointer-events: none;
}

.a11y-step-item {
    flex-grow: 1;
    height: 8px;
    border: 1px solid var(--a11y-step-border, transparent);
    border-radius: 7px;
    background: var(--a11y-step-background);
    /* transition: 0.23s; */
    aspect-ratio: 1;
}

[data-selected='1'] .a11y-step-item:nth-child(1) {
    background: var(--a11y-step-active-background);
}

[data-selected='2'] .a11y-step-item:nth-child(-n + 2) {
    background: var(--a11y-step-active-background);
}

[data-selected='3'] .a11y-step-item:nth-child(-n + 3) {
    background: var(--a11y-step-active-background);
}

[data-selected='4'] .a11y-step-item:nth-child(-n + 4) {
    background: var(--a11y-step-active-background);
}

.a11y-button__name span {
    display: none;
}

[data-selected='0'] .a11y-label:nth-child(1) {
    display: block;
}

[data-selected='1'] .a11y-label:nth-child(2) {
    display: block;
}

[data-selected='2'] .a11y-label:nth-child(3) {
    display: block;
}

[data-selected='3'] .a11y-label:nth-child(4) {
    display: block;
}

[data-selected='4'] .a11y-label:nth-child(5) {
    display: block;
}

@media (min-width: 30rem) {
    .a11y-button {
        flex-direction: column;
        padding-block: 16px;
    }

        .a11y-button .a11y-button__name {
            text-align: center;
        }

    .a11y-steps {
        flex-direction: row;
        margin-block-start: 2px;
    }
}

/* 

CONFIGURATION STYLING

*/

/*

WCAG 2.1 AA

1.4.4 - Resize Text 

*/

/* 

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

ADJUST FONT SIZE

*/

[data-a11y-size='1'] {
    font-size: 125%;
}

[data-a11y-size='2'] {
    font-size: 150%;
}

[data-a11y-size='3'] {
    font-size: 175%;
}

[data-a11y-size='4'] {
    font-size: 200%; /* WCAG minimum requirement */
}

/*

WCAG 2.1 AA

1.4.12 - Text Spacing

*/

/* 

Letter spacing (tracking) to at least 0.12 times the font size; 

ADJUST LETTER SPACING/TRACKING

*/

[data-a11y-tracking='1'] {
    letter-spacing: 0.03em;
}

[data-a11y-tracking='2'] {
    letter-spacing: 0.06em;
}

[data-a11y-tracking='3'] {
    letter-spacing: 0.09em;
}

[data-a11y-tracking='4'] {
    letter-spacing: 0.12em; /* WCAG minimum requirement */
}

/*

ACCESSIBLE TYPEFACE

*/

[data-a11y-typography='1'] body {
    font-family: 'Lexend', sans-serif !important;
}

/*

APPLY HIGHLIGHT TO LINKS

*/

[data-a11y-links='1'] a {
    text-decoration: underline !important;
    background: #fdff32 !important;
    color: #000 !important;
    padding: 0.1em 0.25em;
}

    [data-a11y-links='1'] a * {
        color: #000 !important;
    }

/*

ADJUST CONTRAST 

*/

[data-a11y-contrast='1'] {
    filter: grayscale(100%);
}

[data-a11y-contrast='2'] {
    filter: invert(100%);
}

[data-a11y-contrast='3'] {
    filter: contrast(200%);
}

[data-a11y-contrast='4'] {
    filter: contrast(75%);
}

/*

ENABLE LARGER CURSOR

*/

[data-a11y-cursor='1'],
[data-a11y-cursor='1'] a,
[data-a11y-cursor='1'] button,
[data-a11y-cursor='1'] label,
[data-a11y-cursor='1'] select,
[data-a11y-cursor='1'] input,
[data-a11y-cursor='1'] textarea {
    cursor: url('/premiumrewards/a11y-widget-assets/images/large-cursor.png'), auto !important;
}

/* 

Line height (line spacing) to at least 1.5 times the font size; 

ADJUST LINE HEIGHT

*/

[data-a11y-height='1'] body {
    line-height: 1.2;
}

[data-a11y-height='2'] body {
    line-height: 1.35;
}

[data-a11y-height='3'] body {
    line-height: 1.5; /* WCAG minimum requirement */
}

[data-a11y-height='4'] body {
    line-height: 1.75;
}

/* 

Word spacing to at least 0.16 times the font size. 

ADJUST WORD SPACING

*/

[data-a11y-spacing='1'] {
    word-spacing: 0.04em;
}

[data-a11y-spacing='2'] {
    word-spacing: 0.08em;
}

[data-a11y-spacing='3'] {
    word-spacing: 0.12em;
}

[data-a11y-spacing='4'] {
    word-spacing: 0.16em; /* WCAG minimum requirement */
}

/*

APPLY FONT WEIGHT BOLD

*/

[data-a11y-weight='1'] body,
[data-a11y-weight='1'] p,
[data-a11y-weight='1'] h1,
[data-a11y-weight='1'] h2,
[data-a11y-weight='1'] h3,
[data-a11y-weight='1'] h4,
[data-a11y-weight='1'] h5,
[data-a11y-weight='1'] h6,
[data-a11y-weight='1'] span,
[data-a11y-weight='1'] li,
[data-a11y-weight='1'] a,
[data-a11y-weight='1'] label,
[data-a11y-weight='1'] button,
[data-a11y-weight='1'] input,
[data-a11y-weight='1'] textarea {
    font-weight: 700;
}

/*

APPLY HIGHLIGHT TO HEADINGS

*/

[data-a11y-heading='1'] h1:not(.a11y-title),
[data-a11y-heading='1'] h2:not(.a11y-title),
[data-a11y-heading='1'] h3:not(.a11y-title),
[data-a11y-heading='1'] h4:not(.a11y-title),
[data-a11y-heading='1'] h5:not(.a11y-title),
[data-a11y-heading='1'] h6:not(.a11y-title) {
    background: #fdff32 !important;
    color: #000 !important;
    padding: 0.1em 0.25em;
}

/*

ENABLE FOCUS READING

*/

[data-a11y-focus='1'] .focus-reading-mask {
    --track-size: 150px;
    --shadow-size: 100vh; /* do not change */
    --shadow-background: hsl(0 0% 0% / 0.75);
    position: fixed;
    z-index: 200;
    height: var(--track-size);
    right: 0;
    left: 0;
    top: calc( var(--offsetTop, calc((var(--shadow-size) * 2) + var(--track-size))) - (var(--track-size) / 2) );
    background: transparent;
    box-shadow: 0 0 0 var(--shadow-size) var(--shadow-background);
    pointer-events: none;
}

/*

DISABLE ANIMATIONS


*/

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

[data-a11y-animation='1']:focus-within {
    scroll-behavior: auto;
}

[data-a11y-animation='1'] *,
[data-a11y-animation='1'] *::before,
[data-a11y-animation='1'] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/*

ENABLE TEXT TO SPEECH

*/

.tts-controls {
    position: fixed;
    bottom: 0;
    left: 50%;
    background-color: #fff;
    color: #000;
    padding: 16px;
    border: 2px solid #000;
    border-block-end: 0;
}

/* 











































possible contrast enhancements

*/

.contrast-high {
    background-color: #000 !important; /* Black background */
    color: #ffd600 !important; /* Bright yellow text */
}

    .contrast-high a,
    .contrast-high a:visited {
        color: #ffff00 !important; /* Pure yellow links */
        text-decoration: underline !important;
    }

        .contrast-high a:hover,
        .contrast-high a:focus {
            color: #ffea00 !important; /* Slightly brighter on hover/focus */
            outline: 2px solid #ffd600 !important;
            outline-offset: 2px;
        }

    .contrast-high button,
    .contrast-high input[type='button'],
    .contrast-high input[type='submit'] {
        background-color: #ffd600 !important;
        color: #000 !important;
        border: 2px solid #ffd600 !important;
        cursor: pointer !important;
    }

        .contrast-high button:hover,
        .contrast-high button:focus,
        .contrast-high input[type='button']:hover,
        .contrast-high input[type='submit']:focus {
            background-color: #fff338 !important;
            border-color: #fff338 !important;
            outline: none;
        }

    .contrast-high h1,
    .contrast-high h2,
    .contrast-high h3,
    .contrast-high h4,
    .contrast-high h5,
    .contrast-high h6 {
        color: #ffd600 !important;
        font-weight: bold;
    }

    .contrast-high input,
    .contrast-high textarea,
    .contrast-high select {
        background-color: #000 !important;
        color: #ffd600 !important;
        border: 2px solid #ffd600 !important;
    }

        .contrast-high input:focus,
        .contrast-high textarea:focus,
        .contrast-high select:focus {
            outline: 2px solid #fff338 !important;
            outline-offset: 2px;
        }

    /* Ensure focus indicators are visible */
    .contrast-high :focus {
        outline: 3px solid #fff338 !important;
        outline-offset: 2px;
    }