/* ============================================= */
/* == Style "Google Calendar Inspired" == */
/* ============================================= */

/* --- Définition des variables de couleur Google --- */
:root {
  --gcal-primary-blue: #1a73e8;
  --gcal-secondary-blue: #4285f4;
  --gcal-light-blue: #e3f2fd;
  --gcal-background: #f8f9fa;
  --gcal-card-background: #ffffff;
  --gcal-border-color: #e0e0e0;
  --gcal-text-primary: #202124;
  --gcal-text-secondary: #5f6368;
  --gcal-day-hover: #e8f0fe;
  --gcal-day-today: #fdd835;
  --gcal-day-selected: #1a73e8;
  --gcal-success: #34a853;
  --gcal-error: #ea4335;
  --gcal-warning: #fbbc04;
  --gcal-shadow-soft: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --gcal-shadow-medium: 0 2px 6px 2px rgba(60, 64, 67, 0.15);
  --gcal-shadow-strong: 0 4px 8px 3px rgba(60, 64, 67, 0.15),
    0 1px 3px rgba(60, 64, 67, 0.3);
}

/* --- Style général du formulaire (vrai style Google) --- */
body.woocommerce-page {
  background: var(--gcal-background) !important;
}

/* Force l'application sur toutes les pages avec WooCommerce Bookings */
.woocommerce #wc-bookings-booking-form,
.woocommerce-page #wc-bookings-booking-form,
.single-product #wc-bookings-booking-form,
#wc-bookings-booking-form {
  font-family: "Google Sans", "Product Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif !important;
  color: var(--gcal-text-primary) !important;
  background: var(--gcal-card-background) !important;
  border: 1px solid var(--gcal-border-color) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  box-shadow: var(--gcal-shadow-soft) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

#wc-bookings-booking-form::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(
    90deg,
    var(--gcal-primary-blue),
    var(--gcal-secondary-blue),
    var(--gcal-success),
    var(--gcal-warning)
  ) !important;
}

#wc-bookings-booking-form:hover {
  box-shadow: var(--gcal-shadow-strong) !important;
  transform: translateY(-2px) !important;
}

.wc-bookings-booking-form .form-field {
  margin-bottom: 20px !important;
}

/* Labels et titres */
.wc-bookings-date-picker .label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--gcal-text-primary) !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ============================================= */
/* == Calendrier (jQuery UI Datepicker) == */
/* ============================================= */

/* --- Conteneur principal du calendrier (style Google authentique) --- */
.ui-datepicker {
  width: 100% !important;
  max-width: 350px !important;
  padding: 20px !important;
  background: var(--gcal-card-background) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: var(--gcal-shadow-medium) !important;
  font-family: "Google Sans", "Product Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif !important;
  position: relative !important;
}

.ui-datepicker::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--gcal-primary-blue) !important;
  border-radius: 16px 16px 0 0 !important;
}

/* --- En-tête (Mois et Année) --- */
.ui-datepicker-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 4px 16px 4px !important;
  border: none !important;
  background: none !important;
  position: relative !important;
  margin-bottom: 0 !important;
}

.ui-datepicker-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--gcal-text-primary) !important;
  text-align: center !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* --- Boutons de navigation (précédent/suivant) --- */
.ui-datepicker-prev,
.ui-datepicker-next {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  background: none !important;
  border: none !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background-color: var(--gcal-day-hover) !important;
}

.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
  display: none !important;
}

.ui-datepicker-prev::after {
  content: "‹" !important;
  font-size: 24px !important;
  color: var(--gcal-text-secondary) !important;
  line-height: 1 !important;
}

.ui-datepicker-next::after {
  content: "›" !important;
  font-size: 24px !important;
  color: var(--gcal-text-secondary) !important;
  line-height: 1 !important;
}

/* --- Grille des jours --- */
.ui-datepicker-calendar {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-top: 8px !important;
}

/* Noms des jours (Lun, Mar, etc.) */
.ui-datepicker-calendar th {
  padding: 8px 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--gcal-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  background: none !important;
  border: none !important;
}

/* Cellules des jours */
.ui-datepicker-calendar td {
  padding: 1px !important;
  text-align: center !important;
  border: none !important;
}

/* Lien de chaque jour */
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 1px auto !important;
  border: none !important;
  border-radius: 50% !important;
  background: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--gcal-text-primary) !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  line-height: 1 !important;
}

/* Jour survolé */
.ui-datepicker-calendar td a:hover {
  background-color: var(--gcal-day-hover) !important;
}

/* Jour d'aujourd'hui (style Google Calendar avec cercle jaune) */
.ui-datepicker-calendar .ui-datepicker-today a {
  background-color: var(--gcal-day-today) !important;
  color: var(--gcal-text-primary) !important;
  font-weight: 600 !important;
  position: relative !important;
}

/* Jour d'aujourd'hui NON sélectionné : style très discret */
.ui-datepicker-calendar .ui-datepicker-today:not(.ui-datepicker-current-day) a {
  background-color: transparent !important;
  color: var(--gcal-text-primary) !important;
  font-weight: 500 !important;
  border: 1px solid rgba(253, 216, 53, 0.4) !important;
  position: relative !important;
}

/* Point indicateur pour "aujourd'hui" seulement si pas sélectionné */
.ui-datepicker-calendar
  .ui-datepicker-today:not(.ui-datepicker-current-day)
  a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 3px !important;
  height: 3px !important;
  background: rgba(253, 216, 53, 0.6) !important;
  border-radius: 50% !important;
}

/* Jour sélectionné (bleu Google) */
.ui-datepicker-calendar .ui-state-active,
.ui-datepicker-calendar .ui-datepicker-current-day a {
  background-color: var(--gcal-day-selected) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(26, 115, 232, 0.3) !important;
}

/* PRIORITÉ : Jour sélectionné prend le dessus sur "aujourd'hui" */
.ui-datepicker-calendar .ui-datepicker-today.ui-datepicker-current-day a,
.ui-datepicker-calendar .ui-datepicker-today .ui-state-active {
  background-color: var(--gcal-day-selected) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(26, 115, 232, 0.3) !important;
}

/* Masquer le point noir d'aujourd'hui quand la date est sélectionnée */
.ui-datepicker-calendar .ui-datepicker-today.ui-datepicker-current-day a::after,
.ui-datepicker-calendar .ui-datepicker-today .ui-state-active::after {
  display: none !important;
}

/* Jours hors du mois (grisés) */
.ui-datepicker-other-month .ui-state-default {
  opacity: 0.4 !important;
  color: var(--gcal-text-secondary) !important;
}

/* Jours désactivés */
.ui-datepicker .ui-state-disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

/* ============================================= */
/* == Champs de saisie de date == */
/* ============================================= */

.wc-bookings-date-picker-date-fields {
  display: none !important;
  /* Masquer les champs Jour/Mois/Année - inutiles avec le calendrier visuel */
}

/* Styles supprimés car les champs sont masqués */

/* ============================================= */
/* == Sélecteur de créneaux horaires == */
/* ============================================= */

.block-picker {
  margin-top: 24px !important;
}

.wc-bookings-time-block-picker {
  background: var(--gcal-background) !important;
  border: 1px solid var(--gcal-border-color) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-top: 16px !important;
}

.wc-bookings-time-block-picker p {
  margin: 0 0 16px 0 !important;
  color: var(--gcal-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.block-picker ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.block-picker li {
  margin: 0 !important;
}

.block-picker li a {
  display: block !important;
  padding: 12px 20px !important;
  border: 2px solid var(--gcal-border-color) !important;
  border-radius: 24px !important;
  text-decoration: none !important;
  color: var(--gcal-primary-blue) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: var(--gcal-card-background) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
}

.block-picker li a::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(26, 115, 232, 0.1),
    transparent
  ) !important;
  transition: left 0.5s !important;
}

.block-picker li a:hover::before {
  left: 100% !important;
}

.block-picker li a:hover {
  border-color: var(--gcal-primary-blue) !important;
  background: var(--gcal-light-blue) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.25) !important;
}

/* Créneau sélectionné (style Google avec animation) */
.block-picker li.selected a,
.block-picker li a.selected {
  background: linear-gradient(
    135deg,
    var(--gcal-primary-blue),
    var(--gcal-secondary-blue)
  ) !important;
  color: #ffffff !important;
  border-color: var(--gcal-primary-blue) !important;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4) !important;
  transform: translateY(-1px) !important;
}

.block-picker li.selected a::before {
  display: none !important;
}

.block-picker .booking-spaces-left {
  font-size: 12px !important;
  opacity: 0.8 !important;
  margin-left: 6px !important;
  font-weight: 400 !important;
}

/* ============================================= */
/* == Sélecteurs de temps (début/fin) == */
/* ============================================= */

.wc-bookings-start-time-container,
.wc-bookings-end-time-container {
  margin: 16px 0 !important;
}

.wc-bookings-start-time-container label,
.wc-bookings-end-time-container label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--gcal-text-primary) !important;
  margin-bottom: 8px !important;
}

.wc-bookings-start-time-container select,
.wc-bookings-end-time-container select {
  width: 100% !important;
  padding: 12px !important;
  border: 1px solid var(--gcal-border-color) !important;
  border-radius: 4px !important;
  background: var(--gcal-background) !important;
  font-size: 14px !important;
  color: var(--gcal-text-primary) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  outline: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.wc-bookings-start-time-container select:focus,
.wc-bookings-end-time-container select:focus {
  border-color: var(--gcal-primary-blue) !important;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2) !important;
}

/* ============================================= */
/* == Masquer le bouton WooCommerce disgracieux == */
/* ============================================= */

/* Masquer SEULEMENT le bouton de réservation WooCommerce (pas le formulaire !) */
.wc-bookings-booking-form-button,
.single_add_to_cart_button,
button[name="add-to-cart"],
input[name="add-to-cart"],
.woocommerce .single-product .single_add_to_cart_button,
.woocommerce-page .single-product .single_add_to_cart_button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ATTENTION : NE PAS masquer le formulaire .cart car il contient le calendrier ! */
/* Masquer seulement les éléments spécifiques de bouton dans le formulaire */
form.cart .wc-bookings-booking-form-button,
form.cart .single_add_to_cart_button,
form.cart button[type="submit"]:not(.wc-bookings-booking-cost) {
  display: none !important;
}

/* ============================================= */
/* == Prix de la réservation == */
/* ============================================= */

.wc-bookings-booking-cost {
  background: var(--gcal-light-blue) !important;
  border: 1px solid rgba(26, 115, 232, 0.2) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--gcal-primary-blue) !important;
  transition: all 0.3s ease !important;

  /* Transformation en bouton de réservation élégant */
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.wc-bookings-booking-cost:hover {
  background: linear-gradient(
    135deg,
    var(--gcal-primary-blue),
    var(--gcal-secondary-blue)
  ) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(26, 115, 232, 0.4) !important;
}

.wc-bookings-booking-cost:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3) !important;
}

/* Effet de ripple au clic */
.wc-bookings-booking-cost::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.6s, height 0.6s !important;
  pointer-events: none !important;
}

.wc-bookings-booking-cost.ripple-effect::before {
  width: 300px !important;
  height: 300px !important;
}

/* Indicateur de réservation */
.wc-bookings-booking-cost .reservation-indicator {
  display: block !important;
  font-size: 12px !important;
  margin-top: 8px !important;
  color: var(--gcal-text-secondary) !important;
  font-weight: 400 !important;
  opacity: 0.8 !important;
  animation: pulseIndicator 2s infinite !important;
}

@keyframes pulseIndicator {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}

/* État de traitement */
.wc-bookings-booking-cost.processing {
  background: linear-gradient(135deg, var(--gcal-warning), #ffd54f) !important;
  color: var(--gcal-text-primary) !important;
  animation: processingPulse 1s infinite !important;
}

@keyframes processingPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* Effet ripple personnalisé pour le prix */
.price-ripple {
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.6) !important;
  animation: priceRipple 0.6s linear !important;
  pointer-events: none !important;
}

@keyframes priceRipple {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* Animation de mise en évidence du prix */
.wc-bookings-booking-cost.price-highlight {
  background: linear-gradient(
    135deg,
    var(--gcal-success),
    var(--gcal-light-blue)
  ) !important;
  border-color: var(--gcal-success) !important;
  color: #ffffff !important;
  transform: scale(1.02) !important;
  box-shadow: 0 4px 15px rgba(52, 168, 83, 0.3) !important;
  animation: priceHighlight 2s ease !important;
}

@keyframes priceHighlight {
  0% {
    background: var(--gcal-light-blue);
    transform: scale(1);
  }
  50% {
    background: linear-gradient(
      135deg,
      var(--gcal-success),
      var(--gcal-light-blue)
    );
    transform: scale(1.02);
  }
  100% {
    background: var(--gcal-light-blue);
    transform: scale(1);
  }
}

/* ============================================= */
/* == Messages d'erreur == */
/* ============================================= */

.woocommerce-error,
.wc-bookings-error {
  background: rgba(234, 67, 53, 0.1) !important;
  color: var(--gcal-error) !important;
  border: 1px solid rgba(234, 67, 53, 0.3) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 16px 0 !important;
  font-size: 14px !important;
}

/* ============================================= */
/* == FORCER LES DIMENSIONS DU CONTENEUR POUR GOOGLE CALENDAR == */
/* ============================================= */

/* PRIORITÉ ABSOLUE : Forcer les dimensions du conteneur pour accueillir le calendrier Google Calendar */
.woocommerce #wc-bookings-booking-form,
.woocommerce-page #wc-bookings-booking-form,
.single-product #wc-bookings-booking-form,
#wc-bookings-booking-form,
.wc-bookings-booking-form {
  /* Dimensions desktop par défaut */
  width: 450px !important;
  min-width: 450px !important;
  max-width: none !important;

  /* Permettre le débordement si nécessaire */
  overflow: visible !important;

  /* Position et z-index pour éviter les conflits */
  position: relative !important;
  z-index: 1000 !important;

  /* Marges pour éviter la collision avec les éléments adjacents */
  margin-left: 0 !important;
  margin-right: 20px !important;

  /* Éliminer l'effet de fenêtre sous fenêtre */
  box-shadow: var(--gcal-shadow-soft) !important;
  background: var(--gcal-card-background) !important;
  border: 1px solid var(--gcal-border-color) !important;
}

/* Forcer les conteneurs parents à s'adapter - DESKTOP SEULEMENT */
@media (min-width: 769px) {
  .single-product .product .summary,
  .woocommerce-page .product .summary,
  .woocommerce .product .summary {
    /* Élargir le conteneur parent */
    min-width: 500px !important;
    overflow: visible !important;

    /* Assurer une intégration harmonieuse */
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Conteneur spécifique du date picker - DESKTOP SEULEMENT */
@media (min-width: 769px) {
  .wc-bookings-date-picker,
  .woocommerce .wc-bookings-date-picker,
  .woocommerce-page .wc-bookings-date-picker {
    width: 100% !important;
    min-width: 400px !important;
    overflow: visible !important;
  }
}

/* ============================================= */
/* == Solution Mobile Simple et Efficace == */
/* ============================================= */

/* Mobile : Override complet des dimensions fixes */
@media (max-width: 768px) {
  /* FORCER la largeur responsive du formulaire */
  .woocommerce #wc-bookings-booking-form,
  .woocommerce-page #wc-bookings-booking-form,
  .single-product #wc-bookings-booking-form,
  #wc-bookings-booking-form,
  .wc-bookings-booking-form {
    width: 95vw !important;
    max-width: 350px !important;
    min-width: auto !important;
    margin: 10px auto !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* Calendrier responsive */
  .ui-datepicker {
    width: 100% !important;
    max-width: 300px !important;
    padding: 10px !important;
  }

  /* Cellules du calendrier adaptatives */
  .ui-datepicker-calendar {
    width: 100% !important;
  }

  .ui-datepicker-calendar td {
    width: 14.28% !important; /* 100% / 7 jours */
  }

  .ui-datepicker-calendar td a,
  .ui-datepicker-calendar td span {
    width: 100% !important;
    height: 35px !important;
    font-size: 12px !important;
    min-width: 35px !important;
  }

  /* Boutons créneaux responsive */
  .block-picker ul {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  .block-picker li a {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 40px !important;
  }

  /* Bouton réservation mobile */
  .wc-bookings-booking-cost {
    width: 100% !important;
    padding: 15px !important;
    font-size: 14px !important;
    margin: 15px 0 !important;
    text-align: center !important;
  }

  /* Empêcher le débordement horizontal */
  body {
    overflow-x: hidden !important;
  }
}

/* Très petit mobile */
@media (max-width: 480px) {
  .woocommerce #wc-bookings-booking-form,
  .woocommerce-page #wc-bookings-booking-form,
  .single-product #wc-bookings-booking-form,
  #wc-bookings-booking-form,
  .wc-bookings-booking-form {
    width: 98vw !important;
    max-width: 320px !important;
    padding: 8px !important;
  }

  .ui-datepicker {
    max-width: 280px !important;
    padding: 8px !important;
  }

  .ui-datepicker-calendar td a,
  .ui-datepicker-calendar td span {
    height: 30px !important;
    font-size: 11px !important;
    min-width: 30px !important;
  }

  .block-picker li a {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-height: 36px !important;
  }
}

/* ============================================= */
/* == Animations d'entrée == */
/* ============================================= */

@keyframes gcalFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#wc-bookings-booking-form {
  animation: gcalFadeIn 0.3s ease-out !important;
}

/* ============================================= */
/* == États de focus pour l'accessibilité == */
/* ============================================= */

*:focus-visible {
  outline: 2px solid var(--gcal-primary-blue) !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}