/* Demo panel (X-02): neutral palette and system font, clearly separate from the club site. */
.demo-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; background: #2B3138; color: #FFFFFF; border: 2px solid #FFFFFF;
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer;
}
.demo-fab:hover { background: #1C2026; }
.demo-fab:focus-visible { outline: 3px solid #4C8DDB; outline-offset: 2px; }
.demo-fab .icon { width: 18px; height: 18px; }
.demo-drawer {
  --d-ink: #1C2026; --d-muted: #5E6670; --d-line: #DADDE1; --d-bg: #F7F7F8; --d-accent: #2F5E94;
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(400px, 100vw);
  display: flex; flex-direction: column; background: var(--d-bg); color: var(--d-ink);
  font: 400 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  border-left: 1px solid var(--d-line); box-shadow: -16px 0 40px rgba(0,0,0,.18);
}
.demo-drawer[hidden] { display: none; }
.demo-drawer :focus-visible { outline: 3px solid #4C8DDB; outline-offset: 2px; }
.demo-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; background: #2B3138; color: #FFFFFF; }
.demo-drawer__title { font: 700 16px/1.2 system-ui, sans-serif; display: flex; align-items: center; gap: 8px; }
.demo-drawer__title .icon { width: 18px; height: 18px; }
.demo-drawer__close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: #FFFFFF; }
.demo-drawer__close:hover { background: rgba(255,255,255,.12); }
.demo-drawer__body { flex: 1; overflow-y: auto; padding: 8px 16px 24px; }
.demo-group { padding: 14px 0; border-bottom: 1px solid var(--d-line); display: grid; gap: 10px; }
.demo-group:last-child { border-bottom: 0; }
.demo-group h3 { font: 700 13px/1.2 system-ui, sans-serif; color: var(--d-muted); }
.demo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.demo-drawer label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.demo-drawer select, .demo-drawer input[type="number"] { min-height: 38px; padding: 4px 8px; border: 1px solid var(--d-line); border-radius: 6px; background: #FFFFFF; font: inherit; color: inherit; max-width: 100%; }
.demo-drawer input[type="checkbox"], .demo-drawer input[type="radio"] { width: 18px; height: 18px; accent-color: var(--d-accent); }
.demo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--d-line); background: #FFFFFF; color: var(--d-ink); font: 600 13px/1 system-ui, sans-serif; cursor: pointer; }
.demo-btn:hover { border-color: var(--d-muted); }
.demo-btn[disabled] { opacity: .5; cursor: not-allowed; }
.demo-btn--danger { color: #A3122A; border-color: #E8B6BF; }
.demo-btn--danger:hover { background: #FBE8EB; border-color: #A3122A; }
.demo-btn .icon { width: 16px; height: 16px; }
.demo-seg { display: inline-flex; border: 1px solid var(--d-line); border-radius: 6px; overflow: hidden; background: #FFFFFF; }
.demo-seg label { padding: 6px 10px; gap: 6px; }
.demo-seg label + label { border-left: 1px solid var(--d-line); }
.demo-seg label:has(input:checked) { background: #E3ECF6; font-weight: 600; }
.demo-hint { font-size: 12px; color: var(--d-muted); }
.demo-meta { font-size: 12px; color: var(--d-muted); display: grid; gap: 2px; }
.demo-meta code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
@media (max-width: 480px) { .demo-fab__label { display: none; } .demo-fab { padding: 0 12px; } }
/* Keep the demo button out of the way of the mobile booking sheet and of right-aligned totals. */
@media (max-width: 899px) { body:has(.premi-side--sheet) .demo-fab { display: none; } }
@media (max-width: 600px) { .demo-fab { right: 8px; bottom: 8px; opacity: .9; } }
/* Room under the footer so the floating button never covers its links or the last table row. */
.has-demo-fab .site-footer { padding-bottom: calc(var(--s-5) + 64px); }