/* Native HTML navigation uses booking.css, booking-management.css and the
   vendor's base CSS. These adapters replace widget-only DOM/state mechanics. */
.booking-server-dialog .booking-frame { opacity: 1; pointer-events: auto; }
.booking-server-dialog { transition: opacity 180ms ease-out, transform 180ms ease-out, display 180ms allow-discrete, overlay 180ms allow-discrete; }
@starting-style { .booking-server-dialog[open] { opacity: 0; transform: translateY(8px); } }
.booking-server-dialog:not([open]) { opacity: 0; transform: translateY(8px); }
.booking-server-close-form { display: none; }
noscript:has(> .booking-server-trigger) { display: contents; }
.booking-server .server-shell, .booking-server .server-shell * { box-sizing: border-box; }
.booking-server :is(button, a, summary) { -webkit-tap-highlight-color: transparent; user-select: none; }
.booking-server .server-shell { width: 100%; margin: 0; container: booking-management / size; }
.booking-server .fcal_wrap { max-width: none; margin: 0; padding: 0; }
/* Anchors/radio labels replace click handlers, keeping the same calendar grid. */
.booking-server .fcal_wrap .fcal_calendar_inner .fcal_date_wrapper .server-days > .day { grid-area: auto; text-decoration: none; }
.booking-server .server-times { display: contents; }
.booking-server .server-slots { min-width: 0; margin: 0; padding: 0; border: 0; }
.booking-server .server-slot { position: relative; cursor: pointer; }
.booking-server .server-slot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.booking-server .server-slot:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: -2px; }
.booking-server .server-zone summary { list-style: none; cursor: pointer; }
.booking-server .server-zone summary::-webkit-details-marker { display: none; }
.booking-server .server-zone summary:hover { color: var(--link-hover); }
.booking-server .server-zone form { position: absolute; top: 100%; right: 0; z-index: 30; width: min(330px, 100%); display: grid; gap: 9px; padding: 16px; border: var(--border-surface); border-radius: var(--radius-control); background: var(--color-paper); box-shadow: var(--shadow-card); }
.booking-server .server-zone :is(select, button) { width: 100%; min-width: 0; font: inherit; }
/* CSS scroll cues work without JavaScript measuring scroll positions. */
.booking-server .server-scroll { overscroll-behavior: contain; scrollbar-width: thin;
  background: linear-gradient(var(--color-paper) 35%, transparent) top / 100% 40px local, linear-gradient(transparent, var(--color-paper) 65%) bottom / 100% 40px local, linear-gradient(var(--scroll-cue-color), transparent) top / 100% 20px scroll, linear-gradient(transparent, var(--scroll-cue-color)) bottom / 100% 20px scroll; background-repeat: no-repeat; }
/* The server form owns both columns. Its summary/actions use normal flow,
   while the enhanced vendor form needs its controls positioned across columns. */
.booking-server .fcal_wrap .server-intake .fcal_side { display: flex; flex-direction: column; }
.booking-server .fcal_wrap .server-intake .fcal_slot_wrapper { flex: none; }
.booking-server .fcal_wrap .server-intake .server-submit { flex: none; overflow: visible; padding: 24px 0 0; }
.booking-server .fcal_wrap .server-submit .fcal_booking_form { width: 100%; padding: 0; }
.booking-server .fcal_wrap .server-submit :is(.fcal_form_item, .fcal_errors) { position: static !important; width: 100%; margin: 0 !important; }
body.booking-server .fcal_wrap .server-submit .fcal_submit { margin-top: 10px !important; }
.booking-server .fcal_wrap .server-submit .fcal_errors { margin-top: 12px !important; }
.booking-server .fcal_input_label { display: block; }
.booking-server .server-phone { position: relative; }
.booking-server .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .server-phone .fcal_country_select { position: absolute; z-index: 1; inset: 1px auto 1px 1px; width: 119px; min-height: 0; padding: 0 12px; border: 0; background: var(--fcal_slot_border); color: var(--color-ink); cursor: pointer; }
.booking-server .fcal_wrap .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .server-phone input { padding-left: 130px; }
.booking-server .server-summary-details > summary { list-style: none; }
.booking-server .server-summary-details > summary::-webkit-details-marker { display: none; }
.booking-server .server-selected-compact { display: none; }
@media (min-width: 801px) {
  .booking-server .server-summary-details::details-content { display: contents; }
  .booking-server .server-summary-details > .disclosure-content,
  .booking-server .server-summary-details .disclosure-inner { display: contents; visibility: visible; }
}
@media (max-width: 800px) {
  .booking-server .fcal_wrap .server-intake .fcal_side { padding: 12px 22px; }
  .booking-server .fcal_wrap .server-intake .fcal_slot_wrapper { max-height: min(180px, 28dvh); }
  .booking-server .fcal_wrap .server-intake .server-submit { padding-top: 24px; }
  .booking-server .server-summary-details .server-selected-desktop { display: none; }
  .booking-server .server-summary-details > summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; grid-template-rows: minmax(32px, auto) auto; gap: 4px 8px; margin: 0; }
  .booking-server .server-summary-details > summary::after { grid-column: 2; grid-row: 1; }
  .booking-server .server-summary-details[open] > summary::after { transform: rotate(180deg); }
  .booking-server .server-summary-details .server-selected-compact { display: flex; grid-column: 1 / -1; margin: 0; color: var(--color-ink); }
  .booking-server .server-summary-details .fcal_slot_info { padding-top: 8px; }
}
/* Receipts share the appointment-card markup. CSS constrains only the answer
   list, replacing the enhanced flow's measured pixel height. */
.booking-server .server-receipt { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; margin: 0; padding: 0; }
.booking-server .server-receipt .fcal_confirm_body { display: flex; flex-direction: column; }
.booking-server .server-receipt .fcal_confirm_body > .fcal_confirm_section { flex: none; }
.booking-server .booking-receipt-details { display: flex; flex-direction: column; min-height: 0; }
.booking-server .booking-receipt-details > summary { flex: none; }
.booking-server .booking-receipt-details > .disclosure-content { min-height: 0; }
.booking-server .booking-receipt-details .disclosure-inner { min-height: 0; display: flex; }
.booking-server .booking-receipt-fields { width: 100%; }
.booking-server .server-unavailable { padding: 70px 32px; }
.booking-server.server-standalone { display: grid; place-content: center; gap: 16px; height: auto; min-height: 100dvh; padding: 24px; overflow: auto; }
.booking-server.server-standalone .server-shell { width: min(1072px, calc(100vw - 48px)); height: min(588px, calc(100dvh - 90px)); border-radius: var(--radius-card); box-shadow: var(--shadow-dialog); }
.booking-server .server-home { text-align: center; font-size: 14px; }
@media (max-width: 800px) {
  .booking-server.server-standalone { padding: 16px; }
  .booking-server.server-standalone .server-shell { width: calc(100vw - 32px); height: min(680px, calc(100dvh - 80px)); }
}
@media (prefers-reduced-motion: reduce) { .booking-server-dialog { transition: none; } }
/* Keep label margins inside the measured form item, as in the native form. */
.booking-server .fcal_wrap .server-submit .fcal_booking_form .fcal_form_item .fcal_input_content { display: flow-root; }
@media (max-width: 800px) {
  body.booking-server .fcal_wrap .fcal_calendar_inner.server-intake { grid-template-rows: minmax(min(100%, calc(6em + 50px)), 1fr) max-content; overflow: auto; }
  body.booking-server .fcal_wrap .fcal_calendar_inner.server-intake .fcal_side { padding: 12px 22px 16px; }
  .booking-server .fcal_wrap .server-intake .server-submit { padding-top: 16px; }
}
@media (min-width: 440px) and (max-width: 800px) and (max-height: 440px) {
  body.booking-server .fcal_wrap .fcal_calendar_inner.server-intake .fcal_side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-block: 12px; }
  .booking-server .fcal_wrap .server-intake .fcal_slot_wrapper { max-height: 100px; }
  .booking-server .fcal_wrap .server-intake .server-submit { padding-top: 0; }
  .booking-server .fcal_wrap .server-submit .fcal_btn_submit { min-width: 0; }
}
.booking-server.server-standalone :is(.fcal_cal_wrap, .fcal_wrap, .fcal_holder) { height: 100%; }
body.booking-server.server-standalone .fcal_wrap .fcal_calendar_inner { height: 100% !important; }
.booking-server.server-standalone .fcal_wrap .fcal_date_wrapper .fcal_booking_form { width: calc(100% - 10px); }

/* A short portrait window prioritizes date/time controls, just as the first
   calendar retires its photo when there is not enough vertical room. */
@media (max-width: 439px) and (max-height: 600px) {
  body.booking-server[data-booking-action=reschedule] .fcal_wrap .fcal_calendar_inner:not(.fcal_spot_selected) .fcal_side { display: none; }
  body.booking-server[data-booking-action=reschedule] .fcal_wrap .fcal_calendar_inner:not(.fcal_spot_selected) .fcal_date_wrapper { padding-top: 91px; }
}
/* The native timezone label is static on compact calendars; its HTML popup
   still needs the label, rather than the calendar's bottom, as its anchor. */
@media (max-width: 1024px) {
  body.booking-server .fcal_wrap .fcal_calendar_inner .server-zone { position: relative; }
}
@media (min-width: 440px) and (max-height: 480px) {
  body.booking-server .fcal_wrap .fcal_calendar_inner .server-zone { position: absolute; }
}
/* Keep a readable answer viewport in short portrait receipts while the
   management/calendar actions stay visible. */
@media (max-width: 439px) and (max-height: 600px) {
  .booking-server .booking-receipt-main { margin-block: 8px; gap: 8px; }
  .booking-server .booking-receipt-date { padding-block: 8px; }
  .booking-server .booking-receipt-weekday { display: none; }
  body.booking-server .booking-receipt-layout .booking-receipt-meeting { font-size: 20px; line-height: 1.2; }
  .booking-server .booking-receipt-actions { padding-block: 10px; }
}