/* Palette (kept as literal values, not CSS custom properties, because a few
   rules below — .tpf-no-products — render outside the .tpf-box element and
   custom properties defined only on .tpf-box wouldn't reach them):
     card bg:      #f4f9ff -> #ffffff  (soft blue-to-white)
     card border:  #bfddf7  (light blue)
     accent:       #0d47a1  (deep blue — text/buttons/icons)
     accent soft:  #e8f1fd  (chip/badge backgrounds)
     divider:      #e3edf9
     text:         #1e293b
     muted:        #7c8ba1
   Some rules carry !important on color/background/border only, and only on
   the handful of elements (button/link) that WooCommerce themes very
   commonly re-style globally — without it, a theme's own button/link colors
   (pink/magenta on this site) silently win the cascade over ours. */

.tpf-box{
  position:relative;
  overflow:hidden;
  direction:rtl;
  text-align:right;
  font-size:14.5px;
  line-height:1.9;
  color:#1e293b;
  background:linear-gradient(180deg,#f3f9ff 0%,#ffffff 60%);
  border:1.5px solid #bfddf7;
  border-radius:20px;
  padding:22px 24px;
  margin:0 0 28px;
  box-shadow:0 10px 28px rgba(13,71,161,.07);
  box-sizing:border-box;
}
.tpf-box *{box-sizing:border-box}
.tpf-box::before{
  content:"";
  position:absolute;
  top:-70px;
  inset-inline-end:-70px;
  width:190px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(13,71,161,.09),transparent 70%);
  pointer-events:none;
}

.tpf-row-top{position:relative;z-index:1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #e3edf9}
.tpf-found-count{font-size:13px;font-weight:700;color:#0d47a1;background:#e8f1fd;padding:6px 14px;border-radius:999px;white-space:nowrap}
.tpf-sort{display:flex;align-items:center;gap:8px;font-size:13px}
.tpf-sort label{color:#33475b;font-weight:600}
.tpf-sort select{padding:7px 12px;border-radius:10px;border:1.5px solid #cfe3fb;background:#fff;font-size:13px;color:#1e293b}
.tpf-sort select:focus{outline:none;border-color:#0d47a1;box-shadow:0 0 0 3px rgba(13,71,161,.12)}
.tpf-reset{font-size:13px;font-weight:600;color:#0d47a1 !important;text-decoration:none;margin-inline-end:auto}
.tpf-reset:hover{text-decoration:underline}
.tpf-toggle{display:none;margin-inline-start:auto;align-items:center;gap:6px;background:#e8f1fd !important;border:1.5px solid #bfddf7 !important;color:#0d47a1 !important;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.tpf-toggle-icon{display:inline-block;transition:transform .15s ease}
.tpf-box.is-open .tpf-toggle-icon{transform:rotate(180deg)}

.tpf-chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.tpf-chip{display:inline-flex;align-items:center;gap:7px;background:#e8f1fd;border:1px solid #bcdaf7;color:#0d47a1 !important;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;text-decoration:none !important;transition:background .15s ease,color .15s ease}
.tpf-chip:hover{background:#0d47a1;color:#fff !important;border-color:#0d47a1}
.tpf-chip-x{font-size:11px;opacity:.85}

.tpf-body{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:28px;margin-top:4px}
.tpf-section{flex:1 1 190px;min-width:175px}
.tpf-section h3{margin:0 0 12px;font-size:14px;font-weight:700;color:#123b6e;line-height:1.6;padding-inline-start:10px;border-inline-start:3px solid #0d47a1}

.tpf-scroll{max-height:240px;overflow-y:auto;padding-inline-end:6px}
.tpf-scroll::-webkit-scrollbar{width:6px}
.tpf-scroll::-webkit-scrollbar-thumb{background:#cfe3fb;border-radius:99px}

.tpf-check{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.6;color:#1e293b;margin:0;padding:7px 8px;border-radius:9px;cursor:pointer;transition:background .12s ease}
.tpf-check:hover{background:#f2f8ff}
.tpf-check input[type="checkbox"]{flex:0 0 auto;width:16px;height:16px;accent-color:#0d47a1}
.tpf-count{color:#7c8ba1;font-size:11.5px;white-space:nowrap;margin-inline-start:auto;padding-inline-start:8px}
.tpf-show-more{margin-top:8px;background:#e8f1fd;border:1px solid #bcdaf7;color:#0d47a1 !important;font-size:12.5px;font-weight:600;cursor:pointer;padding:6px 14px;border-radius:999px}
.tpf-show-more:hover{background:#0d47a1;color:#fff !important}

.tpf-price-row{display:flex;align-items:center;gap:10px}
.tpf-price-row span{color:#7c8ba1;font-size:12.5px}
.tpf-price-input{width:100%;padding:9px 12px;border-radius:10px;border:1.5px solid #cfe3fb;font-size:13.5px;color:#1e293b;transition:border-color .15s ease,box-shadow .15s ease}
.tpf-price-input:focus{outline:none;border-color:#0d47a1;box-shadow:0 0 0 3px rgba(13,71,161,.12)}

.tpf-apply{flex:0 0 100%;order:99;display:flex;justify-content:flex-end;margin-top:2px}
.tpf-apply-btn{background:#0d47a1 !important;color:#fff !important;border:none !important;border-radius:12px;padding:12px 30px;font-size:14.5px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(13,71,161,.22);transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
.tpf-apply-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(13,71,161,.28)}
.tpf-apply-btn:disabled{opacity:.65;transform:none;box-shadow:none;cursor:default}
.tpf-form.tpf-loading{opacity:.75;pointer-events:none;transition:opacity .1s ease}

/* Rendered by WooCommerce outside the .tpf-box element, so this repeats the
   palette above as plain values rather than relying on scoped variables. */
.tpf-no-products{text-align:center;padding:38px 18px;background:linear-gradient(180deg,#f3f9ff 0%,#ffffff 60%);border:1.5px dashed #bfddf7;border-radius:18px;margin:18px 0;direction:rtl}
.tpf-no-products p{margin:0 0 16px;color:#7c8ba1;font-size:14px;line-height:1.8}
.tpf-no-products .tpf-apply-btn{display:inline-block;text-decoration:none !important}

@media (max-width:680px){
  .tpf-box{padding:18px 16px;border-radius:16px}
  .tpf-row-top{gap:10px}
  .tpf-body{display:none;flex-direction:column;gap:20px}
  .tpf-box.is-open .tpf-body{display:flex}
  .tpf-toggle{display:inline-flex}
  .tpf-section{flex-basis:100%}
  .tpf-check{padding:9px 8px}
  .tpf-apply{justify-content:stretch}
  .tpf-apply-btn{width:100%}
  .tpf-chips{margin-top:2px}
}