/* ==========================================================================
   Extended field types for the "Submit Your Product (Detailed)" CF7 form.
   Loaded as a separate, filemtime-versioned stylesheet (enqueued from the
   Novamira sandbox file) so it cache-busts independently of the un-versioned
   theme-styles.css @import chain. Built on the same pill / gradient system as
   the base .brands__* fields.
   ========================================================================== */

/* ---- Number inputs: reuse .brands__input, strip native spinners ---- */
.brands__input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.brands__input[type="number"]::-webkit-outer-spin-button,
.brands__input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- Price range: two number inputs (Min / Max) inline on one row ---- */
.brands__price-range {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.brands__price-range .brands__input,
.brands__price-range .wpcf7-form-control-wrap {
  flex: 1 1 0;
  min-width: 0;
}
.brands__price-range .wpcf7-form-control-wrap .brands__input {
  width: 100%;
}
.brands__price-sep {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 18px;
  color: rgba(20, 19, 19, 0.4);
  user-select: none;
}

/* ---- Multi-toggle buttons (CF7 checkboxes styled as pill toggles) ----
   Markup: <div class="brands__toggles">[checkbox name use_label_element "A" "B"]</div>
   CF7 renders each option as:
     <span class="wpcf7-list-item"><label><input type=checkbox><span class="wpcf7-list-item-label">A</span></label></span> */
.brands__toggles .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.brands__toggles .wpcf7-list-item {
  margin: 0;
}
.brands__toggles .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
}
/* Hide the native checkbox but keep it focusable/submittable. */
.brands__toggles input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.brands__toggles .wpcf7-list-item-label {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.48);
  font-family: var(--font-body);
  font-size: 14px;
  color: #141313;
  line-height: 1;
  user-select: none;
  transition:
    background var(--duration-fast),
    color var(--duration-fast);
}
.brands__toggles .wpcf7-list-item label:hover .wpcf7-list-item-label {
  background: rgba(255, 255, 255, 0.62);
}
.brands__toggles input[type="checkbox"]:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--color-primary-2);
  outline-offset: 2px;
}
/* Selected state mirrors .brands__dropdown-item.is-selected */
.brands__toggles input[type="checkbox"]:checked + .wpcf7-list-item-label {
  background: var(--gradient-primary);
  color: var(--color-background);
  font-weight: var(--fw-semibold);
}

/* ---- Hide native <select> in custom-dropdown fields (keeps it for submit) ----
   The visible .brands__dropdown widget drives the hidden native CF7 <select>.
   Targets the CF7 wrapper span so only the native control is hidden, never the
   hand-authored .brands__dropdown markup. */
.brands__field--select > .wpcf7-form-control-wrap,
.brands__field--select .wpcf7-form-control-wrap:has(> select) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: -1px;
  padding: 0;
  border: 0;
}

@media (max-width: 768px) {
  .brands__toggles .wpcf7-list-item-label {
    padding: 12px 20px;
    font-size: 15px;
  }
}