/* ELLIE LISTING + CART + FORM FIXES V65
   Data: 2026-06-24
   Zakres: listing (filtry, kategorie, na stronie), koszyk (nagłówek cech, ikony płatności),
           formularz odstąpienia od umowy (placeholder/focus kolor)
   ─────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════
   1. FILTRY+ BUTTON — SVG transparent to clicks
      Root cause: alysum.js addTriggerButtonListener() używa event.target
      zamiast event.currentTarget — klik na SVG daje target=svg, który
      nie ma data-trigger-name → filter-wrapper nie otwiera się.
      Fix: pointer-events:none na SVG → klik zawsze trafia na button.
   ══════════════════════════════════════════════════════════ */
.pk-filter-button svg,
.pk-filter-button use,
.pk-filter-button .svgic {
  pointer-events: none !important;
}


/* ═══════════════════════════════════════════════════════════
   2. UKRYJ FILTR "KATEGORIE" w panelu filtrów
      Klasa .facet-type-category generowana przez ps_facetedsearch —
      nie ma sensu filtrować wg kategorii będąc już w kategorii.
   ══════════════════════════════════════════════════════════ */
.facet.facet-type-category {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   3. UKRYJ "NA STRONIE: X" (per-page selector)
      pkthemesettings wstrzykuje <div class="products-sort-order dropdown">
      bezpośrednio do #js-product-list-top przez hook displayProductListTop.
      Sort-by jest zagnieżdżony w .sort-by-row, więc child selector (>)
      trafia TYLKO w per-page, nie w sort-by.
      Ukrywamy też widok siatki (.view_btn) z tego samego hooka.
   ══════════════════════════════════════════════════════════ */
.products-selection > .products-sort-order,
#js-product-list-top > .products-sort-order,
.products-selection .view_btn,
.products-selection #products-per-page-wrapper {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   4. UKRYJ NAGŁÓWEK "Cechy produktu:" / "Product features:" W KOSZYKU
      cart-detailed-product-line.tpl linia 63:
      {if count($product.attributes) > 0}<h5>Product features:</h5>{/if}
      Ukrywamy h5 wewnątrz linii produktu koszyka.
   ══════════════════════════════════════════════════════════ */
.cart-items h5,
#cart-summary-product-list h5,
.cart-detailed-totals h5 {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   5. UKRYJ IKONKI PŁATNOŚCI W KOSZYKU / ZAMÓWIENIU
      Różne kontenery ikon płatności, które mogą być widoczne
      w widoku koszyka lub podsumowania zamówienia.
   ══════════════════════════════════════════════════════════ */
.payment-methods-img,
.ellie-pay-strip,
.cart-payment-methods,
.payment-logos,
[class*="payment-logo"],
[class*="pay-logo"],
.cart-detailed-actions [class*="payment"],
.checkout-step [class*="payment-logo"] {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   6. FORMULARZ ODSTĄPIENIA OD UMOWY — placeholder/focus fix
      Root cause: theme.css .form-control:focus { color: #acaaa6 }
      → tekst wpisywany przez użytkownika staje się jasno-szary
      i nie widać go na białym tle (wygląda jak placeholder który
      nie zniknął). Fix: wymuś ciemny kolor tekstu przy focusie.
   ══════════════════════════════════════════════════════════ */
.form-control:focus {
  color: #333 !important;
  -webkit-text-fill-color: #333 !important;
}

/* ═══════════════════════════════════════════════════════════
   6b. FORMULARZ GOŚCI (odstąpienie bez logowania) — .form-control-comment
       DIV z przykładowym tekstem ("Na przykład: QIIXJXNUI...") jest
       position:absolute i leży NA inpucie → blokuje kliknięcia (desktop)
       oraz w ogóle uniemożliwia kliknięcie na mobile.
       Fix:
         - pointer-events:none → kliknięcia przechodzą do inputa
         - :focus + div → ukryj fake-placeholder gdy input aktywny
         - JS (inline) dogrywa ukrywanie gdy wpisano wartość
   ══════════════════════════════════════════════════════════ */
.form-control-comment {
  pointer-events: none !important;
  transition: opacity .15s ease;
}
.form-control:focus + .form-control-comment,
.form-control.has-value + .form-control-comment {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Autofill Chrome — usuń niebieskie tło i przywróć czytelny tekst */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 50px #fff inset !important;
  box-shadow: 0 0 0 50px #fff inset !important;
  -webkit-text-fill-color: #333 !important;
  caret-color: #333 !important;
}


/* ═══════════════════════════════════════════════════════════
   7. FILTRY+ BUTTON — pokaż na mobile
      pkthemesettings dodaje class="hidden" do .pk-filter-button
      i nie usuwa go na mobile po zmianie layoutu na full-screen.
      Fix: przywróć widoczność na ≤767px.
      WAŻNE: SVG pointer-events:none (punkt 1) musi być aktywny
      żeby klik trafiał na button (event.target.dataset.triggerName).
   ══════════════════════════════════════════════════════════ */
/* Na mobile pk-filter-button jest niepotrzebny —
   customerjs1.js tworzy własny niebieski przycisk .ellie-mobile-filter-toggle
   wewnątrz #search_filters_wrapper. pk-filter-button zostawiamy schowany (Bootstrap .hidden). */


/* ═══════════════════════════════════════════════════════════
   8. TABELA HISTORII ODSTĄPIEŃ — fix nakładania na mobile
      Moduł x13waterfallreturn używa @container (max-width:767.98px)
      do mobile card layout (content: attr(data-label) na ::before).
      Problem: @container zależy od szerokości kontenera, nie viewportu
      — może nie odpalić na starszych przeglądarkach albo gdy kontener
      ma nieprawidłową szerokość. Fix: @media pełni rolę fallbacku
      i wymusza layout bezpośrednio (content + flex + block na table).
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* Zrób tabelę blokową (wymuś wyjście z table layout) */
  .x13w-mobile-cards table,
  .x13w-mobile-cards tbody,
  .x13w-mobile-cards tr {
    display: block !important;
    width: 100%;
  }
  /* Każda komórka blokowa */
  .x13w-mobile-cards td {
    display: block !important;
    padding: 0.25rem 0 !important;
    border-width: 0 !important;
    text-align: left !important;
  }
  /* Komórki z etykietą → flex (label po lewej, wartość po prawej) */
  .x13w-mobile-cards td[data-label] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 4px 8px;
    flex-wrap: nowrap;
    padding: 0.35rem 0 !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
  }
  /* Szara etykieta po lewej — generowana z atrybutu data-label */
  .x13w-mobile-cards td[data-label]::before {
    content: attr(data-label) !important;
    flex: 0 0 42% !important;
    max-width: 42%;
    position: static !important;
    display: block;
    font-weight: 600;
    color: #6c757d !important;
    font-size: 0.875rem;
    text-align: left !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* Ukryj thead — nagłówki zastąpione przez ::before */
  .x13w-mobile-cards thead {
    display: none !important;
  }
}