/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
:root {
  --primary: #8b0020;
  --light-pink: #fdecec;
  --border-pink: #f3caca;
  --text-dark: #2b2b2b;
}
.quantity-card {
  /*background: #fff; border-radius: 18px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); padding: 24px;*/
  margin-bottom: 20px;
}
.quantity-card h2 {
  text-align: center;
  color: var(--primary);
  margin-bottom: 20px;
  font-size: 22px;
}
.mqb-option {
  position: relative;
  border: 2px solid var(--border-pink);
  background: var(--light-pink);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.mqb-option input {
  margin-top: 4px;
  accent-color: var(--primary);
}
.option-content {
  flex: 1;
}
.option-title {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: var(--text-dark);
}
.price {
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
}
.price span {
  font-size: 14px;
  font-weight: 400;
  color: #666;
}
.strike {
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
  margin-top: 2px;
}
.badge {
  position: absolute;
  top: -12px;
  right: 14px;
  background: var(--primary);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}
.discount-text {
  color: var(--primary);
  font-weight: 700;
  font-size: 20px;
}

/* Selected State */
.mqb-option.selected {
  background: #fff;
  border-color: var(--primary);
}

.mqb-summary {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
  font-size: 16px;
}
.mqb-add-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.mqb-add-btn:hover {
  opacity: 0.9;
}

.divider-container {
  display: flex;
  align-items: center; /* Vertically centers text and lines */
  text-align: center;
  width: 100%;
}

.divider-container::before,
.divider-container::after {
  content: "";
  flex: 1; /* Lines take up remaining space */
  border-bottom: 2px solid var(--primary); /* Line color and thickness */
  margin: 0 10px; /* Space between text and lines */
}