/* ==========================================================================
   File: kaaykoFilterModal.css
   Faceted-Chips Filter Modal: Dark & Light Modes, Dynamic Disabling
   ========================================================================== */

/*─────────────────────────────────────────────────────────────────────────────
  0) Theme Variables
─────────────────────────────────────────────────────────────────────────────*/
:root {
  /* Dark mode */
  --filter-backdrop:   rgba(0,0,0,0.6);
  --filter-panel-bg:   rgba(20,20,20,0.95);
  --filter-text:       #fffff0;   /* ivory */
  --filter-accent:     #FFD700;   /* gold */
  --filter-track:      #444;      /* slider track */
  --radius:            12px;
  --gap:               18px;
}

/* Light‐theme overrides */
html.light-theme {
  --filter-backdrop:   rgba(255,255,255,0.7);
  --filter-panel-bg:   rgba(255,255,255,0.95);
  --filter-text:       #111;      /* charcoal */
  --filter-accent:     #fffff0;   /* ivory */
  --filter-track:      #ddd;
}

/*─────────────────────────────────────────────────────────────────────────────
  Overlay backdrop
─────────────────────────────────────────────────────────────────────────────*/
.filter-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--filter-backdrop);
  z-index: 2000;
  padding: var(--gap);
  align-items: center;
  justify-content: center;
}
.filter-overlay.active {
  display: flex;
}

/*─────────────────────────────────────────────────────────────────────────────
  Panel
─────────────────────────────────────────────────────────────────────────────*/
.filter-panel {
  position: relative;
  background: var(--filter-panel-bg);
  color:      var(--filter-text);
  border-radius: var(--radius);
  box-shadow: 0 16px 32px rgba(0,0,0,0.8);
  width:       100%;
  max-width:   420px;
  max-height:  90vh;
  overflow-y:  auto;
  padding:     var(--gap);
  font-family: 'Josefin_Light', sans-serif;
}

/* Header */
.filter-panel h2 {
  margin:        0 0 var(--gap);
  font-size:     1.6rem;
  font-family:   'Josefin_Bold';
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom:8px;
}

/*─────────────────────────────────────────────────────────────────────────────
  Sections & Dividers
─────────────────────────────────────────────────────────────────────────────*/
.filter-section {
  margin-top:   var(--gap);
  font-family:  'Josefin_Medium';
}
.filter-section + .filter-section {
  border-top:   1px solid rgba(255,255,255,0.2);
  padding-top:  var(--gap);
}

/*─────────────────────────────────────────────────────────────────────────────
  Faceted Chips
─────────────────────────────────────────────────────────────────────────────*/
.chip-group {
  display:      flex;
  flex-wrap:    wrap;
  gap:          8px;
  margin-top:   8px;
}
.chip {
  display:          inline-flex;
  align-items:      center;
  padding:          6px 12px;
  border:           2px solid var(--filter-accent);
  border-radius:    9999px;
  background:       transparent;
  color:            var(--filter-text);
  font-family:      'Josefin_Medium';
  font-size:        0.95rem;
  cursor:           pointer;
  transition:       background 0.2s, color 0.2s, transform 0.1s ease;
}
.chip:hover {
  transform:        translateY(-1px);
  background:       rgba(255,255,255,0.15);
}
.chip.selected {
  background:       var(--filter-accent);
  color:            #222;
}
.chip.disabled {
  opacity:          0.4;
  pointer-events:   none;
}
.chip.disabled:hover {
  transform:        none;
  background:       transparent;
}

/*─────────────────────────────────────────────────────────────────────────────
  Slider Label
─────────────────────────────────────────────────────────────────────────────*/
.slider-label {
  display:          flex;
  justify-content:  space-between;
  margin-bottom:    8px;
  font-family:      'Josefin_Medium';
  font-size:        1rem;
}

/*─────────────────────────────────────────────────────────────────────────────
  Range slider
─────────────────────────────────────────────────────────────────────────────*/
.filter-panel input[type="range"] {
  -webkit-appearance: none;
  width:              100%;
  height:             6px;
  background:         var(--filter-track);
  border-radius:      3px;
  outline:            none;
  cursor:             pointer;
  margin:             0;
}
.filter-panel input[type="range"]::-webkit-slider-thumb,
.filter-panel input[type="range"]::-moz-range-thumb {
  width:              18px;
  height:             18px;
  border-radius:      50%;
  background:         var(--filter-accent);
  border:             2px solid var(--filter-text);
  box-shadow:         0 2px 6px rgba(0,0,0,0.4);
  transition:         transform 0.15s ease, box-shadow 0.15s ease;
}
.filter-panel input[type="range"]::-webkit-slider-thumb:hover,
.filter-panel input[type="range"]::-moz-range-thumb:hover {
  transform:          scale(1.2);
  box-shadow:         0 4px 8px rgba(0,0,0,0.5);
}
.filter-panel input[type="range"]::-moz-range-track {
  background:         var(--filter-track);
  height:             6px;
  border-radius:      3px;
}

/*─────────────────────────────────────────────────────────────────────────────
  Action buttons
─────────────────────────────────────────────────────────────────────────────*/
.filter-actions {
  display:          flex;
  justify-content:  flex-end;
  gap:              var(--gap);
  margin-top:       var(--gap);
}
.filter-actions button {
  font-family:      'Josefin_Medium';
  font-size:        0.95rem;
  background:       none;
  border:           2px solid var(--filter-accent);
  color:            var(--filter-accent);
  padding:          8px 16px;
  border-radius:    var(--radius);
  cursor:           pointer;
  transition:       background 0.2s, color 0.2s, transform 0.1s ease;
}
.filter-actions button:hover {
  background:       var(--filter-accent);
  color:            #222;
  transform:        translateY(-2px);
}

/*─────────────────────────────────────────────────────────────────────────────
  Close icon
─────────────────────────────────────────────────────────────────────────────*/
.filter-close {
  position:       absolute;
  top:            14px;
  right:          14px;
  font-family:    'Material Icons';
  font-size:      28px;
  color:          var(--filter-text);
  background:     none;
  border:         none;
  cursor:         pointer;
  opacity:        0.7;
  transition:     opacity 0.2s;
}
.filter-close:hover {
  opacity:        1;
}