/* Keep your hidden fields as they were */
.js-form-item-breakfast-time.form-disabled,
.js-form-item-mid-morning-snack-time-of-service.form-disabled,
.js-form-item-lunch-time-of-service.form-disabled,
.js-form-item-dinner-time-of-service.form-disabled,
.js-form-item-mid-afternoon-time-of-service.form-disabled,
.js-form-item-other-time-of-service.form-disabled {
  display: none !important;
}

/* 1. THE WRAPPER: Flexbox handles centering single cards much better than Grid */
.menu-grid-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center; /* This centers categories with only 1 or 2 cards */
  gap: 20px;
  width: 100%;
}

/* 2. THE CARD: Must be a vertical Flex column to prevent overlapping inside */
div.menu-card-custom {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #ddd; 
  padding: 15px;
  border-radius: 8px;
  box-sizing: border-box;
  flex: 0 0 calc(33.333% - 15px);
  max-width: calc(33.333% - 15px);
}

div.menu-card-custom .js-form-type-processed-text {
  flex-grow: 1;
}

div.menu-card-custom .form-type-number {
  margin-top: 15px;
}

/* Tablet Layout: 2 across */
@media (max-width: 1116px) and (min-width: 600px) {
  div.menu-card-custom {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
}

/* Mobile Layout: 1 across */
@media (max-width: 599px) {
  div.menu-card-custom {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Your sticky cart CSS (You can leave this here in case you ever move it back to the side) */
@media (min-width: 768px) {
  .cart-sticky-container {
    align-self: flex-start; 
    height: max-content;
    background: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
  }
}

div.menu-card-custom .js-form-type-processed-text {
  flex-grow: 1;
}

div.webform-multiple-add {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 15px; 
}

div.webform-multiple-add .form-item {
  display: flex;
  align-items: center;
  margin: 0 !important;
  gap: 8px;
}

th.webform-multiple-table--selected_item,
th.webform-multiple-table--quantity,
th.webform-multiple-table--operations {
  text-align: center !important;
}

table.webform-multiple-table tbody td {
  vertical-align: middle !important;
}

table.webform-multiple-table tbody td fieldset,
table.webform-multiple-table tbody td .form-item {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding-top: 16px !important;
  padding-bottom: 0 !important;
  border: none !important;
}

table.webform-multiple-table tbody td input.form-number,
table.webform-multiple-table tbody td select.form-select {
  margin: 0 auto !important; 
  display: block;
}

div.webform-multiple-add .field-suffix {
  white-space: nowrap !important;
  margin-left: 5px;
}

/* ==========================================
   2. FIX ROW VERTICAL ALIGNMENT (UPDATED)
   ========================================== */
/* Nuke the invisible legend that pushes the row height down */
tr[data-drupal-selector*="-items-"] fieldset legend {
  display: none !important;
}

/* Force the table cells to middle alignment using a stronger attribute selector */
tr[data-drupal-selector*="-items-"] > td {
  vertical-align: middle !important;
}

/* Strip out Drupal's default margins from the wrappers */
tr[data-drupal-selector*="-items-"] td > div,
tr[data-drupal-selector*="-items-"] td > fieldset,
tr[data-drupal-selector*="-items-"] td .fieldset-wrapper,
tr[data-drupal-selector*="-items-"] td .form-item {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Kill the 16px bottom margin on the input and ensure it fills the space smoothly */
tr[data-drupal-selector*="-items-"] td input.form-number,
tr[data-drupal-selector*="-items-"] td select.form-select {
  margin: 0 auto !important;
  width: 100%; 
  box-sizing: border-box;
}

#edit-service-request-details > summary {
  font-size: 1.25rem !important;
  font-weight: bold; 
  color: #FF671F;
}