/* AI Search Filters — v1.0.5. Checkbox-styled filter options.
   Uses px (not rem) for predictable sizing on OC3 themes that override
   `html { font-size: 12px|14px }` and would otherwise shrink our labels. */
/* CSS custom property defaults — overridden by inline style on panel root
   (set by storefront controller from admin "Design" tab settings). */
.ai-filters {
  --ai-accent: #229ac8;
  --ai-text: #212529;
  --ai-group-label: #6b7280;
  --ai-chip-selected-bg: #444444;
  --ai-counter-bg: #f3f4f6;
  --ai-group-bg: #ffffff;
  --ai-group-border: #f3f4f6;
  --ai-selected-bg: #ffffff;
  --ai-selected-border: #e5e7eb;
  font-family: inherit;
  color: var(--ai-text);
  line-height: 1.4; font-size: 13px;
}
.ai-filters * { box-sizing: border-box; }

.ai-filters__header {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px; padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb; margin-bottom: 12px;
}
.ai-filters__title { margin: 0; font-size: 17px; font-weight: 600; }
.ai-filters__counter {
  font-size: 12px; color: #6b7280; background: #f3f4f6;
  padding: 3px 10px; border-radius: 12px;
}
.ai-filters__clear {
  margin-left: auto; font-size: 12px; color: #dc2626;
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.ai-filters__clear:hover { color: #991b1b; text-decoration: underline; }

/* ===== Selected filters (active-chip list above facet groups) ===== */
.ai-filters__selected {
  padding: 10px 12px 12px;
  margin-bottom: 12px;
  background: var(--ai-selected-bg);
  border: 1px solid var(--ai-selected-border);
  border-radius: 6px;
}
.ai-filters__selected-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ai-group-label); margin-bottom: 8px; font-weight: 600;
}
.ai-filters__selected-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ai-selected-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--ai-chip-selected-bg); color: #fff;
  border: 1px solid var(--ai-chip-selected-bg); border-radius: 4px;
  font-size: 12px; line-height: 1.2; font-weight: 600;
  text-decoration: none; transition: all 0.12s;
  max-width: 100%;
}
.ai-selected-chip:hover {
  opacity: 0.85; color: #fff; text-decoration: none;
}
.ai-selected-chip__label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 200px;
}
.ai-selected-chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.2); color: #fff;
  transition: background 0.12s;
  font-size: 0.9em;
}
.ai-selected-chip:hover .ai-selected-chip__x {
  background: rgba(255, 255, 255, 0.35); color: #fff;
}

/* Orientation: vertical (sidebar) */
.ai-filters--vertical .ai-filter-group { margin-bottom: 18px; }
.ai-filters--vertical .ai-filter-group__list { display: flex; flex-direction: column; gap: 2px; }

/* Orientation: horizontal (top bar) */
.ai-filters--horizontal { padding: 14px; background: #f8f9fa; border-radius: 10px; margin-bottom: 20px; }
.ai-filters--horizontal .ai-filter-group { display: inline-block; margin-right: 24px; margin-bottom: 12px; vertical-align: top; }
.ai-filters--horizontal .ai-filter-group__label { display: block; margin-bottom: 6px; font-weight: 600; }
.ai-filters--horizontal .ai-filter-group__list { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }

.ai-filters--sticky { position: sticky; top: 10px; max-height: calc(100vh - 40px); overflow-y: auto; }

/* Group card */
.ai-filter-group { background: var(--ai-group-bg); border-bottom: 1px solid var(--ai-group-border); padding: 10px 12px 14px; border-radius: 6px; }
.ai-filter-group:last-child { border-bottom: none; }
.ai-filter-group__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; cursor: pointer; user-select: none;
}
.ai-filter-group__label { font-weight: 600; font-size: 14px; color: var(--ai-group-label); }
.ai-filter-group__toggle {
  background: none; border: none; padding: 4px; cursor: pointer;
  color: #6b7280; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.ai-filter-group__toggle:hover { background: #f3f4f6; color: #444; }

/* CSS-only chevron built from two border edges — clean, scalable, no font deps.
   Default (expanded) = points DOWN; collapsed = points RIGHT. */
.ai-ico-chevron {
  display: inline-block;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s ease;
}
.ai-filter-group[data-collapsed="1"] .ai-ico-chevron {
  transform: rotate(-45deg) translate(-1px, 1px);
}
.ai-filter-group[data-collapsed="1"] .ai-filter-group__body { display: none; }

.ai-filter-group__search {
  width: 100%; padding: 6px 10px; margin-bottom: 8px;
  border: 1px solid #e5e7eb; border-radius: 4px; font-size: 12px;
  background: #fff;
}
.ai-filter-group__search:focus { outline: none; border-color: #444; box-shadow: 0 0 0 2px rgba(68, 68, 68, 0.15); }

.ai-filter-group__list { margin: 0; padding: 0; }
.ai-filter-option { display: block; }
.ai-filter-option--hidden { display: none; }
.ai-filter-group[data-expanded="1"] .ai-filter-option--hidden { display: block; }

/* ===== Checkbox-style option rows ===== */
.ai-chip {
  display: flex; align-items: center;
  padding: 6px 8px; border-radius: 4px;
  text-decoration: none; color: #374151;
  font-size: 13px; line-height: 1.3;
  transition: background 0.12s;
  gap: 8px;
}
.ai-chip:hover {
  background: #f3f4f6; text-decoration: none; color: #111827;
}

/* Custom checkbox indicator — CSS-only checkmark via ::after borders
   (no inline-SVG data-URL so the rule is robust in both external CSS
   and copied into inline critical <style> in the twig). */
.ai-chip { position: relative; } /* anchor for the ::after checkmark */
.ai-filters .ai-chip::before {
  content: "";
  width: 16px; height: 16px;
  flex-shrink: 0;
  border: 1.5px solid #cbd5e1;
  border-radius: 3px;
  background: #fff;
  transition: all 0.12s;
  display: inline-block;
}
.ai-filters .ai-chip:hover::before { border-color: var(--ai-accent); }

.ai-filters .ai-chip--active {
  background: #eff6ff; color: var(--ai-accent); font-weight: 500;
}
.ai-filters .ai-chip--active:hover { background: #dbeafe; color: var(--ai-accent); }
.ai-filters .ai-chip--active::before {
  background: var(--ai-accent); border-color: var(--ai-accent);
}
.ai-filters .ai-chip--active::after {
  content: ""; position: absolute;
  left: 11px; top: 49%;
  width: 10px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-65%) rotate(-45deg);
  pointer-events: none;
}

.ai-chip__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chip__count {
  flex-shrink: 0;
  color: #6b7280; font-size: 11px;
  background: var(--ai-counter-bg);
  padding: 1px 6px; border-radius: 10px;
  min-width: 20px; text-align: center;
}
.ai-chip--active .ai-chip__count { color: var(--ai-accent); font-weight: 600; }

/* Show more / Hide button */
.ai-filter-group__more {
  background: transparent; border: none; color: #229ac8;
  padding: 6px 8px; cursor: pointer; font-size: 12px;
  margin-top: 4px; text-align: left; width: 100%;
  border-radius: 4px;
}
.ai-filter-group__more:hover { background: #eff6ff; }
.ai-filter-group__more .ai-less-label { display: none; }
.ai-filter-group[data-expanded="1"] .ai-filter-group__more .ai-more-label { display: none; }
.ai-filter-group[data-expanded="1"] .ai-filter-group__more .ai-less-label { display: inline; }

/* Price range — inputs */
.ai-filter-price__inputs { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.ai-filter-price__min, .ai-filter-price__max {
  flex: 1; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 4px;
  font-size: 13px; min-width: 0; text-align: center;
  background: #f9fafb;
}
.ai-filter-price__min:focus, .ai-filter-price__max:focus {
  outline: none; border-color: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
  background: #fff;
}
.ai-filter-price__sep { color: #9ca3af; font-weight: bold; }
.ai-filter-price__ccy { color: #6b7280; font-size: 12px; padding-left: 4px; }

/* Dual-range slider — two native inputs overlapping on a shared custom track.
   Track and inputs are inset by half-thumb-width (9px) so extreme handle
   positions (min/max) align perfectly with the track edges — no half-thumb
   sticking out past the end. */
.ai-filter-price__slider {
  position: relative;
  height: 24px;
  margin: 4px 0 6px;
}
.ai-filter-price__track {
  position: absolute; left: 9px; right: 9px; top: 50%;
  height: 4px; transform: translateY(-50%);
  background: #e5e7eb; border-radius: 4px;
}
.ai-filter-price__range {
  position: absolute; top: 50%;
  /* JS sets --lo / --hi (0..1 fractions). CSS does the math so the filled
     bar stays aligned with the inset track at any width — browser re-runs
     calc() on resize, no JS-side resize listener needed. */
  left:  calc(9px + (100% - 18px) * var(--lo, 0));
  width: calc((100% - 18px) * (var(--hi, 1) - var(--lo, 0)));
  height: 4px; transform: translateY(-50%);
  background: linear-gradient(90deg, #229ac8, #1a7ba0);
  border-radius: 4px;
  pointer-events: none;
}

/* Hide the native range inputs entirely — keep only the thumb visible.
   Inset by 9px on each side so thumb centers align with track endpoints. */
.ai-filter-price__handle-min,
.ai-filter-price__handle-max {
  position: absolute; left: 0; right: 0; top: 0;
  width: 100%; height: 100%;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background: transparent; pointer-events: none; margin: 0; padding: 0;
  outline: none; border: none;
}

/* WebKit: use a 4px runnable-track (matches visible track) so the 18px thumb
   centers vertically with a negative margin-top of (4-18)/2 = -7px. */
.ai-filter-price__handle-min::-webkit-slider-runnable-track,
.ai-filter-price__handle-max::-webkit-slider-runnable-track {
  background: transparent; border: none; height: 4px;
}
.ai-filter-price__handle-min::-webkit-slider-thumb,
.ai-filter-price__handle-max::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: #229ac8; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab; margin-top: -7px; /* (track-height - thumb-height) / 2 */
  transition: transform 0.1s;
}
.ai-filter-price__handle-min::-webkit-slider-thumb:active,
.ai-filter-price__handle-max::-webkit-slider-thumb:active {
  cursor: grabbing; transform: scale(1.1); background: #1a7ba0;
}

/* Firefox: hide track, progress fill, and focus ring */
.ai-filter-price__handle-min::-moz-range-track,
.ai-filter-price__handle-max::-moz-range-track {
  background: transparent; border: none; height: 100%;
}
.ai-filter-price__handle-min::-moz-range-progress,
.ai-filter-price__handle-max::-moz-range-progress {
  background: transparent;
}
.ai-filter-price__handle-min::-moz-range-thumb,
.ai-filter-price__handle-max::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: #229ac8; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab;
}
.ai-filter-price__handle-min::-moz-focus-outer,
.ai-filter-price__handle-max::-moz-focus-outer { border: 0; }

/* The max handle is above the min handle in DOM order.
   Layer the min handle above the max on its left half so the min thumb
   is reachable when handles sit close together. */
.ai-filter-price__handle-min { z-index: 2; }
.ai-filter-price__handle-max { z-index: 3; }

.ai-ico-x::before { content: "×"; font-weight: bold; font-size: 1.1em; line-height: 1; }

/* ==================================================================
   Mobile drawer — floating FAB + left-slide side drawer.
   (Deliberately different from tiles.com.ua's bottom-sheet pattern.)

   DEFAULT on mobile: panel hidden entirely (display:none + visibility).
   OPEN:            slides in from left, fixed position, 85vw / max 360px.
   Trigger button:  circular FAB bottom-right (Material-ish), with badge.
   Desktop:         trigger/backdrop hidden; panel renders in-sidebar as usual.
   ================================================================== */

/* Trigger button — rounded rectangle/pill/circle. Hidden on desktop.
   Icon + text label + count badge. Default defaults: bottom-left, 80px up,
   16px from edge. Admin overrides these via inline styles at runtime
   (set by filters.js using data-fab-* attributes). */
.ai-filters-trigger {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  z-index: 1030;
  display: none; /* revealed on mobile */
  align-items: center; gap: 8px;
  background: #229ac8; color: #fff;
  border: none; border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px; font-weight: 600; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Shape variants — applied by filters.js as ai-filters-trigger--{rect|pill|circle} */
.ai-filters-trigger--pill   { border-radius: 999px; padding: 10px 20px; }
.ai-filters-trigger--circle {
  border-radius: 50%;
  width: 52px; height: 52px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.ai-filters-trigger--circle .ai-filters-trigger__label,
.ai-filters-trigger--circle .ai-filters-trigger__count { display: none !important; }
.ai-filters-trigger--circle .ai-filters-trigger__icon { width: 22px; height: 22px; }
.ai-filters-trigger:hover  { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(34, 154, 200, 0.45), 0 3px 8px rgba(0, 0, 0, 0.16); }
.ai-filters-trigger:active { transform: scale(0.97); }
.ai-filters-trigger__icon {
  display: block; width: 18px; height: 18px; flex-shrink: 0;
  /* Funnel icon via pure CSS gradients — three horizontal lines */
  background:
    linear-gradient(#fff, #fff) center 3px / 18px 2px no-repeat,
    linear-gradient(#fff, #fff) center 8px / 12px 2px no-repeat,
    linear-gradient(#fff, #fff) center 13px / 6px 2px no-repeat;
}
.ai-filters-trigger__label { font-weight: 600; }
.ai-filters-trigger__count {
  display: inline-block;
  min-width: 20px; height: 20px;
  background: #fff; color: #229ac8;
  border-radius: 10px; padding: 0 6px;
  font-size: 11px; font-weight: 700;
  line-height: 20px; text-align: center;
  margin-left: 2px;
}

/* Backdrop behind drawer */
.ai-filters-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(17, 24, 39, 0.55);
  z-index: 1040;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.ai-filters-backdrop--open { opacity: 1; pointer-events: auto; }

/* × close button, appears only inside mobile drawer header */
.ai-filters-close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  background: transparent; border: none;
  font-size: 28px; line-height: 1; color: #6b7280;
  cursor: pointer; padding: 0;
  display: none; z-index: 2;
}
.ai-filters-close:hover { color: #111827; }

/* Lock body scroll while drawer is open */
.ai-filters-body-lock { overflow: hidden; }

@media (max-width: 768px) {
  .ai-filters--sticky { position: static; max-height: none; overflow: visible; }

  /* FAB visible on mobile */
  .ai-filters-trigger { display: inline-flex; }

  /* When JS adds .ai-filters--mobile (after teleporting to <body>), the panel
     is fully hidden until user taps the FAB. No visible bottom-chunk, no
     accidental overflow — this fixes the "chips floating at the bottom" bug
     of the previous bottom-sheet implementation. */
  .ai-filters--mobile {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 85vw; max-width: 360px;
    background: #fff;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.18);
    z-index: 1050;
    padding: 16px 16px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0s linear 0.28s;
  }
  .ai-filters--mobile.ai-filters--mobile-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0s linear 0s;
  }

  .ai-filters--mobile .ai-filters-close { display: block; }

  /* Give the first children some top padding so the × button doesn't overlap */
  .ai-filters--mobile > .ai-filters__header { padding-top: 6px; padding-right: 40px; }
}