/* 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/heading) that WooCommerce themes very
   commonly re-style globally — without it, a theme's own button/link colors
   (pink/magenta on this site) or its global h3 size 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:24px;
  padding:22px 24px;
  margin:0 0 28px;
  box-shadow:0 10px 28px rgba(13,71,161,.07);
  box-sizing:border-box;
  transition:box-shadow .25s ease,border-color .25s ease;
}
.tpf-box:hover{border-color:#9cc4f0;box-shadow:0 14px 34px rgba(13,71,161,.1)}
.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-box::after{
  content:"";
  position:absolute;
  bottom:-65px;
  inset-inline-start:-65px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(56,161,255,.08),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}
@keyframes tpf-pulse{0%{box-shadow:0 0 0 0 rgba(13,71,161,.3)}70%{box-shadow:0 0 0 9px rgba(13,71,161,0)}100%{box-shadow:0 0 0 0 rgba(13,71,161,0)}}
.tpf-found-count{font-size:13px;font-weight:700;color:#0d47a1;background:linear-gradient(135deg,#eaf3ff,#dcebfd);padding:6px 14px;border-radius:999px;white-space:nowrap;animation:tpf-pulse 2.4s ease-out 1}
.tpf-sort{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.tpf-sort label{color:#33475b;font-weight:600}
.tpf-sort select{max-width:100%;padding:8px 13px;border-radius:14px;border:1.5px solid #cfe3fb;background:#fff;font-size:13px;color:#1e293b;transition:border-color .15s ease}
.tpf-sort select:hover{border-color:#9cc4f0}
.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:7px;background:#e8f1fd !important;border:1.5px solid #bfddf7 !important;color:#0d47a1 !important;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer}

/* A small CSS triangle rather than a text glyph, so it renders identically in
   every font and never picks up RTL glyph substitution. */
.tpf-caret,
.tpf-toggle-icon{
  display:inline-block;
  flex:0 0 auto;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.75;
}
.tpf-toggle-icon{transition:transform .15s ease}
.tpf-box.tpf-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}
@keyframes tpf-chip-in{from{opacity:0;transform:scale(.85) translateY(2px)}to{opacity:1;transform:scale(1) translateY(0)}}
.tpf-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;background:linear-gradient(135deg,#eef5ff,#e3eefd);border:1px solid #bcdaf7;color:#0d47a1 !important;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;text-decoration:none !important;overflow-wrap:anywhere;transition:background .15s ease,color .15s ease,transform .15s ease;animation:tpf-chip-in .18s ease}
.tpf-chip:hover{background:linear-gradient(135deg,#1660d1,#0d47a1);color:#fff !important;border-color:#0d47a1;transform:translateY(-1px)}
.tpf-chip-x{font-size:11px;opacity:.85}

/* Row of per-section buttons — phones only (see the max-width block at the
   bottom). On desktop every section is already expanded in the sidebar, so
   there is nothing for these to open. */
.tpf-quick{display:none}

.tpf-backdrop{display:none}
.tpf-sheet-head{display:none}

.tpf-body{position:relative;z-index:1;margin-top:4px}
.tpf-body-scroll{display:flex;flex-wrap:wrap;gap:28px}
.tpf-section{flex:1 1 190px;min-width:175px;max-width:100%}

/* Section headings: deliberately small and quiet — they are labels above the
   options, not page headings. The !important pair is what keeps a theme's
   global h3 rules (large size, brand red) from taking them over. */
.tpf-box .tpf-section > h3{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 10px !important;
  padding:0;
  padding-inline-start:9px;
  font-family:inherit !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  line-height:1.7 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#123b6e !important;
  border-inline-start:3px solid #0d47a1;
  overflow-wrap:anywhere;
  min-width:0;
}
/* A little warm-red and green mixed into the otherwise all-blue palette —
   a thin accent border, enough to read as an intentional color scheme
   rather than one flat blue block. */
.tpf-box .tpf-section > h3.tpf-h3-warm{border-inline-start-color:#c0392b}
.tpf-box .tpf-section > h3.tpf-h3-good{border-inline-start-color:#0f9d78}

/* overflow-x is pinned to hidden on purpose: a lone `overflow-y:auto` makes
   the browser compute overflow-x to `auto` too, which is what turned a long
   option label into a sideways scrollbar inside the filter panel. */
.tpf-scroll{max-height:240px;overflow-y:auto;overflow-x:hidden;min-width:0;padding-inline-end:6px}
.tpf-scroll::-webkit-scrollbar{width:6px}
.tpf-scroll::-webkit-scrollbar-thumb{background:#cfe3fb;border-radius:99px}

/* `display:flex` from an author stylesheet outranks the browser's own
   `[hidden]{display:none}`, so without this the rows "نمایش بیشتر" is meant to
   keep back are rendered anyway and the button reveals nothing. */
.tpf-check[hidden]{display:none}
.tpf-check{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.6;color:#1e293b;margin:0;padding:8px 10px;border-radius:14px;cursor:pointer;overflow-wrap:anywhere;word-break:break-word;transition:background .12s ease,box-shadow .12s ease}
.tpf-check:hover{background:#f2f8ff}
.tpf-check:has(input:checked){background:#eaf3ff;box-shadow:inset 0 0 0 1px #bcdaf7}
.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:linear-gradient(135deg,#eef5ff,#e3eefd);border:1px solid #bcdaf7;color:#0d47a1 !important;font-size:12.5px;font-weight:600;cursor:pointer;padding:7px 15px;border-radius:999px;transition:background .15s ease,color .15s ease}
.tpf-show-more:hover{background:linear-gradient(135deg,#1660d1,#0d47a1);color:#fff !important}

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

.tpf-apply{display:flex;justify-content:flex-end;margin-top:18px}
.tpf-apply-btn{background:linear-gradient(135deg,#1a63d4,#0d47a1) !important;color:#fff !important;border:none !important;border-radius:16px;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:20px;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}

/* Sidebar layout — a fixed right-hand filter panel next to the product
   grid, matching the UX of large stores like torob.com and digikala.com.
   Below tablet width the wrapper/aside/main below are left as plain block
   elements, so the filter box (rendered first, in source order) simply
   stacks above the product grid — the same "top" arrangement as before,
   with the bottom-sheet rules further down doing their job on phones.
   Only from tablet width up does this become an actual sidebar. */
@media (min-width:900px){
  .tpf-layout{display:grid;grid-template-columns:290px 1fr;align-items:start;gap:26px}
  .tpf-main{min-width:0}
  .tpf-sidebar{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:auto;padding-inline-end:4px}
  .tpf-sidebar::-webkit-scrollbar{width:6px}
  .tpf-sidebar::-webkit-scrollbar-thumb{background:#cfe3fb;border-radius:99px}
  .tpf-box--sidebar{margin-bottom:0;display:flex;flex-direction:column}
  .tpf-box--sidebar .tpf-body-scroll{flex-direction:column;flex-wrap:nowrap;gap:22px}
  .tpf-box--sidebar .tpf-section{flex:none;width:100%;min-width:0}
  .tpf-box--sidebar .tpf-row-top{flex-direction:column;align-items:stretch;gap:10px}
  .tpf-box--sidebar .tpf-found-count{align-self:flex-start}
  .tpf-box--sidebar .tpf-sort{justify-content:space-between}
  .tpf-box--sidebar .tpf-reset{margin-inline-start:0;text-align:center}
  .tpf-box--sidebar .tpf-apply{position:sticky;bottom:-1px;background:linear-gradient(0deg,#fff 65%,rgba(255,255,255,0));padding-top:14px;margin-top:8px}
  .tpf-box--sidebar .tpf-apply-btn{width:100%}
}

/* ------------------------------------------------------------------ */
/* Phones: filter groups open as a bottom sheet                        */
/* ------------------------------------------------------------------ */
@media (max-width:680px){
  .tpf-box{padding:16px 14px;border-radius:20px}
  .tpf-row-top{gap:10px 14px}
  .tpf-toggle{display:inline-flex}
  .tpf-chips{margin-top:2px}

  /* One single-line strip of filter buttons that slides sideways, the way
     large Persian stores do it — not a block of buttons stacked down the page
     pushing the products out of view. The strip is the ONE element allowed to
     scroll horizontally; the filter panel itself still never does. */
  .tpf-quick{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    margin:2px 0 0;
    padding:2px 0 6px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    /* Bleed to the card's edges so the strip visibly runs off the side —
       that is the cue that there is more to scroll to. */
    margin-inline:-14px;
    padding-inline:14px;
    scroll-padding-inline:14px;
  }
  .tpf-quick::-webkit-scrollbar{display:none}
  .tpf-quick-btn{
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    gap:7px;
    background:#fff !important;
    border:1.5px solid #cfe3fb !important;
    color:#123b6e !important;
    border-radius:999px;
    padding:9px 15px;
    font-size:12.5px;
    font-weight:700;
    line-height:1.6;
    white-space:nowrap;
    cursor:pointer;
    transition:border-color .15s ease,background .15s ease;
  }
  .tpf-quick-btn:active{background:#f2f8ff !important}
  .tpf-quick-btn.is-on{background:linear-gradient(135deg,#eaf3ff,#dcebfd) !important;border-color:#0d47a1 !important;color:#0d47a1 !important}
  .tpf-quick-label{white-space:nowrap}

  .tpf-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(13,35,66,.45);
    z-index:99998;
    opacity:0;
    visibility:hidden;
    /* Never intercepts taps unless the sheet is actually open. Without this it
       stays hit-testable through its whole fade-out — and if anything leaves it
       part-way, it silently swallows every tap on the page while being
       invisible, which looks exactly like "the close button doesn't work". */
    pointer-events:none;
    transition:opacity .28s ease,visibility .28s ease;
  }
  .tpf-box.tpf-open .tpf-backdrop{opacity:1;visibility:visible;pointer-events:auto}

  /* The panel itself becomes the sheet — the sections are never moved in the
     DOM, so every checkbox stays inside the same <form> it was rendered in. */
  .tpf-body{
    position:fixed;
    inset:auto 0 0 0;
    z-index:99999;
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    max-height:85vh;
    margin:0;
    padding:0;
    background:#fff;
    border-radius:24px 24px 0 0;
    box-shadow:0 -14px 44px rgba(13,71,161,.22);
    transform:translateY(101%);
    visibility:hidden;
    pointer-events:none;
    overscroll-behavior:contain;
    transition:transform .3s cubic-bezier(.32,.72,0,1),visibility .3s ease;
  }
  .tpf-box.tpf-open .tpf-body{transform:translateY(0);visibility:visible;pointer-events:auto}

  .tpf-sheet-head{
    position:relative;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 18px 12px;
    border-bottom:1px solid #eef4fb;
  }
  .tpf-sheet-grip{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:44px;height:4px;border-radius:99px;background:#dde8f6}
  .tpf-sheet-title{margin-inline-end:auto;font-size:14.5px;font-weight:700;color:#123b6e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tpf-sheet-close{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    padding:0;
    border:none !important;
    border-radius:50%;
    background:#f1f6fd !important;
    color:#5b6b81 !important;
    font-size:14px;
    line-height:1;
    cursor:pointer;
  }
  .tpf-sheet-close:active{background:#e3edf9 !important}

  /* Vertical scrolling only — the one scroll container in the sheet. */
  .tpf-body-scroll{
    flex:1 1 auto;
    display:block;
    gap:0;
    min-height:0;
    padding:14px 18px 8px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .tpf-body-scroll .tpf-section{width:100%;min-width:0;max-width:100%;margin:0 0 20px}
  .tpf-body-scroll .tpf-section:last-child{margin-bottom:0}

  /* Nested scroll areas are dropped on phones: the sheet itself scrolls, so a
     long brand list can't create a second (and sideways) scrollbar inside it. */
  .tpf-scroll{max-height:none;overflow:visible;padding-inline-end:0}

  /* A button opened one group: show only that group. Its own heading is
     dropped because the sheet header already carries that exact title. */
  .tpf-box.tpf-solo .tpf-body-scroll .tpf-section{display:none}
  .tpf-box.tpf-solo .tpf-body-scroll .tpf-section.is-active{display:block}
  .tpf-box.tpf-solo .tpf-body-scroll .tpf-section.is-active > h3{display:none !important}

  .tpf-apply{
    flex:0 0 auto;
    justify-content:stretch;
    margin:0;
    padding:12px 18px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #eef4fb;
    background:#fff;
  }
  .tpf-apply-btn{width:100%;border-radius:16px;padding:14px 20px}
  .tpf-check{padding:10px 10px}
  .tpf-price-hint{font-size:11.5px}
}

/* Page scroll is frozen while a sheet is open so the product grid behind it
   doesn't drift under the user's finger. */
html.tpf-locked,
html.tpf-locked body{overflow:hidden !important}

@media (prefers-reduced-motion:reduce){
  .tpf-body,
  .tpf-backdrop,
  .tpf-chip,
  .tpf-apply-btn{transition:none !important;animation:none !important}
}