/* Public HTML forms reuse the existing Audi layout and native controls. */
#booking-app [hidden]{display:none!important}
#booking-app .app-input{width:100%}
#booking-app .booking-footer{text-align:center;margin-top:20px;font-size:.9em;color:#555}
#booking-app .app-radio{float:none;width:auto}
#booking-app .desktop-event-registration>p,#booking-app .mobile-event-registration>p{margin:0 0 4px}
#booking-app #personal-info{display:grid;gap:12px;overflow-wrap:anywhere}
#booking-app #saved-ride{display:grid;gap:8px;margin:20px 0 0}
#booking-app #saved-ride>div{display:flex;gap:12px;flex-wrap:wrap}
#booking-app #saved-ride dt{min-width:70px}
#booking-app #saved-ride dd{margin:0}
#booking-app #ride-editor{margin-top:20px}
#booking-app #success-note{padding:14px 16px;background:#f3f3f3;border:1px solid #ccc}
#booking-app #load-error p,#booking-app #save-error p{margin:0 0 12px}
#booking-app #registration-errors a{display:block;color:inherit;min-height:44px;padding:8px 0;text-decoration:underline}
#booking-app .input-hint:empty{display:none}
#booking-app #registration-errors[hidden]+.app-form-buttons .booking-reminder{display:block}
#booking-app .checkbox-wrapper-13{margin-top:18px}
#booking-app .checkbox-wrapper-13 label{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
#booking-app .checkbox-wrapper-13 input{flex-shrink:0;margin-top:4px;width:20px;height:20px;accent-color:#111}
@media(min-width:901px){#booking-app .mobile-collapsible>summary{pointer-events:none;list-style:none}#booking-app .mobile-collapsible>summary::-webkit-details-marker{display:none}}
@media(max-width:900px){#booking-app .registration-jump{align-self:flex-start}#booking-app .registration-stack{gap:24px}#booking-app .booking-review-list>div{grid-template-columns:1fr;gap:4px}#booking-app .booking-review-list dd{text-align:left}#booking-app .edit-button-container{margin-top:12px}#booking-app .event-header{flex-wrap:wrap}}

/* Desktop density follows usable height, with normal scrolling for short windows. */
@media(min-width:1800px){
 #booking-app.registration-flow{--registration-text:clamp(18px,min(.8vw,1.5dvh),22px);--registration-space:clamp(18px,2dvh,28px);--registration-gutter:clamp(32px,2.2vw,64px)}
 #booking-app.registration-flow .column_right{padding-block:clamp(24px,3dvh,48px)}
 #booking-app.registration-flow .column_right .titleMain{font-size:calc(var(--registration-text)*2.1)!important;line-height:1.12;margin-bottom:var(--registration-space)}
 #booking-app.registration-flow .column_right>.d-flex{height:100%;min-height:0}
 #booking-app.registration-flow .column_right .formWrapper{height:auto!important;flex:1;min-height:0;overflow-y:auto}
 #booking-app.registration-flow .column_right .app-input,#booking-app.registration-flow .column_right .app-button{min-height:48px}
 #booking-app.registration-flow .column_right .subtitle{font-size:calc(var(--registration-text)*1.4)!important}
 #booking-app.registration-flow .column_right .titlesecondary{font-size:calc(var(--registration-text)*1.1)!important}
}

/* Confirmation follows the date-grouped itinerary, with natural scrolling on short screens. */
#booking-app.registration-confirmation .confirmation-content{padding:clamp(28px,3.2vw,80px)!important;font-size:clamp(16px,1vw,22px);line-height:1.5;background:#fcfbf9;color:#242824}
#booking-app .confirmation-summary{width:100%;max-width:1200px;margin:0 auto;overflow-wrap:anywhere}
#booking-app .confirmation-heading{margin-bottom:clamp(32px,5dvh,64px)}
#booking-app .confirmation-heading h1{font-size:clamp(30px,2.45vw,60px);line-height:1.14;margin:0 0 22px;text-wrap:balance;text-align:left}
#booking-app .confirmation-heading p{font-size:inherit;line-height:1.5;margin:0;color:#5b605c}
#booking-app .itinerary-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:24px;border-bottom:1px solid #d9dbd6}
#booking-app .itinerary-heading h2,#booking-app .confirmation-actions h2{font-size:1.12em;line-height:1.4;font-weight:600;margin:0}
#booking-app #experience-count{font-size:.85em;color:#5b605c;white-space:nowrap}
#booking-app .confirmation-details{margin:0}
#booking-app .itinerary-day{display:grid;grid-template-columns:clamp(100px,7vw,170px) minmax(0,1fr);gap:24px;padding-top:clamp(24px,3dvh,40px)}
#booking-app .itinerary-date{font-size:inherit;line-height:1.4;font-weight:400;margin:0}
#booking-app .itinerary-date span{display:block}
#booking-app .itinerary-day-number{font-size:1.45em;font-weight:600;line-height:1.2;margin-bottom:6px}
#booking-app .itinerary-weekday{font-size:.85em;color:#5b605c;margin-top:6px}
#booking-app .itinerary-events{list-style:none;margin:0;padding:0;min-width:0}
#booking-app .itinerary-event{padding:0 0 clamp(24px,3dvh,40px);border-bottom:1px solid #d9dbd6}
#booking-app .itinerary-event+.itinerary-event{padding-top:clamp(24px,3dvh,40px)}
#booking-app .itinerary-event-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
#booking-app .itinerary-event-title{font-size:1.15em;line-height:1.4;font-weight:600;margin:0;min-width:0}
#booking-app .confirmation-status{display:inline-block;font-size:.8em;line-height:1.4;font-weight:400;padding:4px 9px;background:#edf0e7;color:#384735;flex-shrink:0}
#booking-app .confirmation-status.is-waitlisted{background:#f3ead8;color:#75521f}
#booking-app .itinerary-time{font-size:inherit;font-variant-numeric:tabular-nums;line-height:1.5;margin:0 0 8px}
#booking-app .confirmation-meta{color:#5b605c;font-size:.85em;line-height:1.5;margin:0}
#booking-app .itinerary-empty{padding:24px 0;border-bottom:1px solid #d9dbd6;color:#5b605c}
#booking-app .confirmation-actions{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(28px,4dvh,48px)}
#booking-app .confirmation-actions h2{margin-bottom:10px}
#booking-app .confirmation-actions p{font-size:.85em;line-height:1.5;margin:0;color:#5b605c}
#booking-app .confirmation-actions strong{color:#242824}
#booking-app .confirmation-actions .app-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:16px 24px;margin:0;font-size:.85em;line-height:1.4;text-align:center;white-space:normal;flex-shrink:0;background:#242824;color:#fff;border:1px solid #242824;text-decoration:none}
#booking-app .confirmation-actions .app-button:hover{background:#3c453d}
#booking-app .confirmation-actions .app-button:focus-visible{outline:3px solid #236495;outline-offset:4px}
#booking-app.registration-confirmation #confirmation-email-note{max-width:1200px;margin:20px auto 0}
@media(min-width:901px) and (max-width:1500px){
 #booking-app .itinerary-day{grid-template-columns:90px minmax(0,1fr);gap:16px}
 #booking-app .confirmation-actions{align-items:flex-start;flex-direction:column}
 #booking-app .confirmation-actions .app-button{align-self:flex-end}
}
@media(max-width:900px){
 #booking-app.registration-confirmation .confirmation-content{padding:28px 20px 36px!important}
 #booking-app .confirmation-heading h1{font-size:30px}
 #booking-app .itinerary-heading{flex-wrap:wrap;gap:6px;padding-bottom:16px}
 #booking-app .itinerary-day{grid-template-columns:1fr;gap:18px;padding-top:24px}
 #booking-app .itinerary-date{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
 #booking-app .itinerary-day-number{font-size:1.15em;margin:0}
 #booking-app .itinerary-weekday{margin:0 0 0 6px}
 #booking-app .itinerary-event-heading{margin-bottom:12px}
 #booking-app .confirmation-actions{align-items:stretch;flex-direction:column}
 #booking-app .confirmation-actions .app-button{width:100%}
}