:root {
    --lang-en: #2f6edb;
    --lang-de: #f28c28;
    --lang-en-soft: #eaf1ff;
    --lang-de-soft: #fff1e6;
  
    --bg: #f8f6f2;
    --bg-soft: #fcfbf8;
    --surface: #ffffff;
  
    --text: #1f1f1f;
    --muted: #6e6a63;
    --line: #ddd7cf;
    --line-soft: #eee8df;
  
    --accent: #111111;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --success: #6f8f63;
    --danger: #991b1b;
  
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.03);
  
    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;
  
    --container-width: 3000px;
    --transition-fast: 0.2s ease;
  }
  
  /* ===== RESET ===== */
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    min-width: 0;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  html,
  body {
    max-width: 100%;
  }
  
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #ffffff; /* Tutaj wpisz domyślny kolor reszty Twojej strony */
    min-height: 100vh;
    /* Wyłączenie scroll-anchoringu — przeglądarka domyślnie dopasowuje scrollY przy zmianach
       layoutu (np. animowane kurczenie się headera). To powoduje pętlę: layout change →
       scroll adjustment → scroll event → kolejny layout change → flicker. Wyłączamy tę
       automatykę — przy statycznej stronie home (bez infinite-scroll'a) jej nie potrzebujemy. */
    overflow-anchor: none;
  }

  
  /* ===== BASE ELEMENTS ===== */
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  button,
  input,
  select,
  textarea {
    font: inherit;
  }
  
  input,
  select,
  textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  
  textarea {
    resize: vertical;
  }
  
  button {
    border: 0;
    background: none;
  }
  
  button:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled {
    cursor: not-allowed;
  }
  
  /* ===== FORM DEFAULTS ===== */
  
  input,
  select,
  textarea {
    display: block;
    box-sizing: border-box;
  }
  
  input:focus,
  select:focus,
  textarea:focus,
  button:focus-visible,
  a:focus-visible {
    outline: none;
  }
  
  /* ===== iOS / DATE INPUT FIX ===== */
  
  input[type="date"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  
    background-color: #fff;
    line-height: normal;
  }
  
  input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }
  
  input[type="date"]::-webkit-datetime-edit,
  input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  input[type="date"]::-webkit-datetime-edit-text,
  input[type="date"]::-webkit-datetime-edit-month-field,
  input[type="date"]::-webkit-datetime-edit-day-field,
  input[type="date"]::-webkit-datetime-edit-year-field {
    padding: 0;
  }
  
  /* ===== COMMON UTILITIES ===== */
  
  .hidden {
    display: none !important;
  }
  
  /* Sticky header: skok do kotwicy (#o-nas, #rezerwacje, ...) nie chowa
     początku sekcji pod przyklejonym navbarem */
  html {
      scroll-padding-top: 110px;
  }
  @media (max-width: 991.98px) {
      html {
          scroll-padding-top: 84px;
      }
  }

  /* RESET SYSTEMOWY DLA NAVBARA I FOOTERA */
  .bd-navbar,
  .navbar {
      position: sticky !important;
      top: 0 !important;
      background-color: #1d3557 !important;
      /* Usunięcie efektów przezroczystości narzucanych przez iOS */
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      overflow: visible !important;
  }

  .bd-navbar::before,
  .navbar::before {
      content: "";
      position: absolute;
      /* Wyciągamy maskę o 200px w górę, całkowicie poza ekran */
      top: -200px; 
      left: 0;
      right: 0;
      bottom: 0; 
      
      /* Kolor identyczny z Twoim nagłówkiem */
      background-color: #1d3557 !important; 
      
      /* Wpychamy maskę pod zawartość (teksty/logo) nagłówka */
      z-index: -1; 
  }

  .my-footer {
      background-color: #1d3557 !important;
  }

  /* Offcanvas mobilny — tło identyczne z nagłówkiem (navy).
     UWAGA: #mobileMenu to offcanvas-lg → w headerze (lg+) jest zwykłym paskiem
     nav na ciemnym navy z jasnym tekstem. Ta reguła zostaje dla lg+. */
  #mobileMenu {
      background-color: #1d3557 !important;
  }

  /* Poniżej lg #mobileMenu jest PANELEM offcanvas — dajemy mu jasne tło
     z gradientem wizytówki (#o-nas), a tekst/ikony robimy ciemne dla kontrastu.
     Header (lg+) nietknięty — te reguły działają tylko w trybie offcanvas. */
  @media (max-width: 991.98px) {
    #mobileMenu {
      background-color: #fff !important;
      background-image:
        radial-gradient(28% 38% at  8% 12%, rgba(59, 130, 246, .12), transparent 70%),
        radial-gradient(24% 34% at 38% 80%, rgba(245, 158, 11, .10), transparent 70%),
        radial-gradient(26% 36% at 55% 15%, rgba(245, 158, 11, .09), transparent 70%),
        radial-gradient(22% 30% at 70% 60%, rgba(59, 130, 246, .10), transparent 70%),
        radial-gradient(26% 34% at 93% 20%, rgba(59, 130, 246, .11), transparent 70%),
        radial-gradient(24% 32% at 88% 90%, rgba(245, 158, 11, .11), transparent 70%),
        radial-gradient(20% 28% at 15% 55%, rgba(245, 158, 11, .07), transparent 70%) !important;
    }
    /* Tytuł + linki + ikony ciemne (#1d3557 = kolor nagłówka, spójny z hero) */
    #mobileMenu .offcanvas-title,
    #mobileMenu .nav-link.text-light {
      color: #1d3557 !important;
    }
    /* Separatory: ciemne i subtelne zamiast white-50 */
    #mobileMenu hr.text-white-50 {
      color: #1d3557 !important;
      opacity: .18;
    }
    /* Przycisk zamknięcia: ciemny X (cofamy btn-close-white) */
    #mobileMenu .btn-close {
      filter: none !important;
    }
  }



  /* Style tylko dla urządzeń desktopowych */
  @media (min-width: 992px) {
    .logo-desktop {
      /* Płynne przejście dla transformacji i cienia */
      transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease;
      will-change: transform; /* Optymalizacja dla przeglądarki */
    }

    /* Efekt po najechaniu myszką */
    .logo-desktop:hover {
      /* rotate(-4deg) = obrót w lewo (ccw); scale(1.1) = lekkie powiększenie/wybicie przed szereg */
      transform: scale(1.1) rotate(-1deg);
      /* Opcjonalnie: dodanie lekkiego cienia, aby wzmocnić efekt "wybicia przed" */
      filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
    }
  }

  /* ============================================================
     Header shrink-on-scroll — DWA stany (duży / kompaktowy) z jednym
     przejściem CSS. Szerokość logo (height: auto) steruje wysokością
     navbara, więc header kurczy się razem z logo. JS (app.js) tylko
     przełącza .is-scrolled po progu scrolla — zero animacji per-klatka,
     zero layout thrashingu. Transition na width = jedna płynna animacja.
     ============================================================ */
  .logo-desktop img {
    transition: width .25s ease;
  }
  @media (min-width: 992px) {
    .logo-desktop img { width: 350px; }            /* stan duży (góra strony) */
    .bd-navbar.is-scrolled .logo-desktop img { width: 150px; } /* kompaktowy */
  }
  @media (max-width: 991.98px) {
    .logo-desktop img { width: 220px; }
    .bd-navbar.is-scrolled .logo-desktop img { width: 150px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .logo-desktop img { transition: none; } /* bez animacji = natychmiastowy skok */
  }

  /* ============================================================
     Hero (#o-nas) — przeniesione z inline <style> w home/index.php
     ============================================================ */
  #o-nas .text-brand { color: #1d3557; }
  #o-nas .btn-brand {
    background-color: #1d3557;
    border-color: #1d3557;
    color: #fff;
  }
  #o-nas .btn-brand:hover,
  #o-nas .btn-brand:focus {
    background-color: #16293f;
    border-color: #16293f;
    color: #fff;
  }

  /* Tło: miękkie "cętki" — rozrzucone plamy niebieskiego i pomarańczowego
     (kolory języków z kalendarza), każda rozmyta do przezroczystości */
  #o-nas {
    /* contain: layout — wewnętrzny layout hero jest niezależny (navbar kurcząc
       logo nie przelicza wnętrza #o-nas, tylko jego pozycję).
       will-change: transform — promocja na własną warstwę GPU. Drogi paint hero
       (7 gradientów + grafika galerii, widoczna tylko na desktopie) rasteryzuje
       się RAZ do tekstury; gdy header kompaktuje i strona przesuwa się o kilka
       px, przeglądarka tylko KOMPONUJE gotową teksturę zamiast malować od nowa.
       To eliminuje cięcie na desktopie (na mobile galeria jest ukryta → lekko). */
    contain: layout;
    will-change: transform;
    background:
      radial-gradient(28% 38% at  8% 12%, rgba(59, 130, 246, .12), transparent 70%),
      radial-gradient(24% 34% at 38% 80%, rgba(245, 158, 11, .10), transparent 70%),
      radial-gradient(26% 36% at 55% 15%, rgba(245, 158, 11, .09), transparent 70%),
      radial-gradient(22% 30% at 70% 60%, rgba(59, 130, 246, .10), transparent 70%),
      radial-gradient(26% 34% at 93% 20%, rgba(59, 130, 246, .11), transparent 70%),
      radial-gradient(24% 32% at 88% 90%, rgba(245, 158, 11, .11), transparent 70%),
      radial-gradient(20% 28% at 15% 55%, rgba(245, 158, 11, .07), transparent 70%);
  }

  /* Poniżej lg (breakpoint spójny z resztą sekcji: col-lg, px-lg, me-lg):
     - nagłówek o rząd mniejszy (display-4 → rozmiar display-5)
     - przyciski CTA w rozmiarze domyślnego .btn (pill zostaje) */
  @media (max-width: 991.98px) {
    #o-nas h1 {
      font-size: calc(1.425rem + 2.1vw);
    }
    /* ciaśniej, żeby oba przyciski mieściły się obok siebie na telefonie
       (mniejszy padding + font + odstęp po ikonie) */
    #o-nas .btn-lg {
      /* !important — utility px-4 na przyciskach też ma !important */
      padding: .35rem .85rem !important;
      font-size: .875rem;
    }
    #o-nas .btn-lg .bi {
      margin-right: .35rem !important; /* nadpisuje me-2 */
    }
  }

  /* Lead wyjustowany — linie wypełniają kolumnę równo (hyphens łagodzą
     dziury między wyrazami przy wąskiej kolumnie) */
  #o-nas .hero-lead {
    text-align: justify;
    hyphens: auto;
  }

  /* Akcent w nagłówku: kolor brand + "zakreślacz" w amber (spina się z gradientem) */
  #o-nas .hero-accent {
    color: #1d3557;
    background: linear-gradient(transparent 72%, rgba(245, 158, 11, .35) 72%);
  }

  /* Ikony benefitów w miękkich kafelkach — kontrast robi forma, nie jaskrawość */
  #o-nas .hero-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .65rem;
    background: rgba(29, 53, 87, .08);
    color: #1d3557;
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  /* Chipsy języków */
  #o-nas .hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(29, 53, 87, .18);
    font-size: .9rem;
    font-weight: 600;
    color: #1d3557;
    box-shadow: 0 1px 3px rgba(29, 53, 87, .08);
  }
  #o-nas .hero-chip.is-soon {
    background: transparent;
    border-style: dashed;
    color: #6c757d;
    font-weight: 500;
    box-shadow: none;
  }

  /* Scroll-cue: strzałka pulsująca w dół do kalendarza */
  #o-nas .hero-scroll-cue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: rgba(29, 53, 87, .55);
    text-decoration: none;
    font-size: 1.4rem;
  }
  #o-nas .hero-scroll-cue:hover { color: #1d3557; }

  /* Mikro-animacje: wejście fade-up kaskadą + pulsowanie strzałki.
     prefers-reduced-motion = wszystko statyczne. */
  @media (prefers-reduced-motion: no-preference) {
    #o-nas .hero-fade {
      opacity: 0;
      transform: translateY(14px);
      animation: heroFadeUp .55s ease forwards;
    }
    #o-nas .hero-scroll-cue i {
      animation: heroBounce 2.2s ease-in-out infinite;
    }
    /* Dryf po łuku (translate X+Y, pełna pętla) zamiast góra-dół —
       czas trwania per dymek inline, więc każdy płynie własnym rytmem */
    #o-nas .hero-bubble {
      animation: heroFloat 7s ease-in-out infinite;
    }
  }
  @keyframes heroFloat {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(5px, -9px); }
    50%  { transform: translate(-3px, -15px); }
    75%  { transform: translate(-7px, -6px); }
    100% { transform: translate(0, 0); }
  }
  @keyframes heroFadeUp {
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes heroBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
  }

  /* ============================================================
     Hero — akwarium dymków (komponent home/aquarium.php)
     ============================================================ */
  #o-nas .hero-bubbles {
    position: relative;
    width: 100%;
    min-height: 700px;
    /* oddech od dolnej krawędzi banda — symetrycznie do góry i prawej */
    margin-bottom: 2.5rem;
  }
  #o-nas .hero-bubble {
    position: absolute;
    background: #fff;
    border: 1px solid rgba(29, 53, 87, .15);
    border-radius: 1.25rem;
    border-bottom-left-radius: .25rem; /* "ogonek" dymka */
    padding: .6rem 1.2rem;
    font-weight: 600;
    font-size: 1.15rem;
    color: #1d3557;
    box-shadow: 0 10px 28px rgba(29, 53, 87, .12);
    white-space: nowrap;
  }
  #o-nas .hero-bubble.is-big {
    font-size: 1.6rem;
    padding: .8rem 1.5rem;
  }
  #o-nas .hero-bubble.is-sm {
    font-size: .95rem;
    padding: .45rem .9rem;
  }
  #o-nas .hero-bubble.is-blue  { background: #eff6ff; border-color: rgba(59, 130, 246, .25); }
  #o-nas .hero-bubble.is-amber { background: #fffbeb; border-color: rgba(245, 158, 11, .3); }

  /* ============================================================
     Hero — galeria grafik newsów (komponent home/gallery.php)
     Płynna karuzela: viewport + track (translateX) + strzałki + kropki.
     ============================================================ */
  .hero-gallery {
    position: relative;
    width: 100%;
    max-width: 600px;
    /* Tylko troszkę oddechu — wysokość galerii niesie sama grafika */
    margin: .5rem auto;
    /* Izolacja layoutu najcięższego (obrazkowego) poddrzewa hero. */
    contain: layout;
  }
  .hero-gallery-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    box-shadow: 0 14px 38px rgba(29, 53, 87, .16);
    background: #fff;
  }
  .hero-gallery-track {
    display: flex;
    /* Slajdy równej wysokości (najwyższa grafika); krótsze wyśrodkowane */
    align-items: center;
    /* Płynne, pojedyncze przejście między slajdami */
    transition: transform .6s cubic-bezier(.25, .8, .25, 1);
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-gallery-track { transition: none; }
  }
  .hero-gallery-slide {
    flex: 0 0 100%;
    margin: 0;
    /* Bez wymuszonego kadru — wysokość = naturalna wysokość grafiki */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-gallery-slide picture { display: contents; }
  .hero-gallery-img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Strzałki nawigacji — półprzezroczyste krążki na krawędziach viewportu */
  .hero-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(29, 53, 87, .55);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background .15s, transform .15s;
  }
  .hero-gallery-arrow:hover { background: #1d3557; }
  .hero-gallery-arrow:active { transform: translateY(-50%) scale(.92); }
  .hero-gallery-arrow.is-prev { left: .6rem; }
  .hero-gallery-arrow.is-next { right: .6rem; }

  /* Kropki pozycji — aktywna ciemniejsza i szersza (pigułka) */
  .hero-gallery-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
  }
  .hero-gallery-dot {
    width: .55rem;
    height: .55rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(29, 53, 87, .25);
    cursor: pointer;
    transition: background .2s, width .2s;
  }
  .hero-gallery-dot:hover { background: rgba(29, 53, 87, .45); }
  .hero-gallery-dot.is-active {
    width: 1.5rem;
    background: #1d3557;
  }

  /* ============================================================
     Segmentowy pill-toggle (jak iOS) — ta sama klasa co w portalu
     (dashboard-v20.css), tu z kolorami homepage. Aktywna opcja =
     wypełniona pigułka. Działa z Bootstrap btn-check (radio + label.btn).
     ============================================================ */
  .v20-pill-toggle {
    display: inline-flex;
    width: 100%;
    gap: .2rem;
    padding: .22rem;
    background: #f1f5f9;
    border: 1px solid #dee2e6;
    border-radius: 999px;
  }
  .v20-pill-toggle .btn {
    flex: 1 1 0;
    min-width: 0;             /* pozwól skurczyć się równo na pół */
    border: none !important;
    border-radius: 999px !important;
    background: transparent;
    color: #6c757d;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.2;
    padding: .38rem .6rem;
    white-space: normal;      /* długa etykieta zawija się, nie wylewa poza pigułkę */
    box-shadow: none !important;
    transition: background .2s, color .2s, box-shadow .2s;
  }
  .v20-pill-toggle .btn:hover { color: #212529; }
  .v20-pill-toggle .btn-check:checked + .btn {
    background: #1d3557; /* brand */
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18) !important;
  }
  .v20-pill-toggle .btn-check:focus-visible + .btn {
    outline: 2px solid #1d3557;
    outline-offset: 1px;
  }

  /* ============================================================
     Day-picker (formularz rezerwacji v2) — pille. Stan WYBORU = .active
     (wypełnienie), nie hover. Hover tylko na urządzeniach z kursorem
     (@media hover) → na dotyku brak "sticky hover", widać co zaznaczone.
     ============================================================ */
  .bv2-day-chip {
    min-width: 52px;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--bs-primary, #0d6efd);
    background: #fff;
    color: var(--bs-primary, #0d6efd);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .bv2-day-chip.active {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
  }
  .bv2-day-chip:disabled {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
  }
  /* Hover tylko tam, gdzie jest realny kursor — i tylko subtelne tło (NIE pełny
     fill), żeby nie mylić z zaznaczeniem. Na dotyku ta reguła nie działa. */
  @media (hover: hover) {
    .bv2-day-chip:not(:disabled):not(.active):hover {
      background: rgba(13, 110, 253, .08);
    }
  }

  /* ============================================================
     Modal rezerwacji v2 (#bookingV2Modal) — wcześniej inline <style>
     w unified-booking-modal.php, przeniesione tutaj.
     ============================================================ */
  /* H-UX: przycisk footera zmienia się Zamknij → Zarezerwuj (steruje booking-v2.js,
     setFooterMode). "Zamknij" = zwykły przycisk po prawej; "Zarezerwuj"
     (.bv2-submit-mode) = pill na całą szerokość — desktop i mobile tak samo
     (jedna spójność, mniej wariantów). */
  #bookingV2Modal [data-bv2-footer-btn] {
    transition: background-color .25s ease, border-color .25s ease,
                border-radius .25s ease, color .25s ease;
  }
  #bookingV2Modal [data-bv2-footer-btn].bv2-submit-mode {
    width: 100%;
  }
  /* Fix iOS Safari: modal-dialog-centered (flex align-items:center) rozjeżdża
     pozycję karetki w inputach na mobile — kursor "pływa" pod linią. Na małych
     ekranach wyłączamy centrowanie w pionie; desktop zostaje wyśrodkowany. */
  @media (max-width: 767.98px) {
    #bookingV2Modal .modal-dialog-centered {
      align-items: flex-start;
    }
  }
  /* Guard na poziomy scroll wewnątrz modala (desktop + mobile). Body scrolluje
     pionowo (modal-dialog-scrollable) — ucinamy tylko overflow X. */
  #bookingV2Modal .modal-body { overflow-x: hidden; }

  /* Ten sam guard co #bookingV2Modal wyżej — modal-dialog-scrollable ustawia
     tylko overflow-y, więc overflow-x per spec CSS też staje się "auto"
     (poziomy scrollbar przy najmniejszym przepełnieniu, np. offscreen honeypot). */
  #enrollmentInterestModal .modal-body { overflow-x: hidden; }

  /* "Zamknij" (close, outline) — bez PEŁNEGO wypełnienia na hover/focus/active.
     Domyślnie btn-outline-secondary:hover wypełnia się na szaro, a po kliknięciu
     "Zarezerwuj" kursor/palec zostaje nad przyciskiem → wyglądał jak solid.
     Subtelne tło zamiast fillu (tylko gdy NIE jest w trybie submit/btn-primary). */
  #bookingV2Modal [data-bv2-footer-btn]:not(.btn-primary):hover,
  #bookingV2Modal [data-bv2-footer-btn]:not(.btn-primary):focus,
  #bookingV2Modal [data-bv2-footer-btn]:not(.btn-primary):focus-visible,
  #bookingV2Modal [data-bv2-footer-btn]:not(.btn-primary):active {
    background-color: rgba(108, 117, 125, .08);
    color: #5c636a;
    border-color: #6c757d;
    box-shadow: none;
  }