/* ============================================================
   Optyk Bryle — style.css
   Ciepła, przyjazna paleta: krem / piasek / zieleń butelkowa.
   Mobile-first, dostępność: min 18px tekst bazowy, wysoki kontrast.
   ============================================================ */

/* ---------- Zmienne projektowe ---------- */
:root {
  /* Kolory */
  --krem: #FBF7F1;          /* tło strony */
  --piasek: #F3EBDF;        /* tła sekcji naprzemiennych */
  --piasek-c: #EADFCE;      /* ciemniejszy piasek (obramowania, placeholdery) */
  --zielen: #2E5E4E;        /* akcent — zieleń butelkowa */
  --zielen-c: #234A3D;      /* akcent hover */
  --zielen-tlo: #E8EFE9;    /* delikatne zielone tło (chipy, badge) */
  --atrament: #33291F;      /* tekst główny — ciepły, ciemny brąz */
  --atrament-2: #5C5142;    /* tekst drugorzędny */
  --bialy: #FFFFFF;

  /* Typografia */
  --f-naglowki: "Fraunces", Georgia, "Times New Roman", serif;
  --f-tekst: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Kształty i cienie */
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --cien-1: 0 1px 2px rgba(51, 41, 31, .05), 0 6px 20px rgba(51, 41, 31, .06);
  --cien-2: 0 2px 4px rgba(51, 41, 31, .06), 0 14px 40px rgba(51, 41, 31, .10);

  /* Animacje — mocne krzywe ease-out (szybki start = responsywność) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Reset i podstawy ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-tekst);
  font-size: 18px;            /* baza czytelna dla osób starszych */
  line-height: 1.65;
  color: var(--atrament);
  background: var(--krem);
  overflow-wrap: break-word;
}

img, svg, iframe { max-width: 100%; }

/* Atrybut hidden ma zawsze wygrywać z display: flex/grid */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--f-naglowki);
  font-weight: 560;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.25rem; font-family: var(--f-tekst); font-weight: 650; letter-spacing: 0; }

p { margin: 0 0 1em; }

a {
  color: var(--zielen);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover { color: var(--zielen-c); }

:focus-visible {
  outline: 3px solid var(--zielen);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--zielen); color: var(--krem); }

/* Link pomijania nawigacji (dostępność) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--zielen);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-s) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Układ ---------- */
.container {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--piasek { background: var(--piasek); }

.section-head { max-width: 640px; margin-bottom: clamp(1.8rem, 4vw, 3rem); }

.eyebrow {
  display: inline-block;
  font-size: .875rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--zielen);
  background: var(--zielen-tlo);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.lead { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--atrament-2); }

/* ---------- Przyciski ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;              /* duży cel dotykowy */
  padding: .8rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 650;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  /* Tylko transform + kolory; scale przy wciśnięciu = natychmiastowy feedback */
  transition: transform 160ms var(--ease-out),
              background-color 200ms ease,
              border-color 200ms ease,
              color 200ms ease;
}

.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--zielen);
  color: #fff;
}
.btn--primary:hover { background: var(--zielen-c); color: #fff; }

.btn--secondary {
  background: transparent;
  color: var(--zielen);
  border-color: var(--zielen);
}
.btn--secondary:hover { background: var(--zielen-tlo); color: var(--zielen-c); }

.btn--duzy { min-height: 58px; padding: .95rem 2.1rem; font-size: 1.1rem; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.btn .btn-ikona { flex: none; }

/* ---------- Nagłówek / nawigacja ---------- */
.naglowek {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 241, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--piasek-c);
}

.naglowek-wnetrze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  color: var(--atrament);
  text-decoration: none;
}

.logo-link svg, .logo-link img { height: 44px; width: auto; display: block; }

.nav-glowna { display: none; }

.nav-glowna ul {
  display: flex;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-glowna a {
  display: inline-block;
  padding: .55rem .9rem;
  border-radius: 999px;
  color: var(--atrament);
  text-decoration: none;
  font-weight: 550;
  transition: background-color 180ms ease, color 180ms ease;
}

.nav-glowna a:hover { background: var(--piasek); color: var(--atrament); }

.naglowek-akcje { display: flex; align-items: center; gap: .6rem; }
.naglowek-akcje .btn { min-height: 46px; padding: .55rem 1.25rem; font-size: 1rem; white-space: nowrap; }
.naglowek-tel { display: none; }

/* Przycisk menu mobilnego */
.menu-przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--piasek-c);
  border-radius: var(--radius-s);
  background: var(--bialy);
  color: var(--atrament);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms ease;
}
.menu-przycisk:active { transform: scale(0.94); }

/* Menu mobilne — rozwijane pod nagłówkiem */
.menu-mobilne {
  display: none;
  border-top: 1px solid var(--piasek-c);
  background: var(--krem);
}
.menu-mobilne.otwarte { display: block; }

.menu-mobilne ul { list-style: none; margin: 0; padding: .75rem 0 1rem; }

.menu-mobilne a {
  display: block;
  padding: .85rem .35rem;
  font-size: 1.15rem;
  font-weight: 550;
  color: var(--atrament);
  text-decoration: none;
  border-radius: var(--radius-s);
}
.menu-mobilne a:hover { background: var(--piasek); }

@media (min-width: 900px) {
  .nav-glowna { display: block; }
  .menu-przycisk { display: none; }
  .naglowek-tel { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 85% -10%, var(--zielen-tlo) 0%, transparent 60%),
    radial-gradient(700px 420px at -10% 110%, #F6EDDD 0%, transparent 55%),
    var(--krem);
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.hero-siatka {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.hero-tekst .lead { max-width: 46ch; }

.hero-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.8rem;
}

.hero-zaufanie {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
  color: var(--atrament-2);
  font-size: .98rem;
}

.hero-zaufanie li { display: flex; align-items: center; gap: .5rem; }
.hero-zaufanie svg { color: var(--zielen); flex: none; }

/* Zdjęcie salonu w hero — pierwsze wrażenie robi wnętrze, nie logo */
.hero-foto {
  position: relative;
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--cien-2);
  aspect-ratio: 16 / 11;
}

.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%; /* kadr na ekspozycję okularów, mniej podłogi */
  display: block;
}

.hero-foto figcaption {
  position: absolute;
  left: .9rem;
  bottom: .9rem;
  max-width: calc(100% - 1.8rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: rgba(251, 247, 241, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--atrament);
  font-size: .85rem;
  font-weight: 600;
  box-shadow: var(--cien-1);
}

.hero-foto figcaption svg { color: var(--zielen); flex: none; }

@media (min-width: 900px) {
  .hero-siatka { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; }
  .hero-foto { aspect-ratio: 4 / 3; }
}

/* ---------- Karty usług ---------- */
.uslugi-siatka {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .uslugi-siatka { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .uslugi-siatka { grid-template-columns: repeat(3, 1fr); } }

.usluga {
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-m);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--cien-1);
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .usluga:hover { transform: translateY(-4px); box-shadow: var(--cien-2); }
}

.usluga-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--zielen-tlo);
  color: var(--zielen);
  margin-bottom: 1rem;
}

.usluga h3 { margin-bottom: .4rem; }
.usluga h3 a { color: inherit; text-decoration: none; }
.usluga h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.usluga { position: relative; }
.usluga h3 a:hover { color: var(--zielen); }
.usluga p { margin: 0; color: var(--atrament-2); font-size: 1rem; }

/* ---------- Galeria — mozaika zdjęć salonu ----------
   Kadrowanie robi CSS (object-fit: cover + object-position),
   dzięki czemu oryginały zostają nietknięte. */
.galeria-siatka {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "szerokie szerokie"
    "wysokie  male-1"
    "wysokie  male-2";
}

.foto--szerokie { grid-area: szerokie; aspect-ratio: 16 / 10; }
.foto--wysokie  { grid-area: wysokie; }
.foto--male-1   { grid-area: male-1; aspect-ratio: 1 / 1; }
.foto--male-2   { grid-area: male-2; aspect-ratio: 1 / 1; }

@media (min-width: 760px) {
  .galeria-siatka {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "szerokie szerokie wysokie male-1"
      "szerokie szerokie wysokie male-2";
  }
  /* Proporcje dużego kafla wyznaczają wysokość obu rzędów mozaiki;
     pozostałe kafle rozciągają się do tych rzędów */
  .foto--szerokie { aspect-ratio: 4 / 3; }
  .foto--male-1, .foto--male-2 { aspect-ratio: auto; }
}

.foto {
  position: relative;
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--cien-1);
  background: var(--piasek-c);
}

.foto a {
  position: relative;
  display: block;
  height: 100%;
}

/* Obrazki wyjęte z przepływu, żeby ich naturalna wysokość
   nie rozpychała rzędów mozaiki — kadr kontroluje kafel */
.foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 450ms var(--ease-out);
}

/* Kadry dopasowane do treści każdego zdjęcia */
.foto--szerokie img { object-position: center 42%; }
.foto--wysokie img  { object-position: center; }
.foto--male-1 img   { object-position: center 58%; }
.foto--male-2 img   { object-position: center 55%; }

/* Znaczek lupy — czytelny sygnał „kliknij, żeby powiększyć" */
.foto-lupa {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 247, 241, .92);
  color: var(--zielen);
  box-shadow: var(--cien-1);
  transition: transform 250ms var(--ease-out), background-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .foto a:hover img { transform: scale(1.04); }
  .foto a:hover .foto-lupa { background: var(--bialy); transform: scale(1.08); }
}

.foto a:active img { transform: scale(1.01); }

/* ---------- Lightbox galerii ---------- */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 1100px);
  max-height: 92vh;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(26, 20, 14, .82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lightbox[open] {
  animation: lightbox-wejscie 220ms var(--ease-out);
}

@keyframes lightbox-wejscie {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox-wnetrze { margin: 0; }

/* Wysokość wyznacza rozmiar, szerokość wynika z proporcji zdjęcia —
   dzięki temu dialog (i przyciski) przylegają do krawędzi fotografii */
.lightbox-wnetrze img {
  display: block;
  height: calc(92vh - 5rem);
  width: auto;
  max-width: min(88vw, 1040px);
  margin-inline: auto;
  border-radius: var(--radius-m);
  box-shadow: var(--cien-2);
}

.lightbox-wnetrze figcaption {
  text-align: center;
  color: #F3EBDF;
  font-size: .95rem;
  padding: .9rem 1rem 0;
}

.lightbox-zamknij,
.lightbox-strzalka {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 247, 241, .92);
  color: var(--atrament);
  cursor: pointer;
  box-shadow: var(--cien-1);
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}

.lightbox-zamknij:hover,
.lightbox-strzalka:hover { background: var(--bialy); }

.lightbox-zamknij:active,
.lightbox-strzalka:active { transform: scale(0.92); }

.lightbox-zamknij { top: -0.4rem; right: -0.4rem; }

.lightbox-strzalka { top: 50%; transform: translateY(-50%); }
.lightbox-strzalka:active { transform: translateY(-50%) scale(0.92); }
.lightbox-strzalka--wstecz { left: .6rem; }
.lightbox-strzalka--dalej { right: .6rem; }

@media (min-width: 1240px) {
  .lightbox-strzalka--wstecz { left: -60px; }
  .lightbox-strzalka--dalej { right: -60px; }
}


/* ---------- Opinie ---------- */
.opinie-siatka {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) { .opinie-siatka { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .opinie-siatka { grid-template-columns: repeat(4, 1fr); } }

.opinia {
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-m);
  padding: 1.5rem;
  box-shadow: var(--cien-1);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin: 0;
}

.opinia .gwiazdki { color: #D9A441; letter-spacing: 2px; font-size: 1.05rem; }

.opinia blockquote {
  margin: 0;
  font-size: 1rem;
  color: var(--atrament);
}

.opinia figcaption {
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 650;
  font-size: .95rem;
  color: var(--atrament-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

/* Badge „opinia z Google" pod cytatem */
.badge-google {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .5rem;
  padding: .2rem .55rem .2rem .45rem;
  border: 1px solid var(--piasek-c);
  border-radius: 999px;
  background: var(--bialy);
  font-size: .78rem;
  font-weight: 550;
  color: var(--atrament-2);
  white-space: nowrap;
}
.badge-google svg { flex: none; }

.opinie-notka {
  margin-top: 1.2rem;
  font-size: .9rem;
  color: var(--atrament-2);
}

/* ---------- Lokalizacja ---------- */
.lokalizacja-siatka {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .lokalizacja-siatka { grid-template-columns: 1.2fr .8fr; align-items: stretch; }
}

.mapa-ramka {
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--piasek-c);
  box-shadow: var(--cien-1);
  min-height: 340px;
  display: flex;
}

.mapa-ramka iframe {
  border: 0;
  width: 100%;
  min-height: 340px;
  flex: 1;
}

.info-karta {
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-m);
  box-shadow: var(--cien-1);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.info-wiersz { display: flex; gap: .9rem; align-items: flex-start; }
.info-wiersz svg { flex: none; color: var(--zielen); margin-top: 3px; }
.info-wiersz strong { display: block; margin-bottom: .15rem; }
.info-wiersz a { font-weight: 600; }

.godziny { margin: 0; }
.godziny div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .2rem 0;
}
.godziny dt { color: var(--atrament-2); }
.godziny dd { margin: 0; font-weight: 600; }

/* ---------- Pasek CTA / kontakt ---------- */
.cta-panel {
  background: var(--zielen);
  color: #fff;
  border-radius: var(--radius-l);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  box-shadow: var(--cien-2);
}

.cta-panel h2 { color: #fff; }
.cta-panel p { color: #D9E5DE; max-width: 52ch; margin-inline: auto; }
.cta-panel a { color: #fff; }
.cta-panel a:hover { color: #CFE0D6; }

.cta-panel .btn--primary { background: var(--krem); color: var(--zielen); }
.cta-panel .btn--primary:hover { background: #fff; color: var(--zielen-c); }
.cta-panel .btn--secondary { border-color: rgba(255,255,255,.6); color: #fff; }
.cta-panel .btn--secondary:hover { background: rgba(255,255,255,.12); color: #fff; }

.cta-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  margin-top: 1.6rem;
}

/* ---------- Stopka ---------- */
.stopka {
  background: #2A231B;
  color: #E9E0D2;
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  margin-top: clamp(3.5rem, 8vw, 6rem);
}

.stopka a { color: #fff; }
.stopka a:hover { color: #CFE0D6; }

.stopka-siatka {
  display: grid;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(233, 224, 210, .18);
}

@media (min-width: 760px) { .stopka-siatka { grid-template-columns: repeat(3, 1fr); } }

.stopka h2 {
  font-size: 1.05rem;
  font-family: var(--f-tekst);
  font-weight: 700;
  color: #fff;
  margin-bottom: .8rem;
}

.stopka-logo { color: #fff; }

/* Logo w stopce: jasna „plakietka", bo logo jest wielobarwne,
   a tło stopki ciemne. Działa niezależnie od tego, czy PNG ma
   przezroczystość — dlatego zrezygnowaliśmy z maski CSS. */
.stopka-logo-img {
  display: block;
  width: 152px;
  aspect-ratio: 652 / 390;
  background: #fff url(../assets/img/logo.png) no-repeat center / 80%;
  border-radius: var(--radius-s);
}

.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li { padding: .22rem 0; }

.stopka-dol {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.4rem;
  font-size: .9rem;
  color: #BFB4A2;
}

/* ============================================================
   REZERWACJA — kreator 3 kroków
   ============================================================ */

.rezerwacja-uklad {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 980px) {
  .rezerwacja-uklad { grid-template-columns: 1fr 340px; }
}

.krok {
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-m);
  box-shadow: var(--cien-1);
  padding: 1.6rem 1.5rem;
  margin-bottom: 1.2rem;
}

.krok[data-nieaktywny="true"] { opacity: .55; }

.krok-tytul {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.1rem;
}

.krok-numer {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zielen-tlo);
  color: var(--zielen);
  font-weight: 700;
}

.krok-tytul h2 { margin: 0; font-size: 1.3rem; font-family: var(--f-tekst); font-weight: 700; letter-spacing: 0; }

/* Wybór usługi — radio jako kafelki */
.uslugi-wybor {
  display: grid;
  gap: .7rem;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 640px) { .uslugi-wybor { grid-template-columns: repeat(2, 1fr); } }

.uslugi-wybor legend {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.usluga-opcja { position: relative; }

.usluga-opcja input {
  position: absolute;
  opacity: 0;
  inset: 0;
  pointer-events: none;
}

.usluga-opcja label {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.1rem;
  border: 2px solid var(--piasek-c);
  border-radius: var(--radius-s);
  background: var(--krem);
  cursor: pointer;
  font-weight: 600;
  min-height: 58px;
  transition: border-color 180ms ease, background-color 180ms ease, transform 160ms var(--ease-out);
}

.usluga-opcja label:active { transform: scale(0.98); }

@media (hover: hover) and (pointer: fine) {
  .usluga-opcja label:hover { border-color: #C9BBA3; }
}

.usluga-opcja input:checked + label {
  border-color: var(--zielen);
  background: var(--zielen-tlo);
  color: var(--zielen-c);
}

.usluga-opcja input:focus-visible + label {
  outline: 3px solid var(--zielen);
  outline-offset: 3px;
}

.usluga-opcja .znacznik {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #C9BBA3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.usluga-opcja input:checked + label .znacznik {
  border-color: var(--zielen);
  background: var(--zielen);
}

.usluga-opcja .znacznik::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 160ms var(--ease-out);
}

.usluga-opcja input:checked + label .znacznik::after { transform: scale(1); }

/* Terminy */
.terminy-stan {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--atrament-2);
  padding: .6rem 0;
}

.spinner {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 3px solid var(--piasek-c);
  border-top-color: var(--zielen);
  animation: krecenie .55s linear infinite; /* szybki spinner = wrażenie szybkości */
}

@keyframes krecenie { to { transform: rotate(360deg); } }

.dni-lista {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding: .25rem .25rem .6rem;
  margin: 0;
  max-width: 100%;
  scrollbar-width: thin;
}

/* Kolumny kreatora nie moga sie rozpychac ponad dostepna szerokosc
   (min-width:auto w grid potrafi wypychac strone w prawo). */
.rezerwacja-uklad > * { min-width: 0; }

.dzien-przycisk {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-width: 84px;
  padding: .65rem .9rem;
  border: 2px solid var(--piasek-c);
  border-radius: var(--radius-s);
  background: var(--krem);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 160ms var(--ease-out);
}

.dzien-przycisk:active { transform: scale(0.97); }

.dzien-przycisk .dz-nazwa { font-weight: 700; text-transform: capitalize; }
.dzien-przycisk .dz-data { color: var(--atrament-2); font-size: .85rem; }

.dzien-przycisk[aria-pressed="true"] {
  border-color: var(--zielen);
  background: var(--zielen-tlo);
}

.godziny-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: .6rem;
  margin-top: 1rem;
}

.godzina-przycisk {
  min-height: 48px;
  border: 2px solid var(--piasek-c);
  border-radius: var(--radius-s);
  background: var(--krem);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 160ms var(--ease-out);
}

.godzina-przycisk:active { transform: scale(0.95); }

@media (hover: hover) and (pointer: fine) {
  .godzina-przycisk:hover, .dzien-przycisk:hover { border-color: #C9BBA3; }
}

.godzina-przycisk[aria-pressed="true"] {
  border-color: var(--zielen);
  background: var(--zielen);
  color: #fff;
}

/* Formularz danych */
.pole { margin-bottom: 1.2rem; }

.pole label {
  display: block;
  font-weight: 650;
  margin-bottom: .4rem;
}

.pole .podpowiedz {
  display: block;
  font-weight: 400;
  font-size: .9rem;
  color: var(--atrament-2);
  margin-top: .15rem;
}

.pole input, .pole textarea {
  width: 100%;
  font: inherit;
  padding: .8rem 1rem;
  min-height: 52px;
  border: 2px solid var(--piasek-c);
  border-radius: var(--radius-s);
  background: var(--krem);
  color: var(--atrament);
  transition: border-color 180ms ease, background-color 180ms ease;
}

.pole textarea { min-height: 110px; resize: vertical; }

.pole input:focus, .pole textarea:focus {
  outline: none;
  border-color: var(--zielen);
  background: #fff;
}

.pole input[aria-invalid="true"] { border-color: #B4452F; background: #FDF3F0; }

.blad-pola {
  display: none;
  color: #A03A26;
  font-size: .92rem;
  font-weight: 550;
  margin-top: .35rem;
}

.blad-pola.widoczny { display: block; }

/* Podsumowanie rezerwacji (boczna karta) */
.podsumowanie {
  position: sticky;
  top: 96px;
  background: var(--piasek);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-m);
  padding: 1.5rem;
}

.podsumowanie h2 { font-size: 1.15rem; font-family: var(--f-tekst); font-weight: 700; letter-spacing: 0; }

.podsumowanie dl { margin: 1rem 0 0; }
.podsumowanie dt { font-size: .85rem; color: var(--atrament-2); }
.podsumowanie dd {
  margin: .1rem 0 .9rem;
  font-weight: 650;
  min-height: 1.2em;
}

.podsumowanie .brak { color: #A79878; font-weight: 400; }

/* Komunikaty stanu (sukces / błąd) */
.komunikat {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  border-radius: var(--radius-m);
  padding: 1.3rem 1.4rem;
  margin-top: 1.2rem;
}

.komunikat svg { flex: none; margin-top: 2px; }
.komunikat p { margin: 0; }
.komunikat strong { display: block; margin-bottom: .2rem; }

.komunikat--sukces {
  background: var(--zielen-tlo);
  border: 1px solid #BED3C6;
  color: #1E4638;
}

.komunikat--blad {
  background: #FDF3F0;
  border: 1px solid #EBC9BE;
  color: #7C2D18;
}

.komunikat a { font-weight: 700; }

/* Ekran podziękowania */
.podziekowanie {
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) 1rem;
}

.podziekowanie .ikona-sukces {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--zielen-tlo);
  color: var(--zielen);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.3rem;
}

/* ---------- Strona tekstowa (polityka prywatności) ---------- */
.strona-tekstowa { max-width: 760px; }
.strona-tekstowa h2 { font-size: 1.4rem; margin-top: 2.2rem; }

.todo-notka {
  background: #FFF6E3;
  border: 1px solid #EBD9AC;
  border-radius: var(--radius-s);
  padding: 1rem 1.2rem;
  color: #6E5215;
  font-size: .98rem;
}

/* ============================================================
   PODSTRONY: usługi, lokalizacje, poradnik
   ============================================================ */

/* ---------- Tekst tylko dla czytników ekranu ---------- */
.wizualnie-ukryte {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Okruszki (breadcrumbs) ---------- */
.okruszki {
  padding-top: 1.4rem;
  font-size: .92rem;
  color: var(--atrament-2);
}
.okruszki ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.okruszki li { display: flex; align-items: center; gap: .45rem; }
.okruszki li + li::before {
  content: "›";
  color: var(--piasek-c);
  font-size: 1.05rem;
  line-height: 1;
}
.okruszki a { color: var(--atrament-2); text-decoration: none; }
.okruszki a:hover { color: var(--zielen); text-decoration: underline; }
.okruszki [aria-current="page"] { color: var(--atrament); font-weight: 600; }

/* ---------- Hero podstrony ---------- */
.hero--podstrona {
  padding-block: clamp(1.8rem, 4vw, 3rem) clamp(2.5rem, 5vw, 3.5rem);
}
.hero--podstrona .hero-siatka { align-items: center; }
.hero--podstrona h1 { margin-bottom: .6rem; }
.hero--podstrona .lead { max-width: 54ch; }
.hero-foto--kompakt img { aspect-ratio: 4 / 3; }

/* ---------- Hero ze zdjęciem pionowym (np. portret) ---------- */
.hero-foto--portret { aspect-ratio: 4 / 5; }
.hero-foto--portret img { object-position: center 25%; }

/* ---------- Zdjęcie wewnątrz treści ---------- */
.foto-tresc {
  margin: 2rem 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(51, 41, 31, .08);
  background: var(--bialy);
}
.foto-tresc img { width: 100%; height: auto; display: block; }
.foto-tresc figcaption {
  padding: .8rem 1.1rem;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--atrament-2);
  background: var(--piasek);
}
.foto-tresc--waska { max-width: 460px; }

/* ---------- Treść artykułu / podstrony usługowej ---------- */
.artykul { max-width: 72ch; }
.artykul > h2 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  margin-top: 2.6rem;
  margin-bottom: .7rem;
  scroll-margin-top: 5rem;
}
.artykul > h2:first-child { margin-top: 0; }
.artykul > h3 {
  font-size: 1.18rem;
  font-family: var(--f-tekst);
  font-weight: 700;
  letter-spacing: 0;
  margin-top: 1.8rem;
  margin-bottom: .45rem;
}
.artykul p { font-size: 1.06rem; line-height: 1.72; }
.artykul ul, .artykul ol { padding-left: 1.35rem; margin: 0 0 1.3rem; }
.artykul li { margin-bottom: .55rem; line-height: 1.68; font-size: 1.04rem; }
.artykul li::marker { color: var(--zielen); }
.artykul strong { font-weight: 650; }

/* Odpowiedź-kapsułka: pierwszy akapit pod H2, wyróżniony i samodzielny */
.kapsulka {
  border-left: 3px solid var(--zielen);
  padding: .1rem 0 .1rem 1.15rem;
  margin-bottom: 1.4rem;
  font-size: 1.09rem !important;
  line-height: 1.66 !important;
  color: var(--atrament);
}

/* ---------- Wyróżnik / ramka z uwagą ---------- */
.wyroznik {
  background: var(--zielen-tlo);
  border-radius: var(--radius-m);
  padding: 1.4rem 1.5rem;
  margin: 1.8rem 0;
}
.wyroznik p:last-child { margin-bottom: 0; }
.wyroznik strong { color: var(--zielen-c); }
.wyroznik--piasek { background: var(--piasek); }

/* ---------- Lista kroków (proces wizyty) ---------- */
.kroki {
  list-style: none;
  counter-reset: krok;
  padding: 0;
  margin: 1.6rem 0;
  display: grid;
  gap: 1rem;
}
.kroki li {
  counter-increment: krok;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1rem;
  align-items: start;
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-m);
  padding: 1.1rem 1.3rem;
  margin: 0;
}
.kroki li::before {
  content: counter(krok);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--zielen);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}
.kroki li strong { display: block; margin-bottom: .2rem; }
.kroki li p { margin: 0; font-size: 1rem; color: var(--atrament-2); }

/* ---------- Tabela ---------- */
.tabela-otoczka { overflow-x: auto; margin: 1.6rem 0; }
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  background: var(--bialy);
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--piasek-c);
}
.tabela th, .tabela td {
  text-align: left;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--piasek);
}
.tabela th { background: var(--piasek); font-weight: 650; white-space: nowrap; }
.tabela tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .8rem; margin: 1.6rem 0; }
.faq details {
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 1.3rem;
  font-weight: 650;
  font-size: 1.05rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.3rem;
  top: 1.45rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--zielen);
  border-bottom: 2px solid var(--zielen);
  transform: rotate(45deg);
  transition: transform 220ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.faq summary:hover { background: var(--piasek); }
.faq summary:focus-visible { outline: 2px solid var(--zielen); outline-offset: -2px; }
.faq .faq-tresc { padding: 0 1.3rem 1.2rem; }
.faq .faq-tresc p { margin: 0 0 .8rem; color: var(--atrament-2); line-height: 1.68; }
.faq .faq-tresc p:last-child { margin-bottom: 0; }

/* ---------- Siatka kart z linkami ---------- */
.karty-siatka {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .karty-siatka { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .karty-siatka--3 { grid-template-columns: repeat(3, 1fr); } }

.karta-link {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-m);
  padding: 1.3rem 1.4rem;
  text-decoration: none;
  color: inherit;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out),
              border-color 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .karta-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(51, 41, 31, .09);
    border-color: var(--zielen);
  }
}
.karta-link:active { transform: scale(.99); }
.karta-link strong {
  font-family: var(--f-naglowki);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--atrament);
}
.karta-link span { color: var(--atrament-2); font-size: .98rem; line-height: 1.6; }
.karta-link .strzalka {
  margin-top: .4rem;
  color: var(--zielen);
  font-weight: 650;
  font-size: .95rem;
}

/* ---------- Chipy (szybkie linki, np. miasta) ---------- */
.chipy { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0; padding: 0; list-style: none; }
.chipy li { margin: 0; }
.chipy a {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  color: var(--atrament-2);
  font-size: .95rem;
  font-weight: 550;
  text-decoration: none;
  transition: all 200ms var(--ease-out);
}
.chipy a:hover { background: var(--zielen-tlo); border-color: var(--zielen); color: var(--zielen-c); }

/* ---------- Karta dojazdu (strony lokalne) ---------- */
.dojazd-siatka {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr;
  margin: 1.8rem 0;
}
@media (min-width: 820px) { .dojazd-siatka { grid-template-columns: 1.1fr 1fr; } }

.dojazd-fakty {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .9rem;
}
.dojazd-fakty li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
  margin: 0;
  font-size: 1rem;
}
.dojazd-fakty svg { color: var(--zielen); flex: none; margin-top: 3px; }
.dojazd-fakty strong { display: block; }
.dojazd-fakty span { color: var(--atrament-2); }

/* ---------- Pasek zaufania / statystyki ---------- */
.fakty-pasek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1.8rem 0;
  padding: 0;
  list-style: none;
}
.fakty-pasek li {
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-m);
  padding: 1.1rem 1.2rem;
  margin: 0;
  text-align: center;
}
.fakty-pasek b {
  display: block;
  font-family: var(--f-naglowki);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--zielen);
  line-height: 1.15;
}
.fakty-pasek span { font-size: .92rem; color: var(--atrament-2); }

/* ---------- Spis treści artykułu ---------- */
.spis-tresci {
  background: var(--piasek);
  border-radius: var(--radius-m);
  padding: 1.2rem 1.4rem;
  margin: 0 0 2rem;
}
.spis-tresci p { font-weight: 650; margin: 0 0 .6rem; font-size: 1rem; }
.spis-tresci ol { margin: 0; padding-left: 1.2rem; }
.spis-tresci li { margin-bottom: .35rem; font-size: .98rem; }
.spis-tresci a { color: var(--atrament-2); }
.spis-tresci a:hover { color: var(--zielen); }

/* ---------- Meta artykułu ---------- */
.artykul-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  font-size: .93rem;
  color: var(--atrament-2);
  margin-bottom: 1.6rem;
}
.artykul-meta span { display: flex; align-items: center; gap: .4rem; }

/* ---------- Layout dwukolumnowy podstrony ---------- */
.tresc-uklad {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .tresc-uklad { grid-template-columns: minmax(0, 1fr) 320px; gap: 3.5rem; }
  .tresc-bok { position: sticky; top: 5.5rem; }
}

.bok-karta {
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-l);
  padding: 1.5rem 1.6rem;
  box-shadow: 0 10px 30px rgba(51, 41, 31, .05);
}
.bok-karta h2 {
  font-size: 1.15rem;
  font-family: var(--f-tekst);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 .8rem;
}
.bok-karta p { font-size: .98rem; color: var(--atrament-2); }
.bok-karta .btn { width: 100%; margin-bottom: .6rem; }
.bok-karta .godziny { margin-top: 1rem; font-size: .95rem; }
.bok-karta + .bok-karta { margin-top: 1.2rem; }

/* ---------- Strona błędu 404 ---------- */
/* Motyw: tablica okulistyczna. Napis „404" startuje rozmyty i wyostrza się,
   tak jak obraz przy dobieraniu soczewki. Animacja tylko na filter/opacity/
   transform (bez reflow) i wyłącznie wtedy, gdy użytkownik nie prosił
   o ograniczenie ruchu. */
.blad-404 .hero-siatka { align-items: center; }

.tablica {
  margin: 0;
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-l);
  box-shadow: var(--cien-2);
  padding: clamp(1.7rem, 4vw, 2.8rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.tablica-linia {
  display: block;
  font-family: var(--f-naglowki);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .07em;
  color: var(--atrament);
}

.tablica-linia--404 {
  font-size: clamp(4.5rem, 16vw, 8rem);
  letter-spacing: .02em;
  color: var(--zielen);
  margin-bottom: .3rem;
  will-change: filter;
}

.tablica-linia--2 { font-size: clamp(1.25rem, 3.6vw, 1.8rem); margin-bottom: .55rem; }
.tablica-linia--3 { font-size: clamp(.95rem, 2.2vw, 1.1rem); color: var(--atrament-2); margin-bottom: .5rem; }
.tablica-linia--4 { font-size: clamp(.72rem, 1.5vw, .82rem); color: var(--atrament-2); margin-bottom: .45rem; }
.tablica-linia--5 { font-size: clamp(.58rem, 1.1vw, .64rem); color: var(--atrament-2); }

.tablica-podpis {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--piasek-c);
  font-family: var(--f-tekst);
  font-size: .85rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--atrament-2);
}

@media (prefers-reduced-motion: no-preference) {
  .tablica-linia--404 { animation: ostrzenie 1200ms var(--ease-out) 150ms both; }
}

@keyframes ostrzenie {
  from { filter: blur(16px); opacity: 0; transform: scale(1.06); }
  to   { filter: blur(0);    opacity: 1; transform: scale(1); }
}

/* ---------- Animacje pojawiania (scroll reveal) ---------- */
/* Elementy widoczne domyślnie; klasa .js na <html> włącza animacje,
   dzięki czemu strona działa w pełni bez JavaScriptu. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.widoczny {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Redukcja ruchu (dostępność) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal {
    transform: none;
    transition: opacity 200ms ease;
  }

  .btn, .usluga, .godzina-przycisk, .dzien-przycisk, .usluga-opcja label, .menu-przycisk,
  .foto img, .foto-lupa, .lightbox-zamknij, .lightbox-strzalka {
    transition: none;
  }

  .btn:active, .godzina-przycisk:active, .dzien-przycisk:active { transform: none; }

  .foto a:hover img { transform: none; }

  .lightbox[open] { animation: none; }

  .zgoda { transition: none; }
}

/* ---------- Baner zgody na cookies ---------- */
.zgoda {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 560px;
  margin-inline: auto;
  padding: 1.4rem 1.5rem;
  background: var(--bialy);
  border: 1px solid var(--piasek-c);
  border-radius: var(--radius-m);
  box-shadow: var(--cien-2);

  /* Stan startowy: baner czeka poza ekranem i nie łapie kliknięć. */
  opacity: 0;
  transform: translateY(1rem);
  visibility: hidden;
  transition: opacity 250ms var(--ease-out),
              transform 250ms var(--ease-out),
              visibility 250ms;
}

.zgoda--widoczna {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.zgoda-tytul {
  margin: 0 0 .4rem;
  font-family: var(--f-naglowki);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--atrament);
}

.zgoda-opis {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--atrament-2);
}

.zgoda-opis a { color: var(--zielen); }

.zgoda-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* Oba przyciski mają tę samą wagę wizualnie. RODO wymaga, żeby odmowa
   była tak samo łatwa jak zgoda, więc odmowa nie może być schowana
   pod mniejszym czy bledszym przyciskiem. */
.zgoda-przyciski .btn {
  flex: 1 1 0;
  min-width: 150px;
  min-height: 48px;
  justify-content: center;
}

@media (min-width: 620px) {
  .zgoda {
    flex-direction: row;
    align-items: center;
    max-width: 860px;
    gap: 1.5rem;
  }

  .zgoda-przyciski { flex: 0 0 auto; }
  .zgoda-przyciski .btn { flex: 0 0 auto; }
}

/* Link "Ustawienia cookies" dokładany skryptem do stopki. */
.zgoda-link {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.zgoda-link:hover { color: var(--bialy); }

/* ---------- Formularz: zgoda marketingowa i pułapka na boty ---------- */

/* Pole-pułapka musi zniknąć dla człowieka, ale zostać w drzewie dokumentu,
   żeby automat je znalazł i wypełnił. Dlatego wyprowadzenie poza ekran,
   a nie display:none, które część botów rozpoznaje i pomija. */
.pole--pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pole--zgoda { margin-top: 1.3rem; }

.pole--zgoda label {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  margin: 0;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--atrament-2);
  cursor: pointer;
}

.pole--zgoda label:hover { color: var(--atrament); }

.pole--zgoda input[type="checkbox"] {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin: .12rem 0 0;
  accent-color: var(--zielen);
  cursor: pointer;
}

.pole--zgoda input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--zielen);
  outline-offset: 2px;
}