/**
 * VerreWI 1.9.5 — safe booking UX: React/Webba Booking 6.5 owns its layout.
 * All adjustments are restricted to the actual VerreWI booking pages.
 */
body.vwi-booking-page #wpfront-scroll-top-container,
body.vwi-booking-page #wpfront-scroll-top-container img {
  display: none !important; /* Avoid covering mobile next/previous buttons. */
}

body.vwi-booking-page .webba_booking_form_v6,
body.vwi-booking-page .webba_booking_form_v6 > .main-block-w {
  box-sizing: border-box;
  max-width: 100%;
}

body.vwi-booking-page .webba_booking_form_v6 {
  min-width: 0;
  scroll-margin-top: 100px;
}

body.vwi-booking-page .webba_booking_form_v6 button,
body.vwi-booking-page .webba_booking_form_v6 [role="button"],
body.vwi-booking-page .webba_booking_form_v6 [role="radio"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.vwi-booking-page .webba_booking_form_v6 button:focus-visible,
body.vwi-booking-page .webba_booking_form_v6 a:focus-visible,
body.vwi-booking-page .webba_booking_form_v6 input:focus-visible,
body.vwi-booking-page .webba_booking_form_v6 select:focus-visible,
body.vwi-booking-page .webba_booking_form_v6 [role="button"]:focus-visible {
  outline: 2px solid #ee4b18;
  outline-offset: 2px;
}

/* Elementor gives the reservation shortcode a constrained/inherited widget width.
 * Force the booking area to use the available column instead of a narrow card.
 * Scoped to the exact booking page/template, not the global Elementor layout.
 */
body.vwi-booking-reservation .elementor-2589 .elementor-element-66488ba > .e-con-inner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
body.vwi-booking-reservation .elementor-2589 .elementor-element-90b518b,
body.vwi-booking-reservation .elementor-2589 .elementor-element-90b518b > .elementor-widget-container,
body.vwi-booking-reservation .elementor-2589 .elementor-element-90b518b .elementor-shortcode,
body.vwi-booking-reservation .elementor-2589 .elementor-element-90b518b .webba_booking_form_v6 {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  flex-basis: 100%;
}

@media (max-width: 767px) {
  /* Mobile layout: wide usable form with small safe-area breathing space. */
  body.vwi-booking-reservation .elementor-2589 .elementor-element-66488ba {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
    padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)) !important;
  }
  body.vwi-booking-reservation .elementor-2589 .elementor-element-66488ba > .e-con-inner {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 0;
  }
  body.vwi-booking-reservation .elementor-2589 .elementor-element-90b518b {
    --width: 100%;
    --container-widget-width: 100%;
    align-self: stretch !important;
    flex: 1 1 100% !important;
    margin-inline: 0 !important;
  }
  /* Webba's older layout has a hard 375px minimum, breaking 320-360px phones. */
  body.vwi-booking-page .webba_booking_form_v6 .main-block-inner-w,
  body.vwi-booking-page .webba_booking_form_v6 .appointment-box-wbk {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
  }
  body.vwi-booking-page .webba_booking_form_v6 .wizard-content-w,
  body.vwi-booking-page .webba_booking_form_v6 .wizard-content-scroll-w {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }
  /* The native 300px min-width on step CTAs otherwise clips the mobile form. */
  body.vwi-booking-page .webba_booking_form_v6 .wizard-content-w .button-block-wbk .button-wbk {
    min-width: 0 !important;
    max-width: 100%;
  }
  body.vwi-booking-page .webba_booking_form_v6 .wizard-content-w .two-buttons-wbk {
    gap: 8px;
  }
  body.vwi-booking-page .webba_booking_form_v6 .wizard-content-w .two-buttons-wbk .button-wbk {
    flex: 1 1 0;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.vwi-booking-page .ui-datepicker {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: calc(100vw - 20px);
  }
  /* Webba React can add a narrow top-level wrapper inside its mount point. */
  body.vwi-booking-page .webba_booking_form_v6 > div {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* Webba's booking popup is portalled outside its shortcode root. */
  body.vwi-booking-page #wbk-booking-form-popup-root [role="dialog"],
  body.vwi-booking-page .webba_booking_form_v6 [role="dialog"] {
    box-sizing: border-box;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    min-width: 0;
    margin-inline: auto;
  }
  body.vwi-booking-page #wbk-booking-form-popup-root [role="dialog"] > div,
  body.vwi-booking-page .webba_booking_form_v6 [role="dialog"] > div {
    max-width: 100%;
    min-width: 0;
  }
  body.vwi-booking-page .webba_booking_form_v6 {
    width: 100%;
    max-width: 100%;
  }

  /* Prevent iOS from zooming when the visitor focuses a customer field. */
  body.vwi-booking-page .webba_booking_form_v6 input:not([type="checkbox"]):not([type="radio"]),
  body.vwi-booking-page .webba_booking_form_v6 select,
  body.vwi-booking-page .webba_booking_form_v6 textarea {
    font-size: max(16px, 1em);
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Let large labels wrap rather than overflow the mobile viewport. */
  body.vwi-booking-page .webba_booking_form_v6 button,
  body.vwi-booking-page .webba_booking_form_v6 [role="button"] {
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.vwi-booking-page .webba_booking_form_v6 {
    scroll-behavior: auto;
  }
}

/* VerreWI 1.9.8: narrowly scoped fixes for live Webba React cards. */
@media (max-width:767px) {
  body.vwi-booking-page .webba_booking_form_v6 .vwi-card-mobile,
  body.vwi-booking-page .webba_booking_form_v6 .vwi-card-media-row {
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  /* Move only the image/text row into a vertical layout, not the whole wizard. */
  body.vwi-booking-page .webba_booking_form_v6 .vwi-card-media-row {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    flex-wrap:nowrap !important;
    gap:14px !important;
  }
  body.vwi-booking-page .webba_booking_form_v6 .vwi-card-media-row > * {
    box-sizing:border-box !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  body.vwi-booking-page .webba_booking_form_v6 .vwi-card-media {
    box-sizing:border-box !important;
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
    height:clamp(155px,45vw,220px) !important;
    overflow:hidden !important;
    border-radius:10px;
  }
  body.vwi-booking-page .webba_booking_form_v6 .vwi-card-media img {
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
  }
  body.vwi-booking-page .webba_booking_form_v6 .vwi-card-price {
    position:static !important;
    inset:auto !important;
    display:inline-block !important;
    flex:0 0 auto !important;
    width:auto !important;
    max-width:100% !important;
    white-space:nowrap !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  body.vwi-booking-page .webba_booking_form_v6 .vwi-card-mobile :is(h2,h3,h4,p,span,strong),
  body.vwi-booking-page .webba_booking_form_v6 .vwi-card-media-row :is(h2,h3,h4,p,span,strong) {
    min-width:0 !important;
    max-width:100% !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
  /* The visual label is CSS-only; the original React button and click handler
     are untouched. Native label stays in the DOM for re-rendering. */
  body.vwi-booking-page .webba_booking_form_v6 button.vwi-direct-select,
  body.vwi-booking-page .webba_booking_form_v6 [role=button].vwi-direct-select,
  body.vwi-booking-page .webba_booking_form_v6 input.vwi-direct-select {
    font-size:0 !important;
  }
  body.vwi-booking-page .webba_booking_form_v6 button.vwi-direct-select::after,
  body.vwi-booking-page .webba_booking_form_v6 [role=button].vwi-direct-select::after {
    content:'CHOISIR';
    font-size:clamp(14px,4vw,17px) !important;
    font-weight:600;
    letter-spacing:.025em;
    color:inherit;
    display:inline-block;
    line-height:1.4;
  }
  /* A first-step selection button that triggers variants stays '+ CHOIX'. */
  body.vwi-booking-page .webba_booking_form_v6 .vwi-date-row {
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:8px !important;
    height:auto !important;
  }
  body.vwi-booking-page .webba_booking_form_v6 .vwi-date-row > * {
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
  }
  body.vwi-booking-page .webba_booking_form_v6 .vwi-date-prompt {
    display:block !important;
    position:static !important;
    flex:1 1 100% !important;
    width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
  /* Supplement availability always follows the description on a new line. */
  body.vwi-booking-page .webba_booking_form_v6 .vwi-supplement-copy {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
  }
  body.vwi-booking-page .webba_booking_form_v6 .vwi-supplement-copy > *,
  body.vwi-booking-page .webba_booking_form_v6 .vwi-supplement-availability {
    display:block !important;
    position:static !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
    overflow-wrap:break-word !important;
  }
}

/* VerreWI 1.9.22 — month navigation visibility only.
 * Webba Premium 6.5.x owns the real date state, availability and Stripe.
 * Scope these presentation safeguards to the existing booking form.
 * No fake dates, synthetic clicks or service-setting changes.
 */
body.vwi-booking-page .webba_booking_form_v6 .wbk_booking_calendar .react-calendar__navigation,
body.vwi-booking-page #wbk-booking-form-popup-root .wbk_booking_calendar .react-calendar__navigation {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 3px 2px 10px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 5 !important;
}
body.vwi-booking-page .webba_booking_form_v6 .react-calendar__navigation__label,
body.vwi-booking-page #wbk-booking-form-popup-root .react-calendar__navigation__label {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #202830 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  white-space: normal !important;
  text-align: center !important;
}
body.vwi-booking-page .webba_booking_form_v6 .react-calendar__navigation :is(.react-calendar__navigation__prev-button, .react-calendar__navigation__next-button, .react-calendar__navigation__prev2-button, .react-calendar__navigation__next2-button),
body.vwi-booking-page #wbk-booking-form-popup-root .react-calendar__navigation :is(.react-calendar__navigation__prev-button, .react-calendar__navigation__next-button, .react-calendar__navigation__prev2-button, .react-calendar__navigation__next2-button) {
  position: relative !important;
  flex: 0 0 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid #e4e8eb !important;
  border-radius: 50% !important;
  color: #22292f !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .13) !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  font-size: 20px !important;
  line-height: 1 !important;
  touch-action: manipulation;
}
body.vwi-booking-page .webba_booking_form_v6 .react-calendar__navigation :is(.react-calendar__navigation__prev-button, .react-calendar__navigation__next-button):not(:disabled):hover,
body.vwi-booking-page #wbk-booking-form-popup-root .react-calendar__navigation :is(.react-calendar__navigation__prev-button, .react-calendar__navigation__next-button):not(:disabled):hover {
  background: #fff2ed !important;
  border-color: #e84919 !important;
  color: #be3b14 !important;
}
body.vwi-booking-page .webba_booking_form_v6 .react-calendar__navigation button:disabled,
body.vwi-booking-page #wbk-booking-form-popup-root .react-calendar__navigation button:disabled {
  opacity: .35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
body.vwi-booking-page .webba_booking_form_v6 .react-calendar__navigation button:focus-visible,
body.vwi-booking-page #wbk-booking-form-popup-root .react-calendar__navigation button:focus-visible {
  outline: 2px solid #e84919 !important;
  outline-offset: 2px !important;
}
@media (max-width: 400px) {
  body.vwi-booking-page .webba_booking_form_v6 .react-calendar__navigation,
  body.vwi-booking-page #wbk-booking-form-popup-root .react-calendar__navigation { gap: 1px !important; }
  body.vwi-booking-page .webba_booking_form_v6 .react-calendar__navigation :is(.react-calendar__navigation__prev-button, .react-calendar__navigation__next-button, .react-calendar__navigation__prev2-button, .react-calendar__navigation__next2-button),
  body.vwi-booking-page #wbk-booking-form-popup-root .react-calendar__navigation :is(.react-calendar__navigation__prev-button, .react-calendar__navigation__next-button, .react-calendar__navigation__prev2-button) {
    flex-basis: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
}
