/* PREMIUM 24.3.8.6 — mobile viewport hardening
   Prevents horizontal page drift/clipping and keeps booking UI inside the phone viewport. */

html,body{max-width:100%;overflow-x:hidden}
body{min-width:0}
main,section,header,footer,.shell,.site-header,.header-wrap,.header-glass,.booking-grid,.booking-form,.booking-wizard,.booking-step,.booking-live-summary,.date-picker-card,.service-first-dialog{min-width:0;max-width:100%}
img,video,canvas,iframe{max-width:100%}

@media (max-width:760px){
  :root{--mobile-side:14px;--mobile-dock-h:86px}

  html{width:100%;overflow-x:hidden;scroll-padding-top:92px}
  body{width:100%;overflow-x:hidden;padding-bottom:calc(var(--mobile-dock-h) + env(safe-area-inset-bottom,0px))}
  body>*{max-width:100%}

  /* Universal containers */
  .shell{width:calc(100% - (var(--mobile-side) * 2))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  .section{width:100%;max-width:100%;overflow:hidden}
  h1,h2,h3,p,strong,small,span,label,button,a{overflow-wrap:anywhere}

  /* Fixed header must never be wider than the viewport */
  .site-header{left:0!important;right:0!important;width:100%!important;max-width:100vw!important;padding:8px 0 0!important}
  .site-header .header-wrap{width:calc(100% - 28px)!important;max-width:none!important;margin:0 auto!important}
  .header-glass{width:100%!important;max-width:100%!important;height:70px!important;padding:0 14px!important;gap:10px!important;border-radius:22px!important}
  .brand{min-width:0!important;flex:0 0 auto!important}
  .brand img{width:52px!important;height:52px!important}
  .brand span,.main-nav,.header-phone,.header-book{display:none!important}
  .header-tools{margin-left:auto!important;min-width:44px!important;flex:0 0 auto!important}
  .menu-toggle{display:block!important;width:44px!important;height:44px!important;padding:5px!important}
  .mobile-menu.open{position:absolute!important;top:78px!important;left:0!important;right:0!important;width:100%!important;max-height:calc(100svh - 100px)!important;overflow:auto!important}

  /* Hero and ordinary sections */
  .hero{width:100%!important;max-width:100%!important;height:auto!important;min-height:100svh!important;border-radius:0 0 24px 24px!important}
  .hero-content{width:calc(100% - 28px)!important;grid-template-columns:minmax(0,1fr)!important;padding:130px 0 42px!important;gap:28px!important}
  .hero-copy,.quick-card{width:100%!important;max-width:100%!important;min-width:0!important}
  .hero-copy h1{font-size:clamp(42px,13vw,62px)!important;line-height:1.02!important;word-break:normal!important}
  .hero-text{max-width:100%!important}
  .hero-actions{grid-template-columns:1fr!important}
  .hero-features{width:calc(100% - 28px)!important;left:auto!important;transform:none!important;margin-left:auto!important;margin-right:auto!important;grid-template-columns:1fr!important}
  .hero-features>div,.hero-features>a{width:100%!important}

  .intro-grid,.section-head,.split-grid,.contacts-grid,.reviews-grid,.booking-grid,.territory-layout,.tour-shell{grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;gap:28px!important}
  .photo-story,.stay-grid,.experience-grid,.gallery-grid,.reviews-list,.benefits{grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important}
  .photo-story blockquote{max-width:100%!important}
  .footer-inner{width:100%!important;max-width:100%!important}

  /* Booking section: the main source of horizontal drift */
  .booking{width:calc(100% - 12px)!important;max-width:calc(100% - 12px)!important;margin:0 6px!important;border-radius:24px!important;overflow:hidden!important}
  .booking>.booking-bg,.booking>.booking-shade{max-width:none}
  .booking .shell.booking-grid{width:calc(100% - 20px)!important;max-width:none!important;margin:0 auto!important;padding:0!important;grid-template-columns:minmax(0,1fr)!important;gap:24px!important}
  .booking-copy{width:100%!important;max-width:100%!important;min-width:0!important;padding:0 2px!important}
  .booking-copy h2{font-size:clamp(44px,13vw,62px)!important;line-height:1.05!important}
  .booking-form{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:20px 14px 26px!important;border-radius:22px!important;overflow:hidden!important}
  .booking-form *{min-width:0}
  .booking-wizard-head{display:block!important;width:100%!important}
  .booking-progress-six{width:100%!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:6px!important}
  .booking-progress-six i{min-width:0!important;width:100%!important}
  .booking-step{width:100%!important;max-width:100%!important;overflow:visible!important}
  .booking-step h3{font-size:clamp(26px,8vw,34px)!important;line-height:1.15!important}
  .form-row,.quick-grid{grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:10px!important}
  .booking-form input,.booking-form select,.booking-form textarea,.date-display{max-width:100%!important;min-width:0!important}

  /* Stay and add-on choices */
  .booking-stay-choices,.booking-addons,.addon-grid-rich{width:100%!important;max-width:100%!important;min-width:0!important}
  .booking-stay-choice{width:100%!important;max-width:100%!important;grid-template-columns:72px minmax(0,1fr)!important;gap:10px!important;padding:9px!important}
  .booking-stay-choice img{width:72px!important;height:68px!important}
  .booking-stay-choice small{white-space:normal!important;overflow-wrap:anywhere!important}
  .booking-stay-choice i{grid-column:2!important;justify-self:start!important;max-width:100%!important}

  #booking .booking-wizard #bookingAddons .addon-grid-rich{width:100%!important;max-width:100%!important;overflow:visible!important}
  #booking .booking-wizard #bookingAddons .addon-card{width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;overflow:hidden!important}
  #booking .booking-wizard #bookingAddons .addon-card>.addon-media{width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:16/10!important}
  #booking .booking-wizard #bookingAddons .addon-card>.addon-media>img{width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important}
  #booking .booking-wizard #bookingAddons .addon-card>.addon-copy{width:100%!important;max-width:100%!important;padding:16px!important;overflow:hidden!important}
  #booking .booking-wizard #bookingAddons .addon-copy>strong{font-size:1.08rem!important;line-height:1.25!important;overflow-wrap:anywhere!important}
  #booking .booking-wizard #bookingAddons .addon-copy>em{font-size:.87rem!important;line-height:1.45!important;overflow-wrap:anywhere!important}
  #booking .booking-wizard #bookingAddons .addon-price{flex-wrap:wrap!important;width:100%!important}
  #booking .booking-wizard #bookingAddons .addon-select-text{max-width:100%!important;white-space:normal!important;text-align:center!important}
  .addon-hourly-controls,.primary-hourly-controls{width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .addon-hourly-controls label,.primary-hourly-controls label{min-width:0!important}
  .addon-hourly-controls input,.primary-hourly-controls input{width:100%!important;max-width:100%!important}
  .addon-hourly-controls strong{grid-column:1/-1!important;width:100%!important}
  .addon-filters{width:100%!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important}

  /* Summary and action buttons */
  .booking-live-summary{width:100%!important;max-width:100%!important;padding:14px!important;overflow:hidden!important}
  .booking-live-summary #bookingMiniSummary{grid-template-columns:minmax(0,1fr) auto!important;max-width:100%!important}
  .booking-quote,.booking-review,.booking-review dl{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .booking-quote *,.booking-review *{max-width:100%!important;overflow-wrap:anywhere!important}
  .booking-wizard-actions{width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .booking-wizard-actions .btn{width:100%!important;max-width:100%!important;min-width:0!important;white-space:normal!important;padding:0 14px!important;text-align:center!important}

  /* Calendar modal stays within viewport and above the bottom dock */
  .date-picker-modal{width:100%!important;max-width:100vw!important;padding:0!important;align-items:flex-end!important;overflow:hidden!important}
  .date-picker-card{width:100%!important;max-width:100%!important;max-height:calc(100svh - 12px)!important;border-radius:24px 24px 0 0!important;padding:20px 14px calc(24px + env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overflow-x:hidden!important}
  .date-picker-head,.date-picker-nav,.calendar-months,.calendar-month,.date-picker-footer{width:100%!important;max-width:100%!important;min-width:0!important}
  .date-picker-head h2{font-size:clamp(34px,10vw,46px)!important;line-height:1.05!important}
  .date-picker-nav{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;gap:8px!important}
  .date-picker-nav button{min-width:0!important;width:100%!important;padding:0 8px!important}
  .calendar-months{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .calendar-month{padding:14px 10px!important;overflow:hidden!important}
  .calendar-week,.calendar-days{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:4px!important;width:100%!important}
  .calendar-week span{font-size:10px!important;padding:3px 0!important}
  .calendar-day{width:100%!important;min-width:0!important;min-height:46px!important;padding:3px 1px!important}
  .calendar-day b{font-size:12px!important}
  .calendar-day small{font-size:8px!important}
  .calendar-legend{gap:10px!important}
  .date-picker-footer{padding-bottom:calc(var(--mobile-dock-h) - 54px)!important}
  .date-picker-footer .btn{width:100%!important;max-width:100%!important;white-space:normal!important}
  .modal-close{right:12px!important;top:12px!important}

  /* Service-first modal */
  .service-first-modal{width:100%!important;max-width:100vw!important;overflow:hidden!important}
  .service-first-dialog{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .service-first-grid{grid-template-columns:minmax(0,1fr)!important}
  .service-first-card{width:100%!important;max-width:100%!important;grid-template-columns:86px minmax(0,1fr)!important}
  .service-first-copy{min-width:0!important}

  /* Bottom dock */
  .mobile-dock{left:12px!important;right:12px!important;bottom:max(10px,env(safe-area-inset-bottom,0px))!important;transform:none!important;width:auto!important;max-width:none!important;height:72px!important;padding:8px 10px!important;border-radius:28px!important}
  .mobile-dock a{font-size:17px!important;min-width:0!important}
  .mobile-dock small{font-size:11px!important;white-space:nowrap!important}
  .mobile-dock .dock-main span{width:48px!important;height:48px!important;margin-top:-29px!important}

  /* Footer and floating version stay clear of the dock */
  footer{width:100%!important;max-width:100%!important;margin-bottom:0!important;padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))!important}
  .footer-inner{flex-direction:column!important;align-items:flex-start!important}
  .version{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;left:8px!important}
}

@media (max-width:380px){
  :root{--mobile-side:10px}
  .site-header .header-wrap{width:calc(100% - 20px)!important}
  .booking .shell.booking-grid{width:calc(100% - 14px)!important}
  .booking-form{padding-left:11px!important;padding-right:11px!important}
  .calendar-month{padding-left:7px!important;padding-right:7px!important}
  .calendar-day{min-height:43px!important}
  .mobile-dock{left:8px!important;right:8px!important}
}

@media (max-width:760px){
  /* The fixed dock must not cover the booking wizard or calendar controls. */
  body.booking-mobile-active .mobile-dock,
  body:has(.date-picker-modal.is-open) .mobile-dock,
  body:has(.service-first-modal.is-open) .mobile-dock{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(20px)!important;
  }
  .mobile-dock{transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important}
  #booking{scroll-margin-top:94px}
  #booking .booking-form{padding-bottom:30px!important}
}