/* =============================================================================
   Strony prawne sklepu — regulamin, dane firmy, polityka prywatności.
   =============================================================================
   ⛔ ARKUSZ JEST JEDEN DLA WSZYSTKICH TYCH STRON. Wcześniej każda wiozła własną
      kopię w treści (14 wierszy w bazie), przez co zmiana wyglądu wymagała
      przeliczenia wszystkich. Treść w bazie ma teraz WYŁĄCZNIE tekst.

   ⚠️ Wczytywany warunkowo przez `catalog/controller/information/information.php`
      — tylko gdy treść strony zawiera `md-reg`. Strony FAQ nie płacą za niego
      dodatkowym żądaniem.

   ⛔ ŻADNEGO `font-family` poza jednym wyjątkiem na dole. Strona dziedziczy krój
      motywu; własny krój obok motywowego to była usterka zgłoszona 20.08.2026.
   ============================================================================= */

.md-reg { color: #1f2937; font-size: 15px; line-height: 1.75; max-width: 76ch }

.md-reg-lead { color: #6b7280; font-size: 15px; margin: 0 0 30px }

.md-reg h2 { display: flex; align-items: center; gap: 11px;
             font-size: 17px; font-weight: 600; color: #111827; margin: 34px 0 8px }
.md-reg h2:first-of-type { margin-top: 0 }

/*  Numer paragrafu — jak plakietka przy numerze części na liście: obrys, nie wypełnienie. */
.md-reg h2 span { font-size: 13px; font-weight: 600; color: #6b7280; background: #fff;
                  border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px 9px;
                  white-space: nowrap }

/*  Tytuł załącznika — cichy, oddzielony linią, żeby nie konkurował z paragrafami. */
.md-reg h3 { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
             color: #9ca3af; margin: 44px 0 18px; padding-top: 22px; border-top: 1px solid #e5e7eb }

.md-reg ol { padding-left: 24px; margin: 10px 0 }
.md-reg ol li { margin-bottom: 9px }
.md-reg ol ol { margin: 8px 0 0 }
.md-reg p { margin: 12px 0 }

/*  Lista danych (strona firmy): bez ramek, samo światło i kolor etykiety. */
.md-reg dl { display: grid; grid-template-columns: auto 1fr; column-gap: 36px; row-gap: 14px;
             margin: 18px 0 }
.md-reg dt { margin: 0; color: #9ca3af; white-space: nowrap }
.md-reg dd { margin: 0; color: #1f2937 }

.md-reg-dane { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
               padding: 18px 20px; margin: 14px 0; white-space: pre-wrap; color: #1f2937 }

/*  ⛔ JEDYNY monospace w całym arkuszu. Wzór formularza odstąpienia ma kropkowane
    pola do wypełnienia i bez stałej szerokości znaku rozjeżdża się w poziomie.
    To wyjątek funkcjonalny — nie powielaj go dla „ozdoby”. */
.md-reg-form { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
               padding: 22px 24px; margin: 14px 0; color: #1f2937;
               font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
               font-size: 13.5px; line-height: 1.9; white-space: pre-wrap; overflow-x: auto }

/*  Przypis pod danymi — ma być CICHSZY od tego, co objaśnia. Przy równym rozmiarze
    i pogrubieniach czytał się jak ważniejszy od samych danych firmy (uwaga
    użytkownika 20.08.2026), bo idzie przez całą szerokość. */
.md-reg-uwaga { font-size: 13.5px; line-height: 1.65; color: #9ca3af; margin: 22px 0 0 }
.md-reg-uwaga strong { font-weight: 600; color: #6b7280 }

/*  ⛔ `!important` JEST TU KONIECZNE, nie jest niechlujstwem. Journal wstawia inline
    regułę `strong { color:#697277 !important; font-weight:500 !important }` z ustawień
    typografii motywu - bez tego etykiety definiowanych pojęć są szare i cieńsze niż
    tekst wokół, czyli odwrotnie, niż mają wyglądać. Zmierzone na module regulaminu
    w kasie 20.08.2026. */
.md-reg strong { font-weight: 600 !important; color: #111827 !important }
.md-reg a { color: #127da8 }

/* ── modal z dokumentem prawnym (checkout, rejestracja, zwroty, program partnerski) ──
   Buduje go `common.js` jako zwykły dialog Bootstrapa: 600 px szerokości i bez ograniczenia
   wysokości. Dla regulaminu na 20 tysięcy znaków znaczy to okno wąskie jak kolumna gazety,
   sięgające obu krawędzi ekranu. Poszerzamy i zamykamy wysokość, a przewija się TREŚĆ,
   nie całe okno - dzięki temu nagłówek z tytułem i krzyżykiem zostaje widoczny. */
#modal-agree .modal-dialog { width: auto; max-width: min(940px, 92vw); margin: 6vh auto }
#modal-agree .modal-content { max-height: 88vh; display: flex; flex-direction: column }
#modal-agree .modal-header { flex: 0 0 auto }
#modal-agree .modal-body { flex: 1 1 auto; overflow-y: auto; padding: 22px 28px 28px }

@media (max-width: 640px) {
  #modal-agree .modal-dialog { max-width: 96vw; margin: 3vh auto }
  #modal-agree .modal-content { max-height: 94vh }
  #modal-agree .modal-body { padding: 16px 18px 20px }

  .md-reg { font-size: 14.5px }
  .md-reg h2 { font-size: 16px }
  .md-reg dl { grid-template-columns: 1fr; row-gap: 4px }
  .md-reg dd { margin-bottom: 10px }
}