.demo-booking-shell {
    position: relative;
    min-width: 0;
    background: #fff;
    color: #182a42;
}
.demo-booking-status {
    position: absolute;
    inset: 0 0 auto;
    min-height: 320px;
    padding: 80px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    pointer-events: none;
}
.demo-booking-status[hidden] { display: none; }
.demo-booking-status p { margin: 18px 0 0; font-size: 18px; font-weight: 600; line-height: 1.45; }
.demo-booking-status .demo-booking-hint { margin-top: 8px; font-size: 14px; font-weight: 400; color: #526176; }
.demo-booking-spinner {
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 3px solid #e1ebf6;
    border-top-color: #2175d9;
    border-radius: 50%;
    animation: demo-booking-spin .8s linear infinite;
}
.demo-booking-backup { padding: 16px 20px; text-align: center; border-top: 1px solid #e3e9f0; }
.demo-booking-backup a { display: inline-block; padding: 8px 0; color: #155db2; font-size: 14px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }
.demo-booking-backup a:focus-visible { outline: 3px solid #2175d9; outline-offset: 4px; border-radius: 2px; }
/* Keep the fallback within reach even before the iframe exists. Once slow,
   expose the frame too: a provider change must never leave a working calendar covered. */
.demo-booking-shell[data-state="loading"] .demo-booking-backup { position: absolute; top: 280px; left: 16px; right: 16px; border-top: 0; }
.demo-booking-shell[data-state="slow"] .demo-booking-status { position: relative; min-height: 0; padding: 24px; }
.demo-booking-shell[data-state="slow"] .demo-booking-status p { margin-top: 10px; }
.demo-booking-shell[data-state="slow"] { display: flex; flex-direction: column; }
.demo-booking-shell[data-state="slow"] .demo-booking-status { order: -2; }
.demo-booking-shell[data-state="slow"] .demo-booking-backup { order: -1; }
@keyframes demo-booking-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .demo-booking-spinner { animation: none; } }
@media (max-width: 480px) { .demo-booking-status { padding-left: 16px; padding-right: 16px; } }