/* ==========================================================================
   PSYCH&POTES ASBL — EASY!APPOINTMENTS 1.6 THEME OVERRIDE (V6 - STABLE FIX)
   ========================================================================== */

:root {
  --color-dark: #0a1d37;
  --color-dark-alt: #07162b;
  --color-light: #f8f7f3;
  --color-accent: #d89f22;
  --color-teal: #08695f;
  --color-danger: #ef4444;
  --font-title: "Bebas Neue", system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* 1. CONFIGURATION GLOBALE */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--color-dark) !important;
  color: var(--color-light) !important;
  font-family: var(--font-body);
  min-height: 100%;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

#header, #footer, .site-header, .site-footer, .company-name, #company-name {
  display: none !important;
}

/* Conteneur principal externe */
#main {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 15px 15px 40px 15px !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  height: auto !important;
}

/* Les rangées internes Bootstrap gardent leur hauteur naturelle (ZÉRO TROU VIDE) */
.container, .row, .wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 0 !important;
}

/* 2. MODE SPÉCIFIQUE IFRAME (Activé dans reservation.html) */
html.is-iframe, body.is-iframe {
  background: transparent !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  min-height: 0 !important;
  height: auto !important;
}

html.is-iframe #main, body.is-iframe #main {
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* CARTE PRINCIPALE */
#book-appointment-wizard {
  background: rgba(10, 29, 55, 0.96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(216, 159, 34, 0.4) !important;
  border-radius: 16px !important;
  padding: clamp(20px, 3.5vw, 36px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 10px auto 20px auto !important;
  float: none !important;
  height: auto !important;
}

/* ==========================================================================
   TITRES D'ÉTAPES (frame-title / Étape de sélection)
   ========================================================================== */
#book-appointment-wizard .frame-title,
#book-appointment-wizard h4.frame-title,
#book-appointment-wizard .step-title,
.frame-title {
  font-family: var(--font-title) !important; /* Bebas Neue */
  font-size: 1.75rem !important;             /* Taille agrandie et bien lisible */
  color: var(--color-accent) !important;     /* Doré Psych&Potes #D89F22 */
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin: 18px 0 25px 0 !important;
  opacity: 1 !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* ==========================================================================
   CADRE EXPLICATIF & TEXTE BLANC ÉCRU
   ========================================================================== */
#book-appointment-wizard #service-description,
#book-appointment-wizard .service-description,
#service-description,
.service-description {
  overflow: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
  padding: 18px 20px !important;
  margin-bottom: 25px !important;
  background: rgba(8, 105, 95, 0.16) !important;
  border-left: 4px solid var(--color-teal) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  display: block !important;
}

#book-appointment-wizard #service-description,
#book-appointment-wizard #service-description p,
#book-appointment-wizard #service-description span,
#book-appointment-wizard #service-description div,
#book-appointment-wizard .text-muted,
.text-muted {
  color: #f8f7f3 !important;
  opacity: 1 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

#book-appointment-wizard #service-description strong {
  color: var(--color-accent) !important;
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.4px !important;
}

/* ==========================================================================
   CONTENEUR DES INFOS & ANIMATION HOVER MODERNE
   ========================================================================== */
#book-appointment-wizard .service-info-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 18px 0 22px 0 !important;
  padding: 18px !important;
  background: linear-gradient(135deg, rgba(10, 29, 55, 0.7), rgba(8, 105, 95, 0.25)) !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(216, 159, 34, 0.3) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

#book-appointment-wizard .service-info-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  background: rgba(10, 29, 55, 0.75) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(248, 247, 243, 0.18) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#book-appointment-wizard .service-info-item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(216, 159, 34, 0.22), transparent) !important;
  transition: left 0.6s ease !important;
}

#book-appointment-wizard .service-info-item:hover::before {
  left: 100% !important;
}

#book-appointment-wizard .service-info-item:hover {
  background: rgba(10, 29, 55, 0.95) !important;
  border-color: var(--color-accent) !important;
  transform: translateX(6px) !important;
  box-shadow: -4px 0 16px rgba(216, 159, 34, 0.4) !important;
}

#book-appointment-wizard .service-info-label {
  display: inline-block !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--color-accent) !important;
  margin-right: 12px !important;
  min-width: 120px !important;
  padding-left: 0 !important;
}

#book-appointment-wizard .service-info-value {
  display: inline-block !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #f8f7f3 !important;
  line-height: 1.3 !important;
  text-align: right !important;
  flex: 1 !important;
  background: rgba(248, 247, 243, 0.08) !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(248, 247, 243, 0.1) !important;
}

@media (max-width: 600px) {
  #book-appointment-wizard .service-info-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  #book-appointment-wizard .service-info-value {
    text-align: left !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   CHAMPS DE SÉLECTION, CALENDRIER & VALIDATION
   ========================================================================== */
#book-appointment-wizard select.form-control,
#book-appointment-wizard input.form-control,
#book-appointment-wizard textarea.form-control {
  background: rgba(7, 22, 43, 0.95) !important;
  border: 1.5px solid rgba(216, 159, 34, 0.4) !important;
  color: var(--color-light) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  min-height: 50px !important;
  font-size: 1rem !important;
}

#book-appointment-wizard select.form-control:focus,
#book-appointment-wizard input.form-control:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(216, 159, 34, 0.3) !important;
  outline: none !important;
}

#book-appointment-wizard select.form-control option {
  background: #0a1d37 !important;
  color: #f8f7f3 !important;
}

#book-appointment-wizard .has-error input,
#book-appointment-wizard .has-error select,
#book-appointment-wizard input.is-invalid,
#book-appointment-wizard input.error {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35) !important;
  background: rgba(143, 42, 60, 0.25) !important;
}

#book-appointment-wizard .has-error .help-block,
#book-appointment-wizard .invalid-feedback,
#book-appointment-wizard label.error {
  color: #fca5a5 !important;
  font-weight: 700 !important;
}

/* CALENDRIER DARK FLATPICKR */
.flatpickr-calendar, .flatpickr-days, .dayContainer, .flatpickr-innerContainer {
  background: #07162b !important;
  border-radius: 14px !important;
}
.flatpickr-calendar {
  border: 1.5px solid rgba(216, 159, 34, 0.45) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6) !important;
  color: #f8f7f3 !important;
  margin: 0 auto 20px auto !important;
}
.flatpickr-months {
  background: #0a1d37 !important;
  border-bottom: 1px solid rgba(248, 247, 243, 0.12) !important;
  padding: 6px 0 !important;
}
.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: #0a1d37 !important;
  color: var(--color-accent) !important;
  font-family: var(--font-title) !important;
  font-size: 1.25rem !important;
}
.flatpickr-weekdays { background: #0a1d37 !important; }
span.flatpickr-weekday { color: var(--color-accent) !important; font-weight: 700 !important; }
.flatpickr-day { color: #f8f7f3 !important; border-radius: 8px !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: #486581 !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--color-accent) !important;
  color: #0a1d37 !important;
  font-weight: 800 !important;
  border-color: var(--color-accent) !important;
}

/* CRÉNEAUX HORAIRES */
#available-hours {
  max-height: 290px !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#available-hours::-webkit-scrollbar { width: 6px; }
#available-hours::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 999px; }
#available-hours::-webkit-scrollbar-track { background: rgba(10, 29, 55, 0.5); }
#available-hours .btn {
  background: rgba(10, 29, 55, 0.85) !important;
  border: 1.5px solid rgba(248, 247, 243, 0.25) !important;
  color: #f8f7f3 !important;
  border-radius: 999px !important;
  padding: 10px !important;
  font-weight: 700 !important;
  width: 100% !important;
}
#available-hours .btn.selected-hour, #available-hours .btn.active {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #0a1d37 !important;
  font-weight: 800 !important;
  transform: scale(1.02);
}

/* ALIGNEMENT CONFIRMATION */
#wizard-frame-4, #wizard-frame-4 div, #wizard-frame-4 p, #customer-details, #appointment-details {
  text-align: left !important;
}

/* BOUTONS ET NAVIGATION */
#book-appointment-wizard .btn {
  border-radius: 999px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
#book-appointment-wizard .btn-primary, #book-appointment-submit, #button-next-1, #button-next-2, #button-next-3, #button-next {
  background: var(--color-accent) !important;
  color: #0a1d37 !important;
  border: none !important;
}
#book-appointment-wizard .btn-primary:hover, #button-next-1:hover, #button-next-2:hover, #button-next-3:hover, #button-next:hover {
  background: #e6ab2c !important;
  transform: translateY(-2px);
}
#book-appointment-wizard .btn-default, #button-back-1, #button-back-2, #button-back-3, #button-back {
  background: rgba(248, 247, 243, 0.08) !important;
  color: var(--color-light) !important;
  border: 1px solid rgba(248, 247, 243, 0.25) !important;
}

/* PAGE DE SUPPRESSION / ANNULATION (Gestion compacte) */
#cancel-appointment-frame,
.booking-cancellation-frame {
  padding: 10px !important;
  text-align: center !important;
}

/* ==========================================================================
   MASQUAGE LOGO ET OPTIMISATION COMPACTE ÉTAPE 4
   ========================================================================== */
#book-appointment-wizard #header-logo,
#book-appointment-wizard .company-logo,
#book-appointment-wizard .wizard-header img,
#book-appointment-wizard img[src*="logo"] {
    display: none !important;
}

#wizard-frame-4,
#appointment-success-container {
    padding: 10px 5px !important;
}

#wizard-frame-4 h3,
#wizard-frame-4 h2,
#appointment-success-container h3,
#appointment-success-container h2 {
    font-size: 1.25rem !important;
    margin-bottom: 12px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#wizard-frame-4 .btn-success,
#wizard-frame-4 .btn-primary,
#button-next,
#book-appointment-submit {
    padding: 10px 22px !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
}

#wizard-frame-4 .btn-appointment-link,
#appointment-status-options {
    display: none !important;
}