/**
 * Styles for the Repas de soutien reservation page
 * All visual presentation lives here — no inline styles in the template.
 */

/* ============================================================
   FLYER BASE
   ============================================================ */
.repas-flyer {
     margin: 0 auto;
     color: #1a1a1a;
     line-height: 1.6;
}

/* ============================================================
   1. INTRO
   ============================================================ */
.repas-intro {
     padding: 28px 32px;
     text-align: center;
     background: #fff;
}
.repas-intro__greeting {
     font-weight: 700;
     margin-bottom: 10px;
}
.repas-intro__teaser {
     margin-bottom: 18px;
}
.repas-intro__snowflake {
     margin: 18px auto;
     width: 64px;
}
.repas-intro__snowflake img {
     width: 64px;
     height: auto;
     display: block;
}

/* ============================================================
   2. DATE / HEURE / LIEU
   ============================================================ */
.repas-date-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     background: #fff;
     border-top: 1px solid #e0e0e0;
     border-bottom: 1px solid #e0e0e0;
}
.repas-date-cell {
     padding: 16px 8px;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
     color: #0a02ab;
     font-weight: 700;
     text-transform: uppercase;
}
.repas-date-cell--bordered {
     border-left: 1px solid #e0e0e0;
     border-right: 1px solid #e0e0e0;
}
.repas-date-cell__note {
     font-weight: 400;
     text-transform: none;
     color: #0a02ab;
}

/* ============================================================
   3. PROGRAMME (green section)
   ============================================================ */
.repas-programme {
     background-color: #105e27;
     padding: 24px 28px;
     color: #fff;
}
.repas-programme p {
     margin-bottom: 10px;
}
.repas-programme ul {
     list-style: disc;
     padding-left: 18px;
     margin: 0;
     line-height: 1.9;
}

/* ============================================================
   4. PRÉSENCE
   ============================================================ */
.repas-presence {
     padding: 28px 32px;
     text-align: center;
     background: #fff;
}
.repas-people-icons {
     display: flex;
     justify-content: center;
     align-items: flex-end;
     gap: 8px;
     margin-bottom: 18px;
}
.repas-people-icons img:nth-child(1) { height: 56px; width: auto; }
.repas-people-icons img:nth-child(2) { height: 66px; width: auto; }
.repas-people-icons img:nth-child(3) { height: 56px; width: auto; }
.repas-presence__heading {
     font-weight: 700;
     margin-bottom: 6px;
}

/* ============================================================
   5. AMBIANCE
   ============================================================ */
.repas-ambiance {
     padding: 0 32px 28px;
     text-align: center;
     background: #fff;
}
.repas-glass-icons {
     display: flex;
     justify-content: center;
     align-items: flex-end;
     gap: 6px;
     margin-bottom: 16px;
}
.repas-glass-icons img          { height: 30px; width: auto; }
.repas-glass-icons img:nth-child(1) { transform: rotate(20deg); }
.repas-glass-icons img:nth-child(2) { height: 36px; }
.repas-glass-icons img:nth-child(3) { transform: rotate(-20deg); }

/* ============================================================
   6. TARIF BANNER (gold)
   ============================================================ */
.repas-tarif {
     background-color: #eba700;
     padding: 18px 24px;
}
.repas-tarif__inner {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
}
.repas-tarif__fork {
     height: 44px;
     width: auto;
}
.repas-tarif__text {
     text-align: center;
}
.repas-tarif__label {
     font-weight: 700;
     color: #fff;
     line-height: 1.4;
     margin: 0;
}
.repas-tarif__price {
     font-weight: 700;
     color: #105e27;
     line-height: 1.4;
     margin: 0;
}

/* ============================================================
   7. OPTIONS BOX (gold border)
   ============================================================ */
.repas-options {
     border: 4px solid #eba700;
     padding: 22px 36px;
     text-align: center;
     background: #fff;
}
.repas-options p {
     margin-bottom: 10px;
}
.repas-options ul {
     list-style: disc;
     display: inline-block;
     text-align: left;
     padding-left: 18px;
     margin: 0;
     line-height: 2;
}

/* ============================================================
   8. BOOKING SECTION
   ============================================================ */
.repas-booking {
     padding: 24px 20px 28px;
     background: #fff;
}
.repas-booking__intro {
     text-align: center;
     margin-bottom: 20px;
}
.repas-booking-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
}

/* Cards */
.repas-booking-card {
     padding: 20px 16px;
     background: #fff;
}
.repas-booking-card--blue  { border: 2px solid #0a02ab; }
.repas-booking-card--green { border: 2px solid #105e27; }
.repas-booking-card--gold  { border: 2px solid #eba700; background: #fffdf4; margin-top: 16px; }

.repas-booking-card__title {
     font-weight: 700;
     margin-bottom: 6px;
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 0.04em;
}
.repas-booking-card--blue  .repas-booking-card__title { color: #0a02ab; }
.repas-booking-card--green .repas-booking-card__title { color: #105e27; }
.repas-booking-card--gold  .repas-booking-card__title { color: #eba700; }

.repas-booking-card__subtitle,
.repas-booking-card__desc {
     text-align: center;
     margin-bottom: 12px;
     color: #555;
}
.repas-booking-card__desc { margin-bottom: 14px; }

.repas-booking-card__price {
     text-align: center;
     font-weight: 700;
     color: #eba700;
     margin-bottom: 14px;
}

.repas-booking-card__qty-wrap {
     margin-bottom: 12px;
     text-align: center;
}
.repas-booking-card__qty-label {
     display: block;
     margin-bottom: 5px;
}

/* Booking buttons */
.repas-booking-btn {
     display: block;
     width: 100%;
     font-weight: 700;
     text-transform: uppercase;
     padding: 12px 8px;
     border: none;
     cursor: pointer;
     letter-spacing: 0.05em;
     color: #fff;
     transition: opacity 0.2s;
}
.repas-booking-btn:hover  { opacity: 0.88; }
.repas-booking-btn:active { opacity: 0.75; }
.repas-booking-btn--blue  { background-color: #0a02ab!important; }
.repas-booking-btn--green { background-color: #105e27!important; }
.repas-booking-btn--gold  { background-color: #eba700!important; }

/* Status messages */
.repas-booking-card__sold-out {
     text-align: center;
     color: #c0392b;
     font-weight: 700;
}
.repas-booking-card__unconfigured {
     text-align: center;
     color: #c0392b;
     border: 1px dashed #c0392b;
     padding: 10px;
}
.repas-booking-card__soon {
     text-align: center;
     color: #555;
}
.repas-booking-additional {
     margin-top: 16px;
     padding: 14px;
     background: #f5f5f5;
}

/* ============================================================
   DONATION PRESETS & AMOUNT INPUT
   ============================================================ */
.donation-presets {
     display: flex;
     justify-content: center;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 14px;
}
.donation-preset-btn {
     padding: 8px 16px;
     border: 2px solid #eba700;
     background: #fff;
     color: #eba700;
     font-weight: 700;
     cursor: pointer;
     border-radius: 4px;
     transition: background 0.15s, color 0.15s;
}
.donation-preset-btn.active,
.donation-preset-btn:hover {
     background: #eba700;
     color: #fff;
}
.repas-donation__amount-wrap {
     text-align: center;
     margin-bottom: 16px;
}
.repas-donation__amount-label {
     display: block;
     margin-bottom: 6px;
}
.donation-amount-input {
     width: 120px;
     text-align: center;
     font-weight: 700;
     color: #eba700;
     border: 2px solid #eba700;
     border-radius: 4px;
     padding: 8px;
}

/* ============================================================
   10. DÉLAI
   ============================================================ */
.repas-delay {
     padding: 14px 32px;
     text-align: center;
     background: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
}
.repas-delay img { height: 22px; width: auto; }
.repas-delay__text { font-weight: 700; margin: 0; }

/* ============================================================
   11. LIEU
   ============================================================ */
.repas-location {
     padding: 0 32px 28px;
     text-align: center;
     background: #fff;
}

/* ============================================================
   12. CLOSING (blue)
   ============================================================ */
.repas-closing {
     background-color: #0a02ab;
     padding: 36px 32px;
     text-align: center;
     position: relative;
     overflow: hidden;
}
.repas-closing__star {
     position: absolute;
     height: auto;
}
.repas-closing__star--tl-l { top: 14px;    left: 14px;   width: 26px; }
.repas-closing__star--tl-s { top: 8px;     left: 52px;   width: 16px; }
.repas-closing__star--br-l { bottom: 14px; right: 14px;  width: 26px; }
.repas-closing__star--br-s { bottom: 8px;  right: 52px;  width: 16px; }
.repas-closing__text {
     font-weight: 700;
     color: #fff;
     margin-bottom: 18px;
     line-height: 1.65;
}
.repas-closing__tagline {
     font-weight: 700;
     color: #fff;
     margin: 0;
}

/* ============================================================
   QUANTITY SELECTOR
   ============================================================ */

.meal-booking-product-display .quantity {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     margin: 0 auto;
     max-width: 200px;
}

.meal-booking-product-display .quantity .screen-reader-text {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0,0,0,0);
     white-space: nowrap;
     border: 0;
}

.meal-booking-product-display .quantity input.qty {
     width: 80px;
     height: 50px;
     text-align: center;
     font-weight: bold;
     border: 2px solid #e5e7eb;
     border-radius: 8px;
     padding: 10px;
     -moz-appearance: textfield;
     background: #fff;
     color: #1f2937;
}

.meal-booking-product-display .quantity .qty-btn {
     width: 40px;
     height: 40px;
     border: 2px solid #e5e7eb;
     background: #fff;
     color: #374151;
     border-radius: 6px;
     cursor: pointer;
     font-size: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     line-height: 1;
     padding: 0;
}
.meal-booking-product-display .quantity .qty-btn:hover {
     background: #f3f4f6;
     border-color: #0a02ab;
     color: #0a02ab;
}

/* Loading state */
.repas-booking-btn.loading {
     opacity: 0.7;
     cursor: wait;
}

/* Responsive */
@media (max-width: 640px) {
     .repas-booking-grid { grid-template-columns: 1fr; }
     .repas-date-grid    { grid-template-columns: 1fr; }
     .repas-date-cell--bordered { border-left: none; border-right: none; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
}