/* ===== CaniPlus : fenêtre de réservation et modales partagées =====
   Styles de la fenêtre de réservation sans compte (cours privé à domicile,
   coaching en visio) et de la coquille de modale qu'elle partage avec la
   modale d'achat de l'accueil. Sortis de accueil.css pour être inclus par
   les pages de prestation autant que par l'accueil :

     <link rel="stylesheet" href="/assets/booking.css" />
     <script src="/assets/booking.js" defer></script>

   Les variables (--r-*, --sh-*, --field-bg, --ring, --amber…) viennent de
   style.css, chargé par toutes les pages. Le comportement et le HTML de la
   fenêtre vivent dans booking.js. */

.buy-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,20,30,0.55);
  display: none; align-items: center; justify-content: center;
  z-index: 2000; padding: 16px;
  animation: bmFade 0.2s ease-out;
}
.buy-modal-backdrop.is-open { display: flex; }
@keyframes bmFade { from { opacity: 0; } to { opacity: 1; } }
.buy-modal {
  background: white; border-radius: var(--r-md); width: 100%; max-width: 460px;
  padding: 32px 28px 24px; box-shadow: var(--sh-modal);
  position: relative;
  animation: bmSlide 0.25s cubic-bezier(0.32,0.72,0,1);
}
@keyframes bmSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.buy-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 20px;
  color: var(--ink-soft); display: flex; align-items: center; justify-content: center;
}
.buy-modal-close:hover { background: var(--cyan-light); color: var(--cyan-dark); }
.buy-modal h3 {
  font-size: 22px; margin: 0 0 8px; line-height: 1.2;
}
.buy-modal-sub {
  font-size: 14px; color: var(--ink-soft); margin: 0 0 22px; line-height: 1.6;
}
.buy-modal-price {
  background: var(--cyan-light); border-radius: var(--r-sm);
  padding: 12px 16px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.buy-modal-price-label { font-size: 13px; color: var(--cyan-dark); font-weight: 500; }
.buy-modal-price-amount {
  font-size: 26px; font-weight: 700; color: var(--ink);
  font-family: 'Playfair Display', serif;
}
.buy-modal label {
  display: block; font-size: 13px; color: var(--ink); font-weight: 500;
  margin-bottom: 6px;
}
.buy-modal input[type=email] {
  width: 100%; padding: 12px 14px; font-size: 15px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; color: var(--ink);
  background: var(--field-bg); transition: border-color .2s, background .2s;
}
.buy-modal input[type=email]:focus {
  outline: none; border-color: var(--bleu-texte); background: white;
  box-shadow: var(--ring);
}
/* ── Fenêtre de réservation ──────────────────────────────────────────────
   Elle reprend l'habillage de la modale d'achat, mais porte un formulaire
   bien plus long : trois créneaux, quatre champs et un mot libre. D'où la
   largeur un peu plus grande et, surtout, le défilement interne — sans lui
   le bouton d'envoi passait sous le bas de l'écran sur un téléphone. */
.book-modal {
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* La modale d'achat ne stylait que le champ email : ici il y a du texte, du
   téléphone, des dates, des listes et une zone de texte. */
.book-modal input[type=text],
.book-modal input[type=tel],
.book-modal input[type=email],
.book-modal input[type=date],
.book-modal select,
.book-modal textarea {
  width: 100%; padding: 12px 14px; font-size: 15px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; color: var(--ink);
  background: var(--field-bg); transition: border-color .2s, background .2s;
  margin-bottom: 14px;
}
.book-modal textarea { resize: vertical; min-height: 70px; }
.book-modal input:focus, .book-modal select:focus, .book-modal textarea:focus {
  outline: none; border-color: var(--bleu-texte); background: white;
  box-shadow: var(--ring);
}
.book-slots { border: none; padding: 0; margin: 0 0 18px; }
.book-slots legend {
  font-size: 13px; font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 4px;
}
.book-hint { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
/* Une ligne par créneau : numéro, date, puis les deux heures. Sur un écran
   étroit la ligne se replie au lieu de déborder. */
.book-slot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;
}
.book-slot-num {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cyan-light); color: var(--cyan-dark);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.book-slot .book-date { flex: 1 1 140px; width: auto; margin-bottom: 0; }
.book-slot select { flex: 0 1 96px; width: auto; margin-bottom: 0; }
.book-slot-de, .book-slot-a { font-size: 13px; color: var(--ink-soft); }
.book-fee {
  font-size: 13px; line-height: 1.5; margin: -6px 0 14px;
  color: var(--ink-soft); min-height: 18px;
}
.book-fee.is-ok {
  background: var(--cyan-light); color: var(--ink);
  padding: 10px 12px; border-radius: var(--r-sm);
}
.book-fee.is-warn {
  background: var(--amber-soft); color: var(--amber);
  padding: 10px 12px; border-radius: var(--r-sm);
}
.book-optional { font-weight: 400; color: var(--ink-soft); }
.book-done { text-align: center; padding: 8px 0; }
.book-done h4 { font-size: 20px; margin: 0 0 10px; font-family: 'Playfair Display', serif; }
.book-done p { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin: 0; }

.buy-modal-submit {
  width: 100%; padding: 14px; margin-top: 16px;
  background: var(--cyan); color: white; border: none; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .2s, transform .15s; font-family: inherit;
}
.buy-modal-submit:hover { background: var(--cyan-dark); }
.buy-modal-submit:active { transform: scale(0.98); }
.buy-modal-submit:disabled { opacity: 0.6; cursor: wait; }
.buy-modal-feedback {
  margin-top: 12px; font-size: 13px; text-align: center;
  min-height: 18px;
}
.buy-modal-feedback.is-error { color: #b91c1c; }
.buy-modal-feedback.is-info { color: var(--ink-soft); }
.buy-modal-note {
  font-size: 12px; color: var(--ink-soft); margin: 14px 0 0;
  text-align: center; line-height: 1.5;
}