/*
 * Styles for FoxLED Custom Shop.
 *
 * This stylesheet creates a two‑column layout with a left sidebar of
 * filters styled to resemble the FoxLED shop design. Green accents and
 * grey backgrounds mirror the original site. The product grid inherits
 * styling from the active theme via WooCommerce templates.
 */

/* Variables */
:root {
  --foxled-green: #8CC63E;
  --foxled-grey: #f7f7f7;
  --foxled-border: #e5e5e5;
  --foxled-text: #333;
  --foxled-heading: #111;
}

.foxled-custom-shop-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

/*
 * Sidebar container
 *
 * The filters sidebar closely follows the styling of the FoxLED shop. It sits on a
 * light grey panel separated from the product grid by a thin border. Padding
 * ensures the content aligns nicely with the headings and checkboxes.
 */
.foxled-custom-shop-wrapper .foxled-filters {
  width: 260px;
  flex-shrink: 0;
  /* apply a light grey background similar to the live site */
  background: var(--foxled-grey);
  /* separate the sidebar from the product grid with a subtle border */
  border-right: 1px solid var(--foxled-border);
  /* padding inside the panel */
  padding: 16px 12px;
  /* margin around the panel */
  margin-right: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

/* Main sidebar title */
.foxled-filter-header {
  background: var(--foxled-grey);
  color: var(--foxled-heading);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 10px 8px;
  margin-bottom: 20px;
  border-left: 4px solid var(--foxled-green);
}

/* Filter block wrapper */
.foxled-filter-block {
  margin-bottom: 20px;
  border: 1px solid var(--foxled-border);
  background: #fff;
}

/* Heading for each block */
.foxled-filter-block-heading {
  position: relative;
  background: var(--foxled-grey);
  color: var(--foxled-heading);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px 8px;
  border-left: 4px solid var(--foxled-green);
  /* ensure headings sit flush with block border */
  margin: 0;
}

/* Content area within each block */
.foxled-filter-block-content {
  padding: 8px;
  margin: 0;
}

/* Price range container adjustments */
.foxled-price-range {
  display: flex;
  gap: 8px;
}

/* Wrap each price input so the currency can be absolutely positioned */
.foxled-price-field {
  position: relative;
  flex: 1 1 50%;
}

/* Price inputs get extra right padding so currency doesn’t overlap text */
.foxled-price-field input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 32px 8px 8px;
  margin-bottom: 0;
  border: 1px solid var(--foxled-border);
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  color: var(--foxled-text);
}

/* Currency label inside price fields */
.foxled-price-currency {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: var(--foxled-green);
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 3px;
  pointer-events: none;
}

/* Attribute list scroll container – allow long lists to scroll */
.foxled-filter-block-content ul.foxled-filter-list {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Customise scrollbars to match FoxLED colours */
.foxled-filter-block-content ul.foxled-filter-list::-webkit-scrollbar {
  width: 6px;
}
.foxled-filter-block-content ul.foxled-filter-list::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 3px;
}
.foxled-filter-block-content ul.foxled-filter-list::-webkit-scrollbar-thumb {
  background: var(--foxled-green);
  border-radius: 3px;
}

/* Term items spacing */
.foxled-filter-list li {
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--foxled-text);
}

.foxled-custom-shop-wrapper .foxled-products {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * Each filter group has a vertical green indicator bar down the left edge to
 * mirror the live site. Extra spacing between groups helps delineate them.
 */

/* price range fields side‑by‑side */
.foxled-price-range {
  display: flex;
  gap: 8px;
}
/* ensure price inputs share available width equally */
.foxled-price-range input[type="number"] {
  flex: 1 1 50%;
  margin-bottom: 0;
}

/* List of terms */
/* remove default list styling and reset margins for attribute lists */
.foxled-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* spacing for each term */
.foxled-filter-list li {
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--foxled-text);
}

.foxled-filter-list label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.foxled-filter-list input[type="checkbox"] {
  margin-right: 4px;
}

.foxled-term-count {
  color: #888;
  margin-left: 4px;
  font-size: 12px;
}

/* Products grid adjustments */
.foxled-products-grid ul.products {
  margin-top: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .foxled-custom-shop-wrapper {
    flex-direction: column;
  }
  .foxled-custom-shop-wrapper .foxled-filters {
    width: 100%;
    margin-right: 0;
  }
  /* The old .foxled-filter-group heading style is no longer used */
}