/* ═══ InoLeap Native Accessibility Controls ═══
 * CSS Custom Properties + Base Styles
 * WCAG 2.1 AA compliant, RTL-ready, reduced-motion aware
 * Version: 1.0.0
 * ═══════════════════════════════════════════════ */

:root {
  /* ─── Font Scaling ─── */
  --a11y-font-scale: 1;
  --a11y-font-min: 0.75;
  --a11y-font-max: 2;
  --a11y-font-step: 0.125;

  /* ─── Line Height ─── */
  --a11y-line-height: 1.5;
  --a11y-line-height-min: 1;
  --a11y-line-height-max: 3;
  --a11y-line-height-step: 0.25;

  /* ─── Letter Spacing ─── */
  --a11y-letter-spacing: 0;
  --a11y-letter-spacing-min: 0;
  --a11y-letter-spacing-max: 0.25;
  --a11y-letter-spacing-step: 0.05;

  /* ─── Font Weight ─── */
  --a11y-font-weight: 400;
  --a11y-font-weight-min: 300;
  --a11y-font-weight-max: 700;
  --a11y-font-weight-step: 100;

  /* ─── Font Family ─── */
  --a11y-font-family: var(--bs-body-font-family, system-ui, -apple-system, sans-serif);
  --a11y-dyslexic-font: "OpenDyslexic3", var(--bs-body-font-family, system-ui, -apple-system, sans-serif);

  /* ─── Contrast Modes ───
     Dark/Light are implemented by driving data-bs-theme on <html> (see
     a11y-controls.js → syncSiteTheme), which reuses the platform's own
     --il-* dark palette and dark-mode-fixes.css. These variables remain the
     fallback source for the panel chrome so it stays in sync with Bootstrap
     in every theme. */
  --a11y-contrast-mode: normal;
  --a11y-bg: var(--bs-body-bg, #fff);
  --a11y-text: var(--bs-body-color, #212529);
  --a11y-link: var(--bs-link-color, #0d6efd);
  --a11y-border: var(--bs-border-color, #dee2e6);

  /* ─── Animation ─── */
  --a11y-reduce-motion: 0;
  --a11y-transition-duration: 0.2s;

  /* ─── Focus Indicators ───
     Follow the theme's primary color: indigo accent in dark mode, Bootstrap
     blue in light - always ≥3:1 against the surface it appears on. */
  --a11y-focus-width: 2px;
  --a11y-focus-offset: 2px;
  --a11y-focus-color: var(--ino-accent, var(--bs-primary, #0d6efd));

  /* ─── Active/Selected states ───
     Contrast-safe "selected" color for the panel chrome in every theme.
     Light: indigo #5a5de0 keeps ≥5.1:1 with white text (matches the site's
     indigo primary). Dark: bright green with near-black text for high
     contrast against dark surfaces. */
  --a11y-active: #5a5de0;
  --a11y-active-text: #fff;
}

/* Dark active state: bright green + dark text stays readable on #18191a/il-*/
html[data-bs-theme="dark"] {
  --a11y-active: #00b35f;
  --a11y-active-text: #0a0f0a;
}

/* ═══ Font Faces ─── */
@font-face {
  font-family: 'OpenDyslexic3';
  src: url('../fonts/opendyslexic3/OpenDyslexic3-Regular.woff') format('woff'),
       url('../fonts/opendyslexic3/OpenDyslexic3-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ═══ Application: Apply CSS variables to page content ─── */
html {
  font-size: calc(1rem * var(--a11y-font-scale, 1));
  letter-spacing: calc(var(--a11y-letter-spacing, 0) * 1em);
}

/* line-height must reach body+components - html-level line-height was
   shadowed by Bootstrap/modern-redesign rules, making the slider a
   no-op. Gated on a data attribute so defaults don't fight the design. */
[data-a11y-line-height="custom"] body,
[data-a11y-line-height="custom"] :where(
  h1, h2, h3, h4, h5, h6, p, li, dd, dt,
  blockquote, figcaption, label, legend, td, th, caption,
  .nav-link, .dropdown-item, .card-body, .card-title,
  .list-group-item, .alert, .btn, .form-control, .form-select
) {
  line-height: var(--a11y-line-height) !important;
}

/* The admin-set hero height (fixed px) would clip the search form once
   any typography control makes it taller - let the hero grow.
   data-a11y-typography covers font-scale, line-height, letter-spacing,
   font-weight and font-family (set by a11y-controls.js). */
[data-a11y-typography="custom"] #homepage .hero-wrap:not(.only-search-bar) {
  height: auto !important;
  max-height: none !important;
}

/* Big text needs wide fields: the fixed Bootstrap columns (25%/50%) get
   too narrow for scaled text, so let the search cols wrap to full rows.
   rem basis scales with the zoom - at default/shrink nothing changes. */
[data-a11y-typography="custom"] .search-row .search-col {
  flex: 1 1 11rem !important;
  max-width: 100% !important;
}

/* Row 2 holds 4 controls (check-in, check-out, guests, Find). A natural
   flex wrap produces a lopsided 3+1 split, so force a balanced 2×2 grid
   whenever typography is customized. */
[data-a11y-typography="custom"] .search-row ~ .search-row .search-col {
  flex: 1 1 40% !important;
  max-width: 50% !important;
}

/* Wrapped fields must read as independent controls, not a sliced
   seamless bar: the desktop rules zero the inner corner radii, which
   leaves half-rounded cells once wrapping kicks in. Give every field
   uniform rounding and breathing room at any wrap point. The homepage
   has its own 24px ID-scoped radius rules (#homepage .search-col…), so
   matching specificity is required there - 24px is the design radius. */
[data-a11y-typography="custom"] .search-row {
  gap: 0.75rem 0.5rem;
}
[data-a11y-typography="custom"] .search-row.mb-1 {
  margin-bottom: 0.75rem !important;
}

/* The fixed-height hero normally gives the form generous space; once it
   grows with the text the bottom spacing must be restored explicitly or
   the form touches the next section. */
[data-a11y-typography="custom"] #homepage .hero-wrap:not(.only-search-bar) {
  padding-bottom: 1.5rem;
}
[data-a11y-typography="custom"] .search-row .search-col .ino-field,
[data-a11y-typography="custom"] .search-row .search-col .ino-search-btn {
  border-start-start-radius: 16px !important;
  border-start-end-radius: 16px !important;
  border-end-start-radius: 16px !important;
  border-end-end-radius: 16px !important;
}
[data-a11y-typography="custom"] #homepage .search-row .search-col .ino-field,
[data-a11y-typography="custom"] #homepage .search-row .search-col .ino-search-btn {
  border-start-start-radius: 24px !important;
  border-start-end-radius: 24px !important;
  border-end-start-radius: 24px !important;
  border-end-end-radius: 24px !important;
}

[data-a11y-letter-spacing="custom"] :where(
  h1, h2, h3, h4, h5, h6, p, li, dd, dt,
  blockquote, figcaption, label, td, th,
  .nav-link, .dropdown-item, .card-body, .card-title,
  .list-group-item, .alert, .btn, .form-control, .form-select
) {
  letter-spacing: calc(var(--a11y-letter-spacing, 0) * 1em) !important;
}

body {
  font-family: var(--a11y-font-family, var(--bs-body-font-family, system-ui, -apple-system, sans-serif));
  font-weight: var(--a11y-font-weight, 400);
  cursor: default;
}

/* Apply font family for dyslexic - icon fonts (Bootstrap Icons, Font
   Awesome, Material Icons) must keep their own family or they render as
   empty boxes. Flag icons are <img> elements and are unaffected. */
/* Paid-package badges and map price markers are also excluded: they are
   fixed-size brand elements whose canonical pill geometry depends on the
   designed font - wider dyslexic glyphs deform them. Their only child is
   an icon-font <i>, already excluded above; plain text has no element. */
[data-a11y-font="dyslexic"] *:not(.bi):not([class*=" bi-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-duotone):not([class*=" fa-"]):not(.material-icons):not([class*="material-symbols"]):not(.ino-price-marker):not(.ino-cluster-marker):not(.vip-badge):not(.seller-badge) {
  font-family: var(--a11y-dyslexic-font) !important;
}

/* Icon fonts and fixed-size counters must not inherit a11y letter-spacing
   or line-height. They render a single glyph/short count centered inside
   a fixed circle, and tracking space lands only on the trailing side of
   the glyph box - so flex/grid centering pushes the glyph visibly
   off-center (notification bell icons, map markers, badge counts, round
   overlay buttons). line-height:1 also stops an inherited tall line box
   from dragging the glyph away from the circle's vertical center. */
.bi, [class^="bi-"], [class*=" bi-"],
.fa, .fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-duotone,
.material-icons, [class*="material-symbols"],
.notification-badge, .subcat-filter-badge, .clg-promote-btn {
  letter-spacing: normal;
  line-height: 1;
}

/* Map markers keep their own geometry: the price pill centers text via
   line-height = pill height in search-map.css (now backed by flexbox), and
   the cluster centers via flexbox. Forcing line-height:1 on them here
   (this file loads after search-map.css) pushed the price digits to the
   pill's top. Only the letter-spacing shield is needed - the html-level
   tracking calc still inherits into map overlays. */
.ino-cluster-marker, .ino-price-marker {
  letter-spacing: normal;
}

/* ═══ Contrast Modes ───
   Dark/Light modes do NOT use a blanket override anymore. They drive
   data-bs-theme="dark"/"light" on <html> (a11y-controls.js → syncSiteTheme),
   so the platform's own --il-* palette, Bootstrap v5.3 color-mode variables
   (--bs-body-emphasis-color, --bs-dropdown-link-hover-bg, color-scheme…)
   and dark-mode-fixes.css all apply. That fixes the two dark-mode failures:
   navbar .link-body-emphasis (was 1.09:1, now --bs-body-emphasis-color
   flips) and .dropdown-item:hover (now uses the dark hover background).

   "High" stays a contrast-boost layer, NOT a palette swap: the site's own
   colors remain and become more differentiated (deeper shadows, separated
   hues). A `filter` creates a containing block for fixed descendants, so it
   is applied only to content containers that hold no .modal/navbar fixed
   elements - main's non-modal children and footer.
   */
html[data-a11y-contrast="high"] #main-content > :not(.modal):not(:has(.modal)),
html[data-a11y-contrast="high"] body > footer,
html[data-a11y-contrast="high"] #main-wrapper.auth-login-register {
  filter: contrast(1.28) saturate(1.15);
}

/* color-scheme / native widget theming (selects, scrollbars, date inputs)
   flips automatically through data-bs-theme - no extra rules needed here. */

/* ═══ Reduced Motion ─── */
[data-a11y-motion="reduced"] *,
[data-a11y-motion="reduced"] *::before,
[data-a11y-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ═══ Focus Visible (WCAG 2.4.7) ─── */
*:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
  outline-offset: var(--a11y-focus-offset) !important;
}

/* ═══ Panel Styles ───
   The panel chrome is insulated from its own controls: it uses a fixed
   16px base and em units internally so font-scale/weight/letter-spacing
   applied to the page do not distort the panel itself. */
.a11y-ctrl-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: var(--a11y-font-family);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
}

html[dir="rtl"] .a11y-ctrl-panel {
  right: auto;
  left: 24px;
}

/* Panel Container */
.a11y-ctrl-panel-content {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  /* vh on mobile counts the collapsing URL bar - dvh tracks the real
     viewport. Listed second so older browsers keep the vh fallback. */
  max-height: 70vh;
  max-height: 70dvh;
  background: var(--a11y-bg, #fff);
  color: var(--a11y-text, #212529);
  border: 2px solid var(--a11y-border, #dee2e6);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  overflow: hidden;
  display: none;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  transition: opacity var(--a11y-transition-duration) ease, transform var(--a11y-transition-duration) ease;
}

html[dir="rtl"] .a11y-ctrl-panel-content {
  right: auto;
  left: 0;
}

.a11y-ctrl-panel-content.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Panel Header */
.a11y-ctrl-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.25em;
  border-bottom: 1px solid var(--a11y-border, #dee2e6);
  background: var(--a11y-bg, #fff);
}

.a11y-ctrl-panel-title {
  /* !important needed: theme CSS pins h2/h3 font-size with !important */
  font-weight: 600 !important;
  font-size: 1.125em !important;
  letter-spacing: normal !important;
  margin: 0;
  color: var(--a11y-text, #212529);
}

.a11y-ctrl-panel-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--a11y-border, #dee2e6);
  color: var(--a11y-text, #212529);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--a11y-transition-duration) ease, color var(--a11y-transition-duration) ease;
}

.a11y-ctrl-panel-close:hover {
  background: var(--a11y-border, #dee2e6);
}

.a11y-ctrl-panel-close:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
}

.a11y-ctrl-panel-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Panel Body */
.a11y-ctrl-panel-body {
  padding: 1em 1.25em;
  overflow-y: auto;
  flex: 1;
  /* Keep panel scrolling self-contained on touch screens - without this
     a bottomed-out panel scroll chains into the (locked) page behind it. */
  overscroll-behavior: contain;
}

.a11y-ctrl-section {
  margin-bottom: 1.5em;
}

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

.a11y-ctrl-section-title {
  font-size: 0.875em !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--a11y-text, #212529);
  opacity: 0.7;
  margin: 0 0 0.75em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--a11y-border, #dee2e6);
}

/* Controls */
.a11y-ctrl-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
  padding: 0.75em 0;
}

.a11y-ctrl-control-label {
  flex: 1 1 140px;
  min-width: 140px;
}

.a11y-ctrl-control-name {
  font-weight: 500;
  color: var(--a11y-text, #212529);
  margin-bottom: 0.25em;
}

.a11y-ctrl-control-desc {
  font-size: 0.8125em;
  opacity: 0.7;
  color: var(--a11y-text, #212529);
}

/* Select */
.a11y-ctrl-select {
  flex: 0 0 160px;
  padding: 0.5em 2.5em 0.5em 0.75em;
  border: 1px solid var(--a11y-border, #dee2e6);
  border-radius: 8px;
  background: var(--a11y-bg, #fff);
  color: var(--a11y-text, #212529);
  font-family: inherit;
  font-size: 0.875em;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 16px;
  transition: border-color var(--a11y-transition-duration) ease, box-shadow var(--a11y-transition-duration) ease;
}

.a11y-ctrl-select:hover {
  border-color: var(--a11y-focus-color, #0d6efd);
}

.a11y-ctrl-select:focus-visible {
  outline: none;
  border-color: var(--a11y-focus-color, #0d6efd);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a11y-focus-color) 25%, transparent);
}

/* Trigger inside the account dropdown menu: same look as sibling items,
   only distinguished by slightly bolder weight. Color follows the active
   theme's primary (indigo accent in dark mode, Bootstrap blue in light)
   so it stays readable on --il-surface dropdowns too. */
.a11y-ctrl-menu-item {
  color: var(--bs-primary, #4338ca) !important;
  font-weight: 600;
}

.a11y-ctrl-menu-item:hover,
.a11y-ctrl-menu-item:focus {
  color: var(--bs-link-hover-color, #3730a3) !important;
}

.a11y-ctrl-menu-item i {
  color: var(--bs-primary, #4338ca);
}

/* Toggle Buttons */
.a11y-ctrl-toggle-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5em;
  width: 100%;
}

/* Typography step groups: auto-fit collapses unused tracks, so a 2-button
   group (weight) fills 2 columns and a 3-button group fills 3. */
.a11y-ctrl-toggle-group[data-a11y-step-group] {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}

/* Contrast group is 3 options (Normal / High / Dark) - the odd one out
   spans the full second row instead of dangling at half width. */
.a11y-ctrl-toggle-group[data-a11y-contrast] > :last-child {
  grid-column: 1 / -1;
}

.a11y-ctrl-toggle {
  min-width: 0;
  padding: 0.625em 0.5em;
  border: 2px solid var(--a11y-border, #dee2e6);
  border-radius: 10px;
  background: var(--a11y-bg, #fff);
  color: var(--a11y-text, #212529);
  font-family: inherit;
  font-size: 0.875em;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--a11y-transition-duration) ease;
}

.a11y-ctrl-toggle:hover {
  border-color: var(--a11y-focus-color, #0d6efd);
}

.a11y-ctrl-toggle.is-active {
  background: var(--a11y-active, #0d6efd) !important;
  border-color: var(--a11y-active, #0d6efd) !important;
  color: var(--a11y-active-text, #fff) !important;
}

.a11y-ctrl-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a11y-focus-color) 40%, transparent);
}

/* Profiles */
.a11y-ctrl-profiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em;
}

.a11y-ctrl-profile {
  padding: 0.75em;
  border: 2px solid var(--a11y-border, #dee2e6);
  border-radius: 10px;
  background: var(--a11y-bg, #fff);
  color: var(--a11y-text, #212529);
  cursor: pointer;
  transition: all var(--a11y-transition-duration) ease;
  text-align: center;
  min-width: 0;
  overflow-wrap: break-word;
}

.a11y-ctrl-profile:hover {
  border-color: var(--a11y-focus-color, #0d6efd);
}

.a11y-ctrl-profile.is-active {
  border-color: var(--a11y-active, var(--a11y-focus-color, #0d6efd)) !important;
  background: color-mix(in srgb, var(--a11y-active) 12%, var(--a11y-bg)) !important;
}

.a11y-ctrl-profile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a11y-focus-color) 40%, transparent);
}

.a11y-ctrl-profile-name {
  font-weight: 600;
  font-size: 0.875em;
  margin-bottom: 0.25em;
}

.a11y-ctrl-profile-desc {
  font-size: 0.75em;
  opacity: 0.7;
}

/* Reset Button */
.a11y-ctrl-reset {
  width: 100%;
  padding: 0.75em;
  margin-top: 1em;
  border: 2px solid var(--a11y-border, #dee2e6);
  border-radius: 10px;
  background: var(--a11y-bg, #fff);
  color: var(--a11y-text, #212529);
  font-family: inherit;
  font-size: 0.875em;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--a11y-transition-duration) ease;
}

.a11y-ctrl-reset:hover {
  border-color: #dc3545;
  color: #dc3545;
}

.a11y-ctrl-reset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, #dc3545 40%, transparent);
}

/* Keyboard shortcuts - a quiet <details> accordion under Reset */
.a11y-ctrl-shortcuts {
  margin-top: 1em;
  padding-top: 0.75em;
  border-top: 1px solid var(--a11y-border, #dee2e6);
}

.a11y-ctrl-shortcuts-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  font-size: 0.8125em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--a11y-text, #212529);
  opacity: 0.7;
  padding: 0.375em 0.25em;
  border-radius: 6px;
}

.a11y-ctrl-shortcuts-summary::-webkit-details-marker {
  display: none;
}

.a11y-ctrl-shortcuts-summary:hover,
.a11y-ctrl-shortcuts-summary:focus-visible {
  opacity: 1;
}

.a11y-ctrl-shortcuts-summary::after {
  content: '';
  width: 0.55em;
  height: 0.55em;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--a11y-transition-duration) ease;
}

.a11y-ctrl-shortcuts[open] > .a11y-ctrl-shortcuts-summary::after {
  transform: rotate(-135deg);
}

.a11y-ctrl-shortcuts-list {
  list-style: none;
  margin: 0.5em 0 0.25em;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  font-size: 0.8125em;
  color: var(--a11y-text, #212529);
}

.a11y-ctrl-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
}

.a11y-ctrl-keys {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  flex: none;
}

.a11y-ctrl-keys kbd {
  font-family: inherit;
  font-size: 0.95em;
  line-height: 1;
  padding: 0.3em 0.5em;
  border: 1px solid var(--a11y-border, #dee2e6);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--a11y-bg, #fff);
  color: var(--a11y-text, #212529);
  white-space: nowrap;
}

/* Panel Footer */
.a11y-ctrl-panel-footer {
  padding: 1em 1.25em;
  border-top: 1px solid var(--a11y-border, #dee2e6);
  background: var(--a11y-bg, #fff);
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
}

/* Header nav trigger (button styled as nav-link) */
.a11y-ctrl-nav-trigger {
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.a11y-ctrl-nav-trigger > i.bi-universal-access {
  color: var(--bs-primary, #0d6efd);
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}

.a11y-ctrl-nav-trigger:hover > i.bi-universal-access,
.a11y-ctrl-nav-trigger:focus-visible > i.bi-universal-access {
  transform: scale(1.2);
}

/* The generic nav-link::after underline is inset by the link padding,
   which centres it on the button box, not the icon; pin it to the icon. */
.a11y-ctrl-nav-trigger::after {
  left: 50% !important;
  right: auto !important;
  width: 1.375rem !important;
  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center;
}

.a11y-ctrl-nav-trigger:hover::after {
  transform: translateX(-50%) scaleX(1) !important;
}

.a11y-ctrl-nav-trigger:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  border-radius: 4px;
}

/* Screen Reader Only */
.a11y-ctrl-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;
}

/* Skip Link (enhanced) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1em;
  z-index: 10000;
  padding: 0.75em 1.25em;
  background: var(--a11y-active, #0d6efd);
  color: var(--a11y-active-text, #fff);
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: top var(--a11y-transition-duration) ease;
}

.skip-link:focus {
  top: 0;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a11y-focus-color) 40%, transparent);
}

/* Mobile Adjustments */
@media (max-width: 576px) {
  .a11y-ctrl-panel {
    bottom: 1em;
    right: 1em;
  }

  html[dir="rtl"] .a11y-ctrl-panel {
    left: 1em;
  }

  .a11y-ctrl-panel-content {
    width: calc(100vw - 2em);
    max-height: 60vh;
    max-height: 60dvh;
    bottom: 0;
  }

  .a11y-ctrl-profiles {
    grid-template-columns: 1fr;
  }

  .a11y-ctrl-select {
    flex: 0 0 140px;
  }
}

/* Print */
@media print {
  .a11y-ctrl-panel {
    display: none !important;
  }
}
/* ═══ Minimized Chip ───
   When the panel is dismissed via outside click while settings are active,
   this small chip stays in the panel's own corner: one tap reopens, the
   badge X dismisses it entirely. Settings remain applied either way. */
.a11y-ctrl-mini {
  position: fixed;
  /* Sits above the scroll-to-top button, horizontally centered on it:
     the arrow's center is 16px to the right of a 24px-offset 48px chip. */
  bottom: 76px;
  right: 8px;
  z-index: 9999;
}

html[dir="rtl"] .a11y-ctrl-mini {
  right: auto;
  left: 8px;
}

.a11y-ctrl-mini-open {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--a11y-active, #5a5de0);
  color: var(--a11y-active-text, #fff);
  border: none;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.a11y-ctrl-mini-open i {
  font-size: 24px;
  line-height: 1;
}

.a11y-ctrl-mini-close {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--a11y-bg, #fff);
  color: var(--a11y-text, #212529);
  border: 1px solid var(--a11y-border, #dee2e6);
  cursor: pointer;
  padding: 0;
}

html[dir="rtl"] .a11y-ctrl-mini-close {
  left: auto;
  right: -6px;
}

.a11y-ctrl-mini-close svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
}

.a11y-ctrl-mini-open:focus-visible,
.a11y-ctrl-mini-close:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
}

@media print {
  .a11y-ctrl-mini {
    display: none !important;
  }
}