.booking-page { max-width: 960px; padding-block: var(--space-14) var(--space-20); }
.booking-page h1 { font: var(--weight-display) clamp(2.5rem,calc(6vw * var(--bn-text-scale, 1)),4.5rem)/1.1 var(--display); letter-spacing: 0; margin-bottom: var(--space-8); overflow-wrap: anywhere; }
.booking-page h2 { font: var(--weight-semibold) var(--heading-md)/1.25 var(--sans); margin-bottom: var(--space-6); }
.booking-page p { line-height: var(--leading-body); }
.booking-intro { max-width: 42rem; color: var(--prose-ink); margin-bottom: var(--space-8); }
.booking-calendar { width: min(100%,28rem); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(8px,3vw,24px); margin-block: var(--space-8); }
.booking-month-nav { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: var(--space-2); text-align: center; font-weight: 600; }
.booking-month-nav a { text-decoration: none; text-align: center; padding-inline: 0; }
.booking-calendar table { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; margin-top: var(--space-5); }
.booking-calendar th { font-size: var(--text-sm); font-weight: 400; color: var(--muted); padding-block: var(--space-2); }
.booking-calendar td { padding: 0; }
.booking-day { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--gold); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); font-size: var(--text-compact); }
.booking-day:hover,.booking-day.is-selected { background: var(--gold); color: var(--bg); }
.booking-day.is-unavailable { color: var(--muted); border-color: transparent; background: none; }
.booking-legend { font-size: var(--text-sm); color: var(--muted); margin: var(--space-5) 0 0; }
.booking-legend span { color: var(--gold); }
.booking-form-section { padding-top: var(--space-8); border-top: 1px solid var(--line); scroll-margin-top: 8rem; }
.booking-form { display: grid; gap: var(--space-6); max-width: 44rem; overflow-wrap: anywhere; }
.booking-form [hidden] { display:none!important; }
.booking-lineup,.booking-member,.booking-image-fields { min-width:0; border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-5); display:grid; gap:var(--space-5); }
.booking-lineup legend,.booking-member legend,.booking-image-fields legend { font-weight:600; padding-inline:var(--space-2); }
.booking-member { background:var(--panel); margin-block:var(--space-5); }
.booking-member select { width:100%;max-width:100%; }
.booking-suggestions { border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--space-2); }
.booking-suggestions button { display:block; width:100%; text-align:left; color:var(--text); background:var(--panel); border:0; padding:var(--space-3); font:inherit; cursor:pointer; }
.booking-suggestions button:hover,.booking-suggestions button[aria-selected="true"] { background:var(--bg); outline:2px solid var(--gold); outline-offset:-2px; }
.booking-instrument-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.booking-chip { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); padding:var(--space-3); font:inherit; cursor:pointer; }
.booking-image-offer img { max-width:100%;height:auto; }
.booking-image-preview { display:grid; gap:var(--space-3); min-width:0; margin-block:var(--space-3); }
.booking-preview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:var(--space-4); min-width:0; }
.booking-preview-grid figure { margin:0; min-width:0; }
.booking-preview-grid figcaption { margin-bottom:var(--space-2); font-size:var(--text-control); font-weight:600; }
.booking-preview-frame { aspect-ratio:var(--booking-preview-ratio,3 / 2); position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); }
.booking-preview-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.booking-image-offer .booking-preview-frame img { height:100%; }
.booking-preview-frame--crop img { object-fit:cover; object-position:var(--booking-preview-position,center center); }
.booking-image-status { border:1px solid var(--line); border-inline-start-width:4px; border-radius:var(--radius-sm); padding:var(--space-4); font-size:var(--text-control); line-height:var(--leading-body); overflow-wrap:anywhere; }
.booking-image-status strong { display:block; margin-bottom:var(--space-2); }
.booking-image-status ul { margin:0; padding-inline-start:1.2em; }
.booking-image-status[data-state="invalid"] { border-color:var(--notice-line); color:var(--notice-text); background:var(--notice-bg); }
.booking-image-status[data-state="valid"] { border-color:var(--gold); }
.booking-field { display: grid; gap: var(--space-2); font-size: var(--text-compact); font-weight: 600; min-width: 0; }
.booking-field>span { color: var(--muted); font-weight: 400; }
.booking-genres { min-width:0; border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-5); }
.booking-genres legend { font-size:var(--text-compact); font-weight:600; padding-inline:var(--space-2); }
.booking-genres legend span,.booking-genre-family summary span { font-weight:400; color:var(--muted); }
.booking-genre-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:var(--space-4); margin-top:var(--space-5); }
.booking-genre-family { min-width:0; padding:var(--space-3); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); }
.booking-genre-family>.booking-check { font-weight:600; }
.booking-genre-family .booking-check { padding-block:var(--space-2); min-height:44px; }
.booking-genre-family summary { font-size:var(--text-control); cursor:pointer; padding-block:var(--space-2); }
.booking-genre-family details[open] summary { margin-bottom:var(--space-2); }
.booking-field :is(input,textarea) { width: 100%; min-width: 0; max-width: 100%; font-weight: 400; }
.booking-check { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-3); align-items: start; font-size: var(--text-control); line-height: var(--leading-body); }
.booking-check input { width: 1.125rem; height: 1.125rem; margin-top: .2em; accent-color: var(--gold); }
.booking-help { color: var(--muted); font-size: var(--text-control); margin: 0; }
.booking-form .button { width: 100%; border-radius: var(--radius-md); gap: var(--space-3); }
.booking-message { border: 1px solid var(--gold); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-8); line-height: var(--leading-body); }
.booking-message--error { border-color: var(--notice-line); color: var(--notice-text); background: var(--notice-bg); }
.booking-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media(max-width:450px) { .booking-calendar { padding-inline: 6px; } .booking-page { padding-block: var(--space-8) var(--space-12); } }
@media(forced-colors:active) { .booking-day { border-color: ButtonText; } .booking-day.is-unavailable { border-color: transparent; } }
