/**
 * Sungrow Accesbility Toolbar - Stylesheet
 * Brand: Sungrow Research (Primary Blue: #0057A8)
 * Author: NRJ -NS95
 * Version: 1.0.0
 * Namespace: sg-a11y-
 * Fully optimized for Divi, Elementor, and standard WordPress themes
 */

/* ==========================================================================
   1. Root Variables & Scoping
   ========================================================================== */
:root {
  --sg-blue-primary: #0057A8;
  --sg-blue-dark: #00407A;
  --sg-blue-light: #EBF4FC;
  --sg-blue-hover: #004C94;
  --sg-blue-focus: rgba(0, 87, 168, 0.4);
  --sg-text-dark: #1E293B;
  --sg-text-muted: #64748B;
  --sg-border-light: #E2E8F0;
  --sg-bg-white: #FFFFFF;
  --sg-bg-panel: #FFFFFF;
  --sg-shadow-panel: 0 20px 45px -10px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 87, 168, 0.08);
  --sg-shadow-btn: 0 8px 24px rgba(0, 87, 168, 0.38), 0 2px 8px rgba(0, 0, 0, 0.12);
  --sg-radius-lg: 18px;
  --sg-radius-md: 12px;
  --sg-radius-sm: 8px;
  --sg-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Default Responsive Dimensions */
  --sg-panel-w-large-desktop: 460px;
  --sg-panel-h-large-desktop: 88vh;
  --sg-btn-size-large-desktop: 60px;
  --sg-btn-bottom-large-desktop: 24px;
  --sg-btn-side-large-desktop: 24px;

  --sg-panel-w-desktop: 420px;
  --sg-panel-h-desktop: 86vh;
  --sg-btn-size-desktop: 56px;
  --sg-btn-bottom-desktop: 20px;
  --sg-btn-side-desktop: 20px;

  --sg-panel-w-tablet-land: 400px;
  --sg-panel-h-tablet-land: 85vh;
  --sg-btn-size-tablet-land: 54px;
  --sg-btn-bottom-tablet-land: 18px;
  --sg-btn-side-tablet-land: 18px;

  --sg-panel-w-tablet: 380px;
  --sg-panel-h-tablet: 85vh;
  --sg-btn-size-tablet: 50px;
  --sg-btn-bottom-tablet: 16px;
  --sg-btn-side-tablet: 16px;

  --sg-panel-w-mobile: 96%;
  --sg-panel-h-mobile: 88vh;
  --sg-btn-size-mobile: 48px;
  --sg-btn-bottom-mobile: 12px;
  --sg-btn-side-mobile: 12px;

  /* Active tier resolved variables (defaults to Large Desktop) */
  --sg-panel-width: var(--sg-panel-w-large-desktop);
  --sg-panel-max-height: var(--sg-panel-h-large-desktop);
  --sg-trigger-size: var(--sg-btn-size-large-desktop);
  --sg-btn-bottom: var(--sg-btn-bottom-large-desktop);
  --sg-btn-side: var(--sg-btn-side-large-desktop);
  --sg-btn-right: var(--sg-btn-side);
  --sg-btn-left: auto;

  /* Dynamic user accessibility variables */
  --sg-a11y-font-size-ratio: 1;
  --sg-a11y-line-height-ratio: 1.5;
  --sg-a11y-letter-spacing: 0px;
  --sg-a11y-content-scale: 1;
  --sg-a11y-column-width: 600px;
  --sg-mask-y: 50vh;
  --sg-guide-y: 50vh;
}

/* Position Bottom-Left modifier */
.sg-a11y-pos-left {
  --sg-btn-right: auto !important;
  --sg-btn-left: var(--sg-btn-side) !important;
}

/* ==========================================================================
   2. Accessibility Root & Isolation
   ========================================================================== */
#sg-a11y-root {
  all: initial;
  font-family: var(--sg-font-stack);
  box-sizing: border-box;
  position: static !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  filter: none !important;
  transform: none !important;
}

#sg-a11y-root *,
#sg-a11y-root *::before,
#sg-a11y-root *::after {
  box-sizing: border-box;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Screen reader only utility */
.sg-a11y-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   3. Floating Trigger Button (Bottom-Right or Bottom-Left)
   Must ALWAYS remain visible and fixed in viewport under all conditions!
   ========================================================================== */
.sg-a11y-trigger {
  position: fixed !important;
  bottom: var(--sg-btn-bottom, 24px) !important;
  right: var(--sg-btn-right, 24px) !important;
  left: var(--sg-btn-left, auto) !important;
  width: var(--sg-trigger-size, 60px) !important;
  height: var(--sg-trigger-size, 60px) !important;
  background-color: var(--sg-blue-primary) !important;
  color: #FFFFFF !important;
  border: 2.5px solid #FFFFFF !important;
  border-radius: 50% !important;
  box-shadow: var(--sg-shadow-btn) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483647 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, box-shadow 0.2s ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.sg-a11y-trigger:hover {
  background-color: var(--sg-blue-hover) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 12px 28px rgba(0, 87, 168, 0.48) !important;
}

.sg-a11y-trigger:focus-visible {
  outline: 3px solid var(--sg-blue-primary) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px var(--sg-blue-focus) !important;
}

.sg-a11y-trigger:active {
  transform: scale(0.96) !important;
}

.sg-a11y-trigger-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
}

.sg-a11y-trigger-icon svg {
  display: block;
}

/* Active feature counter badge on the trigger */
.sg-a11y-trigger-badge {
  position: absolute !important;
  top: -4px !important;
  left: -4px !important;
  background-color: #E11D48 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  border-radius: 11px !important;
  text-align: center !important;
  padding: 0 4px !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   4. Backdrop Overlay
   ========================================================================== */
.sg-a11y-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  z-index: 2147483646 !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  transition: opacity 0.25s ease !important;
}

.sg-a11y-backdrop.sg-a11y-visible {
  display: block !important;
  opacity: 1 !important;
}

/* ==========================================================================
   5. Main Accessibility Modal / Panel
   ========================================================================== */
.sg-a11y-panel {
  position: fixed !important;
  bottom: calc(var(--sg-btn-bottom, 24px) + 72px) !important;
  right: var(--sg-btn-right, 24px) !important;
  left: var(--sg-btn-left, auto) !important;
  width: var(--sg-panel-width, 420px) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: var(--sg-panel-max-height, 86vh) !important;
  background-color: var(--sg-bg-panel) !important;
  border: 1px solid var(--sg-border-light) !important;
  border-radius: var(--sg-radius-lg) !important;
  box-shadow: var(--sg-shadow-panel) !important;
  z-index: 2147483647 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(14px) scale(0.97) !important;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s !important;
}

.sg-a11y-panel.sg-a11y-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* Panel Header */
.sg-a11y-panel-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px 14px 20px !important;
  background: linear-gradient(135deg, var(--sg-blue-primary) 0%, var(--sg-blue-dark) 100%) !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.sg-a11y-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.sg-a11y-brand-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
}

.sg-a11y-panel-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.sg-a11y-panel-subtitle {
  margin: 2px 0 0 0 !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.2 !important;
}

.sg-a11y-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Close Button */
.sg-a11y-close-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, transform 0.18s ease !important;
}

.sg-a11y-close-btn:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  transform: rotate(90deg) !important;
}

.sg-a11y-close-btn:focus-visible {
  outline: 2px solid #FFFFFF !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   6. Panel Scrollable Content Body
   ========================================================================== */
.sg-a11y-panel-body {
  padding: 16px 20px 20px 20px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  flex: 1 1 auto !important;
  background-color: #FAFAFC !important;
}

.sg-a11y-panel-body::-webkit-scrollbar {
  width: 6px !important;
}

.sg-a11y-panel-body::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border-radius: 3px !important;
}

.sg-a11y-panel-body::-webkit-scrollbar-thumb:hover {
  background: #94A3B8 !important;
}

/* Sections */
.sg-a11y-section {
  margin-bottom: 18px !important;
}

.sg-a11y-section:last-child {
  margin-bottom: 0 !important;
}

.sg-a11y-section-title {
  margin: 0 0 10px 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--sg-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.sg-a11y-sec-icon {
  font-size: 14px !important;
}

/* Button Grids */
.sg-a11y-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 9px !important;
}

/* ==========================================================================
   7. Feature Control Buttons
   ========================================================================== */
.sg-a11y-btn {
  background-color: #FFFFFF !important;
  border: 1.5px solid var(--sg-border-light) !important;
  border-radius: var(--sg-radius-md) !important;
  padding: 12px 8px !important;
  min-height: 72px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  user-select: none !important;
  color: var(--sg-text-dark) !important;
}

.sg-a11y-btn:hover {
  border-color: var(--sg-blue-primary) !important;
  background-color: var(--sg-blue-light) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 10px rgba(0, 87, 168, 0.12) !important;
}

.sg-a11y-btn:focus-visible {
  outline: 2.5px solid var(--sg-blue-primary) !important;
  outline-offset: 2px !important;
}

.sg-a11y-btn.sg-a11y-active {
  background-color: var(--sg-blue-primary) !important;
  border-color: var(--sg-blue-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 87, 168, 0.32) !important;
}

.sg-a11y-btn-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
  color: var(--sg-blue-primary) !important;
  transition: color 0.18s ease !important;
}

.sg-a11y-btn.sg-a11y-active .sg-a11y-btn-icon {
  color: #FFFFFF !important;
}

.sg-a11y-btn-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
}

/* Active status indicator dot */
.sg-a11y-status-indicator {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease !important;
}

.sg-a11y-btn.sg-a11y-active .sg-a11y-status-indicator {
  background-color: #34D399 !important;
  box-shadow: 0 0 6px #10B981 !important;
}

/* ==========================================================================
   8. Segmented Control (Text Alignment)
   ========================================================================== */
.sg-a11y-segmented-control {
  display: flex !important;
  gap: 8px !important;
  background-color: #EDEFEF !important;
  padding: 4px !important;
  border-radius: var(--sg-radius-md) !important;
}

.sg-a11y-seg-btn {
  flex: 1 1 0 !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--sg-radius-sm) !important;
  padding: 9px 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--sg-text-dark) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.18s ease !important;
}

.sg-a11y-seg-btn:hover {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

.sg-a11y-seg-btn:focus-visible {
  outline: 2.5px solid var(--sg-blue-primary) !important;
  outline-offset: 1px !important;
}

.sg-a11y-seg-btn.sg-a11y-active {
  background-color: #FFFFFF !important;
  color: var(--sg-blue-primary) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}

/* Sliders & Steppers */
.sg-a11y-slider-group {
  background-color: #FFFFFF !important;
  border: 1px solid var(--sg-border-light) !important;
  border-radius: var(--sg-radius-md) !important;
  padding: 10px 14px !important;
  margin-bottom: 9px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.sg-a11y-slider-group:last-child {
  margin-bottom: 0 !important;
}

.sg-a11y-slider-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}

.sg-a11y-slider-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sg-text-dark) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.sg-a11y-slider-value {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--sg-blue-primary) !important;
  background-color: var(--sg-blue-light) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
}

.sg-a11y-slider-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.sg-a11y-step-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 6px !important;
  color: var(--sg-text-dark) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.sg-a11y-step-btn:hover {
  background-color: var(--sg-blue-light) !important;
  color: var(--sg-blue-primary) !important;
  border-color: var(--sg-blue-primary) !important;
}

.sg-a11y-step-btn:focus-visible {
  outline: 2px solid var(--sg-blue-primary) !important;
  outline-offset: 1px !important;
}

.sg-a11y-range {
  flex: 1 1 auto !important;
  height: 6px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: #E2E8F0 !important;
  border-radius: 3px !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sg-a11y-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--sg-blue-primary) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(0, 87, 168, 0.4) !important;
  border: 2px solid #FFFFFF !important;
  transition: transform 0.15s ease !important;
}

.sg-a11y-range::-webkit-slider-thumb:hover {
  transform: scale(1.15) !important;
}

.sg-a11y-range::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--sg-blue-primary) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(0, 87, 168, 0.4) !important;
  border: 2px solid #FFFFFF !important;
}

/* Panel Footer */
.sg-a11y-panel-footer {
  padding: 12px 20px !important;
  background-color: #FFFFFF !important;
  border-top: 1px solid var(--sg-border-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.sg-a11y-reset-btn {
  background-color: #FEF2F2 !important;
  color: #B91C1C !important;
  border: 1px solid #FECACA !important;
  border-radius: var(--sg-radius-sm) !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}

.sg-a11y-reset-btn:hover {
  background-color: #FEE2E2 !important;
  border-color: #F87171 !important;
  color: #991B1B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15) !important;
}

.sg-a11y-reset-btn:focus-visible {
  outline: 3px solid #DC2626 !important;
  outline-offset: 2px !important;
}

.sg-a11y-footer-brand {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--sg-text-muted) !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   9. Functional Website-Wide Accessibility Rules
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reading Mask
   -------------------------------------------------------------------------- */
.sg-a11y-reading-mask {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 2147483640 !important;
  display: none !important;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.78) 0%,
    rgba(15, 23, 42, 0.78) calc(var(--sg-mask-y, 50vh) - 65px),
    rgba(0, 0, 0, 0) calc(var(--sg-mask-y, 50vh) - 65px),
    rgba(0, 0, 0, 0) calc(var(--sg-mask-y, 50vh) + 65px),
    rgba(15, 23, 42, 0.78) calc(var(--sg-mask-y, 50vh) + 65px),
    rgba(15, 23, 42, 0.78) 100%
  ) !important;
}

html.sg-a11y-reading-mask-on .sg-a11y-reading-mask {
  display: block !important;
}

/* --------------------------------------------------------------------------
   Cursor Reading Aid
   -------------------------------------------------------------------------- */
.sg-a11y-reading-guide {
  position: fixed !important;
  left: 0 !important;
  width: 100vw !important;
  height: 4px !important;
  background-color: var(--sg-blue-primary) !important;
  box-shadow: 0 0 12px rgba(0, 87, 168, 0.8), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  pointer-events: none !important;
  z-index: 2147483641 !important;
  display: none !important;
  transform: translateY(-50%) !important;
  top: var(--sg-guide-y, 50vh) !important;
}

html.sg-a11y-reading-guide-on .sg-a11y-reading-guide {
  display: block !important;
}

/* --------------------------------------------------------------------------
   LOGO PROTECTION ACROSS THEMES (Dark Mode, High Contrast & Invert)
   Always keep logo clean and protected!
   -------------------------------------------------------------------------- */
html.sg-a11y-dark-mode header img,
html.sg-a11y-dark-mode nav img,
html.sg-a11y-dark-mode .logo,
html.sg-a11y-dark-mode .site-logo,
html.sg-a11y-dark-mode .custom-logo,
html.sg-a11y-dark-mode .custom-logo-link,
html.sg-a11y-dark-mode #logo,
html.sg-a11y-dark-mode .et_pb_menu__logo img,
html.sg-a11y-dark-mode [class*="logo"] img,
html.sg-a11y-dark-mode img[class*="logo"],
html.sg-a11y-dark-mode img[src*="logo" i],
html.sg-a11y-dark-mode img[alt*="logo" i],
html.sg-a11y-high-contrast header img,
html.sg-a11y-high-contrast nav img,
html.sg-a11y-high-contrast .logo,
html.sg-a11y-high-contrast .site-logo,
html.sg-a11y-high-contrast .custom-logo,
html.sg-a11y-high-contrast .custom-logo-link,
html.sg-a11y-high-contrast #logo,
html.sg-a11y-high-contrast .et_pb_menu__logo img,
html.sg-a11y-high-contrast [class*="logo"] img,
html.sg-a11y-high-contrast img[class*="logo"],
html.sg-a11y-high-contrast img[src*="logo" i],
html.sg-a11y-high-contrast img[alt*="logo" i] {
  background-color: #FFFFFF !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

/* --------------------------------------------------------------------------
   High Contrast Mode (Selective targeting: backgrounds & text, NOT images/videos)
   Preserves #sg-a11y-root completely!
   -------------------------------------------------------------------------- */
html.sg-a11y-high-contrast body,
html.sg-a11y-high-contrast #page,
html.sg-a11y-high-contrast #page-container,
html.sg-a11y-high-contrast #et-main-area,
html.sg-a11y-high-contrast #main-content,
html.sg-a11y-high-contrast .et_pb_section,
html.sg-a11y-high-contrast body #page-container .et_pb_section,
html.sg-a11y-high-contrast body.et_pb_pagebuilder_layout #page-container .et_pb_section,
html.sg-a11y-high-contrast body #page-container [class*="et_pb_section_"],
html.sg-a11y-high-contrast .et_pb_row,
html.sg-a11y-high-contrast body #page-container .et_pb_row,
html.sg-a11y-high-contrast body #page-container [class*="et_pb_row_"],
html.sg-a11y-high-contrast .et_pb_column,
html.sg-a11y-high-contrast body #page-container .et_pb_column,
html.sg-a11y-high-contrast body #page-container [class*="et_pb_column_"],
html.sg-a11y-high-contrast .et_pb_module,
html.sg-a11y-high-contrast body #page-container .et_pb_module,
html.sg-a11y-high-contrast body #page-container [class*="et_pb_module_"],
html.sg-a11y-high-contrast body #page-container .et_pb_with_background,
html.sg-a11y-high-contrast body #page-container .et_pb_text,
html.sg-a11y-high-contrast body #page-container .et_pb_blurb,
html.sg-a11y-high-contrast body #page-container .et_pb_cta,
html.sg-a11y-high-contrast body #page-container .et_pb_pricing_table,
html.sg-a11y-high-contrast body #page-container .et_pb_accordion_item,
html.sg-a11y-high-contrast body #page-container .et_pb_tab,
html.sg-a11y-high-contrast body #page-container .et_pb_tabs,
html.sg-a11y-high-contrast header:not(#sg-a11y-root *),
html.sg-a11y-high-contrast #main-header,
html.sg-a11y-high-contrast #top-header,
html.sg-a11y-high-contrast nav:not(#sg-a11y-root *),
html.sg-a11y-high-contrast footer:not(#sg-a11y-root *),
html.sg-a11y-high-contrast #main-footer,
html.sg-a11y-high-contrast #footer-bottom,
html.sg-a11y-high-contrast main:not(#sg-a11y-root *),
html.sg-a11y-high-contrast article:not(#sg-a11y-root *),
html.sg-a11y-high-contrast section:not(#sg-a11y-root *),
html.sg-a11y-high-contrast aside:not(#sg-a11y-root *),
html.sg-a11y-high-contrast .et_pb_bottom_inside_divider,
html.sg-a11y-high-contrast .et_pb_top_inside_divider {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.sg-a11y-high-contrast .et_pb_bottom_inside_divider svg path,
html.sg-a11y-high-contrast .et_pb_top_inside_divider svg path {
  fill: #000000 !important;
}

/* Text and Headings in High Contrast */
html.sg-a11y-high-contrast p:not(#sg-a11y-root *),
html.sg-a11y-high-contrast span:not(#sg-a11y-root *),
html.sg-a11y-high-contrast li:not(#sg-a11y-root *),
html.sg-a11y-high-contrast label:not(#sg-a11y-root *),
html.sg-a11y-high-contrast blockquote:not(#sg-a11y-root *),
html.sg-a11y-high-contrast td:not(#sg-a11y-root *),
html.sg-a11y-high-contrast th:not(#sg-a11y-root *) {
  color: #FFFFFF !important;
}

html.sg-a11y-high-contrast a:not(#sg-a11y-root *) {
  color: #FFFF00 !important;
  text-decoration: underline !important;
}

html.sg-a11y-high-contrast h1:not(#sg-a11y-root *),
html.sg-a11y-high-contrast h2:not(#sg-a11y-root *),
html.sg-a11y-high-contrast h3:not(#sg-a11y-root *),
html.sg-a11y-high-contrast h4:not(#sg-a11y-root *),
html.sg-a11y-high-contrast h5:not(#sg-a11y-root *),
html.sg-a11y-high-contrast h6:not(#sg-a11y-root *) {
  color: #00FF66 !important;
}

html.sg-a11y-high-contrast button:not(#sg-a11y-root *),
html.sg-a11y-high-contrast input:not(#sg-a11y-root *),
html.sg-a11y-high-contrast select:not(#sg-a11y-root *),
html.sg-a11y-high-contrast textarea:not(#sg-a11y-root *) {
  background-color: #121212 !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}

/* Protect Media in High Contrast */
html.sg-a11y-high-contrast img,
html.sg-a11y-high-contrast picture,
html.sg-a11y-high-contrast video,
html.sg-a11y-high-contrast iframe,
html.sg-a11y-high-contrast canvas {
  background-color: transparent !important;
  border: none !important;
}

/* --------------------------------------------------------------------------
   Dark Mode (Selective targeting: backgrounds & text, NOT images/videos)
   Preserves #sg-a11y-root completely!
   -------------------------------------------------------------------------- */
html.sg-a11y-dark-mode body,
html.sg-a11y-dark-mode #page,
html.sg-a11y-dark-mode #page-container,
html.sg-a11y-dark-mode #et-main-area,
html.sg-a11y-dark-mode #main-content,
html.sg-a11y-dark-mode .et_pb_section,
html.sg-a11y-dark-mode body #page-container .et_pb_section,
html.sg-a11y-dark-mode body.et_pb_pagebuilder_layout #page-container .et_pb_section,
html.sg-a11y-dark-mode body #page-container [class*="et_pb_section_"],
html.sg-a11y-dark-mode .et_pb_row,
html.sg-a11y-dark-mode body #page-container .et_pb_row,
html.sg-a11y-dark-mode body #page-container [class*="et_pb_row_"],
html.sg-a11y-dark-mode .et_pb_column,
html.sg-a11y-dark-mode body #page-container .et_pb_column,
html.sg-a11y-dark-mode body #page-container [class*="et_pb_column_"],
html.sg-a11y-dark-mode .et_pb_module,
html.sg-a11y-dark-mode body #page-container .et_pb_module,
html.sg-a11y-dark-mode body #page-container [class*="et_pb_module_"],
html.sg-a11y-dark-mode body #page-container .et_pb_with_background,
html.sg-a11y-dark-mode body #page-container .et_pb_text,
html.sg-a11y-dark-mode body #page-container .et_pb_blurb,
html.sg-a11y-dark-mode body #page-container .et_pb_cta,
html.sg-a11y-dark-mode body #page-container .et_pb_pricing_table,
html.sg-a11y-dark-mode body #page-container .et_pb_accordion_item,
html.sg-a11y-dark-mode body #page-container .et_pb_tab,
html.sg-a11y-dark-mode body #page-container .et_pb_tabs,
html.sg-a11y-dark-mode header:not(#sg-a11y-root *),
html.sg-a11y-dark-mode #main-header,
html.sg-a11y-dark-mode #top-header,
html.sg-a11y-dark-mode nav:not(#sg-a11y-root *),
html.sg-a11y-dark-mode footer:not(#sg-a11y-root *),
html.sg-a11y-dark-mode #main-footer,
html.sg-a11y-dark-mode #footer-bottom,
html.sg-a11y-dark-mode main:not(#sg-a11y-root *),
html.sg-a11y-dark-mode article:not(#sg-a11y-root *),
html.sg-a11y-dark-mode section:not(#sg-a11y-root *),
html.sg-a11y-dark-mode aside:not(#sg-a11y-root *),
html.sg-a11y-dark-mode .et_pb_bottom_inside_divider,
html.sg-a11y-dark-mode .et_pb_top_inside_divider {
  background-color: #121418 !important;
  color: #E2E8F0 !important;
  border-color: #2D3748 !important;
}

html.sg-a11y-dark-mode .et_pb_bottom_inside_divider svg path,
html.sg-a11y-dark-mode .et_pb_top_inside_divider svg path {
  fill: #121418 !important;
}

/* Text and Headings in Dark Mode */
html.sg-a11y-dark-mode p:not(#sg-a11y-root *),
html.sg-a11y-dark-mode span:not(#sg-a11y-root *),
html.sg-a11y-dark-mode li:not(#sg-a11y-root *),
html.sg-a11y-dark-mode label:not(#sg-a11y-root *),
html.sg-a11y-dark-mode blockquote:not(#sg-a11y-root *),
html.sg-a11y-dark-mode td:not(#sg-a11y-root *),
html.sg-a11y-dark-mode th:not(#sg-a11y-root *) {
  color: #CBD5E1 !important;
  color: #FFFFFF !important;
}

html.sg-a11y-dark-mode h1:not(#sg-a11y-root *),
html.sg-a11y-dark-mode h2:not(#sg-a11y-root *),
html.sg-a11y-dark-mode h3:not(#sg-a11y-root *),
html.sg-a11y-dark-mode h4:not(#sg-a11y-root *),
html.sg-a11y-dark-mode h5:not(#sg-a11y-root *),
html.sg-a11y-dark-mode h6:not(#sg-a11y-root *) {
  color: #F8FAFC !important;
  color: #FFFFFF !important;
}

html.sg-a11y-dark-mode a:not(#sg-a11y-root *) {
  color: #60A5FA !important;
/* Links in Dark Mode - Pure white with clean underline, no blue! */
html.sg-a11y-dark-mode a:not(#sg-a11y-root *),
html.sg-a11y-dark-mode a:not(#sg-a11y-root *) * {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  text-decoration-color: #FFFFFF !important;
}

/* Form controls in Dark Mode */
html.sg-a11y-dark-mode input:not(#sg-a11y-root *),
html.sg-a11y-dark-mode textarea:not(#sg-a11y-root *),
html.sg-a11y-dark-mode select:not(#sg-a11y-root *) {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
  color: #FFFFFF !important;
  border-color: #475569 !important;
}

/* Protect Media in Dark Mode */
/* Complete Media, Banner Slider, Post Slider & Video Protection in Dark Mode & High Contrast */
html.sg-a11y-dark-mode img,
html.sg-a11y-dark-mode picture,
html.sg-a11y-dark-mode video,
html.sg-a11y-dark-mode iframe,
html.sg-a11y-dark-mode canvas {
html.sg-a11y-dark-mode canvas,
html.sg-a11y-dark-mode svg,
html.sg-a11y-dark-mode .et_pb_slider,
html.sg-a11y-dark-mode .et_pb_fullwidth_slider,
html.sg-a11y-dark-mode .et_pb_slide,
html.sg-a11y-dark-mode .et_pb_post_slider,
html.sg-a11y-dark-mode .et_pb_gallery,
html.sg-a11y-dark-mode .et_pb_video,
html.sg-a11y-dark-mode .et_pb_video_box,
html.sg-a11y-dark-mode .et_pb_video_wrap,
html.sg-a11y-dark-mode .et_pb_section_video_bg,
html.sg-a11y-dark-mode .et_pb_image_wrap,
html.sg-a11y-dark-mode [style*="background-image"],
html.sg-a11y-high-contrast img,
html.sg-a11y-high-contrast picture,
html.sg-a11y-high-contrast video,
html.sg-a11y-high-contrast iframe,
html.sg-a11y-high-contrast canvas,
html.sg-a11y-high-contrast svg,
html.sg-a11y-high-contrast .et_pb_slider,
html.sg-a11y-high-contrast .et_pb_fullwidth_slider,
html.sg-a11y-high-contrast .et_pb_slide,
html.sg-a11y-high-contrast .et_pb_post_slider,
html.sg-a11y-high-contrast .et_pb_gallery,
html.sg-a11y-high-contrast .et_pb_video,
html.sg-a11y-high-contrast .et_pb_video_box,
html.sg-a11y-high-contrast .et_pb_video_wrap,
html.sg-a11y-high-contrast .et_pb_section_video_bg,
html.sg-a11y-high-contrast .et_pb_image_wrap,
html.sg-a11y-high-contrast [style*="background-image"] {
  background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   Invert Colors
   PERMANENT FIXED POSITIONING SAFEGUARD:
   NEVER apply filter to html, body, or #sg-a11y-root!
   Invert Colors (WCAG Compliant Global Inversion)
   Inverts at HTML root level, with counter-inversion for toolbar, media, sliders.
   Guarantees the launcher button stays 100% visible, fixed, and vibrant.
   -------------------------------------------------------------------------- */
html.sg-a11y-invert-colors {
  filter: invert(100%) hue-rotate(180deg) !important;
  background-color: #000000 !important;
}

html.sg-a11y-invert-colors body {
  background-color: #000000 !important;
}

/* Invert all site body children except accessibility toolbar and reading aids */
html.sg-a11y-invert-colors body > *:not(#sg-a11y-root):not(#sg-a11y-reading-mask):not(#sg-a11y-reading-guide) {
/* Counter-invert accessibility suite: guarantees launcher & modal stay 100% visible, vibrant & fixed */
html.sg-a11y-invert-colors #sg-a11y-root {
  filter: invert(100%) hue-rotate(180deg) !important;
}

/* Counter-invert images, videos, canvas, iframes, and Divi background sections so they look natural */
html.sg-a11y-invert-colors body > *:not(#sg-a11y-root) img,
html.sg-a11y-invert-colors body > *:not(#sg-a11y-root) picture,
html.sg-a11y-invert-colors body > *:not(#sg-a11y-root) video,
html.sg-a11y-invert-colors body > *:not(#sg-a11y-root) iframe,
html.sg-a11y-invert-colors body > *:not(#sg-a11y-root) canvas,
html.sg-a11y-invert-colors .et_pb_with_background,
/* Counter-invert media, images, videos, canvas, iframes, Divi sliders & background images */
html.sg-a11y-invert-colors img,
html.sg-a11y-invert-colors picture,
html.sg-a11y-invert-colors video,
html.sg-a11y-invert-colors iframe,
html.sg-a11y-invert-colors canvas,
html.sg-a11y-invert-colors svg,
html.sg-a11y-invert-colors .et_pb_slider,
html.sg-a11y-invert-colors .et_pb_fullwidth_slider,
html.sg-a11y-invert-colors .et_pb_slide,
html.sg-a11y-invert-colors .et_pb_post_slider,
html.sg-a11y-invert-colors .et_pb_gallery,
html.sg-a11y-invert-colors .et_pb_video,
html.sg-a11y-invert-colors .et_pb_video_box,
html.sg-a11y-invert-colors .et_pb_video_wrap,
html.sg-a11y-invert-colors .et_pb_section_video_bg,
html.sg-a11y-invert-colors [style*="background-image"] {
html.sg-a11y-invert-colors .et_pb_image_wrap,
html.sg-a11y-invert-colors [style*="background-image"],
html.sg-a11y-invert-colors .et_pb_with_background {
  filter: invert(100%) hue-rotate(180deg) !important;
}

/* Guarantee toolbar never inverts or vanishes */
html.sg-a11y-invert-colors #sg-a11y-root,
#sg-a11y-root {
  filter: none !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Readable Font
   -------------------------------------------------------------------------- */
html.sg-a11y-readable-font body,
html.sg-a11y-readable-font body *:not(#sg-a11y-root *):not([class*="fa-"]):not([class*="icon"]):not(svg):not(i) {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  letter-spacing: 0.02em !important;
}

/* --------------------------------------------------------------------------
   Text Alignment
   -------------------------------------------------------------------------- */
html.sg-a11y-align-left body *:not(#sg-a11y-root *):not(i):not(svg) {
  text-align: left !important;
}

html.sg-a11y-align-center body *:not(#sg-a11y-root *):not(i):not(svg) {
  text-align: center !important;
}

html.sg-a11y-align-right body *:not(#sg-a11y-root *):not(i):not(svg) {
  text-align: right !important;
}

/* --------------------------------------------------------------------------
   Underline Links
   -------------------------------------------------------------------------- */
html.sg-a11y-underline-links a:not(#sg-a11y-root *) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   Hide Images (Preserves layout dimensions)
   -------------------------------------------------------------------------- */
html.sg-a11y-hide-images img:not(#sg-a11y-root *),
html.sg-a11y-hide-images picture:not(#sg-a11y-root *),
html.sg-a11y-hide-images video:not(#sg-a11y-root *),
html.sg-a11y-hide-images svg:not(#sg-a11y-root *),
html.sg-a11y-hide-images canvas:not(#sg-a11y-root *) {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.sg-a11y-hide-images [style*="background-image"]:not(#sg-a11y-root *) {
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   Highlight Titles (Headings)
   -------------------------------------------------------------------------- */
html.sg-a11y-highlight-titles h1:not(#sg-a11y-root *),
html.sg-a11y-highlight-titles h2:not(#sg-a11y-root *),
html.sg-a11y-highlight-titles h3:not(#sg-a11y-root *),
html.sg-a11y-highlight-titles h4:not(#sg-a11y-root *),
html.sg-a11y-highlight-titles h5:not(#sg-a11y-root *),
html.sg-a11y-highlight-titles h6:not(#sg-a11y-root *) {
  background-color: #FEF3C7 !important;
  color: #78350F !important;
  border-left: 6px solid var(--sg-blue-primary) !important;
  padding-left: 12px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   Show Focus Outline
   -------------------------------------------------------------------------- */
html.sg-a11y-focus-outline *:focus,
html.sg-a11y-focus-outline *:focus-visible {
  outline: 3px solid var(--sg-blue-primary) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--sg-blue-focus) !important;
}

/* --------------------------------------------------------------------------
   Reduce Motion
   -------------------------------------------------------------------------- */
html.sg-a11y-reduce-motion *,
html.sg-a11y-reduce-motion *::before,
html.sg-a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   Large Cursor (Accessible SVG Data-URIs)
   -------------------------------------------------------------------------- */
html.sg-a11y-large-cursor,
html.sg-a11y-large-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M6 6 L18 40 L24 26 L38 20 Z' fill='%23FFFFFF' stroke='%23000000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"), auto !important;
}

html.sg-a11y-large-cursor a,
html.sg-a11y-large-cursor button,
html.sg-a11y-large-cursor input,
html.sg-a11y-large-cursor select,
html.sg-a11y-large-cursor textarea,
html.sg-a11y-large-cursor [role="button"],
html.sg-a11y-large-cursor [tabindex] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M14 6 C14 4 16 2 18 2 C20 2 22 4 22 6 L22 18 L24 18 C26 18 28 20 28 22 L28 24 C30 24 32 26 32 28 L32 30 C34 30 36 32 36 34 L36 40 C36 44 32 46 26 46 L20 46 C12 46 8 40 8 32 L8 22 C8 18 12 18 14 18 Z' fill='%23FFFFFF' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E"), pointer !important;
}

/* --------------------------------------------------------------------------
   Font Size Scaling (Safe CSS variable application)
   -------------------------------------------------------------------------- */
html[data-sg-font-size-active="true"] body *:not(#sg-a11y-root *):not(i):not(svg):not(script):not(style) {
  font-size: calc(1em * var(--sg-a11y-font-size-ratio, 1)) !important;
}

/* --------------------------------------------------------------------------
   Line Height Scaling
   -------------------------------------------------------------------------- */
html[data-sg-line-height-active="true"] body *:not(#sg-a11y-root *):not(i):not(svg):not(script):not(style) {
  line-height: var(--sg-a11y-line-height-ratio, 1.5) !important;
}

/* --------------------------------------------------------------------------
   Letter Spacing Scaling
   -------------------------------------------------------------------------- */
html[data-sg-letter-spacing-active="true"] body *:not(#sg-a11y-root *):not(i):not(svg):not(script):not(style) {
  letter-spacing: var(--sg-a11y-letter-spacing, 0px) !important;
}

/* --------------------------------------------------------------------------
   Content Scale (Zoom applied to main site children, NOT transform)
   -------------------------------------------------------------------------- */
html.sg-a11y-content-scale-active body > *:not(#sg-a11y-root):not(#sg-a11y-reading-mask):not(#sg-a11y-reading-guide) {
  zoom: var(--sg-a11y-content-scale, 1);
}

/* --------------------------------------------------------------------------
   Column Width (Only affects article / entry-content)
   -------------------------------------------------------------------------- */
html.sg-a11y-col-width-active .entry-content,
html.sg-a11y-col-width-active .post-content,
html.sg-a11y-col-width-active .page-content,
html.sg-a11y-col-width-active .site-main article,
html.sg-a11y-col-width-active article.post,
html.sg-a11y-col-width-active .elementor-widget-theme-post-content,
html.sg-a11y-col-width-active .et_pb_post_content,
html.sg-a11y-col-width-active .wp-block-post-content,
html.sg-a11y-col-width-active main article,
html.sg-a11y-col-width-active main .content-area {
  max-width: var(--sg-a11y-column-width, 600px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --------------------------------------------------------------------------
   Google Translate Bar Suppression (Keeps site & Divi layouts clean)
   -------------------------------------------------------------------------- */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
  visibility: hidden !important;
}

body {
  top: 0px !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   10. Comprehensive 5-Tier Responsive System
   ========================================================================== */

/* Tier 1: Large Desktop (> 1440px) */
@media (min-width: 1441px) {
  :root {
    --sg-panel-width: var(--sg-panel-w-large-desktop, 460px);
    --sg-panel-max-height: var(--sg-panel-h-large-desktop, 88vh);
    --sg-trigger-size: var(--sg-btn-size-large-desktop, 60px);
    --sg-btn-bottom: var(--sg-btn-bottom-large-desktop, 24px);
    --sg-btn-side: var(--sg-btn-side-large-desktop, 24px);
  }
}

/* Tier 2: Standard Desktop (1025px - 1440px) */
@media (max-width: 1440px) and (min-width: 1025px) {
  :root {
    --sg-panel-width: var(--sg-panel-w-desktop, 420px);
    --sg-panel-max-height: var(--sg-panel-h-desktop, 86vh);
    --sg-trigger-size: var(--sg-btn-size-desktop, 56px);
    --sg-btn-bottom: var(--sg-btn-bottom-desktop, 20px);
    --sg-btn-side: var(--sg-btn-side-desktop, 20px);
  }
}

/* Tier 3: Tablet Landscape (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --sg-panel-width: var(--sg-panel-w-tablet-land, 400px);
    --sg-panel-max-height: var(--sg-panel-h-tablet-land, 85vh);
    --sg-trigger-size: var(--sg-btn-size-tablet-land, 54px);
    --sg-btn-bottom: var(--sg-btn-bottom-tablet-land, 18px);
    --sg-btn-side: var(--sg-btn-side-tablet-land, 18px);
  }

  .sg-a11y-panel {
    max-width: calc(100vw - 32px) !important;
  }
}

/* Tier 4: Tablet Portrait (481px - 768px) */
@media (max-width: 768px) and (min-width: 481px) {
  :root {
    --sg-panel-width: var(--sg-panel-w-tablet, 380px);
    --sg-panel-max-height: var(--sg-panel-h-tablet, 85vh);
    --sg-trigger-size: var(--sg-btn-size-tablet, 50px);
    --sg-btn-bottom: var(--sg-btn-bottom-tablet, 16px);
    --sg-btn-side: var(--sg-btn-side-tablet, 16px);
  }

  .sg-a11y-panel {
    max-width: calc(100vw - 28px) !important;
  }
}

/* Tier 5: Mobile Phones (<= 480px) */
@media (max-width: 480px) {
  :root {
    --sg-panel-width: var(--sg-panel-w-mobile, 96%);
    --sg-panel-max-height: var(--sg-panel-h-mobile, 88vh);
    --sg-trigger-size: var(--sg-btn-size-mobile, 48px);
    --sg-btn-bottom: var(--sg-btn-bottom-mobile, 12px);
    --sg-btn-side: var(--sg-btn-side-mobile, 12px);
  }

  .sg-a11y-trigger {
    width: var(--sg-trigger-size, 48px) !important;
    height: var(--sg-trigger-size, 48px) !important;
    bottom: var(--sg-btn-bottom, 12px) !important;
  }

  .sg-a11y-panel {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: var(--sg-panel-max-height, 88vh) !important;
    border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0 !important;
    border-bottom: none !important;
    transform: translateY(100%) !important;
  }

  .sg-a11y-panel.sg-a11y-open {
    transform: translateY(0) !important;
  }

  .sg-a11y-panel-header {
    padding: 12px 16px !important;
  }

  .sg-a11y-panel-title {
    font-size: 15px !important;
  }

  .sg-a11y-panel-body {
    padding: 14px 14px 18px 14px !important;
  }

  .sg-a11y-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .sg-a11y-btn {
    min-height: 64px !important;
    padding: 10px 6px !important;
  }

  .sg-a11y-btn-label {
    font-size: 11.5px !important;
  }

  .sg-a11y-segmented-control {
    gap: 6px !important;
  }

  .sg-a11y-seg-btn {
    padding: 8px 4px !important;
    font-size: 11px !important;
  }

  .sg-a11y-panel-footer {
    padding: 12px 14px !important;
  }
}