/* Klient-facing returns form. Mobile-first, clean. */

.klient-body {
  background: #f3f4f6;
  min-height: 100vh;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #111827;
}

.klient-wrapper {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.klient-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 28px 18px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  position: relative;
}
/* Daniel 2026-05-17: language picker w prawym górnym rogu nagłówka. */
.klient-lang-picker {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}
.klient-lang-picker select {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f9fafb;
  cursor: pointer;
}
.klient-header .brand-logo {
  width: 200px;
  display: block;
  margin: 0 auto 18px;
}
.klient-header h1 {
  margin: 6px 0 6px;
  font-size: 22px;
}
.klient-header .muted {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

.klient-wrapper .card {
  background: white;
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.klient-wrapper .card h2 {
  margin: 0 0 14px;
  font-size: 17px;
  color: #111827;
}

.klient-wrapper .field {
  display: block;
  margin-bottom: 14px;
}
.klient-wrapper .field span {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}
.klient-wrapper .field input,
.klient-wrapper .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}
.klient-wrapper .field input:focus,
.klient-wrapper .field textarea:focus {
  outline: 2px solid #6366f1;
  outline-offset: -1px;
}

.fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.field-full { grid-column: 1 / -1; }

.klient-wrapper button,
.klient-wrapper .btn-primary {
  display: inline-block;
  background: #4f46e5;
  color: white;
  border: 0;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.klient-wrapper button:hover,
.klient-wrapper .btn-primary:hover { background: #4338ca; }
.klient-wrapper button:disabled { opacity: 0.5; cursor: not-allowed; }

.klient-wrapper .callout {
  padding: 12px 14px;
  border-radius: 6px;
  background: #f3f4f6;
  font-size: 13px;
  margin: 12px 0;
  line-height: 1.5;
}
.klient-wrapper .callout.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.klient-wrapper .callout ol {
  margin: 8px 0 0;
  padding-left: 20px;
}
.klient-wrapper .callout ol li { margin-bottom: 4px; }

/* Klient.html — każdy produkt jako card (stack), nie tabela. Daniel 2026-05-17: tabela
   nie mieściła się na narrow ekranach, select wystawał poza kontener. Stack zawsze
   działa, niezależnie od szerokości ekranu. */
.klient-products {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.klient-products thead { display: none; }
.klient-products, .klient-products tbody { display: block; width: 100%; }
.klient-products tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}
.klient-products tr.row-selected { background: #ede9fe; border-color: #a78bfa; }

/* Daniel 2026-05-25: blokada ponownej rejestracji już zgłoszonego produktu.
   row-locked  = wszystkie szt. już zarejestrowane → cały wiersz nieaktywny + przekreślony
   row-partial = część szt. już zarejestrowana → akcept, ale max input ograniczony, żółta ramka
   over-max    = krótki flash gdy klient próbuje wpisać więcej niż max (clamp w JS) */
.klient-products tr.row-locked {
  background: #f3f4f6;
  border-color: #d1d5db;
  opacity: 0.75;
  cursor: not-allowed;
}
.klient-products tr.row-locked td:nth-child(3) > div:first-child {
  color: #6b7280;
  text-decoration: line-through;
}
.klient-products tr.row-locked input[type="checkbox"],
.klient-products tr.row-locked input[type="number"] {
  pointer-events: none;
}
.klient-products tr.row-partial {
  background: #fef3c7;
  border-color: #f59e0b;
}
.klient-products .info-line-cell {
  flex: 1 1 100%;
  padding-top: 6px;
}
.klient-products .info-line {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.4;
}
.klient-products .info-line.locked {
  background: #e5e7eb;
  color: #4b5563;
}
.klient-products .info-line.locked strong { color: #1f2937; }
.klient-products .info-line.partial {
  background: #fef3c7;
  color: #92400e;
}
.klient-products input[type="number"].over-max {
  border-color: #dc2626 !important;
  background: #fef2f2;
  color: #b91c1c;
}

/* Empty-state — wszystkie produkty już zarejestrowane */
.all-already-returned {
  background: #f0fdf4;
  border: 2px solid #16a34a;
  border-radius: 10px;
  padding: 20px 24px;
  text-align: center;
}
.all-already-returned h3 {
  color: #15803d;
  margin: 0 0 8px;
  font-size: 16px;
}
.all-already-returned p {
  color: #374151;
  font-size: 14px;
  margin: 6px 0;
}
.all-already-returned a { color: #2563eb; }
.klient-products td { padding: 0; border: 0; vertical-align: middle; }
.klient-products td:nth-child(1) { flex: 0 0 auto; }                /* checkbox */
.klient-products td:nth-child(2) { flex: 0 0 auto; }                /* zdjęcie */
.klient-products td:nth-child(3) { flex: 1 1 200px; min-width: 0; line-height: 1.4; }  /* nazwa */
.klient-products td:nth-child(4) {                                  /* Zamówiono */
  flex: 0 0 auto;
  font-size: 13px;
  color: #374151;
}
.klient-products td:nth-child(5) {                                  /* Zwracam (input) */
  flex: 0 0 auto;
  font-size: 13px;
  color: #374151;
}
/* Daniel 2026-05-22: labelki dla mobile-card layoutu — content z CSS variables ustawianych
   przez JS po fetchu tłumaczeń. Fallback PL gdy var nie set (initial paint). */
.klient-products td:nth-child(4)::before { content: var(--label-qty-ordered, 'Zamówiono: '); color: #6b7280; font-size: 12px; }
.klient-products td:nth-child(5)::before { content: var(--label-qty-return, 'Zwracam: '); color: #6b7280; font-size: 12px; margin-right: 4px; }
.klient-products td:nth-child(6) { flex: 1 1 100%; }                /* przyczyna — nowa linia, full width */
.klient-products input[type="checkbox"] { width: 18px; height: 18px; }
.klient-products input[type="number"] { width: 60px; padding: 4px 6px; }
.klient-products img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* Faza 6: kolumna "Przyczyna" — select + warunkowy textarea.
   Daniel 2026-05-17: poprzednio max-width:180px ucinało tekst opcji ("Zwrot (odstąpie..."
   i tekst reklamacji ("brudne majtki"). Zwiększamy żeby tekst się mieścił. Order-section
   ma overflow-x:auto jako safety net dla wąskich ekranów. */
.klient-products select.k-reason {
  width: 100%;
  min-width: 200px;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
}
.klient-products textarea.k-reason-text {
  width: 100%;
  min-width: 200px;
  min-height: 64px;
  display: block;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-sizing: border-box;
}
/* Select i textarea zajmują pełną szerokość obszaru "reason" w gridzie. */
.klient-products select.k-reason,
.klient-products textarea.k-reason-text {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Order-section: pozwól tabeli scrollować poziomo na wąskich ekranach
   zamiast wybijać układu. */
.order-section { overflow-x: auto; }

/* Sekcje per zamówienie w step-orders */
.order-section {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: #fafafa;
}
.order-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e5e7eb;
}
.order-section-header h3 {
  margin: 0;
  font-size: 14px;
  color: #4f46e5;
}
.order-section-remove {
  background: transparent !important;
  color: #dc2626 !important;
  border: 0 !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer;
}
.order-section-remove:hover {
  text-decoration: underline;
  background: transparent !important;
}
.order-section .klient-products {
  background: white;
}
.order-section-empty-warning {
  font-size: 12px;
  color: #b45309;
  background: #fef3c7;
  padding: 8px 10px;
  border-radius: 6px;
  margin-top: 8px;
}

/* Mini-form dodawania kolejnego zamówienia */
.add-order-wrap {
  margin-top: 8px;
  text-align: center;
}
.add-order-form {
  margin-top: 12px;
  padding: 14px 16px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  text-align: left;
}
.add-order-form .field { margin-bottom: 10px; }

.success-box {
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.success-box code {
  background: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
}
.success-box .btn-primary {
  display: inline-block;
  margin-top: 14px;
  background: #059669;
}
.success-box .btn-primary:hover { background: #047857; }

/* InPost Geowidget — ukryj overlay "Naciśnij ⌘ i przewiń" w modalu (gesture-handling
   bez sensu gdy mapa jest fullscreen). */
.leaflet-gesture-handling-touch-warning,
.leaflet-container.leaflet-gesture-handling::after,
.leaflet-container.leaflet-gesture-handling::before {
  display: none !important;
  opacity: 0 !important;
}
inpost-geowidget,
inpost-geowidget .leaflet-container {
  touch-action: pan-x pan-y !important;
}

/* Przycisk i pokazanie wybranego paczkomatu */
.paczkomat-picked-box {
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #065f46;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
}
.paczkomat-picked-box code {
  background: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  color: #065f46;
}
.btn-secondary {
  background: white !important;
  color: #4f46e5 !important;
  border: 2px solid #4f46e5 !important;
  font-size: 15px !important;
  padding: 10px 18px !important;
}
.btn-secondary:hover {
  background: #eef2ff !important;
}

/* Modal mapy InPost — fullscreen na mobile, max-width na desktop */
.map-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
}
.map-modal {
  position: fixed;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(960px, 95vw);
  height: 90vh;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.map-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #e5e7eb;
}
.map-modal-header h3 {
  margin: 0;
  font-size: 17px;
}
.map-close {
  background: none !important;
  border: 0 !important;
  font-size: 22px !important;
  color: #6b7280 !important;
  cursor: pointer;
  padding: 4px 12px !important;
}
.map-close:hover { color: #111827 !important; }
.map-modal-body {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.map-modal-body inpost-geowidget {
  width: 100%;
  height: 100%;
  display: block;
}

/* Daniel 2026-05-26: link "Zobacz mapę DHL" w karcie metody DHL — neutralny,
 * informacyjny, NIE łapie kliknięcia w label (stopPropagation w JS żeby nie zmieniał
 * radio). */
.dhl-map-link {
  margin-top: 2px;
  align-self: flex-start;
  background: #f8fafc !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px;
  color: #1f2937 !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-weight: 500;
}
.dhl-map-link:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}
.map-loading {
  padding: 40px;
  text-align: center;
  color: #9ca3af;
}

@media (max-width: 640px) {
  .map-modal {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .fields-grid { grid-template-columns: 1fr; }
  .klient-header h1 { font-size: 19px; }
  #k-geowidget-wrap { height: 500px !important; }
}

/* Faza 6 Plan B: print stylesheet — tylko #k-print-content się drukuje.
   Klient klika "Drukuj" → window.print() → wszystko poza formularzem znika.
   Daniel 2026-05-23: kompresja na 1 stronę — mniejszy padding, font, page-break-inside avoid. */
@page { size: A4 portrait; margin: 8mm; }
@media print {
  body * { visibility: hidden; }
  #k-print-content, #k-print-content * { visibility: visible; }
  #k-print-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    background: #fff;
    box-shadow: none;
    border: none;
    font-size: 11px;
    line-height: 1.3;
  }
  /* Nie łam tabel ani boxów (IBAN, instrukcja) między stronami — wymuszamy 1 stronę. */
  #k-print-content table { page-break-inside: avoid; font-size: 11px; }
  #k-print-content table th, #k-print-content table td { padding: 3px 5px !important; }
  #k-print-content > div { page-break-inside: avoid; }
  /* Mniejsze odstępy między sekcjami. */
  #k-print-content h3, #k-print-content h4 { margin: 6px 0 4px; }
}

/* Daniel 2026-05-18: wybór metody zwrotu (paczkomat vs klasyczny) */
.method-card { position: relative; }
.method-card:hover { border-color: #93c5fd !important; background: #f0f9ff; }
.method-card.selected {
  border-color: #2563eb !important;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.method-card.selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  background: #2563eb;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}


/* Daniel 2026-05-25: embed mode — gdy klient.html ładowany w iframe na gymglamour.com.
   Wyłącza tło (zewn. landing ma swoje) + ukrywa header (gymglamour.com ma własny tytuł). */
body.embed {
  background: transparent !important;
  margin: 0;
  padding: 0;
}
body.embed .klient-wrapper {
  max-width: 880px;
  margin: 0 auto;
  padding: 8px 12px 16px;
  box-shadow: none;
  background: transparent;
}
/* Header w embed: zostaje H1 + intro (lewy align), ukryte tylko brand-logo.
   Lang picker absolute w prawym górnym; H1/intro mają margin-right żeby nie zachodziły. */
body.embed .klient-header {
  background: transparent;
  box-shadow: none;
  padding: 0 0 12px;
  margin-bottom: 12px;
  text-align: left;
  position: relative;
  border-bottom: 1px solid #e5e7eb;
}
body.embed .klient-header .brand-logo {
  display: none;
}
body.embed .klient-header h1 {
  margin: 0 110px 6px 0;
  font-size: 18px;
}
body.embed .klient-header > p {
  margin: 0 110px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
}
body.embed .klient-lang-picker {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
/* Mobile (iframe wąski): mniejszy h1, lang-picker pod headerem zamiast obok */
@media (max-width: 520px) {
  body.embed .klient-header h1,
  body.embed .klient-header > p {
    margin-right: 0;
  }
  body.embed .klient-header {
    padding-top: 36px;  /* miejsce na lang picker u góry */
  }
  body.embed .klient-lang-picker {
    top: 0;
    right: 0;
  }
}

/* Print form tabela — responsywna na mobile (klient widzi przed wydrukiem na telefonie).
   Inline styles w klient.js mają font-size:13px + padding:6-8px — na <400px ucina kolumny.
   Wymuszamy mniejszy font + break-word żeby tekst się zawijał czytelnie. */
@media (max-width: 600px) {
  #k-print-content table {
    font-size: 11px !important;
    table-layout: fixed;
  }
  #k-print-content table th,
  #k-print-content table td {
    padding: 4px 5px !important;
    word-break: break-word;
    hyphens: auto;
    vertical-align: top;
  }
  /* Kolumny: Kod 60px, Produkt elastyczna, Ilość 40px, Powód elastyczna */
  #k-print-content table th:nth-child(1),
  #k-print-content table td:nth-child(1) { width: 56px; }
  #k-print-content table th:nth-child(3),
  #k-print-content table td:nth-child(3) { width: 38px; text-align: center; }
}

/* Daniel 2026-05-26: karty wyboru metody wysyłki (DHL vs manual) w klient.html */
.method-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.method-card.selected {
  border-color: var(--accent, #ec4899);
  background: #fdf2f8;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}
.method-card.selected strong {
  color: var(--accent, #ec4899);
}
/* Daniel 2026-05-26: DHL POP grafiki — DWIE wersje. Desktop: pionowa 140x194 jako wysoka
   ikona (200px) obok opisu. Mobile: pozioma 928x91 jako szeroki baner (max ~80px wysokości)
   żeby nie zajmować pół ekranu — karty są jedna pod drugą. Ikona manual karty wyrównana. */
.dhl-method-img {
  display: block;
  margin: 8px auto;
  object-fit: contain;
  max-width: 100%;
}
.dhl-method-img-desktop {
  height: 200px;
  width: auto;
}
.dhl-method-img-mobile {
  display: none;
  width: 100%;
  height: auto;
  max-height: 80px;
}
.manual-method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: 96px;
  color: #9ca3af;
  margin: 8px auto;
}
@media (max-width: 640px) {
  .method-cards {
    grid-template-columns: 1fr !important;
  }
  .dhl-method-img-desktop { display: none; }
  .dhl-method-img-mobile { display: block; }
  /* Mobile manual icon — kompaktowy żeby wyrównać z poziomym banerem DHL (~80px). */
  .manual-method-icon { height: 80px; font-size: 56px; }
}