/* ==========================================================================
   Views Exposed Filters - one layout for EVERY view
   --------------------------------------------------------------------------
   Desktop: filters in a row, the Apply (and Reset) buttons sitting on the
   same baseline as the boxes, not floating up level with the labels.
   Mobile: everything stacked, full width.

   Why the old rules didn't always apply: Drupal puts .views-exposed-form on
   the <form> itself, so ".views-exposed-form form" never matched, and
   Olivero's own float layout (.form--inline) took over, with its own
   margins on the buttons. The selectors below target the form directly AND
   the .form--inline wrapper some views add inside it.

   The Cart (stacked layout, further down) and anything else that needs a
   different arrangement override this with a more specific selector, as
   before. To opt a view out, add its form selector to the :not() list.
   ========================================================================== */

.block-views-exposed-filter-block {
  width: 100%;
}

form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]),
form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) > .form--inline {
  display: flex !important;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

/* The inner wrapper (when present) is the row; the form just holds it. */
form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) > .form--inline {
  margin: 0;
}

/* Olivero floats and spaces each item; flex does the spacing now. */
form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .form-item,
form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .js-form-item,
form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .form-actions {
  float: none !important;
  margin: 0 !important;
}

form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .form-item input,
form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .form-item select {
  width: 100%;
  box-sizing: border-box;
}

/* Buttons: no stray margins, side by side. */
form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .form-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .form-actions .button,
form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .form-actions .form-submit {
  margin: 0 !important;
}

/* Desktop / tablet: one row, everything lined up on the bottom edge. */
@media (min-width: 768px) {
  form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]),
  form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) > .form--inline {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
  }

  /* A view with a .form--inline wrapper: the wrapper fills the row. */
  form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) > .form--inline {
    flex: 1 1 100%;
  }

  /* Each filter 30ch wide (as before), shrinking if space is tight. */
  form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .form-item,
  form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .js-form-item {
    flex: 0 1 30ch !important;
    width: 30ch;
    min-width: 14ch;
    max-width: 100%;
  }

  /* Checkboxes / radios inside a filter keep their natural width. */
  form.views-exposed-form .form-item .form-item,
  form.views-exposed-form .form-checkboxes .js-form-item,
  form.views-exposed-form .form-radios .js-form-item {
    flex: 0 0 auto !important;
    width: auto;
    min-width: 0;
  }

  form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .form-actions {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* Mobile: full-width boxes and buttons. */
@media (max-width: 767.98px) {
  form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .form-actions .button,
  form.views-exposed-form:not([data-drupal-selector="views-exposed-form-cart-page-1"]) .form-actions .form-submit {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Cart page (/cart)
   Buttons stack under what they act on:
   - "Apply" sits under the "Authored by" selector.
   - "Download Order Form" on top, "Remove ticked items from cart" below.
   (data-drupal-selector is stable; the id can gain --2 suffixes.)
   ========================================================================== */
/* The <form> itself carries .views-exposed-form, so the generic rules above
   don't reach it; Olivero's .form--inline lays it out in a row. */
form[data-drupal-selector="views-exposed-form-cart-page-1"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.75rem;
}

form[data-drupal-selector="views-exposed-form-cart-page-1"] > * {
  float: none !important;
  margin: 0 !important;
}

/* The generic desktop rule gives filter items "flex: 0 0 30ch" - in this
   stacked layout that became a 30ch HEIGHT (the big gap above Apply). */
form.views-exposed-form[data-drupal-selector="views-exposed-form-cart-page-1"] .form-item,
form.views-exposed-form[data-drupal-selector="views-exposed-form-cart-page-1"] .js-form-item,
form.views-exposed-form[data-drupal-selector="views-exposed-form-cart-page-1"] .form-actions {
  flex: 0 0 auto !important;
  height: auto !important;
}

/* Buttons stacked, both as wide as the wider one. */
form[data-drupal-selector="views-form-cart-page-1"] > .form-actions {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

form[data-drupal-selector="views-form-cart-page-1"] > .form-actions .button {
  justify-content: center;
  width: auto;
  margin: 0;
  text-align: center;
}

/* The hint must not widen the buttons: it takes the buttons' width. */
form[data-drupal-selector="views-form-cart-page-1"] > .form-actions .cu-cart-hint {
  width: 0;
  min-width: 100%;
  margin: 0.25rem 0 0;
}