/* =========================================================================
 * JobNino — Listings & Filters MOBILE (<=768px)  [PRO rebuild]
 * ========================================================================= */
:root {
  --jnl-blue: #2f6bff;
  --jnl-blue-dark: #2f43a1;
  --jnl-grad: linear-gradient(90deg, #2f43a1 0%, #3858e9 100%);
  --jnl-ink: #1f2a44;
  --jnl-muted: #64748b;
  --jnl-line: #e3e9f2;
  --jnl-line-strong: #cdd7e6;
  --jnl-bg-soft: #eef2f8;
  --jnl-green: #15a36b;
  --jnl-gold: #f1c876;
  --jnl-radius: 12px;
}

@media (max-width: 768px) {

  /* ===== 1) PANEL FILTROW ===== */
  .w-filter.state_desktop .w-filter-list {
    position: fixed !important; inset: 0 !important; z-index: 100000 !important;
    width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important;
    margin: 0 !important; padding: 0 0 76px 0 !important;
    border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  }
  .w-filter-list .w-filter-list-title {
    position: sticky; top: 0; z-index: 2; margin: 0 !important; padding: 18px 64px 14px 20px !important;
    background: #fff !important; border-bottom: 1px solid var(--jnl-line) !important;
    font-size: 20px !important; font-weight: 800 !important; color: var(--jnl-ink) !important; text-align: left !important;
  }
  /* X zamykajacy — wymuszony, czysty */
  .w-filter-list .w-filter-list-closer {
    display: flex !important; align-items: center !important; justify-content: center !important;
    opacity: 1 !important; visibility: visible !important;
    position: fixed !important; top: 12px !important; right: 12px !important; z-index: 100003 !important;
    width: 42px !important; height: 42px !important; padding: 0 !important;
    border: 0 !important; border-radius: 50% !important; background: var(--jnl-bg-soft) !important; font-size: 0 !important;
  }
  .w-filter-list .w-filter-list-closer:after { content: "" !important; display: none !important; background: none !important; }
  .w-filter-list .w-filter-list-closer:before {
    content: "\2715" !important; font-family: Arial, Helvetica, sans-serif !important;
    font-size: 22px !important; font-weight: 700 !important; line-height: 1 !important;
    color: var(--jnl-ink) !important; display: block !important; background: none !important;
  }

  .w-filter-list .w-filter-item { margin: 0 !important; padding: 16px 20px !important; border-bottom: 1px solid var(--jnl-line) !important; }
  .w-filter-list .w-filter-item-title { display: inline-block !important; margin: 0 0 12px !important; font-size: 16px !important; font-weight: 750 !important; color: var(--jnl-ink) !important; }
  .w-filter-list .w-filter-item-reset { display: inline-block !important; margin: 0 0 12px 12px !important; font-size: 13px !important; color: var(--jnl-blue) !important; font-weight: 600 !important; vertical-align: middle !important; }

  /* ===== 2) PILLE ===== */
  .w-filter-item-values { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .w-filter-item-value.w-btn {
    margin: 0 !important; min-height: 40px !important; padding: 0 16px !important;
    display: inline-flex !important; align-items: center !important;
    border: 1px solid var(--jnl-line-strong) !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important;
  }
  .w-filter-item-value .w-filter-item-value-label { font-size: 14px !important; font-weight: 600 !important; color: var(--jnl-ink) !important; letter-spacing: 0 !important; }
  .w-filter-item-value label { margin: 0 !important; display: flex !important; align-items: center !important; }
  .w-filter-item-value input[type="checkbox"], .w-filter-item-value input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; }
  .w-filter-item-value.active-filter-class, .w-filter-item-value:has(input:checked) { border-color: transparent !important; background: var(--jnl-grad) !important; }
  .w-filter-item-value.active-filter-class .w-filter-item-value-label, .w-filter-item-value:has(input:checked) .w-filter-item-value-label { color: #fff !important; }

  .w-filter-item.type_dropdown .w-filter-item-value-select, .w-filter-item.type_dropdown select {
    width: 100% !important; min-height: 46px !important; border: 1px solid var(--jnl-line-strong) !important; border-radius: var(--jnl-radius) !important; background: #fff !important; font-size: 14px !important; padding: 0 12px !important;
  }

  /* ===== 3) STICKY "Zastosuj" ===== */
  .w-filter-button-submit.w-btn {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 100001 !important;
    width: 100% !important; margin: 0 !important; min-height: 60px !important;
    border: 0 !important; border-radius: 0 !important; background: var(--jnl-ink) !important; box-shadow: 0 -6px 20px rgba(0,0,0,.14) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .w-filter-button-submit .w-btn-label { color: #fff !important; font-size: 16px !important; font-weight: 750 !important; }
  .w-filter-opener.w-btn { border-radius: 999px !important; border: 1px solid var(--jnl-line-strong) !important; background: #fff !important; min-height: 46px !important; }

  /* ===== 4) "Wyczysc filtry" -> subtelny link ===== */
  .w-filter-reset-all.w-btn { background: none !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; padding: 0 4px !important; }
  .w-filter-reset-all .w-btn-label { font-size: 13px !important; font-weight: 700 !important; color: var(--jnl-ink) !important; text-decoration: underline !important; }
  .w-list-result-counter { font-size: 13px !important; color: var(--jnl-muted) !important; font-weight: 600 !important; }
  .w-order.for_list .w-order-select select { font-size: 13px !important; color: var(--jnl-muted) !important; border: 0 !important; background: transparent !important; }

  /* ===== 5) KARTY (frame + logo + badge + kompakt) ===== */
  .w-grid-item { position: relative !important; }
  .w-grid-item .w-grid-item-h {
    position: relative !important; background: #fff !important;
    border: 1px solid var(--jnl-line) !important; border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(31,45,71,.07) !important; overflow: hidden !important;
  }
  .w-grid-item.is-promoted-slot .w-grid-item-h { border-color: var(--jnl-gold) !important; box-shadow: 0 2px 14px rgba(241,168,32,.16) !important; }

  /* logo: rowny kwadrat zawsze */
  .w-grid-item .w-image.usg_image_2 { width: 60px !important; min-width: 60px !important; height: 60px !important; flex: 0 0 60px !important; aspect-ratio: 1/1 !important; }
  .w-grid-item .w-image.usg_image_2 .w-image-h { width: 60px !important; height: 60px !important; border-radius: 10px !important; overflow: hidden !important; background: #fff !important; }
  .w-grid-item .w-image.usg_image_2 img { width: 100% !important; height: 100% !important; object-fit: contain !important; }

  /* kompakt */
  .w-grid-item .w-vwrapper { --vwrapper-gap: 0.4rem !important; }
  .w-grid-item .w-hwrapper { --hwrapper-gap: 0.7rem !important; max-width: 100% !important; }
  .w-grid-item .w-hwrapper.align_justify { flex-wrap: wrap !important; }
  .w-grid-item img { max-width: 100% !important; }

  /* odznaki male, rowne */
  .w-grid-item .w-btn.us-btn-style_92,
  .w-grid-item .w-btn.us-btn-style_81,
  .w-grid-item .jlc-badge {
    display: inline-flex !important; align-items: center !important;
    width: auto !important; max-width: max-content !important; min-height: 0 !important; height: auto !important;
    padding: 3px 9px !important; border-radius: 6px !important; box-shadow: none !important; white-space: nowrap !important;
  }
  .w-grid-item .w-btn.us-btn-style_92 .w-btn-label,
  .w-grid-item .w-btn.us-btn-style_81 .w-btn-label,
  .w-grid-item .jlc-badge { font-size: 11px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .2px !important; }

  /* salary zielony */
  .w-grid-item .slot_salary .w-post-elm-value, .w-grid-item .slot_salary_max .w-post-elm-value, .w-grid-item .slot_salary_max .w-post-elm-after { color: var(--jnl-green) !important; font-weight: 800 !important; }

  .w-grid-list { max-width: 100% !important; overflow-x: hidden !important; }
}