/* Booking page fixes for tablets and touch devices (live audit 2026-10-25). Desktop layout unchanged.
   1. 621–900 px: the form keeps a 12-column grid from option.css, while the 2-column rules placed the submit
      button in column 1 and the note in column 2 (30–40 px wide each). Give them real spans.
   2. Touch devices: form text at 16 px so iOS Safari does not zoom the page when a field is tapped. */
@media (min-width:621px) and (max-width:900px){
  .booking-panel .booking-submit{grid-column:1/6!important;width:auto!important}
  .booking-panel .booking-status{grid-column:6/-1!important;align-self:center}
}
@media (hover:none) and (pointer:coarse){
  .booking-panel :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important}
}

/* ---------- Mobile and tablet booking (≤900 px). Desktop layout unchanged. ---------- */
@media (max-width:900px){
  .booking-visual{height:420px!important;min-height:420px!important}
  .booking-visual-copy h1{font-size:60px!important}
  .brio-legend{font-size:24px!important}
  .brio-legend span{font-size:11px!important}
  .stay-choice span,.stay-choice small,.room-choice small,.brio-field-help,.brio-field label,.brio-form-summary span,.brio-form-summary small{font-size:11px!important;letter-spacing:.06em}
  .stay-choice{border:1px solid rgba(23,63,109,.25)!important;padding:14px 14px!important;text-align:left}
  .stay-choice[aria-pressed="true"]{border:2px solid var(--folio-blue,#173f6d)!important;background:rgba(23,63,109,.06)!important}
  .brio-field :is(input:not([type=checkbox]),select){min-height:48px!important}
  .brio-field textarea{min-height:96px!important}
  .brio-check{font-size:13px!important;line-height:1.5!important;gap:12px!important;align-items:start}
  .brio-check input[type=checkbox]{width:22px!important;height:22px!important;margin:1px 0 0!important}
  .booking-panel .booking-submit{color:#fff!important;background:var(--folio-blue,#173f6d)!important;border-color:var(--folio-blue,#173f6d)!important;min-height:56px!important;font-size:13px!important}
  .booking-status,.booking-availability{font-size:13px!important;line-height:1.5!important}
  .room-choice[aria-pressed="true"]{outline:3px solid var(--folio-blue,#173f6d)!important;outline-offset:3px!important}
  .guest-stepper{display:grid;grid-template-columns:48px 1fr 48px;align-items:stretch;gap:0}
  .guest-stepper input{text-align:center;border-left:0!important;border-right:0!important}
  .guest-stepper button{min-height:48px;border:1px solid rgba(23,63,109,.3);background:transparent;color:var(--folio-blue,#173f6d);font:400 24px/1 Georgia,serif;cursor:pointer}
  .guest-stepper button:disabled{opacity:.3}
  .book-sticky{position:fixed;z-index:40;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,253,247,.97);border-top:1px solid rgba(23,63,109,.18);box-shadow:0 -8px 24px rgba(23,40,60,.08);transform:translateY(110%);transition:transform .25s ease}
  .book-sticky.is-shown{transform:none}
  .book-sticky p{flex:1;min-width:0;margin:0;line-height:1.25}
  .book-sticky b{display:block;font:400 17px/1.15 var(--folio-serif,Georgia,serif);color:var(--folio-blue,#173f6d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .book-sticky small{display:block;font-size:12px;color:#5f5d55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .book-sticky button{flex:none;min-height:48px;padding:0 18px;border:0;background:var(--folio-blue,#173f6d);color:#fff;font:600 12px/1 var(--font-sans,Manrope,sans-serif);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.book-sticky{transition:none}}
@media (max-width:620px){
  .booking-visual{height:300px!important;min-height:300px!important}
  .booking-visual:after{display:none}
  .booking-visual-copy{bottom:22px!important}
  .booking-visual-copy h1{font-size:48px!important;margin-bottom:6px!important}
  .booking-visual-copy>p:last-child{font-size:13px!important;line-height:1.45!important}
  .booking-panel>h2{font-size:34px!important;margin-bottom:6px!important}
  .stay-choice{min-height:84px!important;grid-template-columns:1fr!important;align-content:start!important;align-items:start!important;row-gap:4px!important;padding:12px 12px!important}
  .stay-choice b{font-size:20px!important;line-height:1.1!important}
  .stay-choice small{grid-column:1!important;grid-row:auto!important;text-align:left!important}
  .room-choice-grid{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px!important;padding:0 20px 4px!important;scrollbar-width:none}
  .room-choice-grid::-webkit-scrollbar{display:none}
  .room-choice{flex:0 0 44%;scroll-snap-align:start;min-height:0!important;margin-bottom:80px!important}
  .room-choice small{top:calc(100% + 40px)!important;right:0;white-space:normal;line-height:1.35}
  .brio-field-grid{grid-template-columns:1fr!important}
  .brio-field-grid [data-field="name"]{order:1}
  .brio-field-grid [data-field="phone"]{order:2}
  .brio-field-grid [data-field="email"]{order:3}
  .brio-field-grid .brio-field--wide{order:4}
  .brio-field-grid--dates{grid-template-columns:1fr 1fr!important}
  .booking-panel{padding-bottom:28px!important}
  body.has-book-sticky .closing-footer{padding-bottom:96px}
}
/* Desktop keeps the approved plain number field: the stepper wrapper is transparent and its buttons hidden. */
@media (min-width:901px){
  .guest-stepper{display:contents}
  .guest-stepper button{display:none}
  .book-sticky{display:none}
}