/* ============================================================
   klasyk.pl — design system 2026 · OKNA DIALOGOWE (SweetAlert2)
   Jeden wygląd każdego okna biblioteki /js/hub/sweetalert.js poza
   podglądem zdjęć (.swal2-container.preview-image – components.css,
   w panelu hub.css). Ładowany tam, gdzie skrypt biblioteki: strony
   publiczne i konto poza „/” (HomeLayoutHeadConfigurator) oraz panel
   Hub (Hub\PrepareLayout).

   Biblioteka dopisuje swój <style> na końcu <head>, ale jej reguły
   okna stoją w :where() – wygrywa tu specyficzność, nie kolejność.
   Wywołanie Swal.fire nie podaje kolorów ani klas przycisków;
   przycisk główny jest czarny, drugi z obrysem, czerwieni nie ma.
   Opis: strategia/design-system-komponenty.md („Okna dialogowe”).
   ============================================================ */

/* ---------- Zapas tokenów dla panelu Hub ----------
   Hub nie ładuje tokens.css. Wartości jasnego schematu stoją więc na
   `html`: w serwisie publicznym przegrywają z `:root` z tokens.css
   (wyższa specyficzność, kolejność arkuszy bez znaczenia), w panelu są
   jedynym źródłem. Zmiana tokenu w tokens.css = ta sama zmiana tutaj
   (pilnuje tests-node/okna-tokens.test.js). */
html{
  --bg:#ffffff; --line:#e7e3de; --tick:#d5d0c9;
  --ink:#111111; --text:#333333; --meta:#6f6863;
  --accent:#b23625; --btn:#1a1d21; --btn-ink:#ffffff;
  --danger:#a3231b; --danger-bg:#fdecea; --danger-line:#f5c6c2;
  --fs-block:1.3125rem; --lh-block:1.25;
  --fs-text:1rem; --lh-text:1.5;
  --fs-small:0.875rem; --lh-small:1.5;
  --fs-btn:0.875rem; --lh-btn:1.2;
  --fs-field:1.125rem; --lh-field:1.3;
  --r-card:8px; --r-control:6px;
  --shadow-pop:0 14px 34px rgba(26,29,33,.2), 0 2px 6px rgba(26,29,33,.1);
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem; --sp-5:1.5rem;
}
@media (max-width:699px){
  html{ --fs-block:1.1875rem; --fs-text:0.9375rem; --fs-small:0.84375rem; }
}

/* ---------- Tło i okno ---------- */
.swal2-container:not(.preview-image){ padding:var(--sp-4); background:rgba(14,17,20,.56); }
.swal2-container:not(.preview-image) .swal2-popup{ width:27.5rem; max-width:100%; padding:var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg); color:var(--text);
  box-shadow:var(--shadow-pop); font-family:inherit; font-size:var(--fs-text); line-height:var(--lh-text);
  text-align:left; }

/* ---------- Ikona: mała, jednobarwna ----------
   Biblioteka rysuje ikonę w em (5em z obrysem); zoom zmniejsza ją w całości
   razem z kreskami. Maski animacji znaku „gotowe” wystają poza ikonę i przy
   lewej krawędzi zasłaniałyby obrys okna – są schowane. */
.swal2-container:not(.preview-image) .swal2-icon{ zoom:.55; margin:0 0 1.75rem; border-color:var(--tick); color:var(--ink); }
.swal2-container:not(.preview-image) .swal2-icon .swal2-icon-content{ font-weight:700; }
.swal2-container:not(.preview-image) .swal2-icon .swal2-success-ring{ border-color:var(--tick); }
.swal2-container:not(.preview-image) .swal2-icon :is([class^="swal2-success-line"],[class^="swal2-x-mark-line"]){ background-color:var(--ink); }
.swal2-container:not(.preview-image) .swal2-icon :is([class^="swal2-success-circular-line"],.swal2-success-fix){ display:none; }

/* ---------- Tytuł i treść: do lewej ---------- */
.swal2-container:not(.preview-image) .swal2-title{ max-width:100%; margin:0; padding:0; color:var(--ink);
  font-size:var(--fs-block); line-height:var(--lh-block); font-weight:700; letter-spacing:-.02em; text-align:left; }
.swal2-container:not(.preview-image) .swal2-html-container{ margin:var(--sp-2) 0 0; padding:0; color:var(--text);
  font-size:var(--fs-text); line-height:var(--lh-text); text-align:left; }

/* ---------- Przyciski: 44 px, główny czarny, drugi z obrysem ---------- */
.swal2-container:not(.preview-image) .swal2-actions{ width:100%; margin:var(--sp-5) 0 0; padding:0;
  justify-content:flex-start; gap:var(--sp-2); }
.swal2-container:not(.preview-image) .swal2-styled{ min-height:2.75rem; margin:0; padding:0.625rem var(--sp-4); border-radius:var(--r-control);
  font-size:var(--fs-btn); line-height:var(--lh-btn); font-weight:600; box-shadow:none; background-image:none; transition:none; }
.swal2-container:not(.preview-image) .swal2-styled.swal2-confirm{ border:1px solid var(--btn); background:var(--btn); color:var(--btn-ink); }
.swal2-container:not(.preview-image) .swal2-styled.swal2-confirm:is(:hover,:active){ border-color:var(--ink); background:var(--ink); }
.swal2-container:not(.preview-image) .swal2-styled:is(.swal2-cancel,.swal2-deny){ border:1px solid var(--tick); background:transparent; color:var(--ink); }
.swal2-container:not(.preview-image) .swal2-styled:is(.swal2-cancel,.swal2-deny):is(:hover,:active){ border-color:var(--ink); background:transparent; }
.swal2-container:not(.preview-image) .swal2-loader{ margin:var(--sp-2) 0; border-color:var(--ink) transparent; }

/* ---------- Fokus: pierścień --accent, także na czarnym ---------- */
.swal2-container:not(.preview-image) :is(.swal2-styled,.swal2-close,.swal2-input,.swal2-textarea,.swal2-select):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:none; }

/* ---------- Krzyżyk (showCloseButton) ---------- */
.swal2-container:not(.preview-image) .swal2-close{ width:2.75rem; height:2.75rem; color:var(--meta); }
.swal2-container:not(.preview-image) .swal2-close:hover{ color:var(--ink); }

/* ---------- Pole, etykieta, komunikat walidacji ---------- */
.swal2-container:not(.preview-image) .swal2-input-label{ justify-content:flex-start; margin:var(--sp-4) 0 0; color:var(--ink);
  font-size:var(--fs-small); line-height:var(--lh-small); font-weight:600; text-align:left; }
.swal2-container:not(.preview-image) :is(.swal2-input,.swal2-textarea,.swal2-select){ width:100%; min-height:2.75rem;
  margin:var(--sp-4) 0 0; border:1px solid var(--meta); border-radius:var(--r-control); background:var(--bg);
  color:var(--ink); font-size:var(--fs-field); line-height:var(--lh-field); box-shadow:none; }
.swal2-container:not(.preview-image) .swal2-input-label + :is(.swal2-input,.swal2-textarea,.swal2-select){ margin-top:var(--sp-2); }
.swal2-container:not(.preview-image) :is(.swal2-input,.swal2-textarea)::placeholder{ color:var(--meta); }
.swal2-container:not(.preview-image) :is(.swal2-input,.swal2-textarea).swal2-inputerror{ border-color:var(--danger) !important;
  box-shadow:inset 0 0 0 1px var(--danger) !important; }
.swal2-container:not(.preview-image) .swal2-validation-message{ justify-content:flex-start; margin:var(--sp-3) 0 0;
  padding:var(--sp-2) var(--sp-3); border:1px solid var(--danger-line); border-radius:var(--r-control);
  background:var(--danger-bg); color:var(--danger); font-size:var(--fs-small); line-height:var(--lh-small);
  font-weight:400; text-align:left; }
.swal2-container:not(.preview-image) .swal2-validation-message::before{ display:none; }

/* ---------- Telefon: przyciski jeden pod drugim, na całą szerokość ---------- */
@media (max-width:699px){
  .swal2-container:not(.preview-image) .swal2-popup{ padding:var(--sp-4); }
  .swal2-container:not(.preview-image) .swal2-actions{ flex-direction:column; align-items:stretch; }
  .swal2-container:not(.preview-image) .swal2-styled{ width:100%; }
}