/* HAIR HUB, system wizualny.
   Baza: ciepła kość słoniowa, czerń jako sekcje przełamujące, złoto punktowo.
   Odwrotnie niż w pierwszej wersji: strona w całości czarna czyta się jak marka
   młodzieżowa, a nie jak salon premium.
   Zero fioletu. Zero gradientów metalicznych. */

/* MARK: kroje, hostowane u siebie */

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/bodoni-latin-ext.woff2") format("woff2");
  /* Polskie znaki siedzą w tym zakresie, więc ładuje się pierwszy. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/bodoni-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/satoshi-variable.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* MARK: żetony */

:root {
  /* Czerń w czterech stopniach, nie jedna. */
  --ink: #0a0a0b;
  --ink-2: #141416;
  --ink-3: #1f1f22;

  /* Ciepła biel, nigdy czysta na dużych powierzchniach. */
  --bone: #f5f1ea;
  --bone-2: #eae4da;
  --white: #ffffff;

  /* Dwa złota, bo jedno nie ma kontrastu na obu tłach.
     --gold ma 8,22 do 1 na czerni.
     --gold-deep ma 5,28 do 1 na kości słoniowej i 5,94 na bieli.
     Uwaga: wcześniejsze #8a6a2a dawało 5,03 na CZYSTEJ bieli, ale zaledwie
     4,47 na naszej kości słoniowej, czyli poniżej progu 4,5 dla małego tekstu.
     Kontrast liczy się wobec tła, którego się realnie używa, nie wobec bieli. */
  --gold: #c8a248;
  --gold-deep: #7d5f24;
  --gold-soft: #e8d6a8;

  /* Kolory zależne od sekcji. Sekcja ciemna nadpisuje je u siebie,
     dzięki czemu ten sam komponent działa na obu tłach bez wariantów. */
  --bg: var(--bone);
  --fg: var(--ink);
  --fg-muted: rgba(10, 10, 11, 0.62);
  --hairline: rgba(10, 10, 11, 0.14);
  --accent: var(--gold-deep);
  --surface: var(--white);

  --font-display: "Bodoni Moda", Didot, "Bodoni MT", Georgia, serif;
  --font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(3.5rem, 9vw, 8.5rem);
  --fs-h1: clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-lead: 1.25rem;
  --fs-kicker: 0.75rem;
  --fs-ui: 0.875rem;

  /* Jedna krzywa, trzy czasy. Rozjazd 5x między najkrótszym a najdłuższym
     to największy pojedynczy czynnik odróżniający stronę drogą od taniej. */
  --ease: cubic-bezier(0.4, 0, 0, 1);
  --t-micro: 0.18s;
  --t-ui: 0.35s;
  --t-scene: 0.9s;

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

/* Sekcja przełamująca. Odwraca żetony, nie duplikuje reguł. */
.on-ink {
  --bg: var(--ink);
  --fg: var(--bone);
  --fg-muted: rgba(245, 241, 234, 0.6);
  --hairline: rgba(245, 241, 234, 0.14);
  --accent: var(--gold);
  --surface: var(--ink-2);
  background: var(--bg);
  color: var(--fg);
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-synthesis-weight: none;
  /* Bez tego iOS Safari potrafi puścić stronę w bok przy szerokich sekcjach. */
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* MARK: typografia */

.display,
.section-head h2,
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.kicker::before {
  content: "";
  width: clamp(24px, 5vw, 56px);
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.lead {
  color: var(--fg-muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-width: 58ch;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; z-index: 2; }
.section { padding-block: clamp(5rem, 12vw, 9rem); background: var(--bg); color: var(--fg); }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section-head h2 { font-size: var(--fs-h1); line-height: 1.05; margin: 0 0 1.2rem; }

/* MARK: nagłówek */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--gutter);
  color: var(--bone);
  transition: background var(--t-ui) var(--ease), backdrop-filter var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease), padding var(--t-ui) var(--ease),
              border-color var(--t-ui) var(--ease);
  border-bottom: 1px solid transparent;
}

/* Po zejściu z sekcji otwierającej nagłówek siada na kości słoniowej,
   więc musi zmienić kolor tekstu, inaczej biel na bieli znika. */
.site-header.is-stuck {
  background: rgba(245, 241, 234, 0.88);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: rgba(10, 10, 11, 0.14);
  color: var(--ink);
  padding-block: 0.7rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand span {
  border: 1px solid currentColor;
  padding: 0.12em 0.5em 0.16em;
  letter-spacing: 0.24em;
}

.site-header.is-stuck .brand span { border-color: var(--gold-deep); color: var(--gold-deep); }

.nav { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.9rem); }

.nav a {
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  padding-block: 0.35rem;
  opacity: 0.78;
  transition: opacity var(--t-micro) var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-ui) var(--ease);
}

.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

.lang-switch { display: flex; gap: 0.3rem; }
.lang-switch--in-nav { display: none; }

.lang-switch a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  opacity: 0.5;
  transition: opacity var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}

.lang-switch a[aria-current="true"] { opacity: 1; background: rgba(200, 162, 72, 0.2); }
.lang-switch a:hover { opacity: 1; }

/* MARK: przyciski */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.8rem;
  min-height: 48px;
  border: 0;
  background: var(--gold-deep);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-micro) var(--ease), color var(--t-ui) var(--ease);
  will-change: transform;
}

/* Wypełnienie wjeżdżające od dołu zamiast zmiany koloru. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform var(--t-ui) var(--ease);
}

.btn:hover::before { transform: translateY(0); }
.btn:active { transform: scale(0.985); }

.on-ink .btn { background: var(--gold); color: var(--ink); }
.on-ink .btn::before { background: var(--bone); }

.btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--hairline); }
.btn--ghost::before { background: var(--fg); }
.btn--ghost:hover { color: var(--bg); }
.on-ink .btn--ghost { background: transparent; color: var(--fg); }

.btn--sm { padding: 0.7rem 1.25rem; min-height: 40px; font-size: 0.78rem; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* MARK: sekcja otwierająca */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding-bottom: clamp(3rem, 8vw, 6rem);
  background: var(--ink);
  color: var(--bone);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--hero-scale, 1.06));
  transition: transform 0.1s linear;
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.7) 0%, rgba(10, 10, 11, 0.2) 38%, rgba(10, 10, 11, 0.94) 100%);
}

.hero__inner { position: relative; z-index: 2; }

.hero h1 {
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  max-width: 14ch;
}

/* Słowa wjeżdżają spod maski, nie po prostu się pojawiają. */
.hero h1 .word { display: inline-block; overflow: hidden; vertical-align: bottom; }

.hero h1 .word i {
  display: inline-block;
  font-style: normal;
  transform: translateY(105%);
  animation: word-rise var(--t-scene) var(--ease) forwards;
  animation-delay: calc(var(--i) * 70ms + 180ms);
}

@keyframes word-rise { to { transform: none; } }

.hero .lead { color: rgba(245, 241, 234, 0.72); animation: fade-up 0.9s var(--ease) 0.7s both; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; animation: fade-up 0.9s var(--ease) 0.85s both; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  translate: -50% 0;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.4);
  display: grid;
  justify-items: center;
  gap: 0.55rem;
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scroll-pulse 2.2s var(--ease) infinite;
}

@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.35; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

/* MARK: liczby */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--bg);
  color: var(--fg);
  border-bottom: 1px solid var(--hairline);
}

.stat {
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
  border-right: 1px solid var(--hairline);
}

.stat:last-child { border-right: 0; }

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  /* Cyfry tabelaryczne, żeby licznik nie skakał w trakcie liczenia. */
  font-variant-numeric: tabular-nums;
}

.stat span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* MARK: usługi */

.services { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }

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

.service {
  background: var(--bg);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  display: grid;
  gap: 0.7rem;
  align-content: start;
  position: relative;
  transition: background var(--t-ui) var(--ease);
}

.service:hover { background: var(--surface); }

.service h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

.service p { color: var(--fg-muted); margin: 0; }

.service__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.4rem;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.service__price { color: var(--accent); font-size: 0.95rem; text-transform: none; }

.price-draft {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  margin-bottom: 1.6rem;
  border: 1px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* MARK: galeria */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr));
  gap: clamp(0.6rem, 1.4vw, 1rem);
}

.gallery figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink-2);
}

.gallery img,
.gallery video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-scene) var(--ease);
}

.gallery figure:hover img,
.gallery figure:hover video { transform: scale(1.05); }

/* Przesunięta złota ramka za zdjęciem: głębia bez cienia. */
.framed { position: relative; }

.framed::before {
  content: "";
  position: absolute;
  inset: -14px 14px 14px -14px;
  border: 1px solid var(--gold);
  pointer-events: none;
  z-index: -1;
}

/* MARK: suwak przed i po */

.compare {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--ink-2);
  touch-action: none;
  user-select: none;
}

.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Oś pionowa, nie pozioma. Przy doczepach zmienia się sylwetka,
   więc poziome przetarcie robiłoby uskok konturu na szwie. */
.compare__after { clip-path: inset(0 0 0 var(--split, 50%)); }

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  background: var(--white);
  translate: -1px 0;
  pointer-events: none;
}

.compare__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(4px);
}

.compare__label {
  position: absolute;
  top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  background: rgba(10, 10, 11, 0.6);
  color: var(--bone);
  pointer-events: none;
}

.compare__label--before { left: 1rem; }
.compare__label--after { right: 1rem; color: var(--gold); }

/* MARK: ujawnianie przy przewijaniu */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease);
  transition-delay: var(--delay, 0ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }

/* MARK: pasek przewijający */

.marquee {
  overflow: hidden;
  background: var(--ink);
  color: var(--gold);
  padding-block: 1rem;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track { display: flex; gap: 3rem; width: max-content; animation: marquee 42s linear infinite; }

.marquee span {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes marquee { to { transform: translateX(-50%); } }

/* MARK: lepki pasek rezerwacji na telefonie */

.sticky-book {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--ink);
  border-top: 1px solid rgba(245, 241, 234, 0.12);
  transform: translateY(101%);
  transition: transform var(--t-ui) var(--ease);
}

.sticky-book.is-in { transform: none; }
.sticky-book .btn { flex: 1; background: var(--gold); color: var(--ink); }
.sticky-book .btn::before { background: var(--bone); }

/* MARK: stopka */

.site-footer {
  background: var(--ink);
  color: var(--bone);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  font-size: 0.9rem;
}

.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.site-footer h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}

.site-footer p { color: rgba(245, 241, 234, 0.62); }
.site-footer a:hover { color: var(--gold); }

.pending {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gold);
  border-bottom: 1px dashed rgba(200, 162, 72, 0.5);
}

/* MARK: menu na telefonie */

.burger { display: none; }

@media (max-width: 900px) {
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    background: var(--ink);
    color: var(--bone);
    gap: 1.6rem;
    transform: translateY(-100%);
    /* Samo przesunięcie nie wystarcza: element potrafi zostawić po sobie
       odmalowane napisy nad treścią. Stąd visibility. */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--t-scene) var(--ease), opacity var(--t-ui) var(--ease),
                visibility 0s linear var(--t-scene);
    z-index: 99;
  }

  .nav.is-open {
    transform: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: transform var(--t-scene) var(--ease), opacity var(--t-ui) var(--ease),
                visibility 0s linear 0s;
  }

  .nav a { font-size: 1.05rem; letter-spacing: 0.12em; }

  .header-actions > .lang-switch { display: none; }
  .header-actions > .btn { display: none; }
  .lang-switch--in-nav { display: flex; gap: 0.6rem; margin-top: 0.6rem; }
  .lang-switch--in-nav a { font-size: 0.85rem; }

  .burger { display: grid; gap: 5px; background: none; border: 0; padding: 0.5rem; z-index: 101; }
  .burger i { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform var(--t-ui) var(--ease), opacity var(--t-micro); }
  .burger.is-open { color: var(--bone); }
  .burger.is-open i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .burger.is-open i:nth-child(2) { opacity: 0; }
  .burger.is-open i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .stat { border-right: 0; border-bottom: 1px solid var(--hairline); }

  .sticky-book { display: flex; }
  /* Miejsce na pasek, żeby nie zasłaniał stopki. */
  body { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
  .hero h1 .word i { transform: none; }
  .marquee__track { animation-play-state: paused; }
}

/* MARK: kreator rezerwacji */

.booking { display: grid; gap: 1.5rem; }

.booking__steps {
  display: flex;
  gap: 0;
  border: 1px solid var(--hairline);
  margin-bottom: 0.5rem;
}

.booking__step {
  flex: 1;
  padding: 0.85rem 0.6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-right: 1px solid var(--hairline);
  transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}

.booking__step:last-child { border-right: 0; }
.booking__step.is-active { background: var(--accent); color: var(--bg); }
.booking__step.is-done { color: var(--accent); }

.booking__panel { display: none; }
.booking__panel.is-active { display: grid; gap: 1rem; animation: panel-in var(--t-ui) var(--ease); }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.pick-list { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }

.pick {
  background: var(--bg);
  border: 0;
  text-align: left;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  color: var(--fg);
  transition: background var(--t-micro) var(--ease), padding-left var(--t-micro) var(--ease);
}

.pick:hover { background: var(--surface); padding-left: 1.6rem; }
.pick.is-selected { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.pick strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; }
.pick small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-muted); letter-spacing: 0.05em; }

/* Kalendarz: dni jako siatka, nie natywny wybór daty.
   Natywny na telefonie otwiera koło systemowe i gubi informację,
   które dni salon ma zamknięte. */
.calendar { display: grid; gap: 0.8rem; }

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calendar__nav {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--fg);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  transition: background var(--t-micro) var(--ease);
}

.calendar__nav:hover { background: var(--surface); }
.calendar__nav[disabled] { opacity: 0.3; pointer-events: none; }

.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.calendar__dow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
  padding-bottom: 0.3rem;
}

.day {
  aspect-ratio: 1;
  min-height: 44px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  display: grid;
  place-items: center;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease);
}

.day:hover:not([disabled]) { border-color: var(--accent); }
.day.is-selected { background: var(--accent); color: var(--bg); }
.day[disabled] { background: transparent; color: var(--fg-muted); opacity: 0.35; pointer-events: none; }
.day.is-empty { background: transparent; border: 0; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }

.slot {
  min-height: 44px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}

.slot:hover { background: var(--accent); color: var(--bg); }
.slot.is-selected { background: var(--accent); color: var(--bg); }

.field { display: grid; gap: 0.35rem; }

.field label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 0.85rem 1rem;
  min-height: 48px;
  transition: border-color var(--t-micro) var(--ease);
}

.field input:focus,
.field textarea:focus { outline: 0; border-color: var(--accent); }
.field.has-error input { border-color: #b3261e; }
.field__error { font-size: 0.78rem; color: #b3261e; }

.code-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.code-row .field { flex: 1; }

.summary {
  border: 1px solid var(--hairline);
  padding: 1.2rem 1.4rem;
  display: grid;
  gap: 0.5rem;
  background: var(--surface);
}

.summary__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.summary__row span:first-child { color: var(--fg-muted); }
.summary__row--total { border-top: 1px solid var(--hairline); padding-top: 0.6rem; margin-top: 0.3rem; font-size: 1.05rem; }
.summary__row--total b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; }
.summary__struck { text-decoration: line-through; opacity: 0.5; margin-right: 0.5rem; }

.note { font-size: 0.82rem; color: var(--fg-muted); }
.note--ok { color: var(--accent); }
.note--bad { color: #b3261e; }

.booking__done { display: grid; gap: 1rem; justify-items: start; padding: 2rem 0; }

.booking__done h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  margin: 0;
}

.booking__done .tick {
  width: 56px;
  height: 56px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 1.6rem;
  animation: tick-in var(--t-scene) var(--ease) both;
}

@keyframes tick-in {
  from { transform: scale(0.6) rotate(-12deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.booking__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* MARK: panel administracyjny */

.admin { min-height: 100svh; background: var(--bone); }

.admin__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem var(--gutter);
  background: var(--ink);
  color: var(--bone);
}

.admin__tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: var(--ink-2);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}

.admin__tabs::-webkit-scrollbar { display: none; }

.admin__tab {
  padding: 0.9rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.55);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}

.admin__tab:hover { color: var(--bone); }
.admin__tab.is-active { color: var(--gold); border-bottom-color: var(--gold); }

.admin__body { padding: clamp(1.5rem, 4vw, 3rem) var(--gutter); max-width: 1240px; margin-inline: auto; }

.admin h1 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400; margin: 0 0 1.5rem; }
.admin h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin: 2.5rem 0 1rem; }

.flash {
  padding: 0.8rem 1.1rem;
  margin-bottom: 1.5rem;
  background: var(--gold-soft);
  border-left: 3px solid var(--gold-deep);
  font-size: 0.9rem;
}

.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
}

.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-3 { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table th, .table td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }

.table th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.table tr.is-off { opacity: 0.45; }

/* Tabela na telefonie zamienia sie w kafelki: poziome przewijanie tabeli
   to najczestszy powod, dla ktorego panele nie dzialaja na komorce. */
@media (max-width: 760px) {
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr { border: 1px solid var(--hairline); margin-bottom: 0.8rem; padding: 0.4rem 0.6rem; background: var(--white); }
  .table td { border: 0; padding: 0.35rem 0; }
  .table td::before {
    content: attr(data-label) ": ";
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    color: var(--fg-muted);
  }
}

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border: 1px solid currentColor;
}

.badge--on { color: var(--gold-deep); }
.badge--off { color: var(--fg-muted); }

/* Na sekcji ciemnej ciemne złoto jest nieczytelne. Bierzemy jasny wariant,
   ten sam, który ma 8,22 do 1 na czerni. */
.on-ink .badge--on { color: var(--gold); }
.badge--bad { color: #b3261e; }

.inline-form { display: inline; }
.admin .field input, .admin .field textarea, .admin .field select { background: var(--white); }
.admin .field select { min-height: 48px; border: 1px solid var(--hairline); padding: 0 0.8rem; font-family: var(--font-body); }

/* MARK: popup */

.popup {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(6px);
  animation: popup-veil var(--t-ui) var(--ease);
}

.popup[hidden] { display: none; }

.popup__box {
  position: relative;
  background: var(--bone);
  color: var(--ink);
  padding: clamp(1.8rem, 5vw, 3rem);
  max-width: 460px;
  width: 100%;
  border-top: 3px solid var(--gold-deep);
  animation: popup-in var(--t-scene) var(--ease);
}

.popup__box h3 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400; margin: 0 0 0.8rem; }
.popup__box .lead { font-size: 1rem; margin: 0 0 1.4rem; }

.popup__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: none;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--fg-muted);
  padding: 0.2rem 0.4rem;
  transition: color var(--t-micro) var(--ease);
}

.popup__close:hover { color: var(--ink); }

@keyframes popup-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes popup-in {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* MARK: strona wyceny */

.quote-hero { padding-block: clamp(7rem, 14vw, 11rem) clamp(3rem, 6vw, 5rem); }

.quote-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; margin-block: 1.5rem; }

.quote-table th,
.quote-table td { text-align: left; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }

.quote-table th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom-color: var(--fg-muted);
}

.quote-table td:last-child, .quote-table th:last-child { text-align: right; white-space: nowrap; }
.quote-table tfoot td { border-bottom: 0; border-top: 2px solid var(--fg); font-size: 1.05rem; padding-top: 1rem; }
.quote-table tfoot b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.quote-table .sub { display: block; color: var(--fg-muted); font-size: 0.82rem; margin-top: 0.2rem; }

@media (max-width: 760px) {
  .quote-table, .quote-table tbody, .quote-table tr, .quote-table td, .quote-table tfoot { display: block; width: 100%; }
  .quote-table thead { display: none; }
  .quote-table tr { border: 1px solid var(--hairline); margin-bottom: 0.7rem; padding: 0.6rem 0.8rem; }
  .quote-table td { border: 0; padding: 0.25rem 0; text-align: left !important; white-space: normal; }
  .quote-table td::before { content: attr(data-label) ": "; font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; color: var(--fg-muted); }
}

/* Porownanie rynkow: slupki wyprowadzone ze zmiennej, zero obrazkow. */
.market { display: grid; gap: 0.9rem; margin-block: 1.5rem; }

.market__row { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr auto; gap: 0.8rem; align-items: center; }

.market__bar {
  height: 26px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}

.market__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--t-scene) var(--ease);
}

.market__row.is-in .market__bar i { transform: scaleX(1); }
.market__name { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }
.market__value { font-family: var(--font-display); font-size: 1.15rem; white-space: nowrap; }

.source-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  word-break: break-all;
}

.shot {
  border: 1px solid var(--hairline);
  margin-block: 0.6rem 1.4rem;
  max-width: 720px;
}

.shot img { width: 100%; height: auto; }

.shot figcaption {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--fg-muted);
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--hairline);
}

.callout {
  border-left: 3px solid var(--accent);
  padding: 0.9rem 1.2rem;
  background: var(--surface);
  margin-block: 1.5rem;
}

.callout p { margin: 0; }
.callout p + p { margin-top: 0.6rem; }

/* MARK: pasek informacyjny o ciasteczkach */

.cookie-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem var(--gutter) calc(0.9rem + env(safe-area-inset-bottom));
  background: var(--ink-2);
  color: var(--bone);
  border-top: 1px solid rgba(245, 241, 234, 0.14);
  font-size: 0.85rem;
  animation: cookie-in var(--t-ui) var(--ease);
}

.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; max-width: 70ch; color: rgba(245, 241, 234, 0.72); }
.cookie-bar a { color: var(--gold); border-bottom: 1px solid currentColor; }
.cookie-bar .btn { background: var(--gold); color: var(--ink); }
.cookie-bar .btn::before { background: var(--bone); }

@keyframes cookie-in { from { transform: translateY(100%); } to { transform: none; } }

/* Na telefonie pasek rezerwacji siedzi nizej, wiec informacja o ciasteczkach
   musi wjechac nad nim, inaczej jedno zaslania drugie. */
@media (max-width: 900px) {
  .cookie-bar { bottom: 76px; padding-bottom: 0.9rem; }
}

/* MARK: suwak przed i po, warstwa sterowania */

.compare-wrap { max-width: 560px; margin-inline: auto; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Natywny suwak jako warstwa sterujaca: dziala z klawiatury i z czytnikiem
   ekranu za darmo, a wlasny uchwyt rysujemy pod nim. */
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; cursor: ew-resize; }
.compare__range::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.compare__range:focus-visible ~ .compare__handle::after { outline: 2px solid var(--gold); outline-offset: 4px; }