/* ============================================================================
   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;
}

/* --- 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;
  }
}

/* --- 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;
  grid-template-columns: 1fr 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;
  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 {
  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;
}
.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: 0;
  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;
}
.filter-popups__apply:hover:not(.is-disabled):not(:disabled) {
  background: #141414;
}
.filter-popups__apply.is-disabled,
.filter-popups__apply:disabled {
  background: #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;
}