/* ==========================================================
   Arz-Grafik – OS Services Booking – Vue calendrier
   Palette : nuances de #004741 (vert du site)
   ========================================================== */
:root {
  --arz-vert:        #004741;  /* couleur du site */
  --arz-vert-fonce:  #00332f;  /* survol */
  --arz-vert-moyen:  #3d7a73;  /* textes secondaires */
  --arz-vert-doux:   #9fc1bc;  /* bordures actives */
  --arz-vert-clair:  #e3eeec;  /* fonds légers */
  --arz-vert-pale:   #f4f8f7;  /* fonds très légers */
  --arz-bord:        #dbe6e4;  /* traits */
  --arz-texte:       #504b46;  /* texte du site */
  --arz-muet:        #b9c6c4;  /* jours indisponibles */
  --arz-rayon:       8px;
  --arz-police:      var(--font-family-jost, "Jost", sans-serif);
  --arz-police-titre: var(--font-family-Rufina, "Rufina", serif);
}

.com-osservicesbooking .osb-calendarview-toolbar,
.com-osservicesbooking .apptable,
.com-osservicesbooking #osbCalMonthView,
.com-osservicesbooking #osbCalListView {
  font-family: var(--arz-police);
  color: var(--arz-texte);
}

/* ---------- Boutons « Par mois / Par liste » ---------- */
.com-osservicesbooking .osb-calendarview-toolbar { padding: 0 0 4px; margin-bottom: 12px; }
.com-osservicesbooking .osb-view-btn {
  background: transparent;
  border: 1px solid var(--arz-vert-doux);
  color: var(--arz-vert);
  font-weight: 500;
  padding: 6px 16px;
  transition: background .15s, color .15s, border-color .15s;
}
.com-osservicesbooking .osb-view-btn:hover {
  background: var(--arz-vert-clair);
  border-color: var(--arz-vert);
  color: var(--arz-vert);
}
.com-osservicesbooking .osb-view-btn.osb-view-btn-active {
  background: var(--arz-vert);
  border-color: var(--arz-vert);
  color: #fff;
}

/* ---------- En-tête du mois (flèches, titre, sélecteurs) ---------- */
.com-osservicesbooking .apptable {
  background: #fff;
  border: 1px solid var(--arz-bord) !important;
  border-radius: var(--arz-rayon);
  margin-bottom: 14px;
}
.com-osservicesbooking td.calendar-left-arrow,
.com-osservicesbooking td.calendar-right-arrow,
.com-osservicesbooking td.calendar-center-arrow { padding: 12px 14px 6px !important; vertical-align: middle; }
.com-osservicesbooking td.calendar-center-arrow {
  font-family: var(--arz-police-titre);
  font-weight: 400;
  font-size: 1.5em;
  color: var(--arz-vert);
  white-space: nowrap;
}
.com-osservicesbooking .apptable .applink { color: var(--arz-vert); }
.com-osservicesbooking .apptable .applink:hover { color: var(--arz-vert-moyen); }
.com-osservicesbooking .apptable .applink svg { width: 22px; height: 22px; }

.com-osservicesbooking td.calendar-heading1 {
  background: var(--arz-vert-pale);
  border-top: 1px solid var(--arz-bord);
  padding: 10px !important;
}
.com-osservicesbooking td.calendar-heading1 .input-append {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.com-osservicesbooking td.calendar-heading1 .form-select {
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  color: var(--arz-texte);
  font-family: var(--arz-police);
  margin: 0;
}
.com-osservicesbooking td.calendar-heading1 .form-select:focus {
  border-color: var(--arz-vert);
  box-shadow: 0 0 0 .2rem rgba(0, 71, 65, .15);
}
.com-osservicesbooking td.calendar-heading1 .btn.gobutton {
  background: transparent;
  border: 1px solid var(--arz-vert);
  border-radius: var(--arz-rayon);
  color: var(--arz-vert);
  font-family: var(--arz-police);
  padding: 6px 16px;
  margin: 0;
}
.com-osservicesbooking td.calendar-heading1 .btn.gobutton:hover {
  background: var(--arz-vert);
  color: #fff;
}

/* ---------- Grille : jours de la semaine ---------- */
.com-osservicesbooking .header_calendarview {
  background: var(--arz-vert);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .78em;
  padding: 10px 3px;
}
.com-osservicesbooking .header_calendarview:first-child { border-top-left-radius: var(--arz-rayon); }
.com-osservicesbooking .header_calendarview:last-child  { border-top-right-radius: var(--arz-rayon); border-right: 0; }

/* ---------- Cases des jours ---------- */
.com-osservicesbooking .calendarview_td_date { padding: 3px !important; }
.com-osservicesbooking .calendarview-div-rounded {
  background: #fff;
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  margin: 0;
  padding: 8px 8px 10px;
  box-sizing: border-box;
  min-height: 124px;
}
.com-osservicesbooking .calendarview-div-rounded:not(.disabled):hover {
  border-color: var(--arz-vert);
  box-shadow: 0 4px 14px rgba(0, 71, 65, .12);
}
.com-osservicesbooking .calendarView-date-num {
  color: var(--arz-vert);
  font-weight: 600;
  font-size: 15px;
}
.com-osservicesbooking .calendarView-from-time {
  color: var(--arz-vert-moyen);
  font-weight: 500;
  font-size: .72em;
  margin-bottom: 6px;
}

/* Jours non réservables : effacés */
.com-osservicesbooking .calendarview_td_date .calendarview-div-rounded.disabled {
  background: rgba(255, 255, 255, .35);
  border-color: transparent;
}
.com-osservicesbooking .calendarview_td_date .disabled .calendarView-date-num {
  color: var(--arz-muet);
  font-weight: 400;
}

/* Aujourd'hui */
.com-osservicesbooking .calendarview-div-rounded.current_date {
  border: 2px solid var(--arz-vert);
}

/* Lien vers les créneaux du jour */
.com-osservicesbooking .calendarView-employees .calendarView-employee a,
.com-osservicesbooking .osb-calview-emp-link {
  background: var(--arz-vert-clair);
  border: 1px solid transparent;
  border-radius: 20px;
  color: var(--arz-vert);
  font-size: .78em;
  font-weight: 500;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.com-osservicesbooking .calendarView-employees .calendarView-employee a:hover,
.com-osservicesbooking .osb-calview-emp-link:hover {
  background: var(--arz-vert);
  border-color: var(--arz-vert);
  color: #fff;
}

/* ---------- Vue « Par liste » ---------- */
.com-osservicesbooking .osb-calview-list-day {
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  box-shadow: none;
  margin-bottom: 10px;
}
.com-osservicesbooking .osb-calview-list-day-header {
  background: var(--arz-vert);
  padding: 9px 14px;
}
.com-osservicesbooking .osb-calview-list-day-name { color: #fff; font-weight: 600; }
.com-osservicesbooking .osb-calview-list-day-time { color: var(--arz-vert-doux); }
.com-osservicesbooking .osb-calview-list-day-employees { padding: 10px 14px; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .com-osservicesbooking .calendarview-div-rounded { min-height: 0; }
  .com-osservicesbooking td.calendar-center-arrow { font-size: 1.25em; }
}

/* ==========================================================
   Arz-Grafik – OS Services Booking – Page de réservation
   ========================================================== */

/* ---------- Typo générale du composant ---------- */
.com-osservicesbooking #osbcontainer,
.com-osservicesbooking .osb-progress-container {
  font-family: var(--arz-police);
  color: var(--arz-texte);
}

/* ---------- Barre d'étapes 1-2-3 ---------- */
.com-osservicesbooking .osb-progress-container {
  --osb-progress-primary: var(--arz-vert);
  --osb-progress-primary-dark: var(--arz-vert-fonce);
  --osb-progress-light: var(--arz-vert-clair);
  --osb-step-size: 52px;
  background: #fff;
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  box-shadow: none;
  padding: 20px 16px 14px;
  margin-bottom: 24px;
}
.com-osservicesbooking .osb-progress-steps::before { background: var(--arz-bord); }
.com-osservicesbooking .osb-step-circle {
  background: #fff;
  border: 2px solid var(--arz-bord);
}
.com-osservicesbooking .osb-step-circle .step-icon { color: var(--arz-muet); }
.com-osservicesbooking .osb-step-circle .step-number { background: var(--arz-bord); color: var(--arz-vert-moyen); }
.com-osservicesbooking .osb-step-title { color: var(--arz-vert-moyen); font-weight: 500; }
.com-osservicesbooking .osb-progress-step.current .osb-step-circle {
  border-color: var(--arz-vert);
  box-shadow: 0 0 0 4px var(--arz-vert-clair);
}
.com-osservicesbooking .osb-progress-step.completed .osb-step-circle,
.com-osservicesbooking .osb-progress-step.completed .osb-step-circle { box-shadow: none; }

/* ---------- Bloc « Séance … » ---------- */
.com-osservicesbooking .div_service_details {
  background: #fff;
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  box-shadow: none;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.com-osservicesbooking .div_service_details:hover { box-shadow: none; }
.com-osservicesbooking .div_service_name {
  font-family: var(--arz-police-titre);
  font-weight: 400;
  font-size: 1.6em;
  color: var(--arz-vert);
  padding-bottom: 8px;
}
.com-osservicesbooking .div_service_information_box,
.com-osservicesbooking .div_service_information_box_phone {
  background: var(--arz-vert-pale);
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  color: var(--arz-vert);
  margin-top: 12px;
}

/* ---------- Message « Vos réservations ont bien été prises en compte » ---------- */
.com-osservicesbooking .msgDivInfoBox {
  background: var(--arz-vert-pale);
  border: 1px solid var(--arz-vert-doux);
  border-left: 4px solid var(--arz-vert);
  border-radius: var(--arz-rayon);
  color: var(--arz-texte);
  font-size: .9em;
  padding: 12px 16px;
  margin: 0 0 20px;
}
.com-osservicesbooking .msgDivInfoBox a.btn {
  display: inline-block;
  margin-top: 8px;
  background: var(--arz-vert);
  border: 1px solid var(--arz-vert);
  border-radius: var(--arz-rayon);
  color: #fff;
  padding: 6px 18px;
}
.com-osservicesbooking .msgDivInfoBox a.btn:hover { background: var(--arz-vert-fonce); }

/* ---------- Panier « Information de réservation » ---------- */
.com-osservicesbooking #cartbox.bookingformdiv {
  background: #fff;
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  overflow: hidden;
  padding-bottom: 14px;
  margin: 0 0 20px;
}
.com-osservicesbooking .calendar-header-modern,
.com-osservicesbooking .mobile-cart-header {
  --calendar-primary: var(--arz-vert);
  --calendar-primary-dark: var(--arz-vert);
  background: var(--arz-vert);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  padding: 14px 16px;
}
.com-osservicesbooking .calendar-header-text {
  font-family: var(--arz-police-titre);
  font-weight: 400;
  font-size: 1.15em;
  color: #fff;
}
.com-osservicesbooking #cartdiv { padding: 14px 14px 0; }
.com-osservicesbooking .osb-cart-removeall-btn {
  color: var(--arz-vert-moyen);
  border-color: var(--arz-bord);
  border-radius: 20px;
}
.com-osservicesbooking .osb-cart-removeall-btn:hover {
  background: #a33a2c;
  border-color: #a33a2c;
  color: #fff;
}
.com-osservicesbooking .osb-cart-service-card {
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  box-shadow: none;
}
.com-osservicesbooking .osb-cart-service-header {
  background: var(--arz-vert-clair);
  border-bottom: 1px solid var(--arz-bord);
  color: var(--arz-vert);
  font-weight: 600;
}
.com-osservicesbooking .osb-cart-booking-time { color: var(--arz-texte); }
.com-osservicesbooking .osb-cart-booking-time svg { color: var(--arz-vert-moyen); }
.com-osservicesbooking .osb-cart-extra-info {
  background: var(--arz-vert-pale);
  border-top: 1px solid var(--arz-bord);
  color: var(--arz-vert-moyen);
}
.com-osservicesbooking .osb-cart-extra-info strong { color: var(--arz-vert); }
.com-osservicesbooking .osb-cart-checkout-row {
  padding-top: 16px !important;
  text-align: center;
}

/* ---------- Boutons principaux (Validez / Validez votre créneau) ---------- */
.com-osservicesbooking .addtocartbtn,
.com-osservicesbooking a#cartCheckoutBtn.addtocartbtn,
.com-osservicesbooking input#addtocartbtn.addtocartbtn {
  display: inline-block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  background: var(--arz-vert) !important;
  border: 1px solid var(--arz-vert) !important;
  border-radius: var(--arz-rayon);
  box-shadow: none;
  color: #fff !important;
  font-family: var(--arz-police);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 11px 28px !important;
  text-decoration: none;
  white-space: normal;
  transform: none;
}
.com-osservicesbooking .addtocartbtn:hover {
  background: var(--arz-vert-fonce) !important;
  border-color: var(--arz-vert-fonce) !important;
  box-shadow: 0 4px 14px rgba(0, 71, 65, .2);
  filter: none;
  transform: none;
}
.com-osservicesbooking .addtocartbtn:focus { box-shadow: 0 0 0 3px var(--arz-vert-doux); }

/* ---------- Carte de la praticienne ---------- */
.com-osservicesbooking .employee-card {
  background: #fff;
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  box-shadow: none;
  align-items: center;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.com-osservicesbooking .employee-thumbnail {
  width: 56px;
  height: 56px;
  background: var(--arz-vert-clair);
  color: var(--arz-vert-moyen);
}
.com-osservicesbooking .employee-name {
  color: var(--arz-vert);
  font-weight: 600;
  margin-bottom: 4px;
}
.com-osservicesbooking .contact-icon,
.com-osservicesbooking a.employee_link { color: var(--arz-vert-moyen); }
.com-osservicesbooking a.employee_link:hover { color: var(--arz-vert); }

/* ---------- Encadré « Heure non disponible » (y compris en mode sombre) ---------- */
.com-osservicesbooking .osb-info-card-wrapper { margin: 0 0 16px; }
.com-osservicesbooking .osb-info-card {
  background: var(--arz-vert-pale);
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  box-shadow: none;
}
.com-osservicesbooking .osb-info-row { border-color: var(--arz-bord); padding: 12px 16px; }
.com-osservicesbooking .osb-info-icon,
.com-osservicesbooking .osb-info-unavailable .osb-info-icon {
  color: var(--arz-vert-moyen);
  width: 24px;
  height: 24px;
  margin-right: 12px;
}
.com-osservicesbooking .osb-info-label { color: var(--arz-vert); font-size: 14px; }
.com-osservicesbooking .osb-info-value,
.com-osservicesbooking .osb-busy-number,
.com-osservicesbooking .osb-time-separator,
.com-osservicesbooking .osb-date { color: var(--arz-vert-moyen); }
.com-osservicesbooking .osb-time-start,
.com-osservicesbooking .osb-time-end { color: var(--arz-texte); }
.com-osservicesbooking .osb-busy-item { padding: 4px 0; }

/* ---------- Créneaux ---------- */
.com-osservicesbooking .timeslotdiv {
  gap: 8px;
  padding: 0;
  margin-bottom: 8px;
}
.com-osservicesbooking .timeslotdiv .divtimeslots {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 44px;
  padding: 0 !important;
  border-radius: var(--arz-rayon);
  font-size: 15px;
  letter-spacing: .02em;
  transition: background .15s, color .15s, border-color .15s;
}
/* Libre (contient une case radio) */
.com-osservicesbooking .timeslotdiv .divtimeslots:has(input) {
  background: #fff !important;
  border: 1px solid var(--arz-vert-doux) !important;
  color: var(--arz-vert);
  cursor: pointer;
}
.com-osservicesbooking .timeslotdiv .divtimeslots:has(input):hover {
  background: var(--arz-vert-clair) !important;
  border-color: var(--arz-vert) !important;
}
/* Sélectionné */
.com-osservicesbooking .timeslotdiv .divtimeslots:has(input:checked) {
  background: var(--arz-vert) !important;
  border-color: var(--arz-vert) !important;
  color: #fff;
}
/* Indisponible ou déjà dans le panier (pas de case radio) */
.com-osservicesbooking .timeslotdiv .divtimeslots:not(:has(input)) {
  background: var(--arz-vert-pale) !important;
  border: 1px dashed var(--arz-bord) !important;
  color: var(--arz-muet);
  cursor: not-allowed;
}
.com-osservicesbooking .timeslotdiv .divtimeslots:not(:has(input)) .timeslotlabel {
  text-decoration: line-through;
}
/* Case radio masquée : le créneau entier est cliquable */
.com-osservicesbooking .timeslotdiv .divtimeslots input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.com-osservicesbooking .timeslotdiv .divtimeslots .timeslotlabel {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: inherit;
  color: inherit;
  font-weight: 500;
}
.com-osservicesbooking .timeslotdiv .divtimeslots:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--arz-vert-doux);
}

/* ---------- Bloc « Voulez-vous répéter… » ---------- */
.com-osservicesbooking .repeatform .service-header {
  background: transparent;
  border-bottom: 1px solid var(--arz-bord);
  color: var(--arz-vert-moyen);
  font-size: .9em;
  padding: 12px 8px;
  margin: 12px 0;
}
.com-osservicesbooking .repeatform .service-header::after { display: none; }
.com-osservicesbooking .repeatform .form-select {
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  color: var(--arz-texte);
}
.com-osservicesbooking .repeatform .form-select:focus,
.com-osservicesbooking .apptable .form-select:focus {
  border-color: var(--arz-vert);
  box-shadow: 0 0 0 .2rem rgba(0, 71, 65, .15);
}

/* ---------- Zone du bouton « Validez votre créneau » ---------- */
.com-osservicesbooking .bookingformdiv.addtocartform {
  background: transparent;
  border: 0;
  padding: 8px 0 0;
  margin: 0;
  text-align: center;
}

/* ---------- Fenêtres de confirmation ---------- */
.com-osservicesbooking .osb-modal-content { border-radius: var(--arz-rayon); font-family: var(--arz-police); }
.com-osservicesbooking .osb-modal-buttons #okButton {
  background: var(--arz-vert);
  border-color: var(--arz-vert);
  color: #fff;
}
.com-osservicesbooking .osb-modal-buttons .cancel-btn {
  background: transparent;
  border: 1px solid var(--arz-bord);
  color: var(--arz-vert);
}

/* ---------- Résumé du créneau choisi (le « Résumé » est rouge en dur) ---------- */
.com-osservicesbooking .sumarry_div:not(:empty) {
  background: var(--arz-vert-pale);
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  color: var(--arz-texte);
  font-size: .9em;
  padding: 10px 14px !important;
  margin: 0 0 14px;
  text-align: left;
}
.com-osservicesbooking .sumarry_div span[style*="color"] {
  color: var(--arz-vert) !important;
}

/* ==========================================================
   Arz-Grafik – OS Services Booking – Formulaire de réservation (étape 2)
   ========================================================== */

/* Cadre du formulaire */
.com-osservicesbooking .bookingformdiv.authorizeform,
.com-osservicesbooking .bookingformdiv.confirmationform {
  background: #fff;
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  overflow: hidden;
  margin: 0 0 20px;
  font-family: var(--arz-police);
  --primary: var(--arz-vert);
  --accent: var(--arz-vert-doux);
}
.com-osservicesbooking .authorizeform #bookingForm,
.com-osservicesbooking .confirmationform #bookingForm { padding: 6px 22px 22px; }

/* Bandeau d'introduction (bleu par défaut) */
.com-osservicesbooking .osb-page-note,
.com-osservicesbooking .osb-checkout-note {
  background: var(--arz-vert-pale);
  border-left: 4px solid var(--arz-vert);
  border-radius: 0;
  color: var(--arz-vert-moyen);
  font-size: 14px;
  margin: 0;
  padding: 12px 22px;
}

/* Titres de section (« Informations de contact »…) */
.com-osservicesbooking #bookingForm .headingline {
  color: var(--arz-vert);
  font-family: var(--arz-police-titre);
  font-size: 1.25em;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin: 22px 0 6px !important;
  padding: 0 0 0 30px !important;  /* aligné sur les champs */
}
.com-osservicesbooking #bookingForm .linedetails .headingline { padding-left: 15px !important; }
.com-osservicesbooking #bookingForm .headingline::before {
  background: var(--arz-vert);
  width: 3px;
  height: 20px;
}

/* Lignes de champs : plus de cases grises imbriquées */
.com-osservicesbooking #bookingForm .linedetails {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 10px 0 0 !important;
  row-gap: 10px;
}
.com-osservicesbooking #bookingForm .linedetails .linedetails { margin-top: 6px !important; }
.com-osservicesbooking #bookingForm .linedetails > [class*="col-"] { margin-bottom: 0; }

/* Champs */
.com-osservicesbooking #bookingForm .form-control,
.com-osservicesbooking #bookingForm .form-select {
  background-color: #fff;
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  color: var(--arz-texte);
  font-family: var(--arz-police);
  font-size: 16px;
  padding: 10px 14px;
  box-shadow: none;
}
.com-osservicesbooking #bookingForm .form-select { padding-right: 36px; }
.com-osservicesbooking #bookingForm .form-control::placeholder { color: #9aa9a7; }
.com-osservicesbooking #bookingForm .form-control:focus,
.com-osservicesbooking #bookingForm .form-select:focus {
  border-color: var(--arz-vert);
  box-shadow: 0 0 0 .2rem rgba(0, 71, 65, .12);
  outline: 0;
}
.com-osservicesbooking #bookingForm .horizontalformphone { width: 100%; }
.com-osservicesbooking #bookingForm textarea.form-control { min-height: 110px; resize: vertical; }
.com-osservicesbooking #bookingForm label { color: var(--arz-vert-moyen); font-size: 14px; }

/* Bloc « Rôle administrateur » (visible seulement connecté en admin) */
.com-osservicesbooking #bookingForm .input-group .form-control { border-radius: var(--arz-rayon) 0 0 var(--arz-rayon); }
.com-osservicesbooking #bookingForm a.modal_user_id.btn {
  background: var(--arz-vert);
  border-color: var(--arz-vert);
  border-radius: 0 var(--arz-rayon) var(--arz-rayon) 0;
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Boutons Soumettre / Annuler */
.com-osservicesbooking #bookingForm #btn-submit.addtocartbtn { margin: 18px 6px 0 0; vertical-align: middle; }
.com-osservicesbooking #bookingForm a.btn.btn-warning {
  background: transparent;
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  color: var(--arz-vert-moyen);
  font-family: var(--arz-police);
  font-size: 15px;
  padding: 11px 24px;
  margin: 18px 0 0 6px !important;
  vertical-align: middle;
}
.com-osservicesbooking #bookingForm a.btn.btn-warning:hover {
  background: var(--arz-vert-pale);
  border-color: var(--arz-vert-doux);
  color: var(--arz-vert);
}
.com-osservicesbooking #bookingForm .osbspinner div { background: var(--arz-vert); }

/* Messages d'erreur de validation */
.com-osservicesbooking #errors:has(*) {
  background: #fbf1ef;
  border-left: 4px solid #a33a2c;
  color: #7a2b20;
  font-size: 14px;
  padding: 10px 22px;
}

/* ==========================================================
   Arz-Grafik – OS Services Booking – Confirmation (étape 3)
   ========================================================== */

/* Récapitulatif : lignes « libellé / valeur » au lieu de cases grises */
.com-osservicesbooking .confirmationform #bookingForm .linedetails {
  border-bottom: 1px solid var(--arz-bord);
  margin: 0 !important;
  padding: 12px 0;
}
.com-osservicesbooking .confirmationform #bookingForm .linedetails > [class*="col-"] {
  display: block;
  padding-left: 15px;
}
.com-osservicesbooking .confirmationform #bookingForm .linedetails label {
  display: block;
  min-width: 0;
  margin: 0 0 2px;
  color: var(--arz-vert-moyen);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.com-osservicesbooking .confirmationform #bookingForm .linedetails strong {
  color: var(--arz-texte);
  font-size: 16px;
  font-weight: 500 !important;
}
/* Notes du client (texte libre) */
.com-osservicesbooking .confirmationform #bookingForm .linedetails > .col-md-12 {
  color: var(--arz-texte);
  font-size: 15px;
  white-space: pre-line;
}
/* Boutons Confirmer / Annuler */
.com-osservicesbooking .confirmationform #bookingForm > .col-md-12 {
  padding: 22px 0 0;
  text-align: center;
}
.com-osservicesbooking .confirmationform #confirmSubmit.addtocartbtn { margin: 0 6px 0 0; vertical-align: middle; }
.com-osservicesbooking .confirmationform #bookingForm a.btn.btn-warning { margin: 0 0 0 6px !important; }

/* ==========================================================
   Arz-Grafik – OS Services Booking – Réservation confirmée / détail de commande
   ========================================================== */

/* Variables internes du composant (bleu / corail par défaut) */
.com-osservicesbooking .booking-complete-container,
.com-osservicesbooking .order-details-container {
  --primary: var(--arz-vert);
  --primary-dark: var(--arz-vert-fonce);
  --accent: var(--arz-vert-doux);
  font-family: var(--arz-police);
  color: var(--arz-texte);
}

/* ---------- Encadré « réservation effectuée » ---------- */
.com-osservicesbooking .booking-complete-container {
  background: #fff;
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  box-shadow: none;
  padding: 32px 28px 26px;
  margin: 0 auto 28px;
}
.com-osservicesbooking .booking-success-icon circle { fill: var(--arz-vert); }
.com-osservicesbooking .booking-complete-container h2 {
  color: var(--arz-vert);
  font-family: var(--arz-police-titre);
  font-weight: 400;
}
.com-osservicesbooking .booking-complete-message { color: var(--arz-vert-moyen); }
.com-osservicesbooking .booking-complete-message b { color: var(--arz-texte); font-weight: 500; }
.com-osservicesbooking .service-group {
  background: var(--arz-vert-pale);
  border: 1px solid var(--arz-bord);
  border-radius: var(--arz-rayon);
  box-shadow: none;
  padding: 0 0 14px;
  overflow: hidden;
  text-align: left;
}
.com-osservicesbooking .service-header-order-details {
  background: var(--arz-vert);
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 14px;
  padding: 12px 18px;
}
.com-osservicesbooking .service-header-order-details .count { background: rgba(255, 255, 255, .18); color: #fff; }
.com-osservicesbooking .appointment-cards-list { margin: 0; padding: 0 14px; }
.com-osservicesbooking .appointment-card {
  background: #fff;
  border: 1px solid var(--arz-bord);
  border-left: 3px solid var(--arz-vert);
  border-radius: var(--arz-rayon);
  box-shadow: none;
  padding: 14px 18px;
  text-align: left;
}
.com-osservicesbooking .appointment-card::before { display: none; }
.com-osservicesbooking .appointment-card:hover { box-shadow: none; transform: none; }
.com-osservicesbooking .appointment-card > div { margin-bottom: 6px; }
.com-osservicesbooking .appointment-card strong { color: var(--arz-vert-moyen); font-weight: 500; }

/* ---------- Détail de la commande ---------- */
.com-osservicesbooking .order-details-container {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0 auto 40px;
}
.com-osservicesbooking .order-header {
  background: var(--arz-vert);
  border: 0;
  border-radius: var(--arz-rayon) var(--arz-rayon) 0 0;
  box-shadow: none;
  color: #fff;
  margin: 0;
  padding: 22px 26px;
}
.com-osservicesbooking .order-header h2 {
  color: #fff;
  font-family: var(--arz-police-titre);
  font-size: 28px;
  font-weight: 400;
}
.com-osservicesbooking .order-header .order-date { color: rgba(255, 255, 255, .85); opacity: 1; }
.com-osservicesbooking .order-header .order-date::before { content: none; }
.com-osservicesbooking .order-status-badge,
.com-osservicesbooking .order-status-badge.completed,
.com-osservicesbooking .order-status-badge.confirmed {
  background: var(--arz-vert-clair);
  color: var(--arz-vert);
  font-weight: 500;
  backdrop-filter: none;
}
.com-osservicesbooking .order-status-badge.pending { background: #f3ead8; color: #7a5a1c; }

.com-osservicesbooking .order-section,
.com-osservicesbooking .booked-items-container {
  background: #fff;
  border: 1px solid var(--arz-bord);
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 22px 26px;
  animation: none;
}
.com-osservicesbooking .order-section:hover { box-shadow: none; transform: none; }
.com-osservicesbooking .order-section:focus-within { outline: 0; }
.com-osservicesbooking .order-details-container .headingline {
  color: var(--arz-vert);
  font-family: var(--arz-police-titre);
  font-size: 1.25em;
  font-weight: 400;
  text-transform: none;
  margin: 0 0 12px !important;
}
.com-osservicesbooking .order-details-container .headingline::before { background: var(--arz-vert); width: 3px; height: 20px; }
.com-osservicesbooking .order-details-container .headingline svg,
.com-osservicesbooking .order-details-container .headingline i { color: var(--arz-vert-moyen); }

/* Coordonnées du client */
.com-osservicesbooking .customer-details-grid { gap: 12px; margin-top: 8px; }
.com-osservicesbooking .detail-item {
  background: var(--arz-vert-pale);
  border: 0;
  border-left: 3px solid var(--arz-vert-doux);
  border-radius: var(--arz-rayon);
  padding: 12px 16px;
}
.com-osservicesbooking .detail-item:hover { background: var(--arz-vert-pale); transform: none; }
.com-osservicesbooking .detail-item label { color: var(--arz-vert-moyen); font-weight: 500; }
.com-osservicesbooking .detail-item label::before { content: none; }
.com-osservicesbooking .detail-item strong { color: var(--arz-texte); font-weight: 500; }
.com-osservicesbooking .detail-item a { color: var(--arz-vert); }

/* Notes du client (jaune par défaut) */
.com-osservicesbooking .order-details--notes {
  background: var(--arz-vert-pale);
  border-left: 3px solid var(--arz-vert-doux);
  border-radius: var(--arz-rayon);
  color: var(--arz-texte);
  font-size: 15px;
}

/* Séances réservées */
.com-osservicesbooking .booked-items-container { border-radius: 0 0 var(--arz-rayon) var(--arz-rayon); }
.com-osservicesbooking .date-group-header {
  background: var(--arz-vert-clair) !important;
  border-radius: var(--arz-rayon);
  color: var(--arz-vert);
  font-weight: 500;
  padding: 10px 16px;
}
.com-osservicesbooking .date-group-header .date-icon { fill: var(--arz-vert); }
.com-osservicesbooking .date-group-header span[style] { background: #fff !important; color: var(--arz-vert); }
.com-osservicesbooking .service-item-card {
  background: #fff;
  border: 1px solid var(--arz-bord);
  border-left: 3px solid var(--arz-vert);
  border-radius: var(--arz-rayon);
  box-shadow: none;
  animation: none;
}
.com-osservicesbooking .service-item-card::before { display: none; }
.com-osservicesbooking .service-item-card:hover { box-shadow: none; transform: none; }
.com-osservicesbooking .service-item-title h4 { color: var(--arz-vert); font-family: var(--arz-police-titre); font-weight: 400; }
.com-osservicesbooking .service-item-title .employee-name { color: var(--arz-vert-moyen); }
.com-osservicesbooking .service-item-info .info-icon svg { fill: var(--arz-vert-moyen); }
.com-osservicesbooking .service-item-info .info-label { color: var(--arz-vert-moyen); }
.com-osservicesbooking .service-item-info .info-value { color: var(--arz-texte); }
.com-osservicesbooking .action-btn.book-again {
  background: var(--arz-vert-clair);
  color: var(--arz-vert);
}
.com-osservicesbooking .action-btn.book-again:hover { background: var(--arz-vert); color: #fff; }
.com-osservicesbooking .cancellation-notice { color: var(--arz-vert-moyen); }
.com-osservicesbooking .service-item-qr { border: 1px solid var(--arz-bord); box-shadow: none; }
.com-osservicesbooking .service-item-qr .qr-label { color: var(--arz-vert-moyen); }
.com-osservicesbooking .service-item-qr img { display: block; margin: 0 auto; }

/* Boutons (Annuler la réservation / Retour / Imprimer, Voir le détail / Retour) */
.com-osservicesbooking .order-actions {
  background: transparent;
  padding: 22px 0 0;
  margin: 0;
}
.com-osservicesbooking .booking-actions { margin-top: 18px; }
.com-osservicesbooking .order-actions .btn,
.com-osservicesbooking .booking-actions .btn {
  border-radius: var(--arz-rayon);
  box-shadow: none;
  font-family: var(--arz-police);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 24px;
  transform: none;
}
.com-osservicesbooking .order-actions .btn-primary,
.com-osservicesbooking .booking-actions .btn-primary {
  background: var(--arz-vert);
  border: 1px solid var(--arz-vert);
  color: #fff;
}
.com-osservicesbooking .order-actions .btn-outline-primary,
.com-osservicesbooking .booking-actions .btn-outline-primary {
  background: transparent;
  border: 1px solid var(--arz-vert-doux);
  color: var(--arz-vert);
}
.com-osservicesbooking .order-actions .btn-outline-primary:hover,
.com-osservicesbooking .booking-actions .btn-outline-primary:hover { background: var(--arz-vert); border-color: var(--arz-vert); color: #fff; }
.com-osservicesbooking .order-actions .btn-danger {
  background: transparent;
  border: 1px solid #c9a39c;
  color: #a33a2c;
}
.com-osservicesbooking .order-actions .btn-danger:hover { background: #a33a2c; border-color: #a33a2c; color: #fff; transform: none; }

/* ==========================================================
   Arz-Grafik – OS Services Booking – Panier mobile (bouton flottant)
   ========================================================== */
.com-osservicesbooking .mobile-cart-button {
  background: var(--arz-vert) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 71, 65, .25);
}
.com-osservicesbooking .mobile-cart-badge {
  background: #fff !important;
  color: var(--arz-vert) !important;
  border: 1px solid var(--arz-vert);
}
.com-osservicesbooking .mobile-cart-header { background: var(--arz-vert) !important; }