/* Booking panel, structural defaults. Loaded before each rework's own CSS, which re-skins it
   by setting the --bk-* custom properties on :root and, where it wants a different personality,
   overriding the .bk-* rules. The DOM is built by booking.js and is the same in every rework:

   .bk-overlay            scrim
   .bk-sheet              the panel (desktop: right slide-over; <=720px: bottom sheet)
     .bk-head             header strip: .bk-title, .bk-phone (tel link), .bk-close
     .bk-body             holds .bk-skel (branded skeleton), .bk-frame (the iframe), .bk-fallback
   html.bk-open           panel is open        html.bk-loaded  iframe fired load
   html.bk-slow           8s passed without load: fallback card is shown                        */
:root {
  --bk-bg: #fff;
  --bk-ink: #151515;
  --bk-muted: #666;
  --bk-line: rgba(0, 0, 0, .1);
  --bk-accent: #151515;
  --bk-on-accent: #fff;
  --bk-radius: 16px;
  --bk-overlay: rgba(0, 0, 0, .45);
  --bk-shadow: 0 30px 80px rgba(0, 0, 0, .3);
  --bk-font: system-ui, sans-serif;
  --bk-title-font: var(--bk-font);
  --bk-title-weight: 500;
  --bk-width: 540px;
  --bk-ease: cubic-bezier(.19, 1, .22, 1);
  --bk-dur: .6s;
  --bk-skel: rgba(0, 0, 0, .07);
  --bk-body-bg: #f4f4f4;
}
.bk-overlay { position: fixed; inset: 0; z-index: 900; background: var(--bk-overlay); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .5s; }
.bk-open .bk-overlay { opacity: 1; visibility: visible; transition-delay: 0s; }
.bk-sheet { position: fixed; z-index: 901; top: 0; right: 0; bottom: 0; width: min(var(--bk-width), 100vw); background: var(--bk-bg); color: var(--bk-ink); font-family: var(--bk-font); display: flex; flex-direction: column; border-radius: var(--bk-radius) 0 0 var(--bk-radius); box-shadow: var(--bk-shadow); transform: translateX(104%); visibility: hidden; transition: transform var(--bk-dur) var(--bk-ease), visibility 0s linear var(--bk-dur); }
.bk-open .bk-sheet { transform: none; visibility: visible; transition-delay: 0s; }
.bk-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px 16px 26px; border-bottom: 1px solid var(--bk-line); background: var(--bk-bg); }
.bk-title { font-family: var(--bk-title-font); font-weight: var(--bk-title-weight); font-size: 21px; line-height: 1.2; }
.bk-phone { display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 14px; color: var(--bk-muted); text-decoration: none; }
.bk-phone:hover { color: var(--bk-accent); }
.bk-close { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--bk-line); background: transparent; color: var(--bk-ink); display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .3s var(--bk-ease); }
.bk-close:hover { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-on-accent); }
.bk-close:active { transform: scale(.94); }
.bk-body { position: relative; flex: 1 1 auto; min-height: 0; background: var(--bk-body-bg); }
.bk-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; transition: opacity .5s ease; }
.bk-loaded .bk-frame { opacity: 1; }
.bk-skel { position: absolute; inset: 0; padding: 36px 28px; display: flex; flex-direction: column; gap: 16px; transition: opacity .4s ease; }
.bk-loaded .bk-skel { opacity: 0; pointer-events: none; }
.bk-skel b { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--bk-skel) 0%, rgba(0, 0, 0, .13) 50%, var(--bk-skel) 100%) 0 0 / 220% 100%; animation: bk-shimmer 1.6s linear infinite; }
.bk-skel .s1 { height: 22px; width: 58%; }
.bk-skel .s2 { height: 14px; width: 84%; }
.bk-skel .s3 { height: 52px; width: 100%; margin-top: 14px; }
.bk-skel .s4 { height: 52px; width: 100%; border-radius: 999px; }
.bk-skel .note { margin-top: 10px; font-size: 13px; color: var(--bk-muted); }
@keyframes bk-shimmer { to { background-position: -220% 0; } }
.bk-fallback { position: absolute; left: 20px; right: 20px; bottom: 20px; display: none; padding: 18px 20px; border-radius: var(--bk-radius); background: var(--bk-bg); border: 1px solid var(--bk-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); font-size: 14px; line-height: 1.5; }
.bk-slow .bk-fallback { display: block; }
.bk-loaded .bk-fallback { display: none; }
.bk-fallback a { display: inline-flex; align-items: center; margin-top: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--bk-accent); color: var(--bk-on-accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.bk-lock { overflow: hidden; }
@media (max-width: 720px) {
  .bk-sheet { top: auto; left: 0; right: 0; width: 100%; height: 94dvh; border-radius: 22px 22px 0 0; transform: translateY(104%); }
  .bk-sheet::before { content: ''; position: absolute; top: 8px; left: 50%; width: 42px; height: 4px; margin-left: -21px; border-radius: 4px; background: var(--bk-line); }
  .bk-head { padding: 24px 14px 14px 20px; }
  .bk-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-sheet, .bk-overlay, .bk-frame, .bk-skel, .bk-close { transition-duration: .001s !important; transition-delay: 0s !important; }
  .bk-skel b { animation: none; }
}