@font-face {
  font-family: 'Open-Dyslexic';
  src: url('../fonts/open-dyslexic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tQKr51pE8.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Apply Nunito Sans font and font-weight to all widget elements */
.wideaccess-widget-panel,
.wideaccess-widget-panel *,
.wideaccess-widget-toggle,
.wideaccess-widget-toggle *,
.wideaccess-modal-overlay,
.wideaccess-modal-overlay *,
#wideaccess-widget-root,
#wideaccess-widget-root * {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* Modal styles */
.wideaccess-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
}

.wideaccess-modal {
  width: 569px;
  max-width: 95vw;
  background: var(--widget-bg);
  color: var(--widget-text);
  border-radius: var(--widget-radius);
  box-shadow: var(--widget-shadow-lg);
  overflow: hidden;
}

.wideaccess-modal-header {
  background: linear-gradient(135deg, var(--widget-primary), var(--widget-primary-hover));
  color: #fff;
  padding: 16px 20px;
}

.wideaccess-modal-header h4 { margin: 0; font-size: 16px; font-weight: 700; }

.wideaccess-modal-content { padding: 16px 20px; font-size: 14px; }
.wideaccess-modal-content .wideaccess-modal-question { font-size: 18px; font-weight: 400; }
.wideaccess-modal-content .wideaccess-modal-note {
  font-size: 15px; 
  color: #6b7280; 
  margin-top: 8px; 
  line-height: 1.4;
  font-style: italic;
}

.wideaccess-modal-statement-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--widget-text);
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 0;
}

.wideaccess-modal-statement-text p {
  margin: 0 0 12px 0;
}

.wideaccess-modal-statement-text p:last-child {
  margin-bottom: 0;
}

.wideaccess-modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px 18px 20px;
  background: var(--widget-bg);
}

.wideaccess-modal-actions .btn {
  padding: 12px 24px;
  border-radius: var(--widget-radius-sm);
  border: none;
  background: var(--widget-danger);
  color: #fff;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  min-width: 120px;
}

.wideaccess-modal-actions .btn:hover {
  background: #b91c1c !important; 
  color: #fff !important;
}

.wideaccess-modal-actions .btn-primary {
  background: linear-gradient(135deg, var(--widget-primary), var(--widget-primary-hover));
  color: #fff;
}

.wideaccess-modal-actions .btn-primary:hover {
  filter: none; 
  background: linear-gradient(135deg, var(--widget-primary), var(--widget-primary-hover)) !important;
  color: #fff !important;
}

/* Modern Accessibility Widget Styles */
:root {
  --widget-primary: #2563eb;
  --widget-primary-hover: #1d4ed8;
  --widget-bg: #ffffff;
  --widget-bg-secondary: #f8fafc;
  --widget-border: #e2e8f0;
  --widget-text: #1e293b;
  --widget-danger: #dc2626;
  --widget-success: #16a34a;
  --widget-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --widget-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --widget-radius: 12px;
  --widget-radius-sm: 8px;
  --widget-transition: transform 0.525s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.525s;
  --widget-footer-height: 64px;
}

/* Ensure variables exist inside Shadow DOM as well */
:host {
  --widget-primary: #2563eb;
  --widget-primary-hover: #1d4ed8;
  --widget-bg: #ffffff;
  --widget-bg-secondary: #f8fafc;
  --widget-border: #e2e8f0;
  --widget-text: #1e293b;
  --widget-danger: #dc2626;
  --widget-success: #16a34a;
  --widget-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --widget-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --widget-radius: 12px;
  --widget-radius-sm: 8px;
  --widget-transition: transform 0.525s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.525s;
  --widget-footer-height: 64px;
}

/* Main widget panel - professional design */
.wideaccess-widget-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 597px; /* Increased by 12% for better proportions */
  background: #ffffff;
  border: none;
  box-shadow: none;
  overflow-x: hidden;
  transition: var(--widget-transition);
  z-index: 2147483647;
  border-radius: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #111827;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  visibility: visible; /* Always visible so content is rendered */
  pointer-events: none; /* Prevent interaction when closed */
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  will-change: transform;
  
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  
}

/* Ensure all content inside panel is always rendered and visible */
.wideaccess-widget-panel > * {
  visibility: visible !important; /* Content is always visible for rendering */
  opacity: 1 !important; /* Content is always fully opaque */
}

.wideaccess-widget-panel.ready {
  transition: var(--widget-transition); /* Enable transitions only after widget is ready */
}

.wideaccess-widget-panel.open {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  visibility: visible;
  pointer-events: auto; /* Enable interaction when open */
  transition: transform 0.525s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12), -4px 0 16px rgba(0, 0, 0, 0.08) !important;
}
.wideaccess-widget-panel.left {
  left: 0; 
  right: auto; 
  width: 597px; /* Explicitly maintain same width as right side */
  border-radius: 0 var(--widget-radius) var(--widget-radius) 0; 
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  box-shadow: none;
  overflow: visible;
  scroll-behavior: smooth;
  will-change: transform;
  
}
.wideaccess-widget-panel.left.open {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.525s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.12), 4px 0 16px rgba(0, 0, 0, 0.08) !important; /* Mirror shadow for left side */
}

/* Toggle button */
.wideaccess-widget-toggle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  /* width and height set via inline styles using iconSize */
  background: transparent;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: var(--widget-transition);
  border: none;
  outline: none;
  text-align: center;
  user-select: none;
  overflow: visible;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  touch-action: manipulation;
}

.wideaccess-widget-panel.left .wideaccess-widget-toggle {
  right: auto;
  left: 30px;
}

.wideaccess-widget-toggle:hover {
  background: linear-gradient(135deg, var(--widget-primary-hover), var(--widget-primary));
  transform: scale(1.1);
  box-shadow: 0 15px 25px -5px rgba(37, 99, 235, 0.3);
}

.wideaccess-widget-toggle:focus {
  outline: 2px solid var(--widget-primary);
  outline-offset: 2px;
}

.wideaccess-widget-toggle:active {
  transform: scale(0.95);
}

/* Icon styling */
.wideaccess-widget-toggle img {
  width: 36px;
  height: 36px;
  display: block;
  margin: 0 auto;
  filter: brightness(0) invert(1);
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

/* Widget header - professional design */
.wideaccess-widget-header {
  background: linear-gradient(135deg, var(--widget-primary), var(--widget-primary-hover));
  color: white;
  padding: 24px 20px 40px 20px;
  border-radius: 0 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
  z-index: 10;
}

/* Header top section with language dropdown and close button */
.wideaccess-widget-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.wideaccess-widget-title {
  text-align: center;
  font-size: 26px;
  font-weight: normal !important;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
  margin-top: -12px;
}

.wideaccess-title-compact {
  font-size: 24px !important;
  font-weight: normal !important;
}

.wideaccess-title-compact-es {
  font-size: 23px !important;
}

/* Language-specific header font adjustments */
.wideaccess-title-lang-pt { font-size: 23px !important; } /* -3px from 26 */
.wideaccess-title-lang-2 { font-size: 24px !important; } /* -2px */

.wideaccess-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  box-sizing: border-box;
  padding: 3px 20px 8px 20px;
}

.wideaccess-widget-controls {
  display: flex;
  flex-direction: row; /* 3 columns in one row */
  gap: 8px;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  padding: 0 4.5px;
  box-sizing: border-box;
}

.wideaccess-widget-controls > * {
  flex: 1 1 0%;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
}

/* Desktop: Controls share available width equally */
@media (min-width: 769px) {
  .wideaccess-widget-controls > * {
    flex: 1 1 0%;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
  }
}

.wideaccess-widget-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
  position: relative;
  justify-content: flex-end;
}

/* Make header elements not shrink awkwardly */
.wideaccess-language-dropdown,
.wideaccess-widget-header-actions { flex-shrink: 0; }

/* Responsive tweaks for header */
/* Disabled for tablet - keep same as desktop */
/* @media (max-width: 768px) {
  .wideaccess-widget-header {
    padding: 24px 16px;
    min-height: 100px;
  }
  .wideaccess-widget-title {
    font-size: 22px;
    margin-top: -6px;
  }
} */

/* Mirror header rounding when panel is on the left side */
.wideaccess-widget-panel.left .wideaccess-widget-header {
  background: linear-gradient(135deg, var(--widget-primary), var(--widget-primary-hover)) !important;
  color: white !important;
  border-radius: 0 0 20px 20px !important;
  padding: 24px 20px 40px 20px !important;  /* Reduced bottom padding to 40px */
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15) !important;  /* Same shadow as right side */
  flex-shrink: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;  /* Same border as right side */
  width: 100% !important;  /* Explicitly ensure full width */
  box-sizing: border-box !important;  /* Ensure padding is included in width calculation */
  min-height: auto !important;  /* Ensure no min-height conflicts */
  height: auto !important;  /* Ensure height is auto like right side */
  margin-bottom: 0 !important; /* Remove negative margin */
  z-index: 10 !important;
}

/* Mirror content wrapper rounding when panel is on the left side */
.wideaccess-widget-panel.left .wideaccess-widget-content-wrapper {
  border-radius: 20px 20px 0 0 !important; /* Same rounded top corners */
  background: #ffffff !important; /* Same background color */
  z-index: 20 !important; /* Layer above header */
  padding-top: 40px !important; /* Top padding */
  overflow-y: auto !important; /* Scrollbar on content wrapper for left side */
  overflow-x: hidden !important;
  margin-top: -20px !important; /* Move up to hover above header (20px down) */
  direction: rtl !important; /* Move scrollbar to left side */
}

/* Mirror button positions when widget is on the left side */
.wideaccess-widget-panel.left .wideaccess-widget-close {
  position: absolute;
  top: 10px;
  left: 12px;  /* Close button moves to top left */
  right: auto;
  transform: none;
}

.wideaccess-widget-panel.left .wideaccess-widget-hide {
  position: absolute;
  top: 10px;
  right: 12px;  /* Hide button moves to top right */
  left: auto;
  transform: none;
  margin-left: 0;
}

/* Ensure header top section maintains same height and alignment */
.wideaccess-widget-panel.left .wideaccess-widget-header-top {
  justify-content: space-between;  /* Keep same spacing as right side */
  height: auto;  /* Maintain same height */
}

/* Ensure header center section is properly centered for left side */
.wideaccess-widget-panel.left .wideaccess-header-center {
  align-items: center;
  text-align: center;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 3px 20px 8px 20px !important;
}

/* Ensure widget controls are properly aligned for left side */
.wideaccess-widget-panel.left .wideaccess-widget-controls {
  flex-direction: row; /* 3 columns in one row */
  gap: 8px;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  padding: 0 4.5px;
  box-sizing: border-box;
}

.wideaccess-widget-panel.left .wideaccess-widget-controls > * {
  flex: 1 1 0%;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
}

/* Desktop: Controls share available width equally */
@media (min-width: 769px) {
  .wideaccess-widget-panel.left .wideaccess-widget-controls > * {
    flex: 1 1 0%;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
  }
}

.wideaccess-widget-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

.wideaccess-widget-header p {
  margin: 8px 0 0 0;
  font-size: 13px;
  opacity: 0.9;
  font-weight: 400;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Close button */
.wideaccess-widget-close {
  position: relative;
  width: 42px;
  height: 42px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.2s ease;
  z-index: 1;
  backdrop-filter: blur(1px);
  box-sizing: border-box;
  padding: 0;
  min-width: 42px;
  min-height: 42px;
}

.wideaccess-widget-close:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.08); }

.wideaccess-widget-close:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.wideaccess-widget-close:active { transform: scale(0.95); }
.wideaccess-widget-hide {
  position: relative;
  width: 42px;
  height: 42px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.2s ease;
  z-index: 10;
  backdrop-filter: blur(1px);
  box-sizing: border-box;
  padding: 0;
  min-width: 32px;
  min-height: 32px;
  margin-left: 8px;
}

.wideaccess-widget-hide:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); }
.wideaccess-widget-hide:active { transform: scale(0.95); }
.wideaccess-widget-hide svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.5; flex-shrink: 0; }

.wideaccess-widget-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
  flex-shrink: 0;
}

.wideaccess-close-icon {
  width: 25px;
  height: 25px;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

.wideaccess-hide-icon {
  width: 25px;
  height: 25px;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

/* Widget content - professional styling - now just background layer */
.wideaccess-widget-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--widget-primary), var(--widget-primary-hover));
  z-index: 5;
  pointer-events: none; /* Allow clicks to pass through to groups */
}

/* Content wrapper with rounded top corners */
.wideaccess-widget-content-wrapper {
  flex: 1;
  background: #ffffff;
  border-radius: 20px 20px 0 0; /* Rounded top corners */
  overflow: visible; /* Allow scrolling to work properly */
  overflow-x: hidden; /* Prevent horizontal scroll */
  position: relative;
  z-index: 20; /* Layer above header */
  width: 100%;
  box-sizing: border-box;
  padding-top: 40px; /* Top padding */
  margin-top: -20px; /* Move up to hover above header (20px down) */
}

/* Widget groups container - holds all the option groups */
.wideaccess-widget-groups-container {
  flex: 1 0 auto;
  padding: 25px 20px 20px 20px; /* Added bottom padding to account for sticky footer */
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 15;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; /* Center the groups */
  margin-top: -40px; /* Move first group 40px up (back to original) */
  max-width: 637px; /* Wider to accommodate 3 columns (17% total increase) */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px; /* Reset font size to prevent inheritance from options */
}

/* Scrollbar styling for widget groups container - matches dropdown */
.wideaccess-widget-content-wrapper::-webkit-scrollbar {
  width: 8px;
}

.wideaccess-widget-content-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.wideaccess-widget-content-wrapper::-webkit-scrollbar-thumb {
  background-color: #eef2f6;
  border-radius: 4px;
  border: 2px solid transparent;
}

.wideaccess-widget-content-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #e3e8ef;
}

/* Scrollbar styling for left side widget - apply to content wrapper */
.wideaccess-widget-panel.left .wideaccess-widget-content-wrapper::-webkit-scrollbar {
  width: 8px;
}

.wideaccess-widget-panel.left .wideaccess-widget-content-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.wideaccess-widget-panel.left .wideaccess-widget-content-wrapper::-webkit-scrollbar-thumb {
  background-color: #eef2f6;
  border-radius: 4px;
  border: 2px solid transparent;
}

.wideaccess-widget-panel.left .wideaccess-widget-content-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #e3e8ef;
}

/* Widget Footer - professional styling */
.wideaccess-widget-footer {
  background: var(--widget-primary);
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  flex-grow: 0;
  position: sticky;
  bottom: 0;
  z-index: 20;
  letter-spacing: 0.0em !important;
  min-height: 35px; /* Fixed height to prevent shrinking when content is hidden */
  box-sizing: border-box;
}

/* Mirror footer rounding when panel is on the left side */
.wideaccess-widget-panel.left .wideaccess-widget-footer {
  border-radius: 0 0 var(--widget-radius) 0;
}

/* Ensure content area is properly aligned for left side */
.wideaccess-widget-panel.left .wideaccess-widget-content {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #ffffff !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* Ensure groups container is properly aligned for left side */
.wideaccess-widget-panel.left .wideaccess-widget-groups-container {
  flex: 1 0 auto !important;
  padding: 25px 20px 20px 20px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  z-index: 15 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important; /* Center the groups */
  margin-top: -40px !important; /* Move first group 40px up (moved 20px up) */
  max-width: 567px !important; /* Wider to accommodate 3 columns */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  direction: ltr !important; /* Restore normal text direction */
}

/* Ensure all button groups are properly aligned for left side */
.wideaccess-widget-panel.left .wideaccess-widget-group {
  margin-bottom: 20px;
  animation: fadeInUp 0.3s ease-out;
  background: #eef2f6;
  border: none;
  border-radius: 12px;
  padding: 16px;
  position: relative;
  z-index: 15;
}

.wideaccess-widget-branding-link {
  display: inline-block;
  transition: opacity 0.2s ease;
  line-height: 0;
  text-decoration: none !important;
}

.wideaccess-widget-branding-link {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Ensure all children of branding link show pointer cursor */
.wideaccess-widget-branding-link * {
  cursor: pointer !important;
}

.wideaccess-widget-branding-link:hover {
  opacity: 0.8;
  text-decoration: none !important;
}

.wideaccess-widget-branding-text {
  font-size: 15px;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1;
  margin-right: 8px;
  cursor: pointer !important;
  user-select: none;
}

.wideaccess-widget-footer-logo {
  max-height: 24px;
  width: auto;
  display: block;
  cursor: pointer !important;
  user-select: none;
}

.wideaccess-widget-branding-name {
  font-size: 15px;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1;
  margin-left: 2px;
  cursor: pointer !important;
  user-select: none;
}

.wideaccess-widget-accessibility-statement {
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
}

.wideaccess-widget-accessibility-statement img {
  height: 24px;
  width: auto;
  display: block;
}

.wideaccess-widget-accessibility-statement:hover {
  opacity: 0.85;
  text-decoration: none;
}

/* Center accessibility statement when powered by is hidden */
.wideaccess-widget-footer:not(:has(.wideaccess-widget-branding-link)) {
  justify-content: flex-end;
}

/* Center the accessibility statement button when branding is hidden */
.wideaccess-widget-footer:not(:has(.wideaccess-widget-branding-link)) .wideaccess-widget-accessibility-statement {
  margin: 0 auto;
}

/* When statement is hidden but branding is present, keep branding on the right */
.wideaccess-widget-footer:not(:has(.wideaccess-widget-accessibility-statement)) {
  justify-content: flex-end;
}
.wideaccess-widget-footer:not(:has(.wideaccess-widget-accessibility-statement)) .wideaccess-widget-branding-link {
  margin-left: auto;
}

/* Smooth scrolling for widget content */
.wideaccess-widget-content {
  scroll-behavior: smooth;
  /* iOS momentum scrolling */
  overscroll-behavior: contain; /* Prevent scroll chaining */
  /* Enhanced scrolling performance */
  scroll-padding: 20px;
}

/* Momentum scrolling visual feedback */
.wideaccess-widget-content.momentum-scrolling {
  transition: transform 0.1s ease-out;
}

/* Widget group styling */
.wideaccess-widget-group {
  margin-bottom: 20px;
  animation: fadeInUp 0.3s ease-out;
  background: #eef2f6;
  border: none;
  border-radius: 12px;
  padding: 16px;
  position: relative;
  z-index: 15;
  width: 100%; /* Take full width of container */
  box-sizing: border-box;
}

/* (reverted) pair-row helper removed: default 3-column layout handles positioning */

/* Controls wrapper - inherits group styling but no title needed */
.wideaccess-widget-controls-wrapper {
  /* Inherits all styles from .wideaccess-widget-group */
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  isolation: isolate;
  contain: layout style;
}

/* Prevent all accessibility options from affecting controls wrapper */
.wideaccess-widget-controls-wrapper,
.wideaccess-widget-controls-wrapper * {
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
  filter: none !important;
}

/* Explicitly ensure controls text has no letter spacing */
.wideaccess-widget-controls-wrapper button,
.wideaccess-widget-controls-wrapper span,
.wideaccess-widget-controls-wrapper div {
  letter-spacing: 0 !important;
}

/* Lock switch button size - prevent font-size inheritance - GLOBAL for all screens */

/* Lock chevron icon size */
.wideaccess-widget-controls-wrapper svg.lucide-chevron-down {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Enhanced scrollbar styling for better visual feedback */
.wideaccess-widget-content::-webkit-scrollbar {
  width: 8px;
}

.wideaccess-widget-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.wideaccess-widget-content::-webkit-scrollbar-thumb {
  background: var(--widget-border);
  border-radius: 4px;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.wideaccess-widget-content::-webkit-scrollbar-thumb:hover {
  background: var(--widget-text-secondary);
  width: 10px;
}

.wideaccess-widget-content::-webkit-scrollbar-thumb:active {
  background: var(--widget-primary);
}

/* Smooth scroll performance optimizations */
.wideaccess-widget-content {
  /* Hardware acceleration for smooth scrolling */


  /* Optimize for scrolling */
  contain: layout;
}

/* Button groups - duplicate removed, using main rule above */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wideaccess-widget-group-title {
  font-size: 19px;
  font-weight: 400;
  color: #111827;
  margin-top: 8px;
  margin-bottom: 16px;
  padding-bottom: 0;
  border-bottom: none;
  position: relative;
  letter-spacing: 0.0em !important;
  text-align: center;
}

/* Border removed - no bottom line */
.wideaccess-widget-group-title::after {
  display: none;
}

/* Professional button design with 3-column grid layout */
.wideaccess-widget-panel button.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: calc(33.333% - 9px);
  height: 110px;
  padding: 0 6px;
  margin: 4.5px;
  background: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  outline: none;
  position: relative;
  overflow: hidden;
  float: left;
  box-sizing: border-box;
}

/* Professional button design with icon above text */
.wideaccess-widget-panel button.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Option icon container styling - centered horizontally */
.wideaccess-widget-panel button.option .option-icon-container {
  height: 28px;
  width: 28px;
  max-width: 28px;
  margin-bottom: 6px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: var(--widget-transition);
  flex-shrink: 0;
}

/* Text positioning - below icon */
.wideaccess-widget-panel button.option > *:not(.option-icon-container) {
  margin-top: 0;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  line-height: 1.3;
}

/* Specific sizing for text increase/decrease icons */
.wideaccess-widget-panel button.option .option-icon-container[data-icon="larger-text"],
.wideaccess-widget-panel button.option .option-icon-container[data-icon="smaller-text"] {
  width: 28px;
  max-width: 28px;
  height: 28px;
}

/* All icons use the same base sizing - no individual overrides needed */

/* Flag icon styling */
.wideaccess-flag-icon {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.wideaccess-widget-panel button.option:hover {
  background: #f8fafc;
  color: #111827;
  box-shadow: inset 0 0 0 2px var(--widget-primary);
}

/* Optimize for touch devices */
@media (hover: none) and (pointer: coarse) {
  .wideaccess-widget-panel button.option:hover {
    transform: none;
  }

  .wideaccess-widget-panel button.option:active {
    transform: translateY(-1px);
  }
}

.wideaccess-widget-panel button.option:focus {
  outline: none;
}

.wideaccess-widget-panel button.option:active {
  transform: translateY(0);
}

.wideaccess-widget-panel button.option.active {
  background: #ffffff;
  color: var(--widget-primary);
  border: none;
  box-shadow: inset 0 0 0 2px var(--widget-primary);
}

/* Change icon color to primary when button is active by converting background to mask */
.wideaccess-widget-panel button.option.active .option-icon-container {
  background-color: var(--widget-primary) !important;
  -webkit-mask: inherit;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask: inherit;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background-image: none !important;
}

/* Clear float after button groups */
.wideaccess-widget-group::after {
  content: '';
  display: table;
  clear: both;
}

/* Specific button icons */
#wideaccess-larger-text::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 11l5-5m0 0l5 5m-5-5v12'/%3E%3C/svg%3E");
}

#wideaccess-smaller-text::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 13l-5 5m0 0l-5-5m5 5V6'/%3E%3C/svg%3E");
}

#wideaccess-increase-spacing::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12h5M3 12l3-3M3 12l3 3M21 12h-5M21 12l-3-3M21 12l-3 3'/%3E%3C/svg%3E");
}

#wideaccess-decrease-spacing::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12h5M8 12l-3-3M8 12l-3 3M21 12h-5M16 12l3-3M16 12l3 3'/%3E%3C/svg%3E");
}

#wideaccess-increase-lineheight::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
}

#wideaccess-decrease-lineheight::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 10h16M4 14h16M4 18h16'/%3E%3C/svg%3E");
}

#wideaccess-highlight-links::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1'/%3E%3C/svg%3E");
}

#wideaccess-monochrome::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 2.69l5.66 5.66a8 8 0 11-11.31 0z'/%3E%3C/svg%3E");
  filter: grayscale(1);
}

#wideaccess-low-saturation::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cdefs%3E%3CclipPath id='lowThird'%3E%3Crect x='0' y='16.8' width='24' height='7.2'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 2.69l5.66 5.66a8 8 0 11-11.31 0z'/%3E%3Cpath fill='currentColor' d='M12 2.69l5.66 5.66a8 8 0 11-11.31 0z' clip-path='url(%23lowThird)'/%3E%3C/svg%3E");
  filter: saturate(0.3);
}

#wideaccess-high-saturation::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 2.69l5.66 5.66a8 8 0 11-11.31 0z'/%3E%3Cpath fill='currentColor' d='M12 2.69l5.66 5.66a8 8 0 11-11.31 0z'/%3E%3C/svg%3E");
  filter: saturate(1.5);
}

/* Icons maintain their original color on hover/active */

#wideaccess-hide-images::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Crect x='4' y='5' width='16' height='14' rx='1' ry='1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Ccircle cx='9' cy='10' r='2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 17l5-5 4 4 3-3 3 3'/%3E%3C/svg%3E");
}

#wideaccess-stop-animations::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
}

#wideaccess-readable-font::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'/%3E%3C/svg%3E");
}

#wideaccess-dyslexia::after {
  content: 'Df';
  font-family: 'Open-Dyslexic', 'Lexend', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}

#wideaccess-contrast::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'/%3E%3C/svg%3E");
}

#wideaccess-mute-sounds::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z'/%3E%3C/svg%3E");
}

#wideaccess-focus-tunnel::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3E%3C/svg%3E");
}

#wideaccess-big-black-cursor::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.122 2.122'/%3E%3C/svg%3E");
}

#wideaccess-big-white-cursor::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.122 2.122'/%3E%3C/svg%3E");
}

#wideaccess-reset::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' shape-rendering='geometricPrecision' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'/%3E%3C/svg%3E");
}

/* Special styling for reset button - standalone */
.wideaccess-reset-button {
  width: 100%;
  height: 44px;
  padding: 10px 16px;
  background: var(--widget-danger);
  color: white;
  border: 2px solid var(--widget-danger);
  border-radius: var(--widget-radius-sm);
  font-weight: bold !important;
  font-size: 13px;
  margin: 4px 0 0 0;
  display: block;
  clear: both;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  transition: var(--widget-transition);
  cursor: pointer;
  outline: none;
}

.wideaccess-reset-button:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

.wideaccess-reset-button:focus,
.wideaccess-reset-button:active,
.wideaccess-reset-button:focus-visible {
  outline: none !important;
}

/* Ensure reset button text is always bold */
#wideaccess-widget-root .wideaccess-reset-button,
#wideaccess-widget-root .wideaccess-reset-button * {
  font-weight: 700 !important;
}

/* Loading state for buttons */
.wideaccess-widget-panel button.option.loading {
  pointer-events: none;
  opacity: 0.7;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive design */
/* Disabled - laptop settings apply to all screens 570px or wider */
/* @media (max-width: 768px) {
  .wideaccess-widget-panel {
    Keep normal width on tablets - don't take full screen
    width: 100vw;
    max-width: none;
    right: 0;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }

  .wideaccess-widget-panel.open {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }

  .wideaccess-widget-panel.left {
    left: 0;
    right: auto;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }

  .wideaccess-widget-panel.left.open {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }

  .wideaccess-widget-toggle {
    width: 56px;
    height: 56px;
    bottom: 20px;
    right: 20px;
  }

  .wideaccess-widget-panel.left .wideaccess-widget-toggle {
    left: 20px;
    right: auto;
  }

  .wideaccess-widget-toggle img {
    width: 32px;
    height: 32px;
  }

  .wideaccess-widget-header { padding: 24px 16px; }

  Ensure left-side header maintains same padding
  .wideaccess-widget-panel.left .wideaccess-widget-header {
    padding: 24px 16px;
  }
} */

/* Scale widget width to match screen when screen is narrower than widget */
@media (max-width: 637px) {
  .wideaccess-widget-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    right: 0 !important;
  }

  .wideaccess-widget-panel.left {
    left: 0 !important;
    right: auto !important;
  }

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

  .wideaccess-widget-panel.left.open {
    transform: translateX(0);
  }

}

@media (min-width: 431px) and (max-width: 480px) {
  /* Make header text smaller for screens 431-480px */
  .wideaccess-widget-title,
  .wideaccess-header-center {
    font-size: 18px !important;
  }
}

@media (min-width: 431px) and (max-width: 636px) {
  /* Ensure 3-column layout for regular mode on tablets with tighter spacing */
  .wideaccess-widget-panel:not(.xl-mode) button.option {
    width: calc(33.333% - 6px) !important;
    margin: 3px !important;
    padding: 0 4px !important;
  }
  
  /* XL mode uses 2-column layout on tablets - accounting for 6px margin from @media (max-width: 636px) */
  .wideaccess-widget-panel.xl-mode button.option {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 430px) {
  /* Make header text even smaller for screens 430px and less */
  .wideaccess-widget-title,
  .wideaccess-header-center {
    font-size: 16px !important;
  }
  
  /* Hide Large Buttons control on small screens (auto-enabled) */
  .wideaccess-xl-mode-toggle-container {
    display: none !important;
  }
  
  /* Use 2-column layout for all modes on small screens - accounting for 6px margin from @media (max-width: 636px) */
  .wideaccess-widget-panel button.option {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 376px) {
  /* Make header text smaller for screens 376px and less */
  .wideaccess-widget-title,
  .wideaccess-header-center {
    font-size: 14px !important;
  }
}

@media (max-width: 320px) {
  /* Make header text even smaller for screens 320px and less */
  .wideaccess-widget-title,
  .wideaccess-header-center {
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .wideaccess-widget-panel {
    /* Keep normal width on mobile - don't take full screen */
    /* width: 100vw; */
    /* max-width: none; */
    /* height: auto !important; */ /* Remove any height restrictions to maintain natural height */
    right: 0;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }

  .wideaccess-widget-panel.open {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }

  .wideaccess-widget-panel.left {
    left: 0;
    right: auto;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }

  .wideaccess-widget-panel.left.open {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }

  .wideaccess-widget-toggle {
    width: 45px;
    height: 45px;
    bottom: 16px;
    right: 16px;
  }
  
  .wideaccess-widget-panel.left .wideaccess-widget-toggle {
    left: 16px;
    right: auto;
  }
  
  .wideaccess-widget-toggle img {
    width: 25px;
    height: 25px;
  }

  .wideaccess-widget-header {
    padding: 24px 20px 40px 20px !important; /* Maintain same padding as larger screens */
    min-height: auto !important; /* Allow natural height */
  }

  /* Ensure left-side header maintains same padding on mobile */
  .wideaccess-widget-panel.left .wideaccess-widget-header {
    padding: 24px 20px 40px 20px !important; /* Maintain same padding as larger screens */
    min-height: auto !important; /* Allow natural height */
  }

  .wideaccess-widget-header h3 {
    font-size: 16px;
  }

  .wideaccess-widget-header p {
    font-size: 11px;
  }

  .wideaccess-widget-close { top: 50%; left: 8px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; transform: translateY(calc(-50% - 2px)); }
  .wideaccess-widget-hide { top: 50%; right: 8px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; transform: translateY(calc(-50% - 2px)); }
  
  /* Prevent button movement on mobile when pressed - maintain translateY transform */
  .wideaccess-widget-close:active { 
    transform: translateY(calc(-50% - 2px)) !important;
    opacity: 0.8;
  }
  .wideaccess-widget-hide:active { 
    transform: translateY(calc(-50% - 2px)) !important;
    opacity: 0.8;
  }

  .wideaccess-widget-close svg {
    width: 18px;
    height: 18px;
  }
  .wideaccess-widget-hide svg { width: 18px; height: 18px; }

  .wideaccess-widget-content {
    padding: 12px;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow-y: visible;
    overflow-x: hidden;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure left-side content maintains same padding on mobile */
  .wideaccess-widget-panel.left .wideaccess-widget-content {
    padding: 12px !important;
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure widget stays within viewport on very small screens */
  .wideaccess-widget-panel {
    /* max-width: 100vw !important; */
    /* left: 0 !important; */
    /* right: 0 !important; */
    box-sizing: border-box !important;
  }

  /* Mobile-specific footer size */
  /* Disabled for tablet - keep same as desktop */
  /* @media (max-width: 768px) {
    .wideaccess-widget-footer {
      padding: 8px 16px;
      height: auto;
      min-height: unset;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      position: relative;
      bottom: 0;
    }

    /* Ensure widget content stays within viewport */
  .wideaccess-widget-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Ensure header content stays within viewport */
  .wideaccess-widget-header {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
} */

/* Simplified smooth animations for Safari compatibility */

.wideaccess-widget-panel.open {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  opacity: 1;
  pointer-events: auto; /* Enable interaction when open */
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12), -4px 0 16px rgba(0, 0, 0, 0.08) !important;
}

/* Mobile responsive adjustments - consolidated above */

/* Additional mobile optimizations */
@media (max-width: 768px) {
  /* Ensure toggle button is always visible and accessible */
  .wideaccess-widget-toggle {
    position: fixed !important;
    z-index: 2147483646 !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 56px !important;
    height: 56px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  }

  /* Hide toggle button when panel is open on mobile */
  .wideaccess-widget-panel.open + .wideaccess-widget-toggle,
  .wideaccess-widget-panel.open ~ .wideaccess-widget-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .wideaccess-widget-panel.left .wideaccess-widget-toggle {
    left: 20px !important;
    right: auto !important;
  }

  /* Ensure panel is properly positioned for mobile */
  .wideaccess-widget-panel {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    /* right: 0 !important; */
    /* left: 0 !important; */
    /* width: 100vw !important; */
    /* max-width: 100vw !important; */
    z-index: 2147483647 !important;
    transform: translateX(100%) !important;
    -webkit-transform: translateX(100%) !important;
    display: flex !important;
    flex-direction: column !important;
    /* height: 100vh !important; */
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  /* Hide toggle button when panel is open on mobile */
  .wideaccess-widget-panel.open ~ .wideaccess-widget-toggle,
  .wideaccess-widget-panel.open + .wideaccess-widget-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
  }

  .wideaccess-widget-panel.open {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
  }

  .wideaccess-widget-panel.left {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
    -webkit-transform: translateX(-100%) !important;
  }

  .wideaccess-widget-panel.left.open {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
  }
}

@media (max-width: 480px) {
  /* Ensure toggle button is always visible on very small screens */
  .wideaccess-widget-toggle {
    bottom: 16px !important;
    right: 16px !important;
    width: 45px !important;
    height: 45px !important;
  }

  .wideaccess-widget-panel.left .wideaccess-widget-toggle {
    left: 16px !important;
    right: auto !important;
  }

  /* Ensure panel covers full screen on very small devices */
  .wideaccess-widget-panel {
    /* width: 100vw !important; */
    /* height: 100vh !important; */
  }
}

/* Focus indicators for better accessibility */
.wideaccess-widget-panel *:focus {
  outline: 2px solid var(--widget-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .wideaccess-widget-panel {
    border: 2px solid var(--widget-text);
  }

  /* Keep existing toggle styling in high-contrast mode */

  .wideaccess-widget-panel button.option {
    border: 2px solid var(--widget-text);
  }
}

/* Reduced motion support and Safari optimizations */
@media (prefers-reduced-motion: reduce) {
  .wideaccess-widget-panel,
  .wideaccess-widget-toggle,
  .wideaccess-widget-panel button.option {
    transition: none;
  }

  .wideaccess-widget-panel button.option::before {
    display: none;
  }

  .wideaccess-widget-toggle::before {
    display: none;
  }



  .wideaccess-widget-group {
    animation: none;
  }
}

/* High contrast styles - WCAG 2.1 AA compliant */
.high-contrast {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Links - WCAG compliant contrast */
.high-contrast a {
  color: #00ffff !important;
  text-decoration: underline !important;
  border-bottom: 1px solid #00ffff !important;
}

.high-contrast a:hover,
.high-contrast a:focus {
  background-color: #00ffff !important;
  color: #000000 !important;
  text-decoration: none !important;
}

/* Form elements - WCAG compliant contrast */
.high-contrast button,
.high-contrast input,
.high-contrast select,
.high-contrast textarea {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

.high-contrast button:hover,
.high-contrast button:focus,
.high-contrast input:hover,
.high-contrast input:focus,
.high-contrast select:hover,
.high-contrast select:focus,
.high-contrast textarea:hover,
.high-contrast textarea:focus {
  outline: 3px solid #00ffff !important;
  outline-offset: 2px !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #00ffff !important;
}

/* Images - Enhanced visibility */
.high-contrast img {
  filter: brightness(0) contrast(1) !important;
  border: 2px solid #ffffff !important;
}

/* Tables - Clear structure */
.high-contrast table,
.high-contrast th,
.high-contrast td {
  border: 2px solid #ffffff !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

.high-contrast th {
  background-color: #333333 !important;
  color: #ffffff !important;
}

/* Headings - Enhanced contrast */
.high-contrast h1,
.high-contrast h2,
.high-contrast h3,
.high-contrast h4,
.high-contrast h5,
.high-contrast h6 {
  color: #ffffff !important;
  border-bottom: 2px solid #00ffff !important;
  padding-bottom: 4px !important;
}

/* Lists - Clear markers */
.high-contrast ul,
.high-contrast ol {
  color: #ffffff !important;
}

/* Code and pre elements */

/* Blockquotes */

/* Horizontal rules */

/* Focus indicators for all interactive elements */
.high-contrast *:focus {
  outline: 3px solid #00ffff !important;
  outline-offset: 2px !important;
}

/* Skip links and accessibility features */

.readable-font * {
  font-weight: bold !important;
}

/* Override readable font for widget elements */
.wideaccess-widget-panel,
.wideaccess-widget-panel *,
.wideaccess-widget-toggle,
.wideaccess-widget-toggle * {
  font-weight: normal !important;
}

/* Language Dropdown Styles - Shadcn */
.wideaccess-language-dropdown {
  z-index: 2147483648;
  position: relative;
  font-size: inherit;
}

/* Ensure all three control wrappers have same width */
.wideaccess-language-dropdown,
.wideaccess-move-widget-dropdown {
  flex: 1 1 0%;
  min-width: 0;
  box-sizing: border-box;
}

/* Move widget dropdown styles */
.wideaccess-move-widget-trigger {
  background: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  color: #374151 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-weight: 500 !important;
  gap: 8px !important;
}

.wideaccess-move-widget-trigger:hover {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: var(--widget-primary) !important;
}

.wideaccess-move-widget-trigger:focus {
  outline: none !important;
}

.wideaccess-move-widget-icon {
  font-size: 14px;
  font-weight: bold;
}

.wideaccess-move-widget-text {
  font-size: 14px;
  white-space: nowrap;
}

.wideaccess-move-widget-chevron {
  width: 16px !important;
  height: 16px !important;
  transition: transform 0.2s ease !important;
  opacity: 0.5 !important;
}

.wideaccess-move-widget-trigger[data-state="open"] .wideaccess-move-widget-chevron {
  transform: rotate(180deg) !important;
}

/* XL Mode Toggle Container */
.wideaccess-xl-mode-toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 0%;
  min-width: 0;
  padding: 8px 0;
  font-size: 15px !important;
  color: #374151;
  font-weight: 500;
  gap: 8px;
  background: #ffffff;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  height: 42px;
  box-sizing: border-box;
  isolation: isolate;
  line-height: 1.5;
  overflow: hidden;
}

.wideaccess-xl-mode-toggle-container:hover {
  background: #f8fafc;
  border-color: var(--widget-primary);
}

/* Darken switch background when hovering over toggle container */
#wideaccess-widget-root .wideaccess-xl-mode-toggle-container:hover button[role="switch"]:not([data-state="checked"]),
#wideaccess-widget-root .wideaccess-xl-mode-toggle-container:hover button[role="switch"][type="button"]:not([data-state="checked"]) {
  background-color: #e3e8ef !important;
}

/* Shadcn Switch - ISOLATED styling to prevent CSS conflicts */
/* Switch Container (the track) */
#wideaccess-widget-root button[role="switch"],
#wideaccess-widget-root button[role="switch"][type="button"] {
  /* Reset all potentially conflicting properties */
  all: unset !important;
  
  /* Core layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  box-sizing: border-box !important;
  
  /* Dimensions */
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  
  /* Appearance */
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-color: #e3e8ef !important; /* unchecked state - same as hover */
  
  /* Behavior */
  cursor: pointer !important;
  flex-shrink: 0 !important;
  
  /* Smooth transition */
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* Reset any inherited styles */
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: normal !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  vertical-align: baseline !important;
  overflow: visible !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Checked state - use widget primary color */
#wideaccess-widget-root button[role="switch"][data-state="checked"],
#wideaccess-widget-root button[role="switch"][data-state="checked"][type="button"] {
  background-color: var(--widget-primary, #2563eb) !important;
}

/* Hover state for unchecked switch */
#wideaccess-widget-root button[role="switch"]:hover:not([data-state="checked"]),
#wideaccess-widget-root button[role="switch"][type="button"]:hover:not([data-state="checked"]) {
  background-color: #e3e8ef !important;
}

/* Focus state */
#wideaccess-widget-root button[role="switch"]:focus-visible {
  outline: 2px solid var(--widget-primary, #2563eb) !important;
  outline-offset: 2px !important;
}

/* Disabled state */
#wideaccess-widget-root button[role="switch"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Switch Thumb (the moving circle) - CRITICAL ISOLATION */
#wideaccess-widget-root button[role="switch"] > span,
#wideaccess-widget-root button[role="switch"] > span[data-state] {
  /* Reset everything */
  all: unset !important;
  
  /* Core layout */
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 2px !important;
  box-sizing: border-box !important;
  
  /* Dimensions - the circle */
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  
  /* Appearance */
  border-radius: 999px !important;
  background-color: #ffffff !important;
  
  /* Positioning */
  margin-top: -9px !important; /* Half of height to center vertically */
  
  /* Smooth animation */
  transition: left 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* Reset inherited properties */
  transform: none !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}

/* Checked state - move circle to right */
#wideaccess-widget-root button[role="switch"][data-state="checked"] > span,
#wideaccess-widget-root button[role="switch"][data-state="checked"] > span[data-state] {
  left: 20px !important; /* Adjusted for proper spacing from right edge */
}


.wideaccess-xl-mode-icon {
  font-size: 16px;
  font-weight: bold;
}

.wideaccess-xl-mode-text {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  padding-left: 10px;
}

/* Add right padding to switch button in XL mode toggle */
#wideaccess-widget-root .wideaccess-xl-mode-toggle-container button[role="switch"] {
  margin-right: 8px !important;
}

/* Accessibility Profiles Styling */
.wideaccess-profiles-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 4px 4.5px 0 4.5px;
  box-sizing: border-box;
}

.wideaccess-profile-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #ffffff;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.wideaccess-profile-item:hover {
  background: #f8fafc;
}

/* Darken switch background when hovering over profile item */
#wideaccess-widget-root .wideaccess-profile-item:hover button[role="switch"]:not([data-state="checked"]),
#wideaccess-widget-root .wideaccess-profile-item:hover button[role="switch"][type="button"]:not([data-state="checked"]) {
  background-color: #e3e8ef !important;
}

.wideaccess-profile-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #ffffff;
  border: 2px solid #374151;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Remove border from profile icon when it contains an SVG */
.wideaccess-profile-icon:has(.wideaccess-profile-svg-icon) {
  border: none;
  background: #f5f7fa;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

/* Darker background on hover */
.wideaccess-profile-item:hover .wideaccess-profile-icon:has(.wideaccess-profile-svg-icon) {
  background: #e3e8ef;
}

/* SVG icon styling for ADHD profile - same approach as option icons */
.wideaccess-profile-svg-icon {
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Blind profile icon size */
.wideaccess-profile-svg-icon-blind {
  width: 28px;
  height: 28px;
}

/* Low vision profile icon size */
.wideaccess-profile-svg-icon-low-vision {
  width: 28px;
  height: 28px;
}

/* Change SVG icon color to primary when profile is active - same as option icons */
.wideaccess-profile-item.active .wideaccess-profile-svg-icon {
  background-color: var(--widget-primary) !important;
  background-image: none !important;
}

.wideaccess-profile-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wideaccess-profile-title {
  font-size: 15px;
  font-weight: 400;
  color: #111827;
  line-height: 1.3;
}

.wideaccess-profile-description {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.4;
}

/* XL Mode Layout - 2 columns like before */
.wideaccess-widget-panel.xl-mode button.option {
  width: calc(50% - 13px);
  height: 132px;
  font-size: 15px;
  margin: 6.5px;
}

.wideaccess-widget-panel.xl-mode button.option .option-icon-container {
  height: 32px;
  width: 32px;
  max-width: 32px;
  margin-bottom: 8px;
}

.wideaccess-widget-panel.xl-mode button.option .option-icon-container[data-icon="larger-text"],
.wideaccess-widget-panel.xl-mode button.option .option-icon-container[data-icon="smaller-text"] {
  width: 32px;
  max-width: 32px;
  height: 32px;
}

/* Increase font size for group titles in XL mode */
.wideaccess-widget-panel.xl-mode .wideaccess-widget-group-title {
  font-size: 22px;
}

/* Increase font size for profile titles and descriptions in XL mode */
.wideaccess-widget-panel.xl-mode .wideaccess-profile-title {
  font-size: 18px;
}

.wideaccess-widget-panel.xl-mode .wideaccess-profile-description {
  font-size: 16px;
}

/* Move widget option styling - matches language dropdown */
.wideaccess-move-widget-option {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.wideaccess-move-widget-icon {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
}

.wideaccess-move-widget-text {
  font-size: 14px;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active state for selected position */
.wideaccess-dropdown-item-active {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--widget-primary) !important;
  font-weight: 400 !important;
}

.wideaccess-dropdown-item-active .wideaccess-move-widget-icon {
  color: var(--widget-primary) !important;
}

.wideaccess-language-dropdown [data-radix-popper-content-wrapper] {
  position: absolute !important;
  z-index: 2147483649 !important;
  transform: scale(1) !important;
  transform-origin: top right !important;
}

/* Prevent body width changes when dropdown opens (scroll locking) */
body[data-scroll-locked="1"] {
  width: 100% !important;
  overflow: hidden !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

.wideaccess-dropdown-trigger {
    background: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  color: #374151 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
    font-weight: 500 !important;
    gap: 8px !important;
    text-align: left !important;
    height: 42px !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
    line-height: 1.5 !important;
}

.wideaccess-dropdown-trigger:hover {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: var(--widget-primary) !important;
}

.wideaccess-dropdown-trigger:focus {
    outline: none !important;
}

/* Dropdown content styles - override shadcn */
.wideaccess-dropdown-content {
    background: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 4px !important;
    width: var(--radix-dropdown-menu-trigger-width) !important; /* Match trigger width exactly */
    max-height: 300px !important;
    overflow-y: auto !important;
    z-index: 2147483649 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 4px !important;
    transform: none !important;
    font-size: inherit !important;
    box-sizing: border-box !important;
    scrollbar-width: thin;
    scrollbar-color: #eef2f6 transparent;
}

/* Darker scrollbar on hover for Firefox */
.wideaccess-dropdown-content:hover {
    scrollbar-color: #e3e8ef transparent;
}

/* Custom scrollbar for dropdown - Webkit browsers */
.wideaccess-dropdown-content::-webkit-scrollbar {
    width: 8px;
}

.wideaccess-dropdown-content::-webkit-scrollbar-track {
    background: transparent;
}

.wideaccess-dropdown-content::-webkit-scrollbar-thumb {
    background-color: #eef2f6;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.wideaccess-dropdown-content::-webkit-scrollbar-thumb:hover {
    background-color: #e3e8ef;
}

.wideaccess-dropdown-content .wideaccess-dropdown-label {
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 4px !important;
}

.wideaccess-dropdown-content .wideaccess-dropdown-separator {
  border-color: #f3f4f6 !important;
  margin: 4px 0 !important;
}

.wideaccess-dropdown-content .wideaccess-dropdown-item {
    color: #111827 !important; /* near-black text */
    font-size: 14px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    font-weight: 500 !important;
    text-align: left !important;
    width: 100% !important;
    border: none !important;
    background: #ffffff !important; /* white background */
    cursor: pointer !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.wideaccess-dropdown-content .wideaccess-dropdown-item:hover {
  background: #e8f0fe !important; /* lighter blue hover */
  color: var(--widget-primary) !important;
}

.wideaccess-dropdown-content .wideaccess-dropdown-item:focus {
  background: #f3f4f6 !important;
  color: #111827 !important;
  outline: none !important;
}

.wideaccess-dropdown-item-active {
  background: #dbeafe !important; /* selected blue */
  color: var(--widget-primary) !important;
  font-weight: 400 !important;
  border: 1px solid var(--widget-primary) !important;
  border-radius: 6px !important;
}

.wideaccess-dropdown-item-active:hover {
  background: #dbeafe !important;
  color: var(--widget-primary-hover) !important;
}

/* Language option with flag styling */
.wideaccess-language-option {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.wideaccess-flag {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.wideaccess-language-name {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wideaccess-dropdown-trigger .wideaccess-language-option {
  justify-content: flex-start;
  flex: 1;
}

.wideaccess-dropdown-trigger .wideaccess-flag {
  font-size: 14px;
}

.wideaccess-dropdown-trigger .wideaccess-language-name {
  font-size: 14px;
  font-weight: 500;
}

/* Widget content styles */
.wideaccess-widget-content {
  overflow-y: visible;
  overflow-x: hidden;
  flex: 1 0 auto;
}

/* Widget element styles */
.wideaccess-widget-panel * {
  box-sizing: border-box;
}

/* Big cursor override for widget elements - ensures Chrome compatibility */
.wideaccess-widget-toggle,
.wideaccess-widget-toggle:hover,
.wideaccess-widget-toggle:active,
.wideaccess-widget-footer,
.wideaccess-widget-footer *,
.wideaccess-widget-footer:hover,
.wideaccess-widget-footer *:hover,
.wideaccess-widget-panel,
.wideaccess-widget-panel *,
.wideaccess-widget-panel *:hover,
.wideaccess-widget-panel *:active {
  cursor: inherit !important;
}

/* Ensure widget elements are never affected by page-wide filters */
.wideaccess-widget-panel,
.wideaccess-widget-panel *,
.wideaccess-widget-toggle,
.wideaccess-widget-toggle * {
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Normalize left-side visuals to match right side (remove special styling) */
.wideaccess-widget-panel.left .wideaccess-widget-footer {
  border-radius: 0 !important;
}
.wideaccess-widget-panel.left .wideaccess-widget-header {
  border-radius: 0 0 20px 20px !important;
  padding: 24px 20px 40px 20px !important;
  min-height: auto !important;
  height: auto !important;
  background: linear-gradient(135deg, var(--widget-primary), var(--widget-primary-hover)) !important;
}
.wideaccess-widget-panel.left .wideaccess-widget-content-wrapper {
  border-radius: 20px 20px 0 0 !important;
  background: #ffffff !important;
}
.wideaccess-widget-panel.left .wideaccess-widget-content {
  background: linear-gradient(135deg, var(--widget-primary), var(--widget-primary-hover)) !important;
}

/* Ensure left-side header center behaves like right side (contributes to height) */
.wideaccess-widget-panel.left .wideaccess-header-center {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  padding: 3px 20px 8px 20px !important;
}

/* Vertically center close/hide buttons on left without affecting header height */
.wideaccess-widget-panel.left .wideaccess-widget-close {
  position: absolute !important;
  top: 18px !important;
  left: 12px !important;
  right: auto !important;
  transform: none !important;
}
.wideaccess-widget-panel.left .wideaccess-widget-hide {
  position: absolute !important;
  top: 18px !important;
  right: 12px !important;
  left: auto !important;
  transform: none !important;
}

/* Hide toggle button when panel is open on all screen sizes */
.wideaccess-widget-panel.open ~ .wideaccess-widget-toggle,
.wideaccess-widget-panel.open + .wideaccess-widget-toggle {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: -1 !important;
}

/* Alternative method: hide toggle button when panel is open */
.wideaccess-widget-panel.open ~ .wideaccess-widget-toggle {
  display: none !important;
}

/* Hide big cursor options on mobile/tablet devices */
/* Disabled - keep same as desktop on tablets */
/* @media (max-width: 1024px) {
  Hide big cursor options on tablets and mobile
  #wideaccess-big-black-cursor,
  #wideaccess-big-white-cursor {
    display: none !important;
  }
} */

/* Disabled for tablet - keep same as desktop */
/* @media (max-width: 768px) {
  Hide big cursor options on mobile
  #wideaccess-big-black-cursor,
  #wideaccess-big-white-cursor {
    display: none !important;
  }
  
  Adjust grid layout for remaining options
  .wideaccess-widget-panel button.option {
    width: calc(50% - 8px);
  }
  
  Ensure proper spacing when options are hidden
  .wideaccess-widget-group:has(#wideaccess-big-black-cursor),
  .wideaccess-widget-group:has(#wideaccess-big-white-cursor),
  .wideaccess-widget-group:has(#wideaccess-focus-tunnel) {
    margin-bottom: 8px;
  }
} */

.dyslexia-mode * {
  font-family: 'OpenDyslexic', 'Lexend', Arial, sans-serif !important;
}

/* Text-to-speech highlighting effect */
.wideaccess-text-highlight {
  background-color: #ffff00 !important;
  color: #000000 !important;
  outline: 2px solid #ff6b35 !important;
  transition: background-color 0.3s ease, color 0.3s ease, outline 0.3s ease;
}

@media (max-width: 636px) {
  /* Hide Move Widget control on phones */
  .wideaccess-move-widget-dropdown,
  .wideaccess-move-widget-trigger {
    display: none !important;
  }

  /* Reduce module heights by ~30% via font-size scaling */
  .wideaccess-widget-panel .wideaccess-widget-group {
    font-size: 0.7em;
  }
  /* Force buttons to 110px tall on phones, including XL mode */
  .wideaccess-widget-panel button.option {
    height: 110px !important;
    margin: 6px !important; /* tighter spacing on mobile */
    font-size: 12px !important; /* reduce text size by ~2px */
  }
  .wideaccess-widget-panel.xl-mode button.option {
    height: 110px !important;
    margin: 6px !important;
    font-size: 12px !important;
  }
  /* Remove the controls wrapper box on phones; keep only inner controls */
  .wideaccess-widget-group.wideaccess-widget-controls-wrapper {
    display: contents !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  /* Remove side padding from controls on small screens */
  .wideaccess-widget-controls {
    padding: 0 !important;
  }
  /* Add spacing, background, and full width to language dropdown on phones */
  .wideaccess-language-dropdown {
    padding-bottom: 20px !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  
  .wideaccess-dropdown-trigger {
    background: #eef2f6 !important;
  }
  
  /* Add background and full width to XL mode toggle on phones */
  .wideaccess-xl-mode-toggle-container {
    background: #eef2f6 !important;
    border-radius: 8px !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  /* Smaller module icons on mobile */
  .wideaccess-widget-panel button.option .option-icon-container {
    height: 24px !important;
    width: 24px !important;
    max-width: 24px !important;
    margin-bottom: 6px !important;
  }
  .wideaccess-widget-panel.xl-mode button.option .option-icon-container {
    height: 24px !important;
    width: 24px !important;
    max-width: 24px !important;
  }
  .wideaccess-widget-panel button.option .option-icon-container[data-icon="larger-text"],
  .wideaccess-widget-panel button.option .option-icon-container[data-icon="smaller-text"] {
    width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
  }
  /* Footer: ensure no overflow and smaller text on phones */
  .wideaccess-widget-footer {
    padding: 8px 12px !important;
    overflow-x: hidden !important;
    gap: 8px !important;
    justify-content: space-between !important; /* statement left, branding right */
  }
  .wideaccess-widget-footer > * {
    min-width: 0 !important;
  }
  .wideaccess-widget-accessibility-statement {
    max-width: 40% !important; /* smaller share on the left */
    margin-right: auto !important;
  }
  .wideaccess-widget-branding-link {
    max-width: 58% !important; /* allow more space for branding */
    margin-left: 8px !important;
  }
  /* If only branding is present, center it and allow full width */
  .wideaccess-widget-footer:not(:has(.wideaccess-widget-accessibility-statement)) {
    justify-content: center !important;
  }
  .wideaccess-widget-footer:not(:has(.wideaccess-widget-accessibility-statement)) .wideaccess-widget-branding-link {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .wideaccess-widget-accessibility-statement {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .wideaccess-widget-branding-text,
  .wideaccess-widget-branding-name {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}