/**
 * Split from numart_main.css for maintainability.
 */

/* ========================================
   BRAND FILTER - Grid layout with uniform buttons
   Applies to both mobile and desktop
   ======================================== */
details[data-drupal-selector="edit-my-brand-collapsible"] .bef-checkboxes ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 10px !important;
  list-style: none !important;
  direction: rtl !important;
}

details[data-drupal-selector="edit-my-brand-collapsible"] .card-body {
  padding-left: 0 !important;
padding-right: 0 !important;
  max-height: 180px;
  overflow-y: auto;
  margin: 0 10px;
}

details[data-drupal-selector="edit-main-category-collapsible"] .card-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-height: 180px;
  overflow-y: auto;
  margin: 0 10px;
}

details[data-drupal-selector="edit-my-brand-collapsible"] .bef-checkboxes ul li {
  margin: 0 !important;
  padding: 0 !important;
}

details[data-drupal-selector="edit-my-brand-collapsible"] .form-check {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

details[data-drupal-selector="edit-my-brand-collapsible"] .form-check-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

details[data-drupal-selector="edit-my-brand-collapsible"] .form-check-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 38px !important;
  padding: 6px 4px !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-align: center !important;
  background: var(--nm-gray-100) !important;
  border: 1px solid var(--nm-gray-300) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

details[data-drupal-selector="edit-my-brand-collapsible"] .form-check-label:hover {
  background: var(--nm-gray-200) !important;
  border-color: var(--nm-gray-400) !important;
}

details[data-drupal-selector="edit-my-brand-collapsible"] .form-check-input:checked + .form-check-label {
  background: var(--nm-gray-800) !important;
  color: var(--nm-white) !important;
  border-color: var(--nm-gray-800) !important;
}

details[data-drupal-selector="edit-my-brand-collapsible"] .count-label {
  font-size: 11px !important;
  padding: 0 2px !important;
  margin-left: 2px !important;
}

/* ========================================
   CATEGORY FILTER - Flex layout with auto-width buttons
   Flattens nested hierarchy visually
   ======================================== */
details[data-drupal-selector="edit-main-category-collapsible"] .bef-checkboxes {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 10px !important;
  direction: rtl !important;
}

details[data-drupal-selector="edit-main-category-collapsible"] .card-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Flatten nested ul and li elements - display as contents to make all items flow together */
details[data-drupal-selector="edit-main-category-collapsible"] .bef-checkboxes ul,
details[data-drupal-selector="edit-main-category-collapsible"] .bef-checkboxes li {
  display: contents !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

details[data-drupal-selector="edit-main-category-collapsible"] .form-check {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

details[data-drupal-selector="edit-main-category-collapsible"] .form-check-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

details[data-drupal-selector="edit-main-category-collapsible"] .form-check-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 38px !important;
  padding: 3px 1px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: center !important;
  background: var(--nm-gray-100) !important;
  border: 1px solid var(--nm-gray-300) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

details[data-drupal-selector="edit-main-category-collapsible"] .form-check-label:hover {
  background: var(--nm-gray-200) !important;
  border-color: var(--nm-gray-400) !important;
}

details[data-drupal-selector="edit-main-category-collapsible"] .form-check-input:checked + .form-check-label {
  background: var(--nm-gray-800) !important;
  color: var(--nm-white) !important;
  border-color: var(--nm-gray-800) !important;
}

/* ========================================
   SIZE FILTER - Grid layout with uniform buttons
   Applies to both mobile and desktop
   ======================================== */
details[data-drupal-selector="edit-attribute-size-att-collapsible"] .bef-checkboxes ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 10px !important;
  list-style: none !important;
  direction: rtl !important;
}

details[data-drupal-selector="edit-attribute-size-att-collapsible"] .card-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-height: 180px;
  margin: 0 10px;
}

details[data-drupal-selector="edit-attribute-color-att-collapsible"] .card-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-height: 180px;
  overflow-y: auto;
  margin: 0 10px;
}

details[data-drupal-selector="edit-attribute-size-att-collapsible"] .bef-checkboxes ul li {
  margin: 0 !important;
  padding: 0 !important;
}

details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-check {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-check-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-check-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 38px !important;
  padding: 6px 0px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-align: center !important;
  background: var(--nm-gray-100) !important;
  border: 1px solid var(--nm-gray-300) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-check-label:hover {
  background: var(--nm-gray-200) !important;
  border-color: var(--nm-gray-400) !important;
}

details[data-drupal-selector="edit-attribute-size-att-collapsible"] .form-check-input:checked + .form-check-label {
  background: var(--nm-gray-800) !important;
  color: var(--nm-white) !important;
  border-color: var(--nm-gray-800) !important;
}

/* ========================================
   PRODUCT SIZE ATTRIBUTE - Grid layout (product page/modal)
   ======================================== */
fieldset[data-drupal-selector="edit-purchased-entity-0-attributes-attribute-size-att"] .form-radios {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 0 !important;
  direction: rtl !important;
}

fieldset[data-drupal-selector="edit-purchased-entity-0-attributes-attribute-size-att"] .form-radios .form-check {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

fieldset[data-drupal-selector="edit-purchased-entity-0-attributes-attribute-size-att"] .form-radios .form-radio {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

fieldset[data-drupal-selector="edit-purchased-entity-0-attributes-attribute-size-att"] .form-radios .form-check-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 38px !important;
  padding: 6px 4px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-align: center !important;
  background: var(--nm-gray-100) !important;
  border: 1px solid var(--nm-gray-300) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

fieldset[data-drupal-selector="edit-purchased-entity-0-attributes-attribute-size-att"] .form-radios .form-check-label:hover {
  background: var(--nm-gray-200) !important;
  border-color: var(--nm-gray-400) !important;
}

fieldset[data-drupal-selector="edit-purchased-entity-0-attributes-attribute-size-att"] .form-radios .form-radio:checked + .form-check-label {
  background: var(--nm-gray-800) !important;
  color: var(--nm-white) !important;
  border-color: var(--nm-gray-800) !important;
  min-width: 40px;
  min-height: 40px;
}

/* ========================================
   PRODUCT COLOR ATTRIBUTE - More gap between swatches
   ======================================== */
fieldset[data-drupal-selector*="attribute-color"] .form-radios {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 0 !important;
  max-width: 680px !important; /* Match sizes alignment */
}

fieldset[data-drupal-selector*="attribute-color"] .form-radios .form-check {
  margin: 0 !important;
  padding: 0 !important;
}

fieldset[data-drupal-selector*="attribute-color"] .color_field__swatch {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

fieldset[data-drupal-selector*="attribute-color"] .form-radio:checked + label .color_field__swatch {
  box-shadow: 0 0 0 3px var(--nm-white), 0 0 0 5px var(--nm-gray-800) !important;
}

/* ========================================
   PRODUCT SIZE ATTRIBUTE - Align with colors
   ======================================== */
fieldset[data-drupal-selector*="attribute-size"] {
  width: 100% !important;
}

fieldset[data-drupal-selector*="attribute-size"] .fieldset-wrapper {
  width: 95% !important;
}

fieldset[data-drupal-selector*="attribute-size"] .form-radios {
  display: grid !important;
  /* Match color swatches: 44px + 12px gap = 56px per item, fit as many as colors */
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 680px !important; /* Align end with colors row */
  margin-left: auto !important; /* Align to the right in RTL */
}

fieldset[data-drupal-selector*="attribute-size"] .form-radios .form-check-label {
  min-height: 44px !important;
}