/* =========================================================================
   Fibo — widget dostępności (HF-603). Współpracuje z /a11y-widget.js.
   Dwie części: (1) wygląd samego widgetu (.fibo-a11y*), (2) tryby na <html> (.a11y-*).
   Tryby działają na „kontenerach treści" — NIE na <html>/<body> — bo `filter` na przodku
   łamie position: fixed (sticky bar, baner zgód, modal, sam widget). Kontenery treści:
     body > :not(main):not(.fibo-a11y)   (nagłówek, stopka, sticky bar, baner zgód)
     main > *                            (sekcje strony; modal rezerwacji też jest tu)
   ========================================================================= */

/* ---------- 1. Widget ---------- */
.fibo-a11y { --fibo-a11y-bottom: 16px; font-family: Verdana, Tahoma, Arial, sans-serif; }

.fibo-a11y__btn {
  position: fixed; left: 12px; bottom: var(--fibo-a11y-bottom); z-index: 55;
  width: 48px; height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #2f2570; color: #fff;
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 4px 14px rgba(20, 15, 50, .35);
  cursor: pointer;
}
.fibo-a11y__btn:hover { background: #4736b3; }

.fibo-a11y__panel {
  position: fixed; left: 12px; bottom: calc(var(--fibo-a11y-bottom) + 58px); z-index: 55;
  width: 360px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--fibo-a11y-bottom) - 58px - 12px);
  max-height: calc(100dvh - var(--fibo-a11y-bottom) - 58px - 12px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 14px;
  background: #fff; color: #2a2338;
  border: 1px solid #c9c4dd; border-radius: 16px;
  box-shadow: 0 18px 40px rgba(20, 15, 50, .3);
  font-size: 15px; line-height: 1.3; text-align: left; letter-spacing: normal; word-spacing: normal;
}
.fibo-a11y__panel[hidden], .fibo-a11y__tip[hidden] { display: none; }

/* Telefon (HF-1048): przycisk nie pływa nad treścią — w nagłówku albo w lewym polu paska .sticky-cta
   (pozycję wybiera a11y-widget.js; pasek ma padding-left na przycisk w CSS strony). */
.fibo-a11y--top .fibo-a11y__btn { position: absolute; top: 14px; right: 12px; left: auto; bottom: auto; }
.fibo-a11y--top .fibo-a11y__panel { top: 72px; bottom: auto; max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); }
.fibo-a11y--docked .fibo-a11y__btn { box-shadow: none; }

.fibo-a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fibo-a11y__title { margin: 0; font-size: 20px; font-weight: 700; color: #2f2570; }
.fibo-a11y__close {
  width: 44px; height: 44px; padding: 0;
  font-size: 28px; line-height: 1; color: #2a2338;
  background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.fibo-a11y__close:hover { background: #eeecfa; }

.fibo-a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fibo-a11y__tile {
  position: relative; min-height: 60px; padding: 8px 26px 8px 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  font: inherit; font-size: 14px; font-weight: 600; text-align: left; color: #2a2338;
  background: #f3f1ff; border: 2px solid #c9c4dd; border-radius: 12px; cursor: pointer;
}
.fibo-a11y__tile:hover { border-color: #5a4ad1; }
.fibo-a11y__state { font-size: 12.5px; font-weight: 400; }
.fibo-a11y__tile[aria-pressed="true"] { background: #5a4ad1; border-color: #2f2570; color: #fff; }
.fibo-a11y__tile[aria-pressed="true"]::after {
  content: "\2713"; position: absolute; top: 6px; right: 9px; font-size: 16px; font-weight: 700;
}

.fibo-a11y__reset {
  width: 100%; min-height: 48px; margin-top: 10px; padding: 0 14px;
  font: inherit; font-size: 15px; font-weight: 700; color: #2f2570;
  background: #fff; border: 2px solid #2f2570; border-radius: 12px; cursor: pointer;
}
.fibo-a11y__reset:hover { background: #eeecfa; }

.fibo-a11y__btn:focus-visible, .fibo-a11y__close:focus-visible,
.fibo-a11y__tile:focus-visible, .fibo-a11y__reset:focus-visible {
  outline: 3px solid #ffb400; outline-offset: 2px;
  box-shadow: 0 0 0 5px #2a2338;
}

.fibo-a11y__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fibo-a11y__tip {
  position: fixed; z-index: 70; max-width: min(320px, calc(100vw - 16px));
  padding: 8px 12px; pointer-events: none;
  background: #2a2338; color: #fff; border: 2px solid #fff; border-radius: 8px;
  font: 600 14px/1.35 Verdana, Tahoma, Arial, sans-serif; letter-spacing: normal; word-spacing: normal;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* Tekst zastępczy obrazów — widoczny tylko w trybie „Ukryj obrazy" */
.fibo-a11y-alt { display: none; }

/* ---------- 2. Tryby (klasy na <html>) ---------- */

/* Duży tekst — style strony są w px, więc skalujemy kontenery przez `zoom`
   (nie rusza position: fixed ani samego widgetu, który nie jest kontenerem treści). */
html.a11y-text-1 :is(body > :not(main):not(.fibo-a11y), main > *) { zoom: 1.25; }
html.a11y-text-2 :is(body > :not(main):not(.fibo-a11y), main > *) { zoom: 1.5; }

/* Przyjazny dla dysleksji — systemowy, czytelny stos fontów (bez plików fontów) */
html.a11y-dyslexia :is(body > :not(main):not(.fibo-a11y), main > *),
html.a11y-dyslexia :is(body > :not(main):not(.fibo-a11y), main > *) * {
  font-family: Verdana, Tahoma, Arial, sans-serif !important;
  letter-spacing: .05em !important;
  word-spacing: .12em !important;
  line-height: 1.7 !important;
  font-style: normal !important;
}

/* Odstępy między tekstami (WCAG 1.4.12: litery .12em, słowa .16em) */
html.a11y-spacing :is(body > :not(main):not(.fibo-a11y), main > *),
html.a11y-spacing :is(body > :not(main):not(.fibo-a11y), main > *) * {
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}

/* Wysokość linii */
html.a11y-lineheight-1 :is(body > :not(main):not(.fibo-a11y), main > *),
html.a11y-lineheight-1 :is(body > :not(main):not(.fibo-a11y), main > *) * { line-height: 1.9 !important; }
html.a11y-lineheight-2 :is(body > :not(main):not(.fibo-a11y), main > *),
html.a11y-lineheight-2 :is(body > :not(main):not(.fibo-a11y), main > *) * { line-height: 2.4 !important; }

/* Wyrównanie tekstu do lewej */
html.a11y-align :is(body > :not(main):not(.fibo-a11y), main > *),
html.a11y-align :is(body > :not(main):not(.fibo-a11y), main > *) * { text-align: left !important; }

/* Wyróżnij linki */
html.a11y-links :is(body > :not(main):not(.fibo-a11y), main > *) a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
  font-weight: 700 !important;
}

/* Zatrzymaj animacje */
html.a11y-animations,
html.a11y-animations *,
html.a11y-animations *::before,
html.a11y-animations *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Ukryj obrazy (img, wideo + poster, tła obrazkowe); alt zostaje jako tekst */
html.a11y-images :is(body > :not(main):not(.fibo-a11y), main > *) img,
html.a11y-images :is(body > :not(main):not(.fibo-a11y), main > *) video { display: none !important; }
html.a11y-images :is(body > :not(main):not(.fibo-a11y), main > *),
html.a11y-images :is(body > :not(main):not(.fibo-a11y), main > *) * { background-image: none !important; }
html.a11y-images .fibo-a11y-alt {
  display: block; margin: 8px 0; padding: 8px 12px;
  border: 2px dashed currentColor; border-radius: 8px;
  font-size: 15px; font-style: italic; line-height: 1.4;
}

/* Kursor — duży (PNG 40×40 w data: URI, bez żądań sieciowych) */
html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABfUlEQVR42s3YixGDIAwGYDdgBEdgBEZwBEdhBEdgBEdgBEZwBEdITU9aTrFCJRDvUvs42+/+omA6AOi2MvDdzP4ei8KHHs6b4QRUXjWOY4i0WwlWwG57eUC61sgTkBsyCsQahgHWdQ2RPSsglpQyROITyQrIAXkL9MhlWZogk4BYQghwzoXIkRUwgoQayCxgC2Q20CONCadv0KyAvg5Iww5YA/kYiDVNExmyCJBy/i4GpEIWBVIgiwMj87d7MjWSAEsuMsiAF8i6QARorX/WPM/hmFRVgTjlBQndbSvpehAxsc8wpcNZayNlyMagH0cISUhRN7snwX1CimvpO8BLoFLqNL7wIlw7xdT74vdqAO9LrsYpVYqpnQWx/3D1FHN6M6ZFijndrb7FWOwy+4O5KRYD+oTu+i+fFPEsjwGxp/NkavsFTK13itba0zow6D6QJJhanxQxLfxLDzDc5lLtkX8PtBcLAlO6TffvgdJfF/e9pmpyPv0CBRV6M6zrBfng/+DtM23KAAAAAElFTkSuQmCC") 3 2, auto !important;
}
html.a11y-cursor input:not([type="checkbox"]):not([type="radio"]),
html.a11y-cursor textarea { cursor: text !important; }

/* Nasycenie — filtr na kontenerach treści, nigdy na <html>/<body> */
html.a11y-saturation-1 :is(body > :not(main):not(.fibo-a11y), main > *) { filter: saturate(.35); }
html.a11y-saturation-2 :is(body > :not(main):not(.fibo-a11y), main > *) { filter: grayscale(1); }

/* Kontrast+ — czarne tło, biały tekst, żółte linki i przyciski (≥ 15:1) */
html.a11y-contrast,
html.a11y-contrast body,
html.a11y-contrast main,
html.a11y-contrast :is(body > :not(main):not(.fibo-a11y), main > *),
html.a11y-contrast :is(body > :not(main):not(.fibo-a11y), main > *) * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.a11y-contrast :is(body > :not(main):not(.fibo-a11y), main > *) *::before,
html.a11y-contrast :is(body > :not(main):not(.fibo-a11y), main > *) *::after { color: #ffeb3b !important; }
html.a11y-contrast :is(body > :not(main):not(.fibo-a11y), main > *) a,
html.a11y-contrast :is(body > :not(main):not(.fibo-a11y), main > *) a * { color: #ffeb3b !important; }
html.a11y-contrast :is(body > :not(main):not(.fibo-a11y), main > *) :is(button, .btn, input[type="submit"], input[type="button"]) {
  background-color: #ffeb3b !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}
html.a11y-contrast :is(body > :not(main):not(.fibo-a11y), main > *) :is(input, textarea, select) {
  border: 2px solid #fff !important;
}
html.a11y-contrast :is(body > :not(main):not(.fibo-a11y), main > *) ::placeholder { color: #ddd !important; opacity: 1; }
html.a11y-contrast .fibo-a11y__btn { background: #000; border-color: #ffeb3b; color: #ffeb3b; }
html.a11y-contrast .fibo-a11y__panel { background: #000; color: #fff; border-color: #fff; }
html.a11y-contrast .fibo-a11y__title,
html.a11y-contrast .fibo-a11y__close { color: #ffeb3b; }
html.a11y-contrast .fibo-a11y__tile,
html.a11y-contrast .fibo-a11y__reset { background: #000; color: #fff; border-color: #fff; }
html.a11y-contrast .fibo-a11y__tile[aria-pressed="true"] { background: #ffeb3b; color: #000; }

/* Powiększony tekst: długie słowa łamią się zamiast wychodzić poza ekran */
html[class*="a11y-text-"] :is(body > :not(main):not(.fibo-a11y), main > *),
html[class*="a11y-text-"] :is(body > :not(main):not(.fibo-a11y), main > *) * { overflow-wrap: anywhere; }