/*
 * Styles for the Personalizaciones by Edu Fix plugin.
 *
 * The layout is based on a simple grid and uses Tailwind-inspired values. This file
 * has been reformatted for readability and now specifies a smaller font-size
 * for ingredient prices so they match the size of the ingredient names.
 */

.pbe-group {
  border: 1px solid #e5e7eb;
  padding: 12px;
  margin: 12px 0;
  border-radius: 8px;
}

.pbe-group legend {
  font-weight: 600;
}

.pbe-group .pbe-items {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pbe-group .desc {
  color: #6b7280;
  font-size: 0.9em;
  margin-left: 6px;
}

/* Style for the price suffix. Reduce its font size further to be smaller than the ingredient label. */
.pbe-group .price {
  color: #111827;
  font-weight: 600;
  margin-left: 6px;
  /* Reduce the price font size further */
  font-size: 0.8em;
}

/* Also apply the reduced font-size to WooCommerce formatted amounts */
/* Ensure WooCommerce formatted prices inherit the reduced font size */
.pbe-group .price .woocommerce-Price-amount {
  font-size: 0.8em;
}

/* Hide prices by default for groups that have a free item threshold (data-free > 0). JS will reveal them once the free items are consumed */
.pbe-group[data-free]:not([data-free="0"]) .price {
  display: none;
}

.pbe-group .pbe-help {
  color: #b91c1c;
  font-size: 0.9em;
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Style numeric quantity inputs when quantities are allowed */
/* Quantity input stripped of borders and spinners so it looks like plain text */
.pbef-qty {
  width: 2.5em;
  height: 2.5em;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 1.1em;
  font-weight: 600;
  outline: none;
  pointer-events: none; /* prevents manual editing */
  -webkit-appearance: none;
  -moz-appearance: textfield;
}
.pbef-qty::-webkit-inner-spin-button,
.pbef-qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Wrapper for quantity controls (plus, minus, input). Arrange horizontally */
.pbef-qty-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Style for plus and minus buttons */
/* Style plus and minus buttons as rounded circles for quantity controls */
.pbef-minus,
.pbef-plus {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background-color: #f3f4f6;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2em;
  line-height: 1;
  user-select: none;
  transition: background-color 0.2s;
}
.pbef-minus:hover,
.pbef-plus:hover {
  background-color: #e5e7eb;
}

/* Label section for quantity items. Allow it to grow and align items nicely */
.pbef-item-label {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* For non-quantity groups, make label and price align with space between */
.pbe-group .pbe-items li label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Responsive adjustments for small screens */
@media (max-width: 480px) {
  /* Use a single column layout on narrow screens */
  .pbe-group .pbe-items {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  /* Reduce the width of quantity inputs on mobile */
  .pbef-qty {
    width: 2.2em;
    height: 2.2em;
    font-size: 1em;
  }
  .pbef-minus,
  .pbef-plus {
    width: 2.2em;
    height: 2.2em;
    font-size: 1em;
  }
}

/* Styles for the custom totals table */
.pbef-totals {
  margin-top: 12px;
  margin-bottom: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background-color: #f9fafb;
}

.pbef-total-table {
  width: 100%;
  border-collapse: collapse;
}
.pbef-total-table th {
  text-align: left;
  padding: 4px 8px;
}
.pbef-total-table td {
  text-align: right;
  padding: 4px 8px;
}
.pbef-total-table tr:not(:last-child) td,
.pbef-total-table tr:not(:last-child) th {
  border-bottom: 1px solid #e5e7eb;
}