/* ============================================================================
   Category page filter drawer — clean rebuild per Figma redesign.
   Figma:
     - 1018:20687 / 1018:21755   — drawer (desktop / mobile, all collapsed)
     - 1018:20957 / 1018:21340   — drawer with the colour section expanded
     - 1018:20899 / 1018:21412   — drawer with the size section expanded
     - 1018:20914 / 1018:20915   — size pill chips
     - 1018:20965 / 1018:21343   — colour swatch grid

   Static markup lives in `catalog/view/theme/mahardhi/template/product/
   product_filter.twig`. Backend integration (option lists, filter submit,
   state sync, count refresh) is intentionally *not* wired here — another
   developer will hook those up to the data attributes / class names below.

   Naming summary for backend dev:
     - .filter-popups                         drawer root
     - .filter-popups__header / __body / __footer
     - .filter-section                        each collapsible group
       - [data-filter-section="<color|size-clothing|size-shoes|price>"]
       - [data-filter-toggle]                 click target on the head
       - .filter-section.is-expanded          expanded state class
     - .filter-color-list / .filter-color     colour grid + item
       - input[type="checkbox"][name="color[]"]
       - .filter-color__swatch[style="background-color: …"]
     - .filter-size-list / .filter-size       size pill list + item
       - input[type="checkbox"][name="size[]"|"shoe[]"]
     - .filter-price                          price range
       - .filter-price__inputs / __field
       - .filter-price__slider[data-filter-price-slider]
         [data-min] [data-max]
     - .filter-popups__apply [data-filter-apply]   primary CTA
       - .is-disabled / [disabled]
       - .filter-popups__apply-text [data-filter-apply-text]
     - .filter-popups__reset [data-filter-reset]   ghost reset
     - .filter-popups__count [data-filter-count]   header counter
============================================================================= */

/* --- Trigger button (shown in the toolbar) ----------------------------- */
.filter-mobile {
  display: inline-flex;
}
.filter-mobile button,
.filter-mobile__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 1px 24px 0;
  margin: 0;
  background: #141414;
  color: #FFFFFF;
  border: 1px solid #141414;
  border-radius: 0;
  font-family: 'Fixel Display', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.filter-mobile button:hover,
.filter-mobile button:focus,
.filter-mobile__trigger:hover,
.filter-mobile__trigger:focus {
  background: #FFFFFF;
  color: #141414;
  outline: none;
}
.filter-mobile .filter-trigger-icon {
  width: 14px;
  height: 12px;
  flex-shrink: 0;
  display: inline-block;
  fill: currentColor;
}
.filter-mobile .filter-trigger-icon path {
  fill: currentColor;
}
.filter-mobile__count.is-hidden {
  display: none;
}

/* --- Backdrop + page lock ---------------------------------------------- */
.filter-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.5);
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.filter-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

html.filter-drawer-open,
body.filter-drawer-open {
  overflow: hidden !important;
  height: 100%;
  touch-action: none;
}

/* --- Drawer shell ------------------------------------------------------- */
.filter-popups {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 492px;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  z-index: 3001;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s ease;
}
.filter-popups.is-open {
  transform: translateX(0);
  visibility: visible;
}

@media (max-width: 767px) {
  .filter-popups {
    width: 100%;
  }
}

/* --- Header (sticky) ---------------------------------------------------- */
.filter-popups__header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 40px 12px;
  border-bottom: 1px solid #E3E3E3;
  background: #FFFFFF;
  z-index: 2;
  flex-shrink: 0;
}
.filter-popups__title {
  font-family: 'Fixel Text', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  color: #141414;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}
.filter-popups__count {
  font: inherit;
  color: inherit;
}
.filter-popups__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #141414;
  flex-shrink: 0;
}
.filter-popups__close svg {
  display: block;
  width: 20px;
  height: 20px;
}
.filter-popups__close svg path {
  stroke: #141414;
}

@media (max-width: 767px) {
  .filter-popups__header {
    padding: 20px 16px 12px;
  }
}

/* --- Body (scrollable, hidden scrollbar) ------------------------------- */
.filter-popups__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 32px 40px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filter-popups__body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@media (max-width: 767px) {
  .filter-popups__body {
    padding: 28px 16px;
    overflow-x: hidden;
  }
  /* Tighter column-gap so 2-column color grid fits 360px viewport without
     pushing labels past the 2nd column edge. */
  .filter-color-list {
    column-gap: 16px;
  }
}

/* --- Section ----------------------------------------------------------- */
.filter-section {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #E3E3E3;
}
.filter-section:last-child {
  border-bottom: 0;
}

.filter-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  text-align: left;
  font: inherit;
}
.filter-section__title {
  font-family: 'Fixel Text', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  color: #141414;
  text-transform: uppercase;
  margin: 0;
}
.filter-section__toggle {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23141414' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.filter-section.is-expanded .filter-section__toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' stroke='%23141414' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.filter-section__body {
  display: none;
  margin-top: 16px;
}
.filter-section.is-expanded .filter-section__body {
  display: block;
}

/* --- Colour picker (Figma 1018:20965 / 1018:21343) -------------------- */
/* 2-column grid: 124px-wide rows, 34px column gap, 15px row gap.
   Swatch: 35×35 outer w/ 1px border, 29×29 inner colour disc via
   background-clip: content-box. Backend sets `style="background-color: …"`
   on .filter-color__swatch. */
.filter-color-list {
  display: grid;
  /* `minmax(0, 1fr)` instead of just `1fr` allows the column to actually
     shrink — grid items have an implicit `min-width: auto` which is the
     content's intrinsic size, blocking ellipsis on long color names. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 34px;
  row-gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0 0 24px;
}
.filter-color {
  margin: 0;
  padding: 0;
}
/* Visually-hidden checkbox — we render the swatch+label, the input lives
   off-screen so it's still focusable / form-submittable. */
.filter-color input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.filter-color label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  /* min-width: 0 lets the label shrink inside its grid cell so the inner
     text span can hit its ellipsis. Without this the flex container kept
     its intrinsic content width and pushed past the cell. */
  min-width: 0;
  cursor: pointer;
  font-family: 'Fixel Display', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 120%;
  color: #141414;
  text-transform: none;
}
.filter-color__swatch {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border: 1px solid #EEEEEE;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
  background-clip: content-box;
  background-origin: content-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.filter-color input[type="checkbox"]:checked + label .filter-color__swatch {
  border-color: #141414;
}
.filter-color input[type="checkbox"]:focus-visible + label .filter-color__swatch {
  outline: 2px solid #141414;
  outline-offset: 2px;
}
.filter-color__name {
  /* min-width: 0 + flex: 1 lets the text shrink below its intrinsic size
     so the ellipsis kicks in instead of pushing the column wider than the
     2-column grid (which was causing horizontal scroll on 360px). */
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Size pill chips (Figma 1018:20914 / 1018:20915) ------------------ */
.filter-size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}
.filter-size {
  margin: 0;
  padding: 0;
}
.filter-size input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.filter-size label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 1px 24px 0;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #E3E3E3;
  font-family: 'Fixel Display', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #757575;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
  .filter-size label:hover {
    border-color: #141414;
    color: #141414;
  }
}
.filter-size input[type="checkbox"]:checked + label {
  border-color: #141414;
  color: #141414;
}
.filter-size input[type="checkbox"]:focus-visible + label {
  outline: 2px solid #141414;
  outline-offset: 2px;
}
.filter-size input[type="checkbox"]:disabled + label {
  border-color: #E3E3E3;
  color: #C5C5C5;
  pointer-events: none;
  cursor: not-allowed;
}

/* --- Price section (Figma 1018:20755) --------------------------------- */
/* Layout (top to bottom, gap 20px):
     1. Two inline-label inputs side-by-side ("Від 1200" / "До 6900")
     2. Range slider (1px track + 2px progress + two 12×12 round thumbs)
     3. Pill-chip presets ("500-1000", etc.) — fill #FAFAFA, 1px border.
   Backend wires drag / value sync / preset clicks. */
.filter-price {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 8px;
}

/* Inputs: each one is a row with a static "Від" / "До" label on the left
   and the editable number value right-aligned. Border wraps the whole row. */
.filter-price__inputs {
  display: flex;
  gap: 8px;
  margin: 0;
}
.filter-price__field {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #E3E3E3;
  position: static;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.filter-price__field:focus-within {
  border-color: #141414;
}
.filter-price__field > label {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font-family: 'Fixel Text', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  color: #A1A1A1;
  text-transform: none;
  pointer-events: auto;
  cursor: text;
}
.filter-price__field > input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  font-family: 'Fixel Text', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  color: #141414;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
  box-sizing: border-box;
}
.filter-price__field > input::-webkit-outer-spin-button,
.filter-price__field > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Slider — thin 1px track with a 2px black progress bar and two 12×12
   circular thumbs. JS sets inline `left` / `right` percent on .progress
   and `left` on each thumb based on min/max values. */
.filter-price__slider {
  position: relative;
  height: 12px;
  margin: 0 6px;
  cursor: pointer;
}
.filter-price__track {
  position: absolute;
  top: 5.5px;
  left: 0;
  right: 0;
  height: 1px;
  background: #E3E3E3;
}
.filter-price__progress {
  position: absolute;
  top: 5px;
  height: 2px;
  background: #141414;
  left: 0;
  right: 0;
}
.filter-price__thumb {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #141414;
  cursor: grab;
  transform: translateX(-50%);
  z-index: 1;
}
.filter-price__thumb:active {
  cursor: grabbing;
}
.filter-price__thumb--min { left: 0; }
.filter-price__thumb--max { left: 100%; }

/* Preset pill chips — quick-select common ranges (e.g. 500-1000). */
.filter-price__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.filter-price__preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 1px 16px 0;
  margin: 0;
  background: #FAFAFA;
  border: 1px solid #E3E3E3;
  border-radius: 0;
  font-family: 'Fixel Display', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #757575;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
  .filter-price__preset:hover {
    border-color: #141414;
    color: #141414;
  }
}
.filter-price__preset.is-active {
  border-color: #141414;
  color: #141414;
  background: #FAFAFA;
}

/* --- Footer (sticky) --------------------------------------------------- */
.filter-popups__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 40px 16px;
  border-top: 1px solid #E3E3E3;
  background: #FFFFFF;
  z-index: 2;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .filter-popups__footer {
    padding: 24px 16px 16px;
  }
}

.filter-popups__apply {
  width: 100%;
  height: auto;
  padding: 16px;
  margin: 0;
  background: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 0;
  font-family: 'Fixel Text', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 120%;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .filter-popups__apply:hover:not(.is-disabled):not(:disabled) {
    background: #FFFFFF;
    color: #000000;
  }
}
/* Press feedback — visible on both mouse :active and tap-and-hold on
   touch. Inverts to white-on-black-bordered so the user sees a clear
   reaction when the button is engaged. */
.filter-popups__apply:active:not(.is-disabled):not(:disabled) {
  background: #FFFFFF;
  color: #000000;
}
.filter-popups__apply.is-disabled,
.filter-popups__apply:disabled {
  background: #E3E3E3;
  border-color: #E3E3E3;
  cursor: not-allowed;
}

.filter-popups__reset {
  display: inline-block;
  padding: 1px 0;
  margin: 0;
  background: transparent;
  color: #141414;
  border: 0;
  border-bottom: 1px solid #141414;
  font-family: 'Fixel Display', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 120%;
  text-transform: uppercase;
  cursor: pointer;
}
.filter-popups__reset:hover {
  color: #5E5E5E;
  border-bottom-color: #5E5E5E;
}