/* ==========================================================================
 * SAMA MATCHA — sm-zgloszenia.css (PAKIET M)
 * Strona /zwroty-i-reklamacje/ i dwa formularze.
 *
 * Enqueue: inc/zgloszenia.php, priorytet 100, po sm-base i sama-refactor —
 * tylko na trzech stronach modułu.
 *
 * DOKTRYNA ELEWACJI. Tło strony to --c-paper. Powierzchnia dostaje kontrast tła
 * ALBO hairline, nigdy jedno i drugie, i nic nie rzuca cienia w spoczynku:
 *   • pas faktów i FAQ — separacja samymi hairline'ami, zero tła,
 *   • komunikat warunkowy i potwierdzenie — tło (--c-mist / --c-cream), bez ramki,
 *   • pole formularza — hairline, bez tła (jak na kasie).
 *
 * ODSTĘPY. Formularz NIE używa `gap`. Powód konkretny: regiony role="status"
 * z komunikatami warunkowymi muszą zostać w drzewie dostępności także wtedy, gdy
 * komunikat jest schowany (inaczej czytnik nie ogłosi jego pojawienia się). Przy
 * `gap` każdy taki puchy region zjadałby jedną przerwę siatki i formularz
 * rozjeżdżałby się o odstęp na każdy ukryty komunikat. Dlatego rytm niosą
 * marginesy dolne konkretnych elementów: schowana treść nie ma pudełka, więc nie
 * wnosi ani piksela.
 * ========================================================================== */

.sm-zwroty {
  /* Miara wiersza w `ch`, nie w px — długość zależy od kroju, nie od ekranu.
     Cała strona to tekst prawny i pola formularza, więc jedna miara na wszystko. */
  --sm-zg-miara: 66ch;
  /* Wysokość pola — parytet z kasą (assets/css/sm-cart.css:28
     `--theme-form-field-height: 48px`). Bez tego pola tutaj i pola przy kasie
     miałyby inną wysokość, a to ten sam sklep i ten sam gest. */
  --sm-zg-pole-h: 48px;

  max-width: var(--sm-zg-miara);
  margin-inline: auto;
  padding-block: var(--sp-4);
}

/* --------------------------------------------------------------------------
 * 1) NAGŁÓWEK
 * -------------------------------------------------------------------------- */
.sm-zwroty__head { margin-bottom: var(--sp-4); }

.sm-zwroty__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h1);
  color: var(--c-ink);
}

.sm-zwroty__lead {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
 * 2) DWA PRZYCISKI — równorzędne
 *
 * Oba to .sm-btn--primary. Zrobienie jednego „ghost" sugerowałoby, że sklep woli
 * jedną ścieżkę — a wybór między zwrotem i reklamacją należy do klienta i ma
 * konsekwencje prawne.
 * -------------------------------------------------------------------------- */
.sm-zwroty__wybor {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

@media (min-width: 600px) {
  .sm-zwroty__wybor { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
 * 3) PAS FAKTÓW — trzy linie widoczne bez rozwijania czegokolwiek
 * -------------------------------------------------------------------------- */
.sm-zwroty__fakty {
  margin: 0 0 var(--sp-4);
  border-top: var(--line);
}

/* Każdy fakt to jedno zdanie: etykieta pogrubiona, myślnik, treść — w tej
   kolejności i w jednym wierszu tekstu, jak w specyfikacji. Hairline oddziela
   trzy fakty; tła ani cienia tu nie ma (doktryna elewacji: jedno narzędzie). */
.sm-zwroty__fakt {
  margin: 0;
  padding-block: var(--sp-3);
  border-bottom: var(--line);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-text);
}

.sm-zwroty__fakt strong {
  font-weight: 600;
  color: var(--c-ink);
}

.sm-zwroty__nota {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-muted);
}

.sm-zwroty__nota a { color: var(--c-moss); }

/* FAQ dziedziczy komplet wyglądu z .sm-faq (sama-refactor.css:1346).
   Tu tylko miejsce w rytmie strony — zero powtórzonych deklaracji. */
.sm-zwroty__faq { margin-bottom: var(--sp-4); }

/* --------------------------------------------------------------------------
 * 4) FORMULARZ
 * -------------------------------------------------------------------------- */
.sm-form { margin: 0; position: relative; }

.sm-form__row {
  /* fieldset (grupy radio) ma od przeglądarki własną ramkę i dopełnienie. */
  margin: 0 0 var(--sp-3);
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.sm-form__label {
  display: block;
  margin: 0 0 var(--sp-1);
  padding: 0;
  font: 500 var(--fs-caption)/1.4 var(--font-sans);
  color: var(--c-text);
}

/* Gwiazdka wymagalności. `abbr[title]` zamiast samego znaku: kursor i czytnik
   dostają wyjaśnienie, a nie sierotę „*". Kropkowane podkreślenie z UA zdjęte. */
.sm-form__req {
  color: var(--c-moss);
  text-decoration: none;
  border: 0;
  cursor: help;
}

.sm-form__hint {
  margin: 0 0 var(--sp-1);
  font: 400 var(--fs-caption)/1.5 var(--font-sans);
  color: var(--c-muted);
}

.sm-form__control {
  width: 100%;
  min-height: var(--sm-zg-pole-h);
  padding: var(--sp-2) var(--sp-3);
  border: var(--line);
  border-radius: var(--r-sm);
  background: var(--c-paper);
  color: var(--c-text);
  font: 400 var(--fs-small)/1.5 var(--font-sans);
}

.sm-form__control:focus-visible {
  outline: 1px solid var(--c-moss);
  outline-offset: 1px;
  border-color: var(--c-moss);
}

.sm-form__textarea {
  min-height: calc(var(--sp-5) + var(--sp-4));
  padding-block: var(--sp-2);
  resize: vertical;
}

.sm-form__file {
  padding: var(--sp-2);
  font-size: var(--fs-caption);
}

/* Opcje radio i checkbox — cel dotykowy 44 px, etykieta klikalna w całości. */
.sm-form__opcje { display: grid; gap: var(--sp-2); }

.sm-form__opcja {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2);
  align-items: center;
  min-height: 44px;
  font: 400 var(--fs-small)/1.5 var(--font-sans);
  color: var(--c-text);
  cursor: pointer;
}

.sm-form__opcja input {
  width: 1.125em;
  height: 1.125em;
  margin: 0;
  accent-color: var(--c-forest);
}

/* Oświadczenie to trzy zdania — checkbox musi zostać przy PIERWSZYM wierszu. */
.sm-form__opcja--oswiadczenie { align-items: start; }
.sm-form__opcja--oswiadczenie input { margin-top: 0.2em; }

/* --------------------------------------------------------------------------
 * 5) BŁĄD PRZY POLU
 *
 * Sygnałem jest TEKST, nie kolor — specyfikacja, sekcja 4 pkt 8 („brak walidacji
 * wyłącznie kolorem"). Ramka pola ciemnieje tylko pomocniczo; czerwieni w tej
 * palecie nie ma, a wprowadzanie jej dla jednego stanu rozsadziłoby paletę.
 * Tak samo rozstrzygnięto to na kasie (sm-cart.css:576 — --c-moss, nie czerwień).
 * -------------------------------------------------------------------------- */
.sm-form__error {
  margin: var(--sp-1) 0 0;
  font: 500 var(--fs-caption)/1.4 var(--font-sans);
  color: var(--c-ink);
}

.sm-form__row.is-invalid .sm-form__control { border-color: var(--c-ink); }

/* --------------------------------------------------------------------------
 * 6) KOMUNIKATY WARUNKOWE
 *
 * `.sm-form__alert` to region role="status" — zostaje w DOM i w drzewie
 * dostępności ZAWSZE. Ukrywana jest tylko treść, dlatego region nie ma własnego
 * pudełka: pusty nie zajmuje ani piksela, a marginesy nosi treść.
 * -------------------------------------------------------------------------- */
.sm-form__alert { margin: 0; }

.sm-form__alert-tresc {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-mist);
  font: 400 var(--fs-small)/var(--lh-body) var(--font-sans);
  color: var(--c-ink);
}

.sm-form__alert-tresc a { color: var(--c-forest); }

.sm-form__alert--blad .sm-form__alert-tresc {
  margin-bottom: var(--sp-4);
  background: var(--c-cream);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
 * 7) STOPKA FORMULARZA
 * -------------------------------------------------------------------------- */
.sm-form__nota,
.sm-form__rodo {
  margin: 0 0 var(--sp-3);
  font: 400 var(--fs-caption)/var(--lh-body) var(--font-sans);
  color: var(--c-muted);
}

.sm-form__nota { color: var(--c-text); }
.sm-form__rodo { margin-bottom: var(--sp-4); }

.sm-form__nota a,
.sm-form__rodo a { color: var(--c-moss); }

/* Pułapka na boty — poza ekranem, ale realnie wypełnialna przez automat.
   Wzorzec „visually hidden": 1 px wymusza technika, to nie odstęp układu. */
.sm-form__pulapka {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * 8) BEZ JAVASCRIPTU
 *
 * Formularz dostaje `is-js` dopiero z JS-u. Dopóki go nie ma, odsłaniamy pola
 * gałęziowe i treść komunikatów warunkowych — inaczej klient bez JS nie zobaczyłby
 * ani pól LOT/przechowywania, ani ostrzeżeń o § 15 i o naruszonym opakowaniu.
 * Selektor z klasą bije `[hidden] { display: none }` z arkusza przeglądarki
 * bez !important.
 * -------------------------------------------------------------------------- */
.sm-form:not(.is-js) [data-galaz][hidden] { display: block; }
.sm-form:not(.is-js) .sm-form__alert-tresc[hidden] { display: block; }

/* --------------------------------------------------------------------------
 * 9) POTWIERDZENIE
 * -------------------------------------------------------------------------- */
.sm-zwroty__potwierdzenie {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-cream);
}

.sm-zwroty__potwierdzenie p { margin: 0 0 var(--sp-3); }
.sm-zwroty__potwierdzenie p:last-child { margin-bottom: 0; }

.sm-zwroty__potwierdzenie-naglowek {
  font: 500 var(--fs-h3)/var(--lh-snug) var(--font-sans);
  color: var(--c-ink);
}

.sm-zwroty__potwierdzenie-dane {
  margin: 0 0 var(--sp-3);
  padding-block: var(--sp-3);
  border-top: var(--line);
  border-bottom: var(--line);
}

.sm-zwroty__potwierdzenie-dane dt {
  margin: 0;
  font: 400 var(--fs-caption)/1.4 var(--font-sans);
  color: var(--c-muted);
}

.sm-zwroty__potwierdzenie-dane dd {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-text);
}

.sm-zwroty__potwierdzenie-dane div:last-child dd { margin-bottom: 0; }
.sm-zwroty__potwierdzenie a { color: var(--c-moss); }