
/* Dedicated, versioned booking control stylesheet. Never share hero animation rules. */
body #reservation.booking-planner .booking-controls.vehicle-booking-controls{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;gap:0!important;align-items:stretch!important;padding-top:0!important;border-top:0!important;width:100%!important}
body #reservation.booking-planner .booking-controls.vehicle-booking-controls>.price{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;width:100%!important;min-height:0!important;padding:18px 0 24px!important;border-bottom:1px solid #e5e8e4!important}
body #reservation.booking-planner .booking-controls.vehicle-booking-controls>.price>small{grid-column:1!important;font:500 clamp(12px,3vw,16px)/1.3 Arial,sans-serif!important;letter-spacing:.04em!important;color:#666!important;white-space:nowrap!important}
body #reservation.booking-planner .booking-controls.vehicle-booking-controls>.price>.standard-price-value{grid-column:2!important;justify-self:end!important;display:inline-flex!important;align-items:center!important;margin:0!important}
body #reservation.booking-planner .booking-controls.vehicle-booking-controls>.price>.standard-price-value strong{font:700 clamp(28px,7vw,38px)/1.1 Arial,sans-serif!important;color:#111!important;white-space:nowrap!important}
body #reservation.booking-planner .booking-controls.vehicle-booking-controls>.booking-date-field{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:16px!important;width:100%!important;margin:0!important;padding:24px 0 0!important;position:relative!important}
body #reservation.booking-planner .booking-date-field>.booking-date-label{display:block!important;font:500 clamp(14px,3.5vw,18px)/1.3 Arial,sans-serif!important;color:#666!important;letter-spacing:.03em!important}
body #reservation.booking-planner .booking-date-control{display:block!important;position:relative!important;width:100%!important}
body #reservation.booking-planner .booking-date-control>.booking-date-trigger{box-sizing:border-box!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:15px!important;width:100%!important;min-height:94px!important;padding:19px 17px!important;border:1px solid transparent!important;border-radius:18px!important;background:#f1f1f1!important;box-shadow:none!important;color:#111!important;transform:none!important;cursor:pointer!important}
body #reservation.booking-planner .booking-date-trigger>.booking-date-icon{display:block!important;flex:0 0 25px!important;width:25px!important;height:25px!important}
body #reservation.booking-planner .booking-date-trigger>.booking-date-copy{display:flex!important;flex:1 1 auto!important;min-width:0!important;flex-direction:column!important;gap:5px!important}
body #reservation.booking-planner .booking-date-copy>strong{display:block!important;font:600 clamp(17px,4vw,23px)/1.2 Arial,sans-serif!important;color:#111!important}
body #reservation.booking-planner .booking-date-copy>.booking-date-text{display:block!important;font:400 clamp(14px,3.5vw,20px)/1.3 Arial,sans-serif!important;color:#666!important}
body #reservation.booking-planner .booking-date-trigger>.booking-date-arrow{display:block!important;flex:0 0 24px!important;width:24px!important;height:24px!important}
body #reservation.booking-planner .booking-date-control>input#bookingStartDate{position:absolute!important;inset:0!important;display:block!important;box-sizing:border-box!important;width:100%!important;height:100%!important;min-height:94px!important;max-height:100%!important;margin:0!important;padding:0!important;opacity:0!important;z-index:3!important;cursor:pointer!important}
body #reservation.booking-planner .booking-date-control:focus-within>.booking-date-trigger{outline:2px solid #235842!important;outline-offset:2px!important}

/* A visible year shortcut complements the browser's native picker when the
   booking window crosses 31 December. The native input keeps its max bound. */
body #reservation.booking-planner .booking-date-help{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px;margin-top:-7px;color:#53625b;
}
body #reservation.booking-planner .booking-date-help>small{
  font:400 clamp(12px,3vw,14px)/1.45 Arial,sans-serif;
}
body #reservation.booking-planner .booking-next-year:not([hidden]){
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:9px 14px;
  border:1px solid #235842;border-radius:999px;
  background:#fff;color:#235842;
  font:700 14px/1.2 Arial,sans-serif;cursor:pointer;
}
body #reservation.booking-planner .booking-next-year:not([hidden]):focus-visible{
  outline:3px solid #235842;outline-offset:3px;
}
body #reservation.booking-planner .booking-next-year[hidden]{display:none!important}

/* The native browser year scroller hides future years on several desktop
   browsers. A separate explicit year selector exposes the entire Mercure
   booking window (including the January crossover into 2027). */
body #reservation.booking-planner .booking-date-help>.booking-year-label{
 display:inline-flex;align-items:center;gap:10px;min-height:44px;
 font:600 14px/1.3 Arial,sans-serif;color:#235842;
}
body #reservation.booking-planner .booking-date-help .booking-year-select{
 min-width:100px;min-height:44px;padding:8px 12px;
 font:600 16px/1.25 Arial,sans-serif;color:#173e30;
 background:#fff;border:1px solid #235842;border-radius:10px;
 cursor:pointer;
}
body #reservation.booking-planner .booking-year-select:focus-visible{
 outline:3px solid #235842;outline-offset:3px;
}
body #reservation.booking-planner .booking-year-select[hidden]{display:none!important}

/* Step 2 belongs to the date choice: one grouped green panel on every viewport.
   Explicitly scoped to the customer booking form, including Android WebView. */
body.premium-home #reservation.booking-planner .booking-date-field>.booking-slot-step{
  box-sizing:border-box!important;
  display:flex!important;align-items:center!important;gap:14px!important;
  width:100%!important;min-width:0!important;
  margin:0 0 8px!important;padding:16px 18px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#27634b,#194735)!important;
  color:#fff!important;
}
body.premium-home #reservation.booking-planner .booking-date-field>.booking-slot-step>span{
  flex:0 0 42px!important;width:42px!important;height:42px!important;
  display:grid!important;place-items:center!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;font:700 18px/1 Arial,sans-serif!important;
}
body.premium-home #reservation.booking-planner .booking-date-field>.booking-slot-step>div{
  min-width:0!important;display:grid!important;gap:4px!important;
}
body.premium-home #reservation.booking-planner .booking-date-field>.booking-slot-step small{
  color:#dcefe5!important;font:700 clamp(11px,1.25vw,14px)/1.25 Arial,sans-serif!important;
  letter-spacing:.1em!important;
}
body.premium-home #reservation.booking-planner .booking-date-field>.booking-slot-step strong{
  color:#fff!important;font:700 clamp(16px,2vw,21px)/1.3 Arial,sans-serif!important;
  overflow-wrap:break-word!important;
}
@media(max-width:480px){
  body.premium-home #reservation.booking-planner .booking-date-field>.booking-slot-step{
    padding:14px 12px!important;gap:11px!important;
  }
  body.premium-home #reservation.booking-planner .booking-date-field>.booking-slot-step>span{
    flex-basis:38px!important;width:38px!important;height:38px!important;
  }
}
