/* =========================================================
   MIGAWKA — wynajem fotobudek
   Design tokens
   ========================================================= */
:root{
  /* Paleta "Złota godzina" — ciepłe, pogodne barwy zachodu słońca zamiast
     chłodnej morskiej zieleni. Nazwy zmiennych zostają takie same (żeby nie
     trzeba było przepisywać całego pliku), zmieniają się tylko wartości. */
  --teal-deep: #3B2A1F;
  --teal-mid:  #6B4A32;
  --teal:      #2EC4B6;
  --teal-light:#8FE0D6;
  --orange:    #F4A300;
  --orange-light:#FFC94D;
  --indigo:    #FF6F5E;
  --cream:     #FFF6E9;
  --ink:       #2A2118;
  --muted:     #7C6A52;
  --line:      #EAD9BE;
  --soon:      #A69072;

  --font-display: 'Anton', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --radius: 14px;
  --wrap: 1180px;

  /* =========================================================
     MOTYW — kolory sterowalne osobno z panelu administratora
     (Ustawienia → Kolory motywu). Domyślnie każdy odwołuje się
     do istniejącego tokenu powyżej, więc bez zmian w panelu
     strona wygląda dokładnie tak jak dotychczas. Panel nadpisuje
     te zmienne inline'owym <style> w <head> index.php.
     ========================================================= */
  --bg-page: var(--cream);
  --header-bg: var(--ink);
  --btn-bg: var(--orange);
  --link-accent: var(--teal);
  --featured-accent: var(--orange);
  --receipt-bg: var(--teal-deep);
  --divider-bg: var(--teal-deep);
  --footer-bg: var(--teal-deep);
  --hero-bg-color: var(--teal-deep);
  --text-on-dark: var(--cream);
  --text-main: var(--ink);
  --receipt-text: var(--cream);
  --receipt-accent: var(--teal-light);

  /* Separator działów — wzór (kropki/paski/...) dobierany z panelu przez
     podmianę --divider-pattern-image/-size/-position jako całości (patrz
     motyw_separator_wzory() w includes/helpers.php); domyślnie kropki. */
  --divider-height: 22px;
  --divider-pattern-color: var(--cream);
  --divider-pattern-image: radial-gradient(circle, var(--divider-pattern-color) 3px, transparent 3.5px);
  --divider-pattern-size: 26px 22px;
  --divider-pattern-position: center;

  --section-tinted-bg: #FCEFDC;

  /* Sekcja HERO — sterowana z panelu (Ustawienia → Baner strony głównej,
     admin/hero.php). Ścieżki obrazów są względne do strony, która je
     wstawia (index.php albo admin/hero_podglad.php), dlatego każda z nich
     wstrzykuje własną, poprawną wartość — te tutaj to tylko domyślny
     fallback dla index.php. */
  --hero-bg-image: url('images/banner.png');
  --hero-bg-image-mobile: url('images/banner_tel.png');
  --hero-bg-position: center 62%;
  --hero-bg-position-mobile: center 30%;
  --hero-overlay-opacity: 0;
  --hero-padding-top: 120px;
  --hero-padding-bottom: 100px;
  --hero-heading-align: left;
  --hero-heading-offset: 0px;
  --hero-lead-align: left;
  --hero-lead-offset: 0px;
  --hero-actions-align: flex-start;
  --hero-actions-offset: 0px;
  --hero-stats-align: flex-start;
  --hero-stats-offset: 0px;
  --hero-stat-value-color: var(--teal-light);
  --hero-stat-label-color: #D9C4A0;
}

*,*::before,*::after{ box-sizing: border-box; }
/* overflow-x musi być tylko na body, nie na html — inaczej body staje się
   własnym, nigdy nieprzewijanym kontenerem scrolla i łamie position:sticky
   wszędzie na stronie (nagłówek, panel wyceny w kalkulatorze). */
html{ scroll-behavior: smooth; max-width:100%; }
body{ max-width:100%; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-main);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3{ font-family: var(--font-display); font-weight:400; letter-spacing:0.01em; line-height:1.05; margin:0 0 0.4em; }
h1{ font-size: clamp(2.4rem, 5vw, 4rem); }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3{ font-size: 1.3rem; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width: var(--wrap); margin:0 auto; padding: 0 24px; }

.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--orange);
  margin: 0 0 0.9em;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--link-accent);
  outline-offset: 2px;
}

/* =========== buttons =========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-weight:600;
  font-size: 0.98rem;
  text-decoration:none;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: var(--font-body);
}
.btn:hover{ transform: translateY(-2px); }
.btn-accent{ background: var(--btn-bg); color: var(--text-on-dark); }
.btn-accent:hover{ filter: brightness(0.88); }
.btn-ghost{ background:transparent; border-color: currentColor; color: var(--text-on-dark); }
.section .btn-ghost, .site-footer .btn-ghost{ color: var(--ink); }
.btn-outline{ background:transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--text-on-dark); }
.btn-small{ padding: 0.55em 1.2em; font-size: 0.88rem; }
.btn-full{ width:100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  color: var(--text-on-dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Tło + rozmycie na osobnej warstwie (::before), a nie bezpośrednio na
   .site-header — element z backdrop-filter/filter staje się punktem
   odniesienia dla swoich potomków z position:fixed, co psuło rozwijane
   menu mobilne (.main-nav), wypychając je poza widoczny ekran. */
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: color-mix(in srgb, var(--header-bg) 94%, transparent);
  backdrop-filter: blur(6px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  gap: 20px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color: var(--text-on-dark);
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing:0.02em;
}
.logo-mark{ color: var(--link-accent); flex-shrink:0; }
.logo-img{ height: 46px; width:auto; display:block; }
@media (max-width:900px){
  .logo-img{ height: 38px; }
  .section{ scroll-margin-top: 82px; } /* nagłówek jest niższy (mniejsze logo) */
}
.main-nav{ display:flex; gap: 28px; flex:1; justify-content:center; }
.main-nav a{
  text-decoration:none; color: var(--text-on-dark); opacity:0.82;
  font-size:0.95rem; font-weight:500;
  position:relative; padding: 4px 0;
}
.main-nav a:hover{ opacity:1; }
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-3px; width:0; height:2px;
  background: var(--link-accent); transition: width 0.2s ease;
}
.main-nav a:hover::after{ width:100%; }
.nav-cta{ white-space:nowrap; }
.nav-toggle{ display:none; }

@media (max-width: 900px){
  .main-nav{
    position:fixed; inset: 62px 0 0 0; background: var(--header-bg);
    flex-direction:column; align-items:flex-start; padding: 30px 28px;
    gap: 22px; transform: translateX(100%); transition: transform 0.25s ease;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav a{ font-size:1.15rem; }
  .nav-cta{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:34px; height:34px; background:none; border:none; cursor:pointer;
  }
  .nav-toggle span{ display:block; width:100%; height:2px; background: var(--text-on-dark); transition: transform 0.2s ease, opacity 0.2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* =========================================================
   PASEK PROMOCYJNY — opcjonalna belka pod menu, sterowana
   z panelu administratora (admin/pasek.php). Kolory ustawiane
   inline przez PHP z ustawień w bazie, animacja przez klasę
   promo-bar--<rodzaj>.
   ========================================================= */
.promo-bar{
  overflow:hidden; white-space:nowrap; font-size:0.85rem; font-weight:600;
  padding:8px 0; position:relative; z-index:99;
}
.promo-bar__track{ display:inline-flex; gap:60px; align-items:center; padding-left:100%; }
.promo-bar--przesuwanie .promo-bar__track{ animation: promo-scroll 14s linear infinite; }
@keyframes promo-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

.promo-bar--statyczny .promo-bar__track,
.promo-bar--miganie .promo-bar__track,
.promo-bar--powiekszanie .promo-bar__track{
  display:block; padding-left:0; text-align:center; white-space:normal;
}

.promo-bar--miganie .promo-bar__text{ animation: promo-blink 1.1s ease-in-out infinite; }
@keyframes promo-blink{ 0%, 100%{ opacity:1; } 50%{ opacity:0.25; } }

.promo-bar--powiekszanie .promo-bar__text{ display:inline-block; animation: promo-pulse 1.3s ease-in-out infinite; }
@keyframes promo-pulse{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.14); } }

@media (max-width: 600px){
  .promo-bar{ font-size:0.74rem; padding:6px 0; }
  .promo-bar__track{ gap:40px; }
}

/* Osoby wrażliwe na ruch (prefers-reduced-motion) dostają wersję statyczną */
@media (prefers-reduced-motion: reduce){
  .promo-bar--przesuwanie .promo-bar__track{ animation:none; padding-left:0; display:block; text-align:center; white-space:normal; }
  .promo-bar--miganie .promo-bar__text,
  .promo-bar--powiekszanie .promo-bar__text{ animation:none; }
}

/* =========================================================
   FILM DIVIDER — signature sprocket motif
   ========================================================= */
.film-divider{
  height: var(--divider-height);
  background-color: var(--divider-bg);
  background-image: var(--divider-pattern-image);
  background-size: var(--divider-pattern-size);
  background-position: var(--divider-pattern-position);
  background-repeat: var(--divider-pattern-repeat, repeat);
}
.hero .film-divider{ margin-top: 0; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  background: var(--hero-bg-color, var(--teal-deep));
  color: var(--text-on-dark);
  padding: var(--hero-padding-top) 0 var(--hero-padding-bottom);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image: var(--hero-bg-image);
  background-repeat:no-repeat; background-size:cover; background-position: var(--hero-bg-position);
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: rgba(0,0,0, var(--hero-overlay-opacity));
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2;
  /* Zmień tę wartość, żeby wyregulować odstęp między nagłówkiem a tekstem/przyciskami niżej */
  --hero-gap: 22px;
}
/* Nagłówek, tekst pod nim, wiersz przycisków i statystyki są domyślnie
   wyrównane do lewej krawędzi baneru (do krawędzi .wrap) — każdy ma WŁASNE,
   niezależne wyrównanie (lewo/środek/prawo) i drobne dodatkowe przesunięcie
   w px, sterowane z panelu (Baner → Wygląd i układ) — osobno w poziomie
   (X) i w pionie (Y). Blokowe elementy (nagłówek/lead) używają text-align,
   kontenery flex (przyciski/statystyki) justify-content — przesunięcie
   działa tak samo dla obu przez transform:translate(x,y), więc nie zmienia
   szerokości/zawijania treści ani wysokości/przepływu reszty banera (element
   "wychodzi" wizualnie poza swoje miejsce, ale nie zabiera/nie robi miejsca
   sąsiadom). */
.hero h1{
  font-size: var(--hero-heading-size, clamp(2.1rem, 4.4vw, 3.4rem));
  color: var(--hero-heading-color, inherit);
  font-family: var(--hero-heading-font, var(--font-display));
  margin-bottom: var(--hero-gap);
  text-align: var(--hero-heading-align, left);
  transform: translate(var(--hero-heading-offset, 0px), var(--hero-heading-offset-y, 0px));
}
.hero-lead{
  font-size: var(--hero-lead-size, 1.08rem);
  color: var(--hero-lead-color, #F2E4CE);
  font-family: var(--hero-lead-font, var(--font-body));
  margin:0;
  text-align: var(--hero-lead-align, left);
  transform: translate(var(--hero-lead-offset, 0px), var(--hero-lead-offset-y, 0px));
}
.hero-actions{
  display:flex; gap:16px; flex-wrap:wrap; margin: 30px 0 36px;
  justify-content: var(--hero-actions-align, flex-start);
  transform: translate(var(--hero-actions-offset, 0px), var(--hero-actions-offset-y, 0px));
}
/* Kolor/wielkość/czcionka tekstu przycisków — wspólne dla obu przycisków
   banera (tak jak wyrównanie), sterowane z panelu Baner → Treść. Kolor
   nadpisuje domyślny var(--text-on-dark) na .btn-accent/.btn-ghost; dla
   .btn-ghost obramowanie (border-color:currentColor w .btn-ghost) podąża za
   nim automatycznie, więc nie trzeba go osobno ustawiać. */
.hero-actions .btn{
  color: var(--hero-actions-color, inherit);
  font-size: var(--hero-actions-size, 0.98rem);
  font-family: var(--hero-actions-font, var(--font-body));
}
.hero-stats{
  display:flex; gap: 34px; flex-wrap:nowrap;
  justify-content: var(--hero-stats-align, flex-start);
  transform: translate(var(--hero-stats-offset, 0px), var(--hero-stats-offset-y, 0px));
}
.hero-stats li{ display:flex; flex-direction:column; min-width:0; flex:0 1 auto; }
.hero-stats strong{ font-family: var(--font-display); font-size:1.5rem; color: var(--hero-stat-value-color); white-space:nowrap; }
.hero-stats span{ font-size:0.82rem; color: var(--hero-stat-label-color); }

@media (max-width: 780px){
  /* Wysokość: --hero-padding-*-mobile istnieje w style="" TYLKO gdy admin
     wybrał dla telefonu inny preset niż komputerowy (patrz
     renderuj_sekcje_hero() w includes/hero.php) — bez tego fallback 90px/70px
     to dokładnie ten sam stały, kompaktowy rozmiar telefonowy, jaki był
     zawsze dotychczas (niezależny od wysokości wybranej dla komputera). */
  .hero{ padding: var(--hero-padding-top-mobile, 90px) 0 var(--hero-padding-bottom-mobile, 70px); }
  /* na telefonie wczytujemy osobną, dedykowaną grafikę tła (portretową) */
  .hero-bg{ background-image: var(--hero-bg-image-mobile); background-position: var(--hero-bg-position-mobile); }
  .hero-overlay{ background: rgba(0,0,0, var(--hero-overlay-opacity-mobile, var(--hero-overlay-opacity))); }

  /* Wyrównanie/przesunięcie (Wygląd i układ → osobno dla telefonu) — te
     zmienne -mobile SĄ zawsze wypisane (dziedziczą wartość komputerową,
     dopóki admin nie ustawi telefonu inaczej — patrz pobierz_hero_ustawienia()
     w includes/helpers.php), var(...,fallback) tu tylko na wszelki wypadek. */
  .hero h1{
    text-align: var(--hero-heading-align-mobile, var(--hero-heading-align, left));
    transform: translate(var(--hero-heading-offset-mobile, var(--hero-heading-offset, 0px)), var(--hero-heading-offset-y-mobile, var(--hero-heading-offset-y, 0px)));
  }
  .hero-lead{
    text-align: var(--hero-lead-align-mobile, var(--hero-lead-align, left));
    transform: translate(var(--hero-lead-offset-mobile, var(--hero-lead-offset, 0px)), var(--hero-lead-offset-y-mobile, var(--hero-lead-offset-y, 0px)));
  }
  .hero-actions{
    justify-content: var(--hero-actions-align-mobile, var(--hero-actions-align, flex-start));
    transform: translate(var(--hero-actions-offset-mobile, var(--hero-actions-offset, 0px)), var(--hero-actions-offset-y-mobile, var(--hero-actions-offset-y, 0px)));
  }
  .hero-stats{
    gap: 18px;
    justify-content: var(--hero-stats-align-mobile, var(--hero-stats-align, flex-start));
    transform: translate(var(--hero-stats-offset-mobile, var(--hero-stats-offset, 0px)), var(--hero-stats-offset-y-mobile, var(--hero-stats-offset-y, 0px)));
  }
  .hero-stats strong{ font-size:1.25rem; }
  .hero-stats span{ font-size:0.72rem; }
}

@media (max-width: 380px){
  .hero-stats{ gap: 10px; }
  .hero-stats strong{ font-size:1.1rem; }
  .hero-stats span{ font-size:0.64rem; }
}

/* =========================================================
   GALERIA REALIZACJI — dwa układy (pasek przewijany / siatka), oba
   dzielą ten sam kafelek (.galeria-kafelek) i te same zmienne CSS
   wstrzykiwane z panelu administratora (patrz #galeria w index.php).
   ========================================================= */

/* --- układ "pasek": pozioma, przeciągana taśma --- */
.galeria-pasek-wrap{
  display:flex; align-items:center; gap:12px; padding: 6px 24px 10px; max-width: 1400px; margin:0 auto;
}
.galeria-pasek{
  display:flex; gap: var(--galeria-odstep, 22px); overflow-x:auto; padding: 10px 4px 18px;
  cursor:grab; scrollbar-width:none; -ms-overflow-style:none;
  user-select:none; -webkit-user-select:none; -webkit-overflow-scrolling:touch;
}
.galeria-pasek:active, .galeria-pasek.jest-przeciagana{ cursor:grabbing; }
.galeria-pasek::-webkit-scrollbar{ display:none; }
.galeria-pasek .galeria-kafelek{ flex: 0 0 auto; width: var(--galeria-miniatura-szerokosc, 260px); }

/* --- układ "siatka": statyczne kolumny, bez przewijania w bok --- */
.galeria-siatka{
  display:grid; grid-template-columns: repeat(var(--galeria-kolumny, 4), 1fr); gap: var(--galeria-odstep, 22px);
  max-width:1400px; margin:0 auto; padding: 10px 24px 18px;
}
@media (max-width:900px){ .galeria-siatka{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .galeria-siatka{ grid-template-columns: 1fr; } }

/* --- kafelek: baza minimalna, każdy styl ramki dokłada własną "skórkę" --- */
.galeria-kafelek{
  border:none; border-radius: var(--galeria-zaokraglenie, 16px); cursor:pointer; position:relative;
  display:flex; flex-direction:column; overflow:hidden; width:100%; padding:0; background:none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.galeria-kafelek--ramka-klatka-filmowa{
  background: var(--teal-deep); padding:10px 10px 0; box-shadow: 0 14px 28px rgba(18,61,58,0.18);
}
.galeria-kafelek--ramka-cien{ box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.galeria-kafelek--ramka-obramowanie{ padding:4px; background: var(--surface,#fff); border:2px solid var(--line); }

.galeria-kafelek--hover-powiekszenie:hover{ transform: translateY(-6px); }

.galeria-perforacja{
  height:10px; flex-shrink:0;
  background-image: radial-gradient(circle, rgba(251,252,252,0.55) 3px, transparent 3px);
  background-size: 22px 100%; background-position: 4px center; background-repeat: repeat-x;
}
.galeria-zdjecie{
  width:100%; aspect-ratio: var(--galeria-proporcje, 4/3); background-size:cover; background-position:center;
  border-radius: inherit;
}
.galeria-kafelek--ramka-klatka-filmowa .galeria-zdjecie{ margin-top:4px; }

.galeria-lupa{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:#fff; background:rgba(0,0,0,0); opacity:0; pointer-events:none;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.galeria-kafelek--hover-przyciemnienie:hover .galeria-lupa{ opacity:1; background:rgba(0,0,0,0.35); }

.galeria-podpis{ font-size:0.8rem; font-weight:600; padding: 8px 2px; text-align:left; color: var(--text-main); }
.galeria-kafelek--ramka-klatka-filmowa .galeria-podpis{ color:#F2E4CE; padding: 10px 2px 14px; }

.galeria-nav{
  flex-shrink:0; width:42px; height:42px; border-radius:50%; border:2px solid var(--line); background:#fff;
  cursor:pointer; font-size:1.3rem; line-height:1; color: var(--ink); transition: all 0.15s ease;
}
.galeria-nav:hover{ border-color: var(--link-accent); background: var(--link-accent); color:#fff; }

@media (max-width: 640px){
  .galeria-pasek-wrap{ padding: 6px 12px 10px; }
  .galeria-pasek .galeria-kafelek{ width: min(200px, var(--galeria-miniatura-szerokosc, 260px)); }
  .galeria-nav{ display:none; }
  .galeria-siatka{ padding: 10px 12px 14px; }
}

/* lightbox prev/next */
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  border:none; background:rgba(255,255,255,0.9); cursor:pointer; font-size:1.3rem; color:var(--ink);
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.lightbox-arrow:hover{ background: var(--link-accent); color:#fff; }
.lightbox-arrow--prev{ left:-8px; }
.lightbox-arrow--next{ right:-8px; }
@media (max-width: 640px){
  .lightbox-arrow--prev{ left:4px; } .lightbox-arrow--next{ right:4px; }
}

/* =========================================================
   GENERIC SECTION LAYOUT
   ========================================================= */
/* scroll-margin-top > wysokość sticky .site-header (~75px), inaczej nagłówek
   sekcji chowa się pod nim po kliknięciu w link nawigacji (#kotwica). */
.section{ padding: 100px 0 110px; scroll-margin-top: 90px; }
.section--tinted{ background: var(--section-tinted-bg); }
.section-head{ max-width: 62ch; margin: 18px 0 46px; }
.section-sub{ color: var(--muted); font-size:1.02rem; }

.section-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:56px; align-items:center; }
.section-grid--reverse .section-copy{ order:1; }
.section-grid--reverse .section-media{ order:2; }
@media (max-width: 900px){
  .section-grid{ grid-template-columns: 1fr; }
  .section-grid--reverse .section-copy, .section-grid--reverse .section-media{ order:initial; }
}

.photo-frame{
  aspect-ratio: 4/3; background-size:cover; background-position:center;
  border-radius: var(--radius); border: 6px solid #fff;
  box-shadow: 0 20px 40px rgba(42,33,24,0.18);
}

.checklist{ margin-top: 22px; display:flex; flex-direction:column; gap:12px; }
.checklist li{ position:relative; padding-left: 30px; }
.checklist li::before{
  content:'✓'; position:absolute; left:0; top:0;
  width:20px; height:20px; border-radius:50%;
  background: var(--link-accent); color:#fff; font-size:0.72rem;
  display:flex; align-items:center; justify-content:center;
}

/* =========================================================
   EQUIPMENT (sprzęt)
   ========================================================= */
.equipment-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
@media (max-width:1100px){ .equipment-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .equipment-grid{ grid-template-columns:1fr; } }
.equip-card{
  background:#fff; border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 14px 30px rgba(42,33,24,0.08); position:relative;
}
.equip-media{
  aspect-ratio: 1/1; background-size:cover; background-position:center; position:relative;
}
.equip-tag{
  position:absolute; top:16px; left:16px; background: var(--link-accent); color:#fff;
  font-family: var(--font-mono); font-size:0.75rem; text-transform:uppercase;
  padding: 5px 12px; border-radius: 999px; letter-spacing:0.05em;
}
.equip-tag--soon{ background: var(--soon); }
.equip-card--soon .equip-media{ filter: grayscale(55%); opacity:0.85; }
.equip-card--soon{ position:relative; }
.equip-card--inactive{ position:relative; }
.equip-card--inactive::before{
  content:''; position:absolute; inset:0; background: rgba(124,106,82,0.55); z-index:5; pointer-events:none;
  border-radius: var(--radius);
}
.equip-inactive-stamp{
  position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.equip-inactive-stamp span{
  border:3px solid #fff; color:#fff; font-family: var(--font-mono); text-transform:uppercase;
  letter-spacing:0.08em; font-size:1.1rem; padding:10px 22px; border-radius:8px;
  transform: rotate(-8deg); background: rgba(42,33,24,0.35);
}
.equip-body{ padding: 28px 30px 32px; }
.feature-list{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.feature-list li{ position:relative; padding-left:22px; font-size:0.96rem; color: var(--text-main); }
.feature-list li::before{ content:'—'; position:absolute; left:0; color: var(--orange); }
.feature-list li.is-soon::before{ content:'⏳'; }
.feature-list li.is-soon{ color: var(--muted); font-style:italic; }

/* =========================================================
   DODATKI (addons)
   ========================================================= */
.addon-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 26px; }
@media (max-width: 1000px){ .addon-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .addon-grid{ grid-template-columns: 1fr; } }
.addon-card{ background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: 0 12px 26px rgba(42,33,24,0.07); display:flex; flex-direction:column; }
.addon-media{ aspect-ratio: 4/3; background-size:cover; background-position:center; }
.addon-card h3{ font-size:1.08rem; margin: 18px 20px 8px; }
.addon-card p{ margin: 0 20px 14px; font-size:0.92rem; color: var(--muted); flex:1; }
.addon-more-btn{
  margin: 0 20px 20px; align-self:flex-start; background:none; border:none;
  color: var(--orange); font-weight:700; font-size:0.88rem; cursor:pointer;
  padding:0; font-family: var(--font-body); border-bottom:2px solid transparent;
}
.addon-more-btn:hover{ border-bottom-color: var(--orange); }

/* =========================================================
   PRICE STRIPS (cennik) — signature "photo strip" cards
   ========================================================= */
.price-group-title{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.06em; font-size:1.5rem; color: var(--orange); margin-bottom: 22px; display:flex; align-items:center; gap:14px; }
.price-group-title--spaced{ margin-top: 56px; }
.price-group-thumb{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid currentColor; flex-shrink:0; }
@media (max-width: 640px){
  .price-group-title{ font-size:1.25rem; gap:10px; }
  .price-group-thumb{ width:38px; height:38px; }
}
.price-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; padding-top: 18px; }
.price-grid--klasyczna{ --group-accent: var(--link-accent); }
.price-grid--mirror{ --group-accent: var(--indigo); }
.price-grid--vintage{ --group-accent: #C17E2A; }
@media (max-width: 900px){ .price-grid{ grid-template-columns:1fr; } }

.price-strip-wrap{ position:relative; height:100%; }
.price-strip-wrap--featured{ transform: translateY(-8px); }
.price-badge{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  background: var(--featured-accent); color:#fff; font-size:0.72rem; font-weight:700;
  padding: 6px 16px; border-radius:999px; white-space:nowrap; z-index:5;
  font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.03em;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--featured-accent) 35%, transparent);
}
.price-strip{
  position:relative;
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 14px 28px rgba(42,33,24,0.09);
  display:flex; flex-direction:column;
  height:100%;
  padding-bottom: 28px;
}
.price-strip::before{
  content:''; position:absolute; top:0; left:0; right:0; height:6px;
  background: var(--group-accent, var(--link-accent)); z-index:1;
}
.price-strip--featured{ box-shadow: 0 20px 40px color-mix(in srgb, var(--featured-accent) 22%, transparent); border: 2px solid var(--featured-accent); }
.price-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: var(--featured-accent); color:#fff; font-size:0.72rem; font-weight:700;
  padding: 5px 14px; border-radius:999px; white-space:nowrap;
  font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.03em;
}
.price-strip-top{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 26px 26px 14px; border-bottom: 1px dashed var(--line);
}
.price-strip-top span{ font-family: var(--font-display); font-size:1.4rem; }
.price-strip-top em{ font-style:normal; color: var(--muted); font-size:0.85rem; }
.price-strip-frames{ padding: 16px 26px 6px; flex:1; }
.price-strip-frames p{ font-size:0.92rem; margin-bottom:8px; padding-left:18px; position:relative; }
.price-strip-frames p::before{ content:'•'; position:absolute; left:0; color: var(--link-accent); }
.price-strip-bottom{ display:flex; align-items:center; justify-content:space-between; padding: 12px 26px 0; }
.price-value{ font-family: var(--font-mono); font-weight:700; font-size:1.4rem; }
.price-note{ margin-top: 34px; color: var(--muted); font-size:0.92rem; }

/* =========================================================
   KALKULATOR
   ========================================================= */
.calc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items:start; }
@media (max-width: 950px){ .calc-grid{ grid-template-columns:1fr; } }

.calc-controls{ display:flex; flex-direction:column; gap: 30px; }
.calc-field label{ display:block; font-weight:600; margin-bottom:12px; }
.calc-field > label > strong{ color: var(--orange); font-family: var(--font-mono); }
.hint-inline{ font-weight:400; color: var(--muted); font-size:0.82rem; }

.calc-row-top{ display:flex; gap:24px; align-items:flex-start; }
.calc-field--booth{ flex: 0 0 180px; }
.calc-field--calendar{ flex: 1 1 auto; min-width:0; }
.start-time-block{ margin-top:20px; }
.start-time-block label{ margin-bottom:8px; }
.start-time-block select{
  width:100%; padding:10px 14px; border-radius:10px; border:2px solid var(--line);
  background:#fff; font-family: var(--font-body); font-size:16px; color: var(--text-main); cursor:pointer;
}
.start-time-block select:focus{ outline:none; border-color: var(--link-accent); }
.start-time-hint{ display:block; margin-top:8px; font-size:0.78rem; color: var(--muted); }
@media (max-width: 640px){
  .calc-row-top{ flex-direction:column; }
  .calc-field--booth{ flex: 1 1 auto; width:100%; }
}

.option-toggle{ display:flex; gap:10px; flex-wrap:wrap; }
.option-toggle--wrap .option-btn{ flex: 1 1 auto; }
.option-toggle--vertical{ flex-direction:column; }
.option-toggle--vertical .option-btn{ width:100%; text-align:left; }
.option-btn{
  font-family: var(--font-body); font-size:0.9rem; font-weight:600;
  padding: 12px 18px; border-radius: 10px; border: 2px solid var(--line);
  background:#fff; color: var(--text-main); cursor:pointer; transition: all 0.15s ease;
}
.option-btn:hover{ border-color: var(--link-accent); }
.option-btn.is-active{ background: var(--ink); border-color: var(--ink); color:#fff; }

#hours-range{ width:100%; accent-color: var(--orange); height: 4px; }
.range-scale{ display:flex; justify-content:space-between; font-size:0.78rem; color: var(--muted); margin-top:6px; }

.checkbox-grid{ display:flex; flex-direction:column; gap:10px; }
.checkbox-item{
  display:flex; align-items:center; gap:12px; background:#fff;
  border:2px solid var(--line); border-radius:10px; padding:12px 16px;
  cursor:pointer; font-size:0.92rem; transition: border-color 0.15s ease;
}
.checkbox-item:hover{ border-color: var(--link-accent); }
.checkbox-item input{ width:18px; height:18px; accent-color: var(--orange); flex-shrink:0; }
.checkbox-item em{ font-style:normal; color: var(--muted); display:block; font-size:0.82rem; }

/* receipt — zakotwiczone (sticky) w obrębie modułu kalkulatora podczas przewijania.
   top musi być większy niż wysokość .site-header (sticky, ~75px), inaczej panel
   wjeżdża pod nagłówek zamiast się pod nim zatrzymać. */
.calc-receipt{ display:flex; flex-direction:column; gap: 26px; position: sticky; top: 96px; align-self:start; }
@media (max-width: 950px){ .calc-receipt{ position:static; } }
.receipt-card{
  background: var(--receipt-bg); color: var(--receipt-text);
  border-radius: var(--radius); padding: 30px 28px;
  font-family: var(--font-mono);
  box-shadow: 0 20px 40px rgba(42,33,24,0.25);
}
.receipt-head{ display:flex; justify-content:space-between; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--receipt-accent); border-bottom:1px dashed rgba(255,255,255,0.25); padding-bottom:14px; margin-bottom:14px; }
.receipt-body{ display:flex; flex-direction:column; gap:8px; font-size:0.88rem; min-height: 60px; }
.receipt-row{ display:flex; justify-content:space-between; gap: 12px; }
.receipt-row span:last-child{ white-space:nowrap; }
.receipt-total{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px dashed rgba(255,255,255,0.25); margin-top:16px; padding-top:16px;
  font-size:1.2rem;
}
.receipt-total strong{ color: var(--receipt-accent); font-size:1.5rem; }
.receipt-row--discount{ color: var(--orange-light); font-weight:600; }
.discount-box{ margin-top:14px; }
.discount-row{ display:flex; gap:8px; }
.discount-row input{
  flex:1; padding:9px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08); color:#fff; font-family: var(--font-body); font-size:16px;
}
.discount-row input::placeholder{ color:#C9AE87; }
.discount-row input:disabled{ opacity:0.6; }
.discount-row .btn-outline{ background:transparent; border-color:rgba(255,255,255,0.3); color:#fff; flex-shrink:0; }
.discount-row .btn-outline:hover{ border-color:#fff; }
.discount-note{ font-size:0.88rem; margin:8px 0 0; font-family: var(--font-body); line-height:1.4; }
.discount-remove{ background:none; border:none; text-decoration:underline; color:inherit; cursor:pointer; font-size:0.78rem; padding:0; font-family: var(--font-body); }
.receipt-fineprint{ font-size:0.74rem; color:#C9AE87; margin: 14px 0 0; font-family: var(--font-body); }

/* forms */
.quote-form, .contact-form{
  background:#fff; border-radius: var(--radius); padding: 28px;
  box-shadow: 0 14px 30px rgba(42,33,24,0.08);
}
.contact-form{ padding: 30px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.form-field{ margin-bottom:16px; }
.form-field label{ display:block; font-size:0.86rem; font-weight:600; margin-bottom:6px; }
.form-field input, .form-field textarea{
  width:100%; padding:11px 14px; border-radius:8px; border:2px solid var(--line);
  font-family: var(--font-body); font-size:16px; background: var(--bg-page);
  transition: border-color 0.15s ease;
}
.form-field input:focus, .form-field textarea:focus{ border-color: var(--orange); outline:none; }
.form-actions{ display:flex; flex-direction:column; gap:12px; margin-top: 6px; }
.form-disclaimer{ font-size:0.8rem; color: var(--muted); margin: 10px 0 0; line-height:1.4; }
.form-note{ margin: 12px 0 0; font-size:0.88rem; min-height: 1.2em; color: var(--orange); font-weight:600; }
.form-consent{ display:flex; align-items:flex-start; gap:8px; margin-bottom:16px; }
.form-consent input[type="checkbox"]{ width:16px; height:16px; margin-top:3px; flex-shrink:0; accent-color: var(--orange); }
.form-consent span{ font-size:0.8rem; color: var(--muted); line-height:1.4; }
.form-consent a{ color: var(--orange); text-decoration:underline; }

/* --- podsumowanie w oknie potwierdzenia zapytania (kalkulator) — jasne,
   proste, dopasowane do reszty strony (nie klon ciemnej .receipt-card).
   min-width:0 + overflow-wrap na wartości to celowe zabezpieczenie przed
   długim, niełamiącym się tekstem (np. adres) rozsadzającym wiersz. */
.confirm-summary{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; margin-bottom:18px; }
.confirm-summary-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:10px 16px; border-bottom:1px solid var(--line); font-size:0.92rem;
}
.confirm-summary-row:last-child{ border-bottom:none; }
.confirm-summary-row span:first-child{ color: var(--muted); flex-shrink:0; }
.confirm-summary-row span:last-child{
  font-weight:600; color: var(--text-main); text-align:right;
  min-width:0; overflow-wrap:break-word; word-break:break-word;
}
.confirm-summary-row--discount span:last-child{ color: var(--orange); }
.confirm-summary-row--total{ background: var(--bg-page); }
.confirm-summary-row--total span:first-child{ color: var(--text-main); font-weight:700; }
.confirm-summary-row--total span:last-child{ color: var(--teal-deep); font-weight:800; font-size:1.15rem; }

/* =========================================================
   OPINIE (reviews)
   ========================================================= */
/* =========================================================
   OPINIE (auto-scrolling carousel)
   ========================================================= */
.reviews-track-wrap{
  overflow:hidden; padding: 8px 0 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.reviews-track{
  display:flex; gap:22px; padding: 0 24px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  cursor:grab; scrollbar-width:none; -ms-overflow-style:none;
  user-select:none; -webkit-user-select:none;
}
.reviews-track.jest-przeciagana{ cursor:grabbing; }
.reviews-track::-webkit-scrollbar{ display:none; }
.review-strip{
  background:#fff; border-radius: var(--radius); padding: 26px 22px;
  box-shadow: 0 12px 26px rgba(42,33,24,0.07);
  display:flex; flex-direction:column; gap:12px;
  width: 300px; flex-shrink:0;
}
.review-head{ display:flex; align-items:center; gap:12px; }
.review-head-text{ display:flex; flex-direction:column; gap:4px; }
.review-avatar{
  width:44px; height:44px; border-radius:50%; color:#fff; font-family: var(--font-display);
  display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.review-avatar--photo{ background-size:cover; background-position:center; }
.stars{ color: var(--orange); letter-spacing:2px; font-size:1.05rem; text-align:center; }
.review-strip p{ font-size:0.92rem; color: var(--text-main); flex:1; margin:0; }
.review-name{ font-size:0.9rem; color: var(--text-main); font-weight:700; }
.review-event{ font-size:0.8rem; font-weight:400; color: var(--muted); }
.review-source{ font-size:0.76rem; color: var(--muted); }
.review-source a{ color: var(--link-accent); text-decoration:underline; }

/* =========================================================
   CONTACT DETAILS LIST
   ========================================================= */
.contact-details{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.contact-details a{ text-decoration:underline; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--footer-bg); color: var(--text-on-dark); padding: 54px 0 20px; }
.footer-inner{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 36px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 800px){ .footer-inner{ grid-template-columns:1fr; } }
.logo-text{ font-family: var(--font-display); font-size:1.4rem; }
.footer-brand p{ color:#D9C4A0; font-size:0.9rem; margin-top:10px; }
.footer-nav{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 18px; }
.footer-nav a{ text-decoration:none; color:#F2E4CE; font-size:0.92rem; }
.footer-nav a:hover{ color: var(--teal-light); }
.footer-contact{ display:flex; flex-direction:column; gap:10px; }
.footer-contact a{ text-decoration:none; color:#F2E4CE; font-size:0.92rem; }
.footer-bottom{ padding-top: 18px; font-size:0.8rem; color:#A88A62; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.admin-tiny-link{ color:#5C4A38; font-size:0.72rem; text-decoration:none; opacity:0.6; padding:4px 6px; }
.admin-tiny-link:hover{ opacity:1; color:#A88A62; }

/* =========================================================
   OPTION BUTTON — disabled / coming soon state (Vintage)
   ========================================================= */
.option-btn.is-disabled{
  opacity:0.55; cursor:not-allowed; position:relative;
  background: var(--line); color: var(--muted); border-color: var(--line);
}
.option-btn.is-disabled:hover{ border-color: var(--line); }
.option-btn .soon-flag{
  font-family: var(--font-mono); font-size:0.68rem; text-transform:uppercase;
  background: var(--soon); color:#fff; padding:2px 7px; border-radius:999px;
  margin-left:7px; letter-spacing:0.03em;
}

/* =========================================================
   ADDRESS AUTOCOMPLETE
   ========================================================= */
.address-field{ position:relative; }
.address-field input{
  width:100%; padding:12px 14px; border-radius:8px; border:2px solid var(--line);
  font-family: var(--font-body); font-size:16px; background:#fff;
}
.address-field input:focus{ border-color: var(--orange); outline:none; }
.address-suggestions{
  list-style:none; margin:0; padding:0; position:absolute; left:0; right:0; top: calc(100% + 6px);
  background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow: 0 14px 28px rgba(42,33,24,0.16);
  max-height: 260px; overflow-y:auto; z-index: 20; display:none;
}
.address-suggestions.is-open{ display:block; }
.address-suggestions li{ padding:11px 14px; font-size:0.88rem; cursor:pointer; border-bottom:1px solid var(--line); }
.address-suggestions li:last-child{ border-bottom:none; }
.address-suggestions li:hover, .address-suggestions li.is-active{ background: #FCEEE3; }
.address-suggestions li.address-empty{ cursor:default; color: var(--muted); font-style:italic; }
.address-suggestions li.address-empty:hover{ background:#fff; }
.address-note{ margin-top:10px; font-size:0.86rem; color: var(--muted); min-height: 1.3em; }
.address-note strong{ color: var(--orange); }
.address-credit{ font-size:0.72rem; color: var(--muted); margin-top:4px; }
.address-credit a{ text-decoration:underline; }

/* =========================================================
   CHECKBOX ROW + INFO BUTTON (dodatki)
   ========================================================= */
.checkbox-row{ display:flex; align-items:center; gap:10px; }
.checkbox-row .checkbox-item{ flex:1; }
.info-btn{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  border:2px solid var(--link-accent); background:#fff; color: var(--link-accent);
  font-family: var(--font-mono); font-weight:700; font-size:0.85rem;
  cursor:pointer; transition: all 0.15s ease; line-height:1;
}
.info-btn:hover{ background: var(--link-accent); color:#fff; }

/* =========================================================
   BACKGROUND SWATCH PICKER (tło standardowe)
   ========================================================= */
.swatch-trigger{
  display:flex; align-items:center; gap:12px; width:100%;
  background:#fff; border:2px solid var(--line); border-radius:10px;
  padding:10px 16px; cursor:pointer; font-family: var(--font-body); font-size:0.95rem;
  transition: border-color 0.15s ease;
}
.swatch-trigger:hover{ border-color: var(--link-accent); }
.swatch-preview{
  display:block; width:38px; height:38px; border-radius:8px; background-size:cover; background-position:center;
  border:1px solid var(--line); flex-shrink:0;
}
.swatch-preview--puste{ background-color: var(--bg-alt, #F2ECDD); }
.swatch-trigger strong{ font-weight:600; }
.swatch-price{ font-size:0.78rem; color: var(--muted); font-weight:600; }
.swatch-price--placony{ font-size:1rem; font-weight:800; color: var(--orange); }
.swatch-change{ margin-left:auto; color: var(--orange); font-size:0.85rem; font-weight:600; }

.swatch-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:14px; }
@media (max-width:640px){ .swatch-grid{ grid-template-columns: repeat(2,1fr); } }
.swatch-item{ position:relative; }
.swatch-select{
  width:100%; background:#fff; border:2px solid var(--line); border-radius:10px;
  padding:8px; cursor:pointer; text-align:center; transition: border-color 0.15s ease;
}
.swatch-select:hover{ border-color: var(--link-accent); }
.swatch-select.is-selected{ border-color: var(--orange); box-shadow: 0 0 0 3px rgba(244,163,0,0.15); }
.swatch-thumb{
  display:block; width:100%; aspect-ratio:4/5; border-radius:6px; background-size:cover; background-position:center;
  margin-bottom:8px; border:1px solid var(--line);
}
.swatch-name-box{ display:flex; align-items:center; justify-content:center; min-height: 2.6em; text-align:center; }
.swatch-name{ display:block; font-size:0.8rem; font-weight:600; line-height:1.3; }
.swatch-item-price{ display:block; font-size:0.72rem; color: var(--muted); font-weight:400; margin-top:2px; }
.swatch-item-price--placony{ font-size:0.92rem; font-weight:800; color: var(--orange); }
.swatch-zoom{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,0.92); border:1px solid var(--line); cursor:pointer; font-size:0.78rem;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.swatch-zoom:hover{ background:#fff; border-color: var(--link-accent); }

/* =========================================================
   MODALS (info / swatch picker / lightbox)
   ========================================================= */
.modal-overlay{
  display:none; position:fixed; inset:0; background: rgba(42,33,24,0.55);
  z-index: 200; align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.is-open{ display:flex; }
body.modal-open{ overflow:hidden; }
.modal-box{
  background:#fff; border-radius: var(--radius); padding: 32px; max-width: 480px; width:100%;
  max-height: 84vh; overflow-y:auto; position:relative; box-shadow: 0 30px 60px rgba(42,33,24,0.35);
}
.modal-box--wide{ max-width: 720px; }
.modal-box--image{ max-width: 900px; text-align:center; }
.modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  border:none; background: var(--line); color: var(--ink); font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ background: var(--link-accent); color:#fff; }
.modal-box h3{ margin-bottom:14px; padding-right:30px; }
.lightbox-image{
  display:block; max-width:100%; max-height:72vh; width:auto; height:auto;
  margin:0 auto 14px; border-radius:10px;
}
#lightboxCaption{ font-weight:600; margin:0; }

.addon-detail-gallery{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-bottom:16px; }
.addon-detail-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }

/* =========================================================
   KALENDARZ DOSTĘPNOŚCI (kalkulator)
   ========================================================= */
.calendar-widget{
  background: var(--calendar-bg, #fff); border:2px solid var(--calendar-border, var(--line)); border-radius:10px; padding:10px;
  width: 100%;
}
.calendar-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.calendar-month-label{ font-weight:700; font-family: var(--font-mono); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.03em; color: var(--calendar-text, var(--ink)); }
.calendar-nav{
  width:24px; height:24px; border-radius:50%; border:2px solid var(--calendar-border, var(--line)); background: var(--calendar-bg, #fff);
  cursor:pointer; font-size:0.9rem; line-height:1; color: var(--calendar-text, var(--ink)); transition: all 0.15s ease;
}
.calendar-nav:hover:not(:disabled){ border-color: var(--calendar-hover, var(--link-accent)); }
.calendar-nav:disabled{ opacity:0.3; cursor:not-allowed; }
.calendar-weekdays{ display:grid; grid-template-columns: repeat(7,1fr); text-align:center; font-size:0.62rem; color: var(--muted); margin-bottom:4px; }
.calendar-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:2px; }
.calendar-day{
  aspect-ratio:1; border:none; border-radius:5px; background: var(--bg-page); cursor:pointer;
  font-family: var(--font-body); font-size:0.7rem; color: var(--calendar-text, var(--text-main)); transition: all 0.15s ease;
}
.calendar-day.is-blank{ background:none; cursor:default; }
.calendar-day:not(.is-disabled):not(.is-blank):hover{ background: var(--calendar-hover, var(--link-accent)); color:#fff; }
.calendar-day.is-disabled{ opacity:0.35; cursor:not-allowed; text-decoration: line-through; }
.calendar-day.is-busy{ background: var(--calendar-busy-bg, #F3D9D2); color: var(--calendar-busy-text, #a34a2f); text-decoration:none; }
.calendar-day.is-selected{ background: var(--calendar-selected-bg, var(--orange)); color: var(--calendar-selected-text, #fff); font-weight:700; }
.calendar-legend{ display:flex; gap:10px; margin-top:8px; font-size:0.66rem; color: var(--muted); flex-wrap:wrap; }
.legend-dot{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; vertical-align:middle; }
.legend-dot--free{ background: var(--bg-page); border:1px solid var(--line); }
.legend-dot--busy{ background: var(--calendar-busy-bg, #F3D9D2); }
.legend-dot--selected{ background: var(--calendar-selected-bg, var(--orange)); }
.calendar-selected-note{ margin-top:10px; font-size:0.88rem; font-weight:600; color: var(--text-main); }

/* pole honeypot — ukryte przed ludźmi, widoczne dla botów wypełniających formularze */
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* =========================================================
   DODAJ OPINIĘ — dyskretny przycisk pod karuzelą + formularz w modalu
   ========================================================= */
.reviews-add-cta{ text-align:center; margin-top:18px; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.link-btn{
  background:none; border:none; padding:6px 10px; cursor:pointer;
  font-family: var(--font-body); font-size:0.84rem; font-weight:600; color: var(--muted);
  border-bottom:1.5px dashed transparent; transition: color 0.15s ease, border-color 0.15s ease;
}
.link-btn:hover{ color: var(--teal-deep); border-color: var(--link-accent); }

.all-reviews-list{ display:flex; flex-direction:column; gap:20px; margin-top:18px; }
.all-reviews-item{ padding-bottom:20px; border-bottom:1px solid var(--line); }
.all-reviews-item:last-child{ border-bottom:none; padding-bottom:0; }
.all-reviews-item-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.all-reviews-avatar{ width:38px; height:38px; font-size:0.85rem; flex-shrink:0; }
.all-reviews-text{ margin:0; font-size:0.9rem; color: var(--text-main); line-height:1.5; }
.all-reviews-empty{ color: var(--muted); font-size:0.9rem; }

.review-modal-box{ text-align:left; }
.review-modal-intro{ font-size:0.92rem; color: var(--muted); margin-bottom:18px; }
.review-modal-footnote{ font-size:0.76rem; color: var(--muted); margin-top:10px; text-align:center; }

.star-picker{ display:flex; gap:6px; margin:6px 0 18px; }
.star-picker-star{
  background:none; border:none; cursor:pointer; padding:0; line-height:1;
  font-size:2rem; color: var(--line); transition: color 0.12s ease, transform 0.12s ease;
}
.star-picker-star:hover{ transform: scale(1.12); }
.star-picker-star.is-active{ color: var(--orange); }

/* =========================================================
   POPRAWKI MOBILNE — mniejsze marginesy, większe pola dotykowe,
   brak nienaturalnego "ściśnięcia" elementów na wąskich ekranach
   ========================================================= */
@media (max-width: 640px){
  .wrap{ padding: 0 18px; }
  .section{ padding: 64px 0 70px; }
  .section-head{ margin: 14px 0 32px; }
  .hero{ padding: 78px 0 54px; }
  .hero-actions{ margin: 26px 0 30px; }

  .calendar-day{ min-height: 34px; }

  /* na jednej kolumnie przesunięcie "wyróżnionego" pakietu w górę
     wygląda jak literówka w układzie — wyłączamy je */
  .price-strip-wrap--featured{ transform: none; }

  /* pakiety danej fotobudki przewijane w bok zamiast ułożone jeden pod
     drugim. Szerokość karty jest wyraźnie mniejsza niż 100% kontenera,
     więc gdy środkowa karta jest wyśrodkowana, widać spory kawałek
     sąsiednich pakietów po OBU stronach ekranu — bez dodatkowego
     paddingu na kontenerze (to on psuł geometrię i wyglądał jak "ramka"
     zasłaniająca brzeg karty). */
  .price-grid{
    display:flex; grid-template-columns:none; gap:16px;
    overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    padding:18px 0 10px; margin:0 -18px -10px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .price-grid::-webkit-scrollbar{ display:none; }
  .price-strip-wrap{ flex:0 0 68%; scroll-snap-align:center; }

  /* większe obszary dotykowe dla drobnych przycisków */
  .swatch-zoom{ width: 32px; height: 32px; }
  .info-btn{ width: 34px; height: 34px; }
  .modal-close{ width: 38px; height: 38px; }
  .modal-box{ padding: 24px; }

  .receipt-card{ padding: 24px 20px; }
  .quote-form, .contact-form{ padding: 22px; }

  /* czytelniejsza lista pozycji wyceny — więcej odstępu i naprzemienne
     pogrubienie, żeby łatwiej rozróżnić kolejne pozycje */
  .receipt-body{ gap: 16px; }
  .receipt-row{ padding-bottom: 12px; border-bottom: 1px dashed rgba(255,255,255,0.14); }
  .receipt-row:last-child{ border-bottom: none; padding-bottom: 0; }
}

@media (max-width: 420px){
  .wrap{ padding: 0 14px; }
  .section{ padding: 52px 0 58px; }
  .hero{ padding: 64px 0 46px; }
  .swatch-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .price-grid{ margin-left: -14px; margin-right: -14px; }
}

/* =========================================================
   POPRAWKA: elementy kalkulatora/paragonu wychodzące poza
   prawą krawędź ekranu.
   Przyczyna: dzieci flex/grid domyślnie mają min-width:auto,
   czyli nie mogą się zmniejszyć poniżej szerokości swojej
   zawartości (np. pole <input>, długa nazwa dodatku albo kod
   rabatowy bez spacji) — to "rozpycha" cały moduł kalkulatora
   szerzej niż ekran, mimo że kolumny mają width:100%/1fr.
   Zerujemy tę automatyczną minimalną szerokość i pozwalamy
   długim, niełamiącym się ciągom znaków zawijać się zamiast
   wypychać layout.
   ========================================================= */
.calc-grid, .calc-grid *{ min-width: 0; }
.receipt-row span{ overflow-wrap: anywhere; }
.swatch-trigger strong, .swatch-change{ overflow-wrap: anywhere; }

/* =========================================================
   PRZYPIĘTY PRZYCISK "SKONFIGURUJ PAKIET" (tylko telefon/tablet)
   Pokazywany po zjechaniu z sekcji hero, ukrywany nad modułem
   kalkulatora (tam jest zbędny) — sterowany klasą .is-visible w JS.
   ========================================================= */
.mobile-sticky-cta{
  display:none;
  position:fixed; left:16px; right:16px; bottom:16px; z-index:150;
  text-align:center; padding:15px 20px; padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  border-radius:999px; background: var(--btn-bg); color: var(--text-on-dark);
  font-family: var(--font-body); font-weight:700; font-size:0.98rem; text-decoration:none;
  box-shadow: 0 12px 26px rgba(42,33,24,0.35);
  transform: translateY(130%); transition: transform 0.28s ease;
  pointer-events:none;
}
@media (max-width: 900px){
  .mobile-sticky-cta{ display:block; }
}
.mobile-sticky-cta.is-visible{ transform: translateY(0); pointer-events:auto; }

/* ==========================================================
   GALERIA DLA GOŚCI (galeria.php) — osobny, samodzielny widok
   (bramka PIN-em, siatka zdjęć, pełnoekranowy podgląd "stories").
   ========================================================== */
.galeria-goscie-body{ background:var(--bg-page); min-height:100vh; position:relative; }

/* Obraz tła galerii — dwie nakładki za treścią (zwykły stacking, nie potrzeba
   z-index na resztę strony): ::before niesie sam (rozmyty) obraz, ::after
   ciemną warstwę przyciemnienia nad nim, obie NIE blokują kliknięć. Warstwy
   są większe niż widoczny obszar (inset ujemny), żeby rozmycie nie zostawiało
   jaśniejszej obwódki na krawędzi ekranu. Domyślnie position:absolute (tło
   przewija się razem ze stroną) — .galeria-tlo-przypiete zmienia na fixed
   (efekt paralaksy), patrz galeria_tlo_obrazu_opcje_przypiecia() w PHP. */
.galeria-ma-tlo-obraz::before,
.galeria-ma-tlo-obraz::after{
  content:''; position:absolute; inset:-60px; z-index:0; pointer-events:none;
}
.galeria-ma-tlo-obraz::before{
  background-image:var(--tlo-obraz); background-size:var(--tlo-rozmiar);
  background-position:var(--tlo-pozycja); background-repeat:var(--tlo-powtarzanie);
  filter:blur(var(--tlo-rozmycie));
}
.galeria-ma-tlo-obraz::after{ background:rgba(0,0,0,var(--tlo-przyciemnienie)); }
.galeria-tlo-przypiete::before,
.galeria-tlo-przypiete::after{ position:fixed; }
.galeria-ma-tlo-obraz .galeria-g-naglowek,
.galeria-ma-tlo-obraz .galeria-g-ekran-info,
.galeria-ma-tlo-obraz .galeria-g-siatka,
.galeria-ma-tlo-obraz .galeria-g-pusta,
.galeria-ma-tlo-obraz .galeria-g-odbitki,
.galeria-ma-tlo-obraz .galeria-g-stopka{ position:relative; z-index:1; }

.galeria-g-logo{ height:44px; object-fit:contain; }
.galeria-g-logo--male{ height:34px; }

.galeria-g-ekran-info{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:32px 20px; max-width:420px; margin:0 auto;
}
.galeria-g-ekran-info h1{ font-size:1.5rem; margin:6px 0 0; }
.galeria-g-ekran-info p{ color:var(--muted); margin:0; }

.galeria-g-pin-formularz{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px; width:100%; }
.galeria-g-pin-formularz input[type="text"]{
  flex:1; min-width:140px; text-align:center; letter-spacing:0.3em; font-size:1.3rem; font-weight:700;
  padding:0.6em 0.8em; border-radius:999px; border:2px solid var(--line); background:#fff; color:var(--ink); font-family:var(--font-body);
}
.galeria-g-pin-formularz input[type="text"]:focus{ outline:none; border-color:var(--teal); }
.galeria-g-blad{ color:#b3261e; font-weight:600; font-size:0.9rem; }

.galeria-g-naglowek{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:20px 24px;
  border-bottom:1px solid var(--line); background:#fff;
}
.galeria-g-naglowek > div{ flex:1; min-width:160px; }
.galeria-g-naglowek h1{ margin:0; font-size:1.2rem; }
.galeria-g-naglowek p{ margin:2px 0 0; color:var(--muted); font-size:0.86rem; }

/* Przycisk "Pobierz wszystko" — celowo inny niż zwykłe .btn, żeby wyglądał
   jak główna, "premium" akcja tej strony, a nie kolejny szary przycisk. */
.galeria-g-pobierz-btn{
  display:inline-flex; align-items:center; gap:10px; padding:0.7em 1.4em 0.7em 0.7em;
  border-radius:999px; text-decoration:none; font-weight:700; font-size:0.94rem;
  color:#fff; background:linear-gradient(135deg, var(--teal-deep), #1E140D);
  box-shadow:0 6px 18px rgba(59,42,31,0.35), inset 0 0 0 1px rgba(255,255,255,0.06);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.galeria-g-pobierz-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(59,42,31,0.42), inset 0 0 0 1px rgba(255,255,255,0.08); }
.galeria-g-pobierz-ikona{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:var(--orange); color:#1E140D; font-size:1rem; font-weight:900; flex-shrink:0;
}

.galeria-g-pusta{ text-align:center; color:var(--muted); padding:60px 20px; }

.galeria-g-siatka{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:4px;
  padding:4px; max-width:1200px; margin:0 auto;
}
.galeria-g-kafelek{
  position:relative; aspect-ratio:3/4; border:none; padding:0; margin:0; cursor:pointer; overflow:hidden;
  background:var(--line); border-radius:6px;
}
.galeria-g-kafelek img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.2s ease; }
.galeria-g-kafelek:hover img{ transform:scale(1.04); }
.galeria-g-kafelek-reakcje{
  position:absolute; left:6px; bottom:6px; display:flex; gap:6px; font-size:0.72rem; font-weight:700;
  color:#fff; background:rgba(0,0,0,0.45); padding:3px 7px; border-radius:999px; backdrop-filter:blur(2px);
}

.galeria-g-odbitki{
  text-align:center; padding:28px 20px; margin:20px auto; max-width:480px;
}
.galeria-g-odbitki p{ color:var(--muted); margin:0 0 12px; }

.galeria-g-stopka{ text-align:center; color:var(--muted); font-size:0.82rem; padding:24px 20px 40px; }

/* --- widok pełnoekranowy "stories" --- */
.galeria-g-stories{
  display:none; position:fixed; inset:0; z-index:200; background:#000; flex-direction:column;
}
.galeria-g-stories.jest-otwarte{ display:flex; }
.galeria-g-stories-pasek{ display:flex; gap:4px; padding:10px 12px 0; flex-shrink:0; }
.galeria-g-stories-pasek-segment{
  flex:1; height:3px; border-radius:999px; background:rgba(255,255,255,0.3); overflow:hidden;
}
.galeria-g-stories-pasek-segment.jest-widziane{ background:#fff; }
.galeria-g-stories-pasek-wypelnienie{ display:block; height:100%; width:0%; background:#fff; border-radius:999px; }
.galeria-g-stories-pasek-segment.jest-widziane .galeria-g-stories-pasek-wypelnienie{ width:100%; }
@keyframes galeriaGStoriesPasekWypelnienie{
  from{ width:0%; }
  to{ width:100%; }
}

/* Mały, dyskretny przełącznik auto-odtwarzania — góra-lewo, w stylu Instagram/FB Stories. */
.galeria-g-stories-autoplay{
  position:absolute; top:10px; left:12px; z-index:2; background:rgba(255,255,255,0.14); border:none;
  color:#fff; font-size:0.72rem; font-weight:700; line-height:1; cursor:pointer; padding:6px 10px;
  border-radius:999px; backdrop-filter:blur(3px);
}
.galeria-g-stories-autoplay.jest-wylaczony{ opacity:0.6; }

.galeria-g-stories-zamknij{
  position:absolute; top:10px; right:12px; z-index:2; background:none; border:none; color:#fff;
  font-size:1.4rem; line-height:1; cursor:pointer; padding:8px;
}
.galeria-g-stories-tresc{ flex:1; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; }
.galeria-g-stories-tresc img{ max-width:100%; max-height:100%; object-fit:contain; }
.galeria-g-stories-strefa{ position:absolute; top:0; bottom:0; width:35%; background:none; border:none; cursor:pointer; }
.galeria-g-stories-strefa--lewa{ left:0; }
.galeria-g-stories-strefa--prawa{ right:0; }

/* Reakcje (like/serce) — pionowy słupek po prawej, kawałek poniżej połowy ekranu, jak w IG/TikToku. */
.galeria-g-stories-reakcje{
  position:absolute; right:10px; top:58%; z-index:2; display:flex; flex-direction:column; gap:18px; align-items:center;
}
.galeria-g-reakcja-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; cursor:pointer;
  color:#fff; padding:4px; -webkit-tap-highlight-color:transparent;
}
.galeria-g-reakcja-ikona{
  display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
  background:rgba(0,0,0,0.32); backdrop-filter:blur(3px); font-size:1.4rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15); transition:transform 0.15s ease, background 0.15s ease;
}
.galeria-g-reakcja-btn:active .galeria-g-reakcja-ikona{ transform:scale(0.88); }
.galeria-g-reakcja-btn.jest-aktywna .galeria-g-reakcja-ikona{
  background:var(--orange); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3); transform:scale(1.08);
}
.galeria-g-reakcja-licznik{ font-size:0.78rem; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.7); }

.galeria-g-stories-akcje{
  flex-shrink:0; display:flex; gap:10px; justify-content:center; padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}

@media (max-width:600px){
  .galeria-g-naglowek{ padding:14px 16px; justify-content:center; }
  .galeria-g-siatka{ grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); }
  .galeria-g-pobierz-btn{ font-size:0.564rem; gap:6px; margin:0 auto; }
  .galeria-g-pobierz-ikona{ width:18px; height:18px; font-size:0.6rem; }
}

/* =========================================================
   MOTYWY SEZONOWE (strona główna) — emotikona przy nagłówku hero +
   pływające cząsteczki dekoracji (patrz includes/motywy_sezonowe.php).
   Kontener jest position:fixed na całym viewporcie, ale pointer-events:none,
   więc nigdy nie blokuje kliknięć — z-index celowo niżej niż sticky CTA
   (150), nagłówek (100) i modale (200), żeby nic nie przesłaniał.
   ========================================================= */
.hero-motyw-emoji{
  display:inline-block; font-size:0.7em; margin-left:0.15em;
  animation:motywEmojiKolysanie 2.4s ease-in-out infinite;
}
@keyframes motywEmojiKolysanie{
  0%, 100%{ transform:rotate(-8deg); }
  50%{ transform:rotate(8deg); }
}

.motyw-dekoracja{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:40; }
.motyw-dekoracja-czastka{ position:absolute; top:-10%; will-change:transform; user-select:none; line-height:1; }
.motyw-dekoracja--spadanie .motyw-dekoracja-czastka{
  animation-name:motywCzastkaSpadanie; animation-timing-function:linear; animation-iteration-count:infinite;
}
.motyw-dekoracja--unoszenie .motyw-dekoracja-czastka{
  top:auto; bottom:-10%; animation-name:motywCzastkaUnoszenie; animation-timing-function:ease-in; animation-iteration-count:infinite;
}
@keyframes motywCzastkaSpadanie{
  from{ transform:translateY(0) rotate(0deg); }
  to{ transform:translateY(115vh) rotate(360deg); }
}
@keyframes motywCzastkaUnoszenie{
  from{ transform:translateY(0) rotate(0deg); opacity:1; }
  85%{ opacity:1; }
  to{ transform:translateY(-115vh) rotate(-20deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-motyw-emoji{ animation:none; }
  .motyw-dekoracja{ display:none; }
}

/* =========================================================
   KREATOR UKŁADU WYDRUKU (uklad_wydruku.php) — publiczna strona, na którą
   klient wchodzi z linku wysłanego do konkretnej rezerwacji.
   ========================================================= */
.uw-body{ background:var(--bg-page); min-height:100vh; }

.uw-ekran-info{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:32px 20px; max-width:420px; margin:0 auto;
}
.uw-logo{ height:44px; object-fit:contain; }

.uw-naglowek{ background:#fff; border-bottom:1px solid var(--line); padding:36px 24px 30px; }
.uw-naglowek-wewn{ max-width:640px; margin:0 auto; text-align:center; }
.uw-naglowek-wewn .uw-logo{ margin:0 auto 18px; }
.uw-naglowek-wewn .eyebrow{ margin-bottom:0.5em; }
.uw-naglowek-wewn h1{ font-size:clamp(1.7rem, 4.4vw, 2.5rem); color:var(--ink); }
.uw-lead{ color:var(--muted); font-size:1rem; max-width:520px; margin:0 auto; }

.uw-baner{
  max-width:640px; margin:18px auto 0; padding:12px 18px; border-radius:999px;
  font-weight:600; text-align:center; font-size:0.9rem;
}
.uw-baner--sukces{ background:#E4F5EC; color:#1E6B45; }
.uw-baner--blad{ background:#FBEAE7; color:#9A3324; }

.uw-glowna{ max-width:640px; margin:0 auto; padding:28px 20px 0; }

/* Zakładki formatów — segmentowy przełącznik */
.uw-zakladki{
  display:flex; gap:6px; background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:6px; margin-bottom:22px;
}
.uw-zakladka{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  font:inherit; color:var(--muted); background:none; border:none; border-radius:999px;
  padding:10px 8px; cursor:pointer; position:relative; transition:background 0.15s ease, color 0.15s ease;
}
.uw-zakladka:hover{ color:var(--ink); }
.uw-zakladka.is-active{ background:var(--ink); color:var(--cream); }
.uw-zakladka-ikona{ width:20px; border:2px solid currentColor; border-radius:2px; opacity:0.85; }
.uw-zakladka-tekst{ font-size:0.78rem; font-weight:600; white-space:nowrap; }
.uw-zakladka-kropka{
  position:absolute; top:6px; right:14px; width:8px; height:8px; border-radius:50%;
  background:#3FBE7A; box-shadow:0 0 0 2px #fff;
}
.uw-zakladka.is-active .uw-zakladka-kropka{ box-shadow:0 0 0 2px var(--ink); }

/* Karta formatu */
.uw-karta{
  background:#fff; border-radius:var(--radius); box-shadow:0 12px 26px rgba(42,33,24,0.07);
  padding:24px; margin-bottom:22px;
}
.uw-karta-glowka{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.uw-karta-glowka h2{ font-size:1.4rem; margin:0 0 2px; }
.uw-karta-opis{ color:var(--muted); font-size:0.88rem; margin:0; }

.uw-narzedzia{ display:flex; gap:8px; flex-shrink:0; }
.uw-narzedzie{
  display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:0.82rem; font-weight:600;
  background:var(--cream); border:1px solid var(--line); color:var(--ink); border-radius:999px;
  padding:7px 14px; cursor:pointer; transition:background 0.15s ease, border-color 0.15s ease;
}
.uw-narzedzie:hover{ border-color:var(--orange); }
.uw-narzedzie.is-active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.uw-podpowiedz{ color:var(--muted); font-size:0.85rem; margin:10px 0 6px; }

.uw-plotno-wrap{ display:flex; justify-content:center; padding:16px 0 4px; }
.uw-plotno{
  position:relative; background:var(--cream); border-radius:6px;
  box-shadow:0 10px 24px rgba(42,33,24,0.14), 0 0 0 1px var(--line);
  background-image: radial-gradient(circle, rgba(59,42,31,0.08) 1.4px, transparent 1.6px);
  background-size:16px 16px;
}
.uw-plotno--wlasne-tlo{ background-image:none; }

.uw-ramka{
  position:absolute; background:rgba(255,255,255,0.55); border:2px dashed var(--orange);
  border-radius:6px; cursor:grab; touch-action:none; user-select:none; transition:box-shadow 0.1s ease;
}
.uw-ramka:hover{ box-shadow:0 0 0 3px rgba(244,163,0,0.18); }
.uw-ramka:active{ cursor:grabbing; }
.uw-ramka-etykieta{
  display:flex; align-items:center; gap:5px; font-size:0.66rem; line-height:1; font-weight:700;
  color:#fff; background:var(--ink); border-radius:999px; padding:4px 8px; margin:6px;
  pointer-events:none; white-space:nowrap;
}
.uw-ramka-etykieta b{ font-weight:600; color:var(--orange-light); }
.uw-ramka-uchwyt{
  position:absolute; right:-7px; bottom:-7px; width:18px; height:18px; border-radius:50%;
  background:var(--orange); border:2.5px solid #fff; cursor:nwse-resize; touch-action:none;
  box-shadow:0 2px 5px rgba(0,0,0,0.25);
}

.uw-ramka--podglad{
  background:rgba(255,255,255,0.92); border:1.5px solid rgba(42,33,24,0.4); border-radius:2px;
  cursor:default; display:flex; align-items:center; justify-content:center;
}
.uw-ramka--podglad:hover{ box-shadow:none; }
.uw-ramka-ikonka{ opacity:0.35; font-size:1.4rem; pointer-events:none; }

/* Pasek zapisu — przyklejony do dołu podczas przewijania kart formatów */
.uw-zapis-pasek{
  position:sticky; bottom:0; margin-top:8px; padding:16px 20px;
  background:rgba(255,246,233,0.92); backdrop-filter:blur(6px);
  border-top:1px solid var(--line); border-radius:var(--radius) var(--radius) 0 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.uw-zapis-tekst{ margin:0; color:var(--muted); font-size:0.85rem; flex:1 1 200px; }
.uw-zapis-pasek form{ margin:0; }

.uw-stopka{ text-align:center; color:var(--muted); font-size:0.82rem; padding:24px 20px 40px; max-width:640px; margin:0 auto; }

@media (max-width:600px){
  .uw-naglowek{ padding:28px 18px 24px; }
  .uw-glowna{ padding:20px 14px 0; }
  .uw-karta{ padding:18px; }
  .uw-zakladka-tekst{ font-size:0.7rem; }
  .uw-zapis-pasek{ flex-direction:column; align-items:stretch; text-align:center; }
  .uw-zapis-pasek .btn{ width:100%; }
}
/* =========================================================
   BANER ZGODY NA CIASTECZKA (index.php) — pasek przyklejony do dołu,
   pokazywany JS-em tylko, gdy klient jeszcze nie podjął decyzji
   (patrz ciasteczko fa_zgoda_ciasteczka).
   ========================================================= */
.cookie-baner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--ink); color:var(--cream);
  padding:16px 24px; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap; box-shadow:0 -6px 24px rgba(0,0,0,0.18);
}
.cookie-baner:not([hidden]){ display:flex; }
.cookie-baner-tekst{ margin:0; max-width:640px; font-size:0.88rem; line-height:1.5; color:var(--cream); }
.cookie-baner-akcje{ display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; }
.cookie-baner .btn-ghost{ color:var(--cream); border-color:var(--cream); }
.cookie-baner .btn-ghost:hover{ background:var(--cream); color:var(--ink); }
@media (max-width:600px){
  .cookie-baner{ flex-direction:column; align-items:stretch; text-align:center; padding:14px 18px; }
  .cookie-baner-akcje{ justify-content:center; }
}
