/* =====================================================================
   SHARMA BEAUTY CENTER — Thème du module de réservation
   Chargé APRÈS oz-booking.css. C'est LE fichier à modifier pour le design du bloc de réservation,
   de la confirmation et de l'espace client : les couleurs/polices viennent des variables du site (--sh-*),
   donc le sélecteur d'ambiances de Sharma change aussi ce bloc.
   ===================================================================== */

:root {
  /* Jetons génériques du bloc (oz-booking.css n'a AUCUNE couleur de marque en dur : tout passe par ces variables) */
  --bk-main: var(--sh-plum);        --bk-main-rgb: 31, 92, 84;
  --bk-ink: var(--sh-ink);          --bk-ink-rgb: 15, 46, 43;
  --bk-soft: var(--sh-rose);
  --bk-line: var(--sh-petal);
  --bk-bg: var(--sh-blush);
  --bk-bg2: var(--sh-petal);
  --bk-accent: var(--sh-berry);     --bk-accent-rgb: 240, 115, 90;
  --bk-text: var(--sh-plum);
  --bk-mid: var(--sh-plum);

  /* Variables « O-ZEN » (utilisées par oz-booking.css) rattachées aux variables du site */
  --oz-primary: var(--sh-berry);
  --oz-primary-dark: color-mix(in srgb, var(--sh-berry) 78%, #000);
  --oz-brown-main: var(--sh-plum);
  --oz-brown-dark: var(--sh-ink);
  --oz-terracotta: var(--sh-berry);
  --oz-gold: var(--sh-saffron);
  --oz-beige: var(--sh-petal);
  --oz-bg: var(--sh-blush);
  --oz-white: #ffffff;
  --oz-border: var(--sh-glass-border-subtle);
  --oz-light-gray: var(--sh-petal);
  --oz-text: var(--sh-ink);
  --oz-text-light: var(--sh-plum);
  --oz-shadow: var(--sh-glass-shadow);

  --ozg-brown-dark: var(--sh-ink);
  --ozg-brown-light: var(--sh-plum);
  --ozg-brown-mid: var(--sh-plum);
  --ozg-brown-noble: var(--sh-plum);
  --ozg-cream: var(--sh-blush);
  --ozg-cream-card: #ffffff;
  --ozg-cream-soft: var(--sh-petal);
  --ozg-gold: var(--sh-saffron);
  --ozg-gold-dark: color-mix(in srgb, var(--sh-berry) 78%, #000);
  --ozg-gold-soft: var(--sh-rose);
  --ozg-liquid-glass-bg: var(--sh-glass-bg);
  --ozg-liquid-glass-border: var(--sh-glass-border-subtle);
  --ozg-liquid-glass-border-glow: color-mix(in srgb, var(--sh-saffron) 40%, transparent);
  --ozg-liquid-glass-shadow: var(--sh-glass-shadow);
  --ozg-liquid-glass-shadow-lg: var(--sh-glass-shadow-lg);
  --ozg-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ozg-ease-spring: var(--sh-ease);
  --ozg-font-body: var(--f-body);
  --ozg-font-display: var(--f-display);
  --font-titre: var(--f-display);
  --font-corps: var(--f-body);
  --ozg-radius-sm: var(--sh-radius-sm);
  --ozg-radius-md: var(--sh-radius-md);
  --ozg-radius-lg: 26px;
  --ozg-radius-xl: var(--sh-radius-lg);
  --ozg-radius-2xl: var(--sh-radius-xl);
  --ozg-radius-pill: 999px;
}

/* ---------- Mise en page des pages du module ---------- */
.sh-resa { padding-top: 160px; padding-bottom: 70px; position: relative; }
.sh-resa--embed { padding: 0; }
.sh-resa-head { padding: 8px 0 26px; max-width: 880px; }
.sh-resa-head .sh-hero-title { font-size: clamp(2rem, 4vw, 3.1rem); margin: 10px 0 14px; }
.sh-resa-head .sh-hero-desc a { color: var(--sh-berry); font-weight: 600; text-decoration: underline; }

.sh-resa-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 36px 0 10px; }
.sh-resa-trust .sh-glass-card { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; }
.sh-resa-trust i { font-size: 1.2rem; color: var(--sh-berry); margin-top: 4px; }
.sh-resa-trust strong { display: block; font-family: var(--f-display); font-size: 1.05rem; margin-bottom: 3px; }
.sh-resa-trust span { color: var(--sh-plum); font-size: .92rem; line-height: 1.5; }

.sh-resa-prose { max-width: 760px; padding-bottom: 20px; }
.sh-resa-prose h2 { font-size: 1.35rem; margin: 26px 0 8px; }
.sh-resa-prose p { color: var(--sh-plum); line-height: 1.75; }

/* ---------- Bloc de réservation : une seule rangée d'onglets (catégories), sans colonne « Catégories » ---------- */
.sh-resa .oz-glass-services, .sh-resa--embed .oz-glass-services { padding-top: 10px; }
.sh-resa .oz-tw-subcats-sidebar, .sh-resa--embed .oz-tw-subcats-sidebar { display: none; }
.sh-resa .oz-tw-body-layout, .sh-resa--embed .oz-tw-body-layout { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1100px) {
  .sh-resa .oz-tw-body-layout, .sh-resa--embed .oz-tw-body-layout { grid-template-columns: 100% !important; }
}
@media (max-width: 760px) {
  .sh-resa-trust { grid-template-columns: 1fr; }
}

/* Pages confirmation / espace client / annulation : le titre commence sous la barre de navigation */
.sh-resa .oz-glass-content-hero { padding-top: 24px; }

/* =====================================================================
   Les blocs ci-dessous reprennent la structure du module de réservation de Mima Locks (mêmes tailles, mêmes blocs,
   même agencement) ; seuls les jetons de couleur (--bk-*, donc le sélecteur d'ambiances) et les polices diffèrent.
   --bk-accent = couleur d'action ; --bk-hover = sa version foncée.
   ===================================================================== */
:root { --bk-hover: color-mix(in srgb, var(--bk-accent) 80%, #000); }

/* 1. Étiquettes de prix en petite bulle */
.oz-tw-service-price {
  font-family: var(--f-display, system-ui, sans-serif) !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  color: var(--bk-accent) !important;
  padding: 3px 14px !important;
  border: 2px solid var(--bk-accent) !important;
  border-radius: 999px 999px 999px 6px !important;
  background: color-mix(in srgb, var(--bk-accent) 6%, transparent) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 86px !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}
.oz-tw-service-card:hover .oz-tw-service-price,
.oz-tw-subitem-row:hover .oz-tw-service-price {
  background: color-mix(in srgb, var(--bk-accent) 14%, transparent) !important;
  transform: translateY(-1px);
}

/* 2. Bouton de validation (étape 3, paiement sur place) : à plat, sans dégradé ni ombre */
.oz-payment-onsite.oz-resv-payment-card {
  background: var(--bk-accent) !important;
  background-image: none !important;
  border: 2px solid var(--bk-accent) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  padding: 16px 24px !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 22px auto 16px auto !important;
  max-width: 500px !important;
  width: 100% !important;
  position: relative !important;
}
.oz-payment-onsite.oz-resv-payment-card:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--bk-hover) !important;
  background-image: none !important;
  border-color: var(--bk-hover) !important;
}
.oz-payment-onsite.oz-resv-payment-card:active { transform: none !important; }
.oz-payment-onsite .oz-resv-payment-card-title {
  color: #ffffff !important;
  font-family: var(--f-display, system-ui, sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.oz-payment-onsite .oz-resv-payment-card-title i { font-size: 1.3rem !important; color: #ffffff !important; }
.oz-payment-onsite .oz-resv-payment-card-text { color: rgba(255, 255, 255, 0.95) !important; font-size: 0.88rem !important; margin: 0 !important; }

/* Harmonisation des boutons du parcours : zéro dégradé, zéro ombre */
button,
.oz-tw-checkout-btn,
.oz-tw-select-btn,
.oz-btn-continue,
.oz-btn-upsell-continue,
.oz-resv-modal-btn-primary,
.oz-resv-stripe-pay-btn,
.oz-payment-onsite {
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
}

/* Étape 1 : boutons de sélection d'une prestation */
.oz-tw-select-btn {
  background: #FFFFFF !important;
  border: 1.5px solid var(--bk-accent) !important;
  color: var(--bk-accent) !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  transform: none !important;
}
.oz-tw-select-btn:hover,
.oz-tw-select-btn.selected {
  background: var(--bk-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--bk-accent) !important;
  transform: none !important;
}

/* Étape 1 : « Valider la prestation » ; étape 2 : « Continuer » ; fenêtres d'identification */
.oz-tw-checkout-btn,
.oz-btn-continue,
.oz-btn-continue.oz-btn-primary,
.oz-btn-upsell-continue,
.oz-resv-modal-btn-primary {
  background: var(--bk-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  transform: none !important;
  transition: background-color 0.2s ease !important;
}
.oz-tw-checkout-btn:hover:not(:disabled),
.oz-btn-continue.oz-btn-primary:hover:not(:disabled),
.oz-btn-upsell-continue:hover,
.oz-resv-modal-btn-primary:hover {
  background: var(--bk-hover) !important;
  transform: none !important;
}
.oz-resv-modal-btn-outline {
  border: 1.5px solid var(--bk-accent) !important;
  color: var(--bk-accent) !important;
  background: transparent !important;
  transform: none !important;
}
.oz-resv-modal-btn-outline:hover {
  background: color-mix(in srgb, var(--bk-accent) 10%, transparent) !important;
  border-color: var(--bk-accent) !important;
  transform: none !important;
}
.oz-btn-back, .oz-btn-back-pay, .oz-bksplit-back-btn,
.oz-btn-back:hover, .oz-btn-back-pay:hover, .oz-bksplit-back-btn:hover { transform: none !important; }

/* Étape 2 : date et créneau choisis */
.oz-cal-day.selected,
.oz-time-slot.selected {
  background: var(--bk-accent) !important;
  background-image: none !important;
  border-color: var(--bk-accent) !important;
  color: #FFFFFF !important;
}
.oz-time-slot:hover { border-color: var(--bk-accent) !important; color: var(--bk-accent) !important; }

/* 3. Largeur du bloc sur ordinateur (1200 px max) */
.oz-glass-services-panel,
.oz-tw-container,
.oz-resv-booking-wrapper { max-width: 1200px !important; width: 100% !important; }

/* Étapes 2 et 3 : cartes compactes centrées (~640 px) */
.oz-booking-inline-stage,
#oz-bksplit-checkout-stage,
.oz-modal-container {
  width: min(640px, calc(100% - 32px)) !important;
  max-width: 640px !important;
  margin: 0 auto 40px auto !important;
  padding: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid var(--bk-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 36px rgba(var(--bk-ink-rgb), 0.08) !important;
  box-sizing: border-box !important;
}
.oz-booking-inline-stage .oz-modal-header,
.oz-modal-container .oz-modal-header {
  padding: 20px 24px 16px !important;
  background: var(--bk-bg) !important;
  border-bottom: 1px solid var(--bk-line) !important;
  border-radius: 20px 20px 0 0 !important;
}
.oz-booking-inline-stage .oz-modal-content,
.oz-modal-container .oz-modal-content { padding: 24px 24px 30px !important; }

/* Retour à l'étape 1 */
.oz-inline-stage-back {
  margin: 16px 20px 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--bk-accent) !important;
  background: #FFFFFF !important;
  border: 1.5px solid var(--bk-accent) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
.oz-inline-stage-back:hover { background: var(--bk-accent) !important; color: #FFFFFF !important; }

/* Étape 2 : calendrier vertical compact */
.oz-cal-columns-layout { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; }
.oz-cal-left-col { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; }
.oz-calendar-header { margin-bottom: 14px !important; }
.oz-cal-title { font-size: 1.15rem !important; }
.oz-cal-weekdays { max-width: 100% !important; gap: 4px !important; margin-bottom: 6px !important; }
.oz-cal-days { max-width: 100% !important; gap: 4px !important; }
.oz-cal-day { max-width: none !important; height: 40px !important; font-size: 0.92rem !important; }
.oz-cal-right-col { width: 100% !important; display: flex !important; flex-direction: column !important; }
.oz-timeslots-wrapper { margin: 0 !important; padding: 0 !important; border: none !important; width: 100% !important; max-width: 100% !important; }
.oz-selected-date-display.oz-cal-selected-header {
  font-size: 0.98rem !important;
  color: var(--bk-ink) !important;
  padding: 10px 14px !important;
  background: var(--bk-bg) !important;
  border-radius: 10px !important;
  border-left: 3px solid var(--bk-accent) !important;
  margin-bottom: 12px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.oz-cal-selected-hint { font-size: 0.8rem !important; color: var(--bk-accent) !important; font-weight: 700 !important; }
.oz-timeslots-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; gap: 8px !important; }
.oz-time-slot { min-height: 38px !important; padding: 8px 6px !important; font-size: 0.88rem !important; font-weight: 700 !important; border-radius: 10px !important; }
.oz-btn-continue, .oz-btn-continue.oz-btn-primary { width: 100% !important; max-width: 100% !important; margin: 18px 0 0 0 !important; min-height: 44px !important; font-size: 0.94rem !important; }

/* Étape 3 : identification et confirmation compactes */
.oz-resv-auth-choices { max-width: 100% !important; margin: 14px 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.oz-resv-auth-choices .oz-guest-continue { font-size: 0.95rem !important; padding: 13px 20px !important; }
.oz-resv-modal-form-wrap, .oz-resv-modal-form-wrap-lg { max-width: 100% !important; margin: 0 auto !important; }
.oz-form-row-2col.oz-form-grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
@media (max-width: 540px) { .oz-form-row-2col.oz-form-grid-2 { grid-template-columns: 1fr !important; } }
.oz-resv-modal-step { max-width: 100% !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; text-align: left !important; }
.oz-resv-modal-step-title { margin-bottom: 14px !important; font-size: 1.35rem !important; }
.oz-resv-promo-block { margin-bottom: 14px !important; }
.oz-resv-recap-box { margin-bottom: 16px !important; padding: 16px 18px !important; border-radius: 14px !important; }
.oz-resv-cgv-block { margin-bottom: 14px !important; padding: 10px 14px !important; }
.oz-payment-onsite.oz-resv-payment-card { margin: 6px 0 16px 0 !important; max-width: 100% !important; padding: 16px 20px !important; }
.oz-resv-modal-form-actions { margin-top: 10px !important; }

/* Étape 1 : catalogue et panier uniquement (la colonne « Catégories » en doublon est masquée) */
.oz-tw-body-layout,
.sh-resa .oz-tw-body-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 360px !important; gap: 24px !important; align-items: start !important; }
.oz-tw-subcats-sidebar, .sh-resa .oz-tw-subcats-sidebar { display: none !important; }
@media (max-width: 900px) { .oz-tw-body-layout, .sh-resa .oz-tw-body-layout { grid-template-columns: 100% !important; } }

/* =====================================================================
   COMPRESSION DE TAILLE DU BLOC DE RÉSERVATION (-25% à -30%)
   ===================================================================== */
.oz-glass-section-header { margin-bottom: 16px !important; }
.oz-glass-eyebrow { margin-bottom: 6px !important; padding: 4px 12px !important; font-size: 0.76rem !important; }
.oz-glass-section-title { font-size: clamp(1.5rem, 2.8vw, 2.1rem) !important; margin-bottom: 6px !important; }
.oz-glass-section-subtitle { font-size: 0.9rem !important; margin-bottom: 0 !important; max-width: 650px !important; }
.oz-bksplit-progress { margin: 10px auto 16px auto !important; padding: 0 10px !important; }
.oz-bksplit-progress-circle { width: 28px !important; height: 28px !important; font-size: 0.82rem !important; }
.oz-bksplit-progress-label { font-size: 0.8rem !important; }
.oz-tw-macros-wrapper { margin-bottom: 12px !important; }
.oz-tw-macro-card { padding: 9px 15px !important; gap: 7px !important; }
.oz-tw-macro-icon { font-size: 0.95rem !important; }
.oz-tw-macro-name { font-size: 0.85rem !important; }
.oz-tw-toolbar { margin-bottom: 12px !important; }
.oz-tw-search-box { padding: 7px 12px !important; }
.oz-tw-search-input { font-size: 0.86rem !important; }
.oz-tw-services-col { padding: 12px 14px !important; border-radius: 16px !important; }
.oz-tw-service-card { padding: 11px 13px !important; margin-bottom: 9px !important; gap: 10px !important; }
.oz-tw-service-title { font-size: 0.96rem !important; margin-bottom: 3px !important; }
.oz-tw-service-desc { font-size: 0.8rem !important; line-height: 1.38 !important; margin-bottom: 5px !important; }
.oz-tw-subitem-row { padding: 9px 12px !important; }
.oz-tw-select-btn { padding: 6px 15px !important; font-size: 0.8rem !important; border-radius: 999px !important; }
.oz-tw-cart-panel { padding: 16px !important; border-radius: 16px !important; }
.oz-tw-cart-header h3 { font-size: 1rem !important; }
.oz-tw-cart-summary { padding-top: 10px !important; margin-top: 10px !important; }
.oz-tw-checkout-btn { padding: 11px 16px !important; font-size: 0.9rem !important; margin-top: 12px !important; }
.oz-cal-month { padding: 10px !important; }
.oz-cal-day { min-height: 36px !important; height: 36px !important; font-size: 0.86rem !important; }
.oz-time-slot { min-height: 36px !important; padding: 7px 5px !important; font-size: 0.82rem !important; }
.oz-btn-continue { min-height: 42px !important; padding: 9px 18px !important; font-size: 0.92rem !important; }


/* =====================================================================
   CALENDRIER REPLIABLE : une fois la date choisie, le calendrier se replie
   et les heures remontent. Clic sur le bandeau de date = on rouvre le calendrier.
   ===================================================================== */
.oz-booking-step.oz-cal-collapsed .oz-calendar-header,
.oz-booking-step.oz-cal-collapsed .oz-cal-weekdays,
.oz-booking-step.oz-cal-collapsed .oz-cal-days { display: none !important; }
.oz-booking-step.oz-cal-collapsed .oz-timeslots-wrapper { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.oz-cal-reopen {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  cursor: pointer !important;
  user-select: none;
}
.oz-cal-reopen:hover { filter: brightness(0.97); }
.oz-cal-reopen-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap; opacity: 0.85;
}
.oz-cal-reopen-hint i { font-size: 0.7rem; transition: transform 0.2s ease; }
.oz-booking-step:not(.oz-cal-collapsed) .oz-cal-reopen-hint i { transform: rotate(180deg); }