/* fitment-choices.scss
   Choices.js styling for fitment widget + reliable layering above mega menu & banner.
*/
#fitment-facet-widget {
  /* ---------------------------------------
     Base Choices wrapper (strong scoping)
     --------------------------------------- */
  /* ---------------------------------------
     CLOSED control box
     --------------------------------------- */
  /* ---------------------------------------
     Selected value / placeholder
     --------------------------------------- */
  /* ---------------------------------------
     Focus / open ring
     --------------------------------------- */
  /* ---------------------------------------
     Caret
     --------------------------------------- */
  /* ---------------------------------------
     Disabled state
     --------------------------------------- */
  /* ---------------------------------------
     Dropdown panel (dark)
     --------------------------------------- */
  /* ---------------------------------------
     Avoid clipping inside widget
     --------------------------------------- */
}
#fitment-facet-widget .choices.choices {
  width: 100%;
  margin: 0 !important;
  min-width: 0;
}
#fitment-facet-widget .choices.choices .choices__inner {
  background: var(--cws-control-bg) !important;
  border: 1px solid var(--cws-control-border) !important;
  border-radius: var(--cws-control-radius) !important;
  height: var(--cws-h) !important;
  min-height: var(--cws-h) !important;
  color: #fff !important;
  box-shadow: none !important;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
  display: flex !important;
  align-items: center !important;
}
#fitment-facet-widget .choices.choices .choices__list--single {
  padding: 0 !important;
}
#fitment-facet-widget .choices.choices .choices__list--single .choices__item {
  color: #fff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fitment-facet-widget .choices.choices .choices__list--single .choices__placeholder {
  opacity: 1 !important;
  color: rgba(var(--beo-sand-rgb, 240, 230, 210), 0.8) !important;
}
#fitment-facet-widget .choices.choices.is-focused .choices__inner,
#fitment-facet-widget .choices.choices.is-open .choices__inner {
  border-color: rgba(var(--beo-orange-rgb, 255, 128, 0), 0.95) !important;
  box-shadow: 0 0 0 0.2rem var(--cws-focus) !important;
}
#fitment-facet-widget .choices.choices[data-type*=select-one]::after {
  border: 0 !important;
  content: "" !important;
  position: absolute !important;
  right: 0.9rem !important;
  top: 50% !important;
  width: 0.55rem !important;
  height: 0.55rem !important;
  transform: translateY(-50%) rotate(45deg) !important;
  pointer-events: none !important;
  border-right: 2px solid rgba(255, 255, 255, 0.85) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.85) !important;
}
#fitment-facet-widget .choices.choices.is-open[data-type*=select-one]::after {
  transform: translateY(-50%) rotate(-135deg) !important;
}
#fitment-facet-widget .choices.choices.is-disabled .choices__inner {
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  cursor: not-allowed !important;
}
#fitment-facet-widget .choices.choices.is-disabled[data-type*=select-one]::after {
  border-right-color: rgba(255, 255, 255, 0.45) !important;
  border-bottom-color: rgba(255, 255, 255, 0.45) !important;
}
#fitment-facet-widget .choices.choices .choices__list--dropdown,
#fitment-facet-widget .choices.choices .choices__list[aria-expanded=true] {
  background: rgba(0, 0, 0, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--cws-control-radius) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden !important;
  margin-top: 6px !important;
}
#fitment-facet-widget .choices.choices .choices__list--dropdown .choices__item {
  color: rgba(255, 255, 255, 0.92) !important;
  padding: 0.55rem 0.75rem !important;
}
#fitment-facet-widget .choices.choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: rgba(var(--beo-orange-rgb, 255, 128, 0), 0.22) !important;
  color: #fff !important;
}
#fitment-facet-widget,
#fitment-facet-widget #widget-fitment-wrapper,
#fitment-facet-widget .form-item {
  overflow: visible !important;
}

/* =========================================================
   Layering / "menu bleeding through" fix (KEEP THIS CLEAN)
   ========================================================= */
/* Establish a sane stacking order around the header/search/category bar */
.search-container {
  position: relative;
  z-index: 50;
}

.category-bar-container {
  position: relative;
  z-index: 10;
}

/* Your custom mega menu block should be above bar content but below dropdowns */
#block-byzantine-desktopcategorynavmegamenu,
#block-byzantine-desktopcategorynavmegamenu .cws-mega-nav,
#block-byzantine-desktopcategorynavmegamenu .cws-mega-panel {
  position: relative;
  z-index: 20;
}

/* Choices has a supported CSS var for z-index; set it once */
#fitment-facet-widget .choices--fitment {
  --choices-z-index: 2000;
}

#fitment-facet-widget .choices--fitment.is-open {
  position: relative;
  z-index: var(--choices-z-index);
}

#fitment-facet-widget .choices--fitment .choices__list--dropdown,
#fitment-facet-widget .choices--fitment .choices__list[aria-expanded=true] {
  position: absolute;
  z-index: var(--choices-z-index) !important;
  pointer-events: auto;
}

/* Keep mega menu visible, but don't let it steal hover/click while selecting */
body.fitment-select-open #block-byzantine-desktopcategorynavmegamenu {
  pointer-events: none;
}

body.fitment-select-open #fitment-facet-widget,
body.fitment-select-open #fitment-facet-widget * {
  pointer-events: auto;
}

/*# sourceMappingURL=fitment-choices.css.map */