/**
 * Angel Lust - Signature White & Pink Theme for Filter Everything
 * Website: https://angellust.store
 * Perfected Layout & Component Styling
 */

/* ==========================================================================
   0. ROOT TOKENS
   ========================================================================== */
:root {
  --al-filter-pink-primary: #ff85aa;
  --al-filter-pink-hover: #f25c8a;
  --al-filter-pink-dark: #d62268;
  --al-filter-pink-light: #fff5f8;
  --al-filter-pink-subtle: #ffeef3;
  --al-filter-pink-border: #ffd1df;
  --al-filter-pink-border-subtle: #ffccd8;
  --al-filter-white: #ffffff;
  --al-filter-text: #1a1a1a;
  --al-filter-subtext: #2d3748;
  --al-filter-muted: #718096;
  --al-filter-radius-sm: 8px;
  --al-filter-radius-md: 16px;
  --al-filter-radius-pill: 9999px;
  --al-filter-font: var(--theme-font-family, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Hide any debug / upgrade messages */
.wpc-debug-message,
p.wpc-debug-message {
  display: none !important;
}

/* ==========================================================================
   1. OUTER CONTAINER RESETS (ELIMINATE MULTIPLE NESTED PINK BORDERS)
   ========================================================================== */
.ct-sidebar .widget_wpc_filters_widget,
.ct-widget.widget_wpc_filters_widget,
.widget_wpc_filters_widget,
#wpc_filters_widget-2 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}

/* The SINGLE card container */
.wpc-filters-main-wrap {
  font-family: var(--al-filter-font) !important;
  background: var(--al-filter-white) !important;
  border: 1px solid var(--al-filter-pink-border) !important;
  border-radius: var(--al-filter-radius-md) !important;
  padding: 22px 20px !important;
  box-shadow: 0 4px 20px -2px rgba(255, 133, 170, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.04) !important;
  color: var(--al-filter-text) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Clear borders from inner widget wrapper on desktop */
.wpc-filters-widget-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide mobile drawer header on desktop */
@media screen and (min-width: 769px) {
  .wpc-widget-close-container {
    display: none !important;
  }
  .wpc-widget-popup-title {
    display: none !important;
  }
}

/* ==========================================================================
   2. FILTER SECTIONS & HEADERS (LEFT-ALIGNED WITH SPARKLE)
   ========================================================================== */
.wpc-filters-section {
  margin-bottom: 22px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--al-filter-pink-subtle) !important;
  position: relative !important;
}

.wpc-filters-section:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.wpc-filter-header {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Left-aligned title with text right next to the sparkle */
.wpc-filter-header .widget-title,
.wpc-filter-header .wpc-filter-title,
.wpc-filter-title {
  font-family: var(--al-filter-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--al-filter-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Never space-between! */
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

/* One single sparkle right next to title text */
.wpc-filter-header .wpc-filter-title::before,
.wpc-filters-section .widget-title::before {
  content: '✦' !important;
  display: inline-block !important;
  color: var(--al-filter-pink-primary) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Remove unwanted pseudo elements */
.widget_wpc_filters_widget > .widget-title::before,
.wpc-filter-title-text::before,
.wpc-filter-set-widget-title::before {
  content: none !important;
}

/* Collapsible toggle arrow */
.wpc-filter-collapsible .wpc-open-icon {
  margin-left: auto !important; /* Pushes toggle arrow to the far right */
  width: 18px !important;
  height: 18px !important;
  border: none !important;
  background: var(--al-filter-pink-light) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* ==========================================================================
   3. CHECKBOXES, ITEMS & HIGH-CONTRAST COUNT BADGES
   ========================================================================== */
ul.wpc-filters-ul-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

li.wpc-checkbox-item,
li.wpc-term-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wpc-term-item-content-wrapper {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 6px 10px !important;
  border-radius: var(--al-filter-radius-sm) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.wpc-term-item-content-wrapper:hover {
  background: var(--al-filter-pink-light) !important;
}

/* Custom Pink Checkbox */
.wpc-filters-main-wrap input[type="checkbox"],
.wpc-term-item-content-wrapper input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  border: 1.5px solid var(--al-filter-pink-border-subtle) !important;
  border-radius: 5px !important;
  background: var(--al-filter-white) !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  outline: none !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.wpc-term-item-content-wrapper:hover input[type="checkbox"] {
  border-color: var(--al-filter-pink-primary) !important;
  background: #fff8fa !important;
}

/* Checked State with White SVG Checkmark */
.wpc-filters-main-wrap input[type="checkbox"]:checked,
.wpc-term-item-content-wrapper input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--al-filter-pink-primary) 0%, var(--al-filter-pink-hover) 100%) !important;
  border-color: var(--al-filter-pink-primary) !important;
  box-shadow: 0 2px 6px rgba(255, 133, 170, 0.35) !important;
}

.wpc-filters-main-wrap input[type="checkbox"]:checked::after,
.wpc-term-item-content-wrapper input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 4px !important;
  height: 8px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  opacity: 1 !important;
  background: transparent !important;
  box-sizing: content-box !important;
}

/* Label text & name */
.wpc-term-item-content-wrapper label {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.wpc-term-item-content-wrapper a.wpc-filter-link,
.wpc-term-name {
  font-family: var(--al-filter-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--al-filter-subtext) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  flex: 1 !important;
  margin-right: 8px !important;
}

.wpc-term-item-content-wrapper:hover a.wpc-filter-link,
.wpc-term-item-content-wrapper:hover .wpc-term-name {
  color: var(--al-filter-text) !important;
}

.wpc-term-selected a.wpc-filter-link,
.wpc-term-selected .wpc-term-name {
  color: var(--al-filter-pink-dark) !important;
  font-weight: 700 !important;
}

/* HIGH-CONTRAST CRISP BOUTIQUE COUNT PILL */
.wpc-term-count {
  font-family: var(--al-filter-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--al-filter-pink-dark) !important; /* Crisp, readable rose-pink */
  background: #fff0f5 !important; /* Defined pastel background */
  border: 1px solid var(--al-filter-pink-border-subtle) !important;
  border-radius: var(--al-filter-radius-pill) !important;
  padding: 2px 8px !important;
  min-width: 22px !important;
  text-align: center !important;
  line-height: 1.4 !important;
  display: inline-block !important;
  margin-left: auto !important; /* Pushed to far right */
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

/* Hide raw bracket characters */
.wpc-term-count-brackets-open,
.wpc-term-count-brackets-close {
  display: none !important;
}

.wpc-term-item-content-wrapper:hover .wpc-term-count {
  background: var(--al-filter-pink-primary) !important;
  color: #ffffff !important;
  border-color: var(--al-filter-pink-primary) !important;
}

.wpc-term-selected .wpc-term-count {
  background: var(--al-filter-pink-dark) !important;
  color: #ffffff !important;
  border-color: var(--al-filter-pink-dark) !important;
}

/* ==========================================================================
   4. PRICE RANGE SLIDER & INPUTS
   ========================================================================== */
.wpc-filter-range-form {
  padding: 4px 0 !important;
  margin: 0 !important;
}

.wpc-filters-range-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.wpc-filters-range-column {
  flex: 1 !important;
  position: relative !important;
}

.wpc-filters-range-inputs input[type="number"],
.wpc-filters-range-min,
.wpc-filters-range-max {
  width: 100% !important;
  height: 38px !important;
  border-radius: var(--al-filter-radius-sm) !important;
  border: 1.5px solid var(--al-filter-pink-border) !important;
  background: var(--al-filter-white) !important;
  color: var(--al-filter-text) !important;
  font-family: var(--al-filter-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 6px 12px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.wpc-filters-range-inputs input[type="number"]:focus,
.wpc-filters-range-min:focus,
.wpc-filters-range-max:focus {
  border-color: var(--al-filter-pink-primary) !important;
  background: #fff8fa !important;
  box-shadow: 0 0 0 3px rgba(255, 133, 170, 0.2) !important;
}

/* Clear Reset 'x' inside price column */
.wpc-range-clear {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: var(--al-filter-muted) !important;
  cursor: pointer !important;
  padding: 2px !important;
  font-size: 14px !important;
}

.wpc-range-clear:hover {
  color: var(--al-filter-pink-dark) !important;
}

/* Slider Track */
.wpc-filters-range-inputs .ui-slider-horizontal,
.wpc-filters-main-wrap .ui-slider-horizontal {
  height: 6px !important;
  background: var(--al-filter-pink-subtle) !important;
  border: none !important;
  border-radius: var(--al-filter-radius-pill) !important;
  margin: 18px 8px 12px 8px !important;
  position: relative !important;
}

.wpc-filters-range-inputs .ui-slider-horizontal .ui-slider-range,
.wpc-filters-main-wrap .ui-slider-horizontal .ui-slider-range {
  background: linear-gradient(90deg, var(--al-filter-pink-primary) 0%, var(--al-filter-pink-hover) 100%) !important;
  border-radius: var(--al-filter-radius-pill) !important;
}

.wpc-filters-range-inputs .ui-slider-horizontal .ui-slider-handle,
.wpc-filters-main-wrap .ui-slider-horizontal .ui-slider-handle {
  width: 20px !important;
  height: 20px !important;
  top: -7px !important;
  border-radius: 50% !important;
  background: var(--al-filter-white) !important;
  border: 2.5px solid var(--al-filter-pink-primary) !important;
  box-shadow: 0 2px 6px rgba(255, 133, 170, 0.4) !important;
  cursor: grab !important;
  outline: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.wpc-filters-range-inputs .ui-slider-horizontal .ui-slider-handle:hover,
.wpc-filters-range-inputs .ui-slider-horizontal .ui-slider-handle.ui-state-active {
  transform: scale(1.15) !important;
  border-color: var(--al-filter-pink-dark) !important;
  box-shadow: 0 0 0 4px rgba(255, 133, 170, 0.22), 0 3px 10px rgba(255, 133, 170, 0.45) !important;
  cursor: grabbing !important;
}

/* ==========================================================================
   5. MORE / LESS CONTROLS
   ========================================================================== */
.wpc-see-more-control,
.wpc-see-less-control {
  margin-top: 10px !important;
  padding: 4px 8px !important;
}

.wpc-see-more-control a,
.wpc-see-less-control a,
.wpc-toggle-a {
  color: var(--al-filter-pink-dark) !important;
  font-family: var(--al-filter-font) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.2s ease !important;
}

.wpc-see-more-control a:hover,
.wpc-see-less-control a:hover {
  color: #a10c81 !important;
}

/* ==========================================================================
   6. ACTIVE FILTER CHIPS
   ========================================================================== */
ul.wpc-filter-chips-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  list-style: none !important;
}

ul.wpc-filter-chips-list li.wpc-filter-chip {
  margin: 0 !important;
}

ul.wpc-filter-chips-list li.wpc-filter-chip a,
ul.wpc-filter-chips-list li.wpc-filter-chip span[data-wpc-span-link] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--al-filter-pink-light) !important;
  border: 1px solid var(--al-filter-pink-border) !important;
  color: var(--al-filter-text) !important;
  font-family: var(--al-filter-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: var(--al-filter-radius-pill) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

ul.wpc-filter-chips-list li.wpc-filter-chip:hover a,
ul.wpc-filter-chips-list li.wpc-filter-chip:hover span[data-wpc-span-link] {
  background: var(--al-filter-pink-subtle) !important;
  border-color: var(--al-filter-pink-primary) !important;
  transform: translateY(-1px) !important;
}

.wpc-chip-remove-icon {
  color: var(--al-filter-pink-dark) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  margin-left: 2px !important;
}

/* Reset All Chip */
li.wpc-chip-reset-all a,
li.wpc-chip-reset-all span[data-wpc-span-link] {
  background: var(--al-filter-white) !important;
  border: 1.5px dashed var(--al-filter-pink-primary) !important;
  color: var(--al-filter-pink-dark) !important;
}

li.wpc-chip-reset-all:hover a,
li.wpc-chip-reset-all:hover span[data-wpc-span-link] {
  background: linear-gradient(135deg, var(--al-filter-pink-primary), var(--al-filter-pink-hover)) !important;
  color: #ffffff !important;
  border-style: solid !important;
}

/* ==========================================================================
   7. APPLY BUTTON
   ========================================================================== */
.wpc-filters-widget-controls-container a.wpc-filters-apply-button,
.wpc-filters-main-wrap a.wpc-filters-submit-button,
a.wpc-filters-apply-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  background: linear-gradient(135deg, var(--al-filter-pink-primary) 0%, var(--al-filter-pink-hover) 100%) !important;
  color: #ffffff !important;
  font-family: var(--al-filter-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: var(--al-filter-radius-sm) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(255, 94, 140, 0.32) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-top: 14px !important;
}

.wpc-filters-widget-controls-container a.wpc-filters-apply-button:hover,
a.wpc-filters-apply-button:hover {
  background: linear-gradient(135deg, var(--al-filter-pink-hover) 0%, var(--al-filter-pink-dark) 100%) !important;
  box-shadow: 0 6px 20px rgba(255, 94, 140, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   8. MOBILE DRAWER & BUTTON (MOBILE ONLY)
   ========================================================================== */
@media screen and (max-width: 768px) {
  .wpc-open-close-filters-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--al-filter-white) !important;
    border: 1.5px solid var(--al-filter-pink-border) !important;
    color: var(--al-filter-text) !important;
    border-radius: var(--al-filter-radius-pill) !important;
    padding: 10px 22px !important;
    font-family: var(--al-filter-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 16px rgba(255, 133, 170, 0.16) !important;
    text-decoration: none !important;
  }

  .wpc-filters-widget-content {
    background: var(--al-filter-white) !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 35px rgba(255, 133, 170, 0.18) !important;
    border-top: 2px solid var(--al-filter-pink-border) !important;
  }

  .wpc-widget-close-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--al-filter-pink-subtle) !important;
    background: var(--al-filter-pink-light) !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .wpc-widget-popup-title {
    font-family: var(--al-filter-font) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--al-filter-text) !important;
  }

  .wpc-widget-close-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--al-filter-white) !important;
    border: 1px solid var(--al-filter-pink-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}