/* 2026-10-29 | MLV booking studio responsive layout.
   Scoped to the booking modal. Never styles admin, account or journal views. */
#booking-dialog{
 width:min(1120px,calc(100vw - 28px));
 height:min(915px,calc(100dvh - 26px));
 max-height:calc(100dvh - 26px);
 border-radius:23px;
 box-sizing:border-box;
}
#booking-dialog[open]{display:flex;flex-direction:column}
#booking-dialog .booking-dialog-content{
 flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;
 scrollbar-gutter:stable;overscroll-behavior:contain;
}
#booking-dialog .booking-shell{
 grid-template-columns:minmax(0,1fr) minmax(278px,312px)!important;
 grid-template-areas:"form summary"!important;
 align-items:start;gap:25px;padding:24px 28px 32px!important;
}
#booking-dialog .booking-form{min-width:0}
#booking-dialog .form-title{margin-bottom:20px}
#booking-dialog .form-title h3{font-size:clamp(26px,2vw,30px);line-height:1.17}
#booking-dialog .form-title p{font-size:13px;line-height:1.55}
#booking-dialog .form-step.active>.field.field-full{margin-bottom:16px}
#booking-dialog .field-grid{
 grid-template-columns:repeat(2,minmax(0,1fr));
 align-items:start;column-gap:18px;row-gap:18px;
}
#booking-dialog .field-grid>.field,#booking-dialog .field-start-time,
#booking-dialog .field-travel-date{margin:0!important;min-width:0;align-self:start}
#booking-dialog .field>span,
#booking-dialog .field-travel-date>label,
#booking-dialog .field-start-time>.field-caption{
 display:block;font-size:12px;font-weight:700;letter-spacing:.055em;
 line-height:1.45;margin-bottom:8px;text-transform:none;color:var(--studio-ink);
}
#booking-dialog .field-travel-date>input,
#booking-dialog .field-start-time>input[data-booking-exact-time]{
 box-sizing:border-box;width:100%;min-height:53px;font-size:16px;
 border:1px solid var(--studio-line)!important;border-radius:13px;
 background:var(--studio-panel)!important;color:var(--studio-ink)!important;
 padding:12px 14px;font-variant-numeric:tabular-nums;
}
#booking-dialog .field-travel-date.calendar-enhanced>input[type="date"]{display:none!important}
#booking-dialog .booking-date-trigger{
 box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;
 width:100%;min-height:53px;gap:14px;padding:12px 15px;
 border:1px solid var(--studio-line);border-radius:13px;
 background:var(--studio-panel);color:var(--studio-ink);
 font-size:15px;font-weight:600;text-align:left;letter-spacing:0;cursor:pointer;
}
#booking-dialog .booking-date-trigger[hidden]{display:none!important}
#booking-dialog .booking-date-trigger>span:last-child{
 color:var(--studio-accent);font-size:25px;line-height:1;
}
#booking-dialog .booking-date-trigger[aria-expanded="true"]{
 border-color:var(--studio-accent);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--studio-accent) 20%,transparent);
}
#booking-dialog .booking-inline-calendar{
 box-sizing:border-box;grid-column:1/-1;min-width:0;
 max-width:100%;margin:0;padding:15px clamp(12px,2vw,22px) 17px;
 border:1px solid var(--studio-line);border-radius:18px;
 background:var(--studio-panel);box-shadow:0 14px 35px rgba(24,19,10,.10);
 isolation:isolate;
}
#booking-dialog .booking-inline-calendar[hidden]{display:none!important}
#booking-dialog .booking-calendar-top{
 display:flex;justify-content:space-between;align-items:center;
 min-height:42px;margin-bottom:13px;gap:15px;
}
#booking-dialog .booking-calendar-heading{
 flex:1;min-width:0;color:var(--studio-ink);font-size:16px;font-weight:700;
}
#booking-dialog .booking-calendar-navigation{display:flex;gap:9px}
#booking-dialog .booking-calendar-navigation button{
 min-width:43px;width:43px;height:43px;
 border:1px solid var(--studio-line);border-radius:12px;
 background:var(--studio-bg);color:var(--studio-ink);font-size:21px;cursor:pointer;
}
#booking-dialog .booking-calendar-navigation button:disabled{opacity:.3;cursor:not-allowed}
#booking-dialog .booking-calendar-grid{
 display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;
}
#booking-dialog .booking-calendar-weekday{
 display:grid;place-items:center;min-height:26px;
 color:var(--studio-muted);font-size:11px;font-weight:700;letter-spacing:.06em;
}
#booking-dialog .booking-calendar-spacer{min-height:43px}
#booking-dialog .booking-calendar-day{
 display:grid;place-items:center;min-width:0;min-height:43px;
 padding:6px 2px;border:1px solid transparent;border-radius:11px;
 color:var(--studio-ink);background:transparent;
 font-size:14px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums;
}
#booking-dialog .booking-calendar-day:hover:not(:disabled){
 background:color-mix(in srgb,var(--studio-accent) 11%,var(--studio-panel));
 border-color:var(--studio-line);
}
#booking-dialog .booking-calendar-day[aria-pressed="true"]{
 background:var(--studio-button-bg);color:var(--studio-button-ink);
 border-color:var(--studio-button-bg);
}
#booking-dialog .booking-calendar-day:disabled{opacity:.29;cursor:not-allowed}
#booking-dialog .booking-calendar-hint{
 margin:13px 0 0;color:var(--studio-muted);font-size:12px;line-height:1.55;
}
#booking-dialog .booking-time-support{
 display:flex;justify-content:space-between;align-items:flex-start;
 grid-column:1/-1;gap:18px;margin:0;padding:13px 15px;
 border:1px solid var(--studio-line);border-radius:14px;
 background:color-mix(in srgb,var(--studio-panel) 85%,var(--studio-bg));
}
#booking-dialog .booking-time-support .booking-flexible-choice{
 flex:0 0 47%;display:flex;align-items:flex-start;gap:10px;
 color:var(--studio-ink);font-size:13px;font-weight:700;line-height:1.4;cursor:pointer;
}
#booking-dialog .booking-time-support input[type="checkbox"]{
 width:20px;height:20px;min-width:20px;flex:none;margin:0;
 accent-color:var(--studio-button-bg);
}
#booking-dialog .booking-flexible-choice span{
 display:flex;flex-direction:column;gap:3px;
}
#booking-dialog .booking-flexible-choice small{
 font-size:11.5px;line-height:1.48;color:var(--studio-muted);font-weight:500;
}
#booking-dialog .booking-time-guidance{
 flex:1;margin:0;color:var(--studio-muted);font-size:12px;line-height:1.55;
}
#booking-dialog .counter{min-height:53px}
#booking-dialog .counter button{min-width:52px;min-height:52px}
#booking-dialog .experience-only-notice{
 margin-top:20px!important;margin-bottom:12px!important;
 font-size:12.5px;line-height:1.6;
}
#booking-dialog .experience-only-notice strong,
#booking-dialog .experience-only-notice p{
 font-size:12.5px!important;line-height:1.5!important;
}
#booking-dialog #guest-price-policy{font-size:12px;line-height:1.58}
#booking-dialog .form-actions{
 position:sticky;bottom:0;z-index:4;
 display:flex;justify-content:flex-end;
 padding:17px 0 10px;margin-top:25px;
 border-top:1px solid var(--studio-line);
 background:var(--studio-bg);
}
#booking-dialog .form-actions{
 border:0!important;
 border-top:1px solid var(--studio-line)!important;
 border-radius:0!important;
 box-shadow:none!important;
}
#booking-dialog .form-title h3:focus{
 outline:0!important;
 box-shadow:none!important;
}
#booking-dialog .form-actions>span:empty{display:none!important}
#booking-dialog .form-actions>.button-dark{
 min-height:52px;padding:14px 24px;font-size:12.5px;font-weight:700;
}
#booking-dialog .summary-card{
 top:12px;box-shadow:0 8px 26px rgba(0,0,0,.035)!important;
}
#booking-dialog .booking-summary-content{padding:19px 20px}
#booking-dialog .summary-card h3{font-size:22px;line-height:1.18}
#booking-dialog .booking-travel-summary,#booking-dialog .summary-meta,
#booking-dialog .summary-card dt,#booking-dialog .summary-card dd{
 font-size:12px;line-height:1.5;
}
@media(max-width:1040px){
 #booking-dialog{width:min(920px,calc(100vw - 24px))}
 #booking-dialog .booking-shell{
  grid-template-columns:minmax(0,1fr) minmax(245px,285px)!important;
  gap:17px;padding:20px 21px 27px!important;
 }
 #booking-dialog .booking-time-support{flex-direction:column;gap:10px}
 #booking-dialog .booking-time-support .booking-flexible-choice{flex:0 0 auto}
}
@media(max-width:800px){
 #booking-dialog{
  width:calc(100vw - 14px);
  height:calc(100dvh - 14px);max-height:calc(100dvh - 14px);
  border-radius:17px;
 }
 #booking-dialog .booking-dialog-header{padding:16px 18px 12px}
 #booking-dialog .booking-dialog-header h2{font-size:clamp(21px,5vw,29px)}
 #booking-dialog .booking-navigation{padding:0 18px}
 #booking-dialog .booking-steps{gap:5px;margin-bottom:11px}
 #booking-dialog .booking-steps button{font-size:10px;line-height:1.2;min-height:39px;gap:5px}
 #booking-dialog .booking-steps button span{width:25px;height:25px;min-width:25px}
 #booking-dialog .booking-shell{
  grid-template-areas:"form" "summary"!important;
  grid-template-columns:minmax(0,1fr)!important;
  padding:20px 17px 32px!important;gap:24px;
 }
 #booking-dialog .summary-card{position:static!important;top:auto}
}
@media(max-width:520px){
 #booking-dialog .booking-dialog-header h2{font-size:23px}
 #booking-dialog .booking-steps button{
  flex-direction:column;align-items:center;gap:4px;
  padding:2px 0;font-size:9.5px;text-align:center;
 }
 #booking-dialog .booking-shell{padding:18px 13px 28px!important}
 #booking-dialog .field-grid{grid-template-columns:minmax(0,1fr);gap:15px}
 #booking-dialog .booking-inline-calendar,
 #booking-dialog .booking-time-support{grid-column:1}
 #booking-dialog .booking-inline-calendar{padding:13px 10px}
 #booking-dialog .booking-calendar-grid{gap:2px}
 #booking-dialog .booking-calendar-day{min-height:41px}
 #booking-dialog .form-actions>.button-dark{width:100%;justify-content:center}
 #booking-dialog .form-title h3{font-size:26px}
 #booking-dialog .booking-close{height:41px;width:41px}
}
@media(prefers-reduced-motion:reduce){
 #booking-dialog[open],#booking-dialog .form-step.active,
 #booking-dialog .booking-progress-track span{
  animation:none!important;transition:none!important;
  scroll-behavior:auto!important;
 }
}