/* ============================================================
   Christmas Booking — "Motion" theme (v2.3.3)
   Glass + motion, adapted from Mega Theme's Vini100 Motion skin:
   dark winter-night scene, drifting coloured lights, light snowfall,
   translucent glass panels, gold accent, staggered reveals and soft
   slides. Scoped to .cb-app.cb-theme-motion — other themes untouched.
   Companion JS: assets/js/motion.js (scene + stagger indexes only).
   Everything is switched off under prefers-reduced-motion.
   ============================================================ */

.cb-app.cb-theme-motion {
  /* Palette (re-maps the base tokens, so all base rules follow) */
  --cb-bg:            transparent;
  --cb-surface:       rgba(255,255,255,.065);
  --cb-surface-2:     rgba(255,255,255,.09);
  --cb-border:        rgba(255,255,255,.13);
  --cb-border-focus:  #f4c84b;
  --cb-text:          #f5f2ea;
  --cb-text-2:        #d9d4c8;
  --cb-text-muted:    #9aa3ad;
  --cb-accent:        #f4c84b;
  --cb-accent-dark:   #ff9d38;
  --cb-accent-light:  rgba(244,200,75,.14);
  --cb-green:         #7be0a6;
  --cb-green-bg:      rgba(123,224,166,.14);
  --cb-gold:          #f4c84b;
  --cb-gold-bg:       rgba(244,200,75,.14);
  --cb-red-bg:        rgba(255,107,107,.14);
  --cb-disabled-bg:   rgba(255,255,255,.05);
  --cb-disabled-text: rgba(255,255,255,.22);
  --cb-shadow-sm:     0 4px 16px rgba(0,0,0,.25);
  --cb-shadow-md:     0 18px 50px rgba(0,0,0,.35);
  --cb-shadow-lg:     0 30px 80px rgba(0,0,0,.5);

  --mo-ease:   cubic-bezier(.19,1,.22,1);
  --mo-glass:  linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  --mo-blur:   blur(22px) saturate(140%);
  --mo-gold:   linear-gradient(110deg, #f4c84b, #ff9d38, #f4c84b);
  --cb-app-max-w: 480px;

  isolation: isolate;
  /* The base 'contain: layout' makes the app the containing block of the
     mobile fixed overlays, so the bottom sheet was trapped inside the card.
     Here the sheet covers the viewport as designed. */
  contain: none;
  padding: 10px 6px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(120% 70% at 15% 0%, rgba(176,40,52,.35), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(24,110,84,.35), transparent 60%),
    linear-gradient(165deg, #0c1322 0%, #0a1714 55%, #120b10 100%);
  box-shadow: 0 40px 90px rgba(6,10,20,.45), inset 0 1px 0 rgba(255,255,255,.08);
  animation: cb-mo-rise .9s var(--mo-ease) backwards; /* no fill after: a kept transform/filter would trap the mobile overlay */
}
.cb-theme-motion .cb-screen--calendar,
.cb-theme-motion .cb-screen--success,
.cb-theme-motion .cb-screen--cancel { position: relative; z-index: 1; }
/* Slots/form keep their own fixed overlay on mobile; on desktop they are
   inline cards and must sit above the scene. */
@media (min-width: 580px) {
  .cb-theme-motion .cb-screen--slots,
  .cb-theme-motion .cb-screen--form { position: relative; z-index: 1; }
}
/* Mobile: 'isolation' would trap the fixed bottom sheet (z-index 9990) inside
   the app's stacking context, so the theme footer painted over the form and
   swallowed taps on „Продължи към плащане". The scene/screens keep their
   0/1 order without it. */
@media (max-width: 579px) {
  .cb-app.cb-theme-motion { isolation: auto; }
}

/* ── Scene (injected by motion.js) ───────────────────────── */
.cb-mo-scene {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden; pointer-events: none;
}
.cb-mo-light { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; }
.cb-mo-light.l1 { width: 260px; height: 260px; background: #c2283a; left: -18%; top: -6%;  opacity: .38; animation: cb-mo-l1 14s ease-in-out infinite alternate; }
.cb-mo-light.l2 { width: 240px; height: 240px; background: #e0a93a; right: -16%; top: 34%;  opacity: .26; animation: cb-mo-l2 18s ease-in-out infinite alternate; }
.cb-mo-light.l3 { width: 280px; height: 280px; background: #1f8a6a; left: 10%;  bottom: -18%; opacity: .30; animation: cb-mo-l3 22s ease-in-out infinite alternate; }
@keyframes cb-mo-l1 { to { transform: translate(90px, 60px) scale(1.15); } }
@keyframes cb-mo-l2 { to { transform: translate(-80px, -50px) scale(1.2); } }
@keyframes cb-mo-l3 { to { transform: translate(70px, -70px) scale(1.1); } }

.cb-mo-flake {
  position: absolute; top: -4%; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.8);
  animation: cb-mo-snow linear infinite;
}
@keyframes cb-mo-snow {
  0%   { transform: translate3d(0,-10px,0); opacity: 0; }
  10%  { opacity: .85; }
  90%  { opacity: .5; }
  100% { transform: translate3d(var(--drift, 20px), 760px, 0); opacity: 0; }
}

/* Pointer glow (desktop) */
.cb-app.cb-theme-motion::after {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%), rgba(244,200,75,.10), transparent 70%);
  transition: opacity .3s;
}

/* ── Calendar ────────────────────────────────────────────── */
.cb-theme-motion .cb-month-label {
  font-size: 21px; letter-spacing: -.02em;
  background: linear-gradient(90deg, #fff, #f4c84b 60%, #fff);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cb-mo-sheen 6s linear infinite;
}
@keyframes cb-mo-sheen { to { background-position: -200% 0; } }

.cb-theme-motion .cb-cal-nav-btn {
  background: var(--mo-glass); border: 1px solid var(--cb-border); color: var(--cb-text);
  backdrop-filter: var(--mo-blur); -webkit-backdrop-filter: var(--mo-blur);
  transition: transform .35s var(--mo-ease), border-color .25s, background .25s, color .25s;
}
.cb-theme-motion .cb-cal-nav-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: #f4c84b; color: #f4c84b; background: rgba(244,200,75,.12); }
.cb-theme-motion .cb-cal-weekdays span { color: rgba(255,255,255,.45); }

.cb-theme-motion .cb-cal-grid { gap: 5px; }
.cb-theme-motion .cb-day { border-radius: 14px; font-variant-numeric: tabular-nums; }
.cb-theme-motion .cb-cal-grid.cb-mo-in .cb-day:not(.cb-day--empty),
.cb-theme-motion .cb-cal-grid.cb-mo-next .cb-day:not(.cb-day--empty),
.cb-theme-motion .cb-cal-grid.cb-mo-prev .cb-day:not(.cb-day--empty) {
  animation: cb-mo-day .6s var(--mo-ease) both;
  animation-delay: calc(var(--i, 0) * 12ms);
}
.cb-theme-motion .cb-cal-grid.cb-mo-next { --mo-dx: 26px; }
.cb-theme-motion .cb-cal-grid.cb-mo-prev { --mo-dx: -26px; }
@keyframes cb-mo-day {
  from { opacity: 0; transform: translate3d(var(--mo-dx, 0), 14px, 0) scale(.9); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.cb-theme-motion .cb-day--available {
  background: var(--mo-glass);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  transition: transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease), border-color .25s, background .25s;
}
.cb-theme-motion .cb-day--available::before { background: #f4c84b; box-shadow: 0 0 8px #f4c84b; }
.cb-theme-motion .cb-day--available:hover {
  transform: translateY(-3px);
  background: rgba(244,200,75,.14);
  border-color: rgba(244,200,75,.6);
  color: #fff;
  box-shadow: 0 10px 26px rgba(244,200,75,.18);
}
.cb-theme-motion .cb-day--selected {
  background: var(--mo-gold) !important;
  background-size: 200% 100% !important;
  color: #17130a !important;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(244,200,75,.35);
  animation: cb-mo-pop .5s var(--mo-ease) both, cb-mo-shine 3s linear infinite;
}
.cb-theme-motion .cb-day--selected::before { background: #17130a; box-shadow: none; }
@keyframes cb-mo-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cb-mo-shine { to { background-position: -200% 0; } }
.cb-theme-motion .cb-day--today::after { border-color: rgba(244,200,75,.7); border-radius: 14px; }
.cb-theme-motion .cb-day--today { color: #f4c84b; }
.cb-theme-motion .cb-day--skeleton { background: rgba(255,255,255,.06); border-radius: 14px; }
.cb-theme-motion .cb-cal-hint { color: rgba(255,255,255,.55); }

/* ── Drawers (slots + form) — glass + slide ─────────────── */
.cb-theme-motion .cb-drawer {
  background: linear-gradient(160deg, rgba(22,30,44,.82), rgba(14,22,24,.78));
  border: 1px solid var(--cb-border);
  backdrop-filter: var(--mo-blur); -webkit-backdrop-filter: var(--mo-blur);
  box-shadow: var(--cb-shadow-lg), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .6s var(--mo-ease);
}
.cb-theme-motion .cb-overlay-backdrop { background: rgba(4,8,14,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cb-theme-motion .cb-drawer-handle { background: rgba(255,255,255,.25); }
.cb-theme-motion .cb-icon-btn { background: rgba(255,255,255,.08); color: var(--cb-text); transition: transform .35s var(--mo-ease), background .25s; }
.cb-theme-motion .cb-icon-btn:hover { background: rgba(255,255,255,.16); transform: rotate(90deg); }
@media (min-width: 580px) {
  .cb-theme-motion .cb-is-open .cb-drawer { animation: cb-mo-drawer .7s var(--mo-ease) both; margin: 14px 10px 0; }
}
@keyframes cb-mo-drawer {
  from { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ── Slot rows ───────────────────────────────────────────── */
.cb-theme-motion .cb-slot {
  background: var(--mo-glass);
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: cb-mo-slide .65s var(--mo-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms + 80ms);
  transition: transform .35s var(--mo-ease), border-color .25s, box-shadow .35s var(--mo-ease);
}
@keyframes cb-mo-slide {
  from { opacity: 0; transform: translateX(34px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.cb-theme-motion .cb-slot--available:hover {
  transform: translateX(4px);
  border-color: rgba(244,200,75,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 30px rgba(244,200,75,.08);
}
.cb-theme-motion .cb-slot--booked,
.cb-theme-motion .cb-slot--held { opacity: .45; }
.cb-theme-motion .cb-slot-skel { background: rgba(255,255,255,.06); }

/* ── Buttons — gold with moving shine ───────────────────── */
.cb-theme-motion .cb-btn--primary,
.cb-theme-motion .cb-btn--slot {
  position: relative; overflow: hidden;
  background: var(--mo-gold); background-size: 200% 100%;
  color: #17130a; border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 12px 30px rgba(244,200,75,.22), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease), background-position .8s var(--mo-ease);
}
.cb-theme-motion .cb-btn--primary::after,
.cb-theme-motion .cb-btn--slot::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: cb-mo-sweep 3.6s ease-in-out infinite;
}
/* transform, not left: animating left re-laid out every button on every frame */
@keyframes cb-mo-sweep { 0%, 60% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(475%) skewX(-20deg); } }
.cb-theme-motion .cb-btn--primary:hover:not(:disabled),
.cb-theme-motion .cb-btn--slot:hover {
  background: var(--mo-gold); background-size: 200% 100%; background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(244,200,75,.32), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ── Form ────────────────────────────────────────────────── */
.cb-theme-motion .cb-input {
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); color: #fff;
  transition: border-color .25s, box-shadow .35s var(--mo-ease), background .25s;
}
.cb-theme-motion .cb-input:focus { border-color: #f4c84b; box-shadow: 0 0 0 4px rgba(244,200,75,.15); background: rgba(0,0,0,.36); }
.cb-theme-motion .cb-input::placeholder { color: rgba(255,255,255,.35); }
.cb-theme-motion .cb-label { color: var(--cb-text-2); }
.cb-theme-motion .cb-is-open .cb-field,
.cb-theme-motion .cb-is-open .cb-price-row,
.cb-theme-motion .cb-is-open #cb-book-btn {
  animation: cb-mo-slide .6s var(--mo-ease) both;
}
.cb-theme-motion .cb-is-open #cb-field-name  { animation-delay: .10s; }
.cb-theme-motion .cb-is-open #cb-field-email { animation-delay: .17s; }
.cb-theme-motion .cb-is-open #cb-field-phone { animation-delay: .24s; }
.cb-theme-motion .cb-is-open .cb-price-row   { animation-delay: .31s; }
.cb-theme-motion .cb-is-open #cb-book-btn    { animation-delay: .38s; }
.cb-theme-motion .cb-summary-time { color: #f4c84b; }
.cb-theme-motion .cb-hold-timer { background: rgba(244,200,75,.12); color: #f4c84b; border: 1px solid rgba(244,200,75,.25); }
.cb-theme-motion .cb-form-error { background: rgba(255,107,107,.12); color: #ff9b9b; border-color: rgba(255,107,107,.3); }
.cb-theme-motion .cb-secure-note { color: rgba(255,255,255,.5); }
.cb-theme-motion #cb-payment h3 { color: #fff; }
.cb-theme-motion .cb-stripe-input { box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.cb-theme-motion #cb-payment a { color: #f4c84b; }

/* ── Result screens ──────────────────────────────────────── */
.cb-theme-motion .cb-screen--success,
.cb-theme-motion .cb-screen--cancel { animation: cb-mo-drawer .8s var(--mo-ease) both; }
.cb-theme-motion .cb-result-icon { animation: cb-mo-float 4s ease-in-out infinite; }
@keyframes cb-mo-float { 50% { transform: translateY(-8px) rotate(-4deg); } }
.cb-theme-motion .cb-booking-ref-card {
  background: var(--mo-glass); border: 1px solid rgba(244,200,75,.35);
  backdrop-filter: var(--mo-blur); -webkit-backdrop-filter: var(--mo-blur);
}
.cb-theme-motion .cb-booking-ref-value { color: #f4c84b; }

@keyframes cb-mo-rise {
  from { opacity: 0; transform: translateY(24px) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ── Accessibility / performance ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cb-app.cb-theme-motion,
  .cb-theme-motion *,
  .cb-theme-motion *::before,
  .cb-theme-motion *::after { animation: none !important; }
  .cb-mo-flake { display: none; }
}
@media (max-width: 579px) {
  .cb-app.cb-theme-motion { border-radius: 24px; }
  .cb-mo-light { filter: blur(45px); }
}

/* v2.4: notice + consents on the dark glass theme */
.cb-theme-motion .cb-notice { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.3); color: #ffe3e3; backdrop-filter: blur(8px); animation: cb-mo-rise .4s var(--cb-ease, ease) backwards; }
.cb-theme-motion .cb-notice-close { color: rgba(255,255,255,.7); }
.cb-theme-motion .cb-consent--invalid { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.35); }

/* v2.4.3 — mobile flicker.
   The blurred lights use mix-blend-mode: screen. Since 2.3.x the app is no
   longer an isolated group on phones (needed for the bottom sheet), so the
   blend reached the whole page and phones re-composited everything on every
   animation frame — the page "blinked". The scene is now its own blend group,
   and on touch devices the large blurred lights and the title sheen stand
   still (snow keeps falling). */
.cb-mo-scene { isolation: isolate; }
@media (hover: none), (max-width: 579px) {
  .cb-mo-light { animation: none !important; mix-blend-mode: normal; filter: blur(40px); }
  .cb-theme-motion .cb-month-label { animation: none; background-position: 0 0; }
  .cb-theme-motion .cb-day--selected { animation: cb-mo-pop .5s var(--mo-ease) both; }

  /* v2.4.4 — seen on an Android phone (Messenger browser): the open time list
     went blank / lost pieces while scrolling. Nested glass blurs (sheet +
     every row) plus a shine running on every button exhausted the phone's
     GPU tiles. On touch devices: solid surfaces, no blur, no endless shine. */
  .cb-theme-motion .cb-drawer {
    background: linear-gradient(160deg, #18202d, #10181b);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .cb-theme-motion .cb-slot,
  .cb-theme-motion .cb-cal-nav-btn,
  .cb-theme-motion .cb-booking-ref-card,
  .cb-theme-motion .cb-notice {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .cb-theme-motion .cb-slot { background: rgba(255,255,255,.055); }
  .cb-theme-motion .cb-overlay-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4,8,14,.72); }
  .cb-theme-motion .cb-btn--primary::after,
  .cb-theme-motion .cb-btn--slot::after { animation: none; display: none; }
  .cb-theme-motion .cb-result-icon { animation: none; }
}

/* v2.4.6 — day tint: free times = light green, no free times = light red
   (past days stay neutral; the selected day keeps its gold). */
.cb-theme-motion .cb-day--available {
  background: rgba(46, 204, 113, .16);
  border: 1px solid rgba(46, 204, 113, .38);
}
.cb-theme-motion .cb-day--available::before { background: #5be38f; box-shadow: 0 0 8px #5be38f; }
.cb-theme-motion .cb-day--available:hover {
  background: rgba(46, 204, 113, .26);
  border-color: rgba(91, 227, 143, .75);
  box-shadow: 0 10px 26px rgba(46, 204, 113, .2);
}
.cb-theme-motion .cb-day--unavailable:not(.cb-day--past):not(.cb-day--empty) {
  background: rgba(231, 76, 60, .10);
  border: 1px solid rgba(231, 76, 60, .22);
  border-radius: 14px;
  color: rgba(255, 255, 255, .45);
}

/* v2.16.8 — gold buttons (Запази, Приложи, Продължи към плащане, Плати) even
   when the site theme paints every <button> in its own colours. */
.cb-app.cb-theme-motion .cb-btn.cb-btn--primary,
.cb-app.cb-theme-motion .cb-btn.cb-btn--slot,
.cb-app.cb-theme-motion .cb-btn.cb-btn--secondary {
  position: relative; overflow: hidden;
  background: var(--mo-gold) !important;
  background-size: 200% 100% !important;
  color: #17130a !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  box-shadow: 0 12px 30px rgba(244,200,75,.22), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.cb-app.cb-theme-motion .cb-btn.cb-btn--primary:hover:not(:disabled),
.cb-app.cb-theme-motion .cb-btn.cb-btn--slot:hover:not(:disabled),
.cb-app.cb-theme-motion .cb-btn.cb-btn--secondary:hover:not(:disabled) {
  background: var(--mo-gold) !important;
  background-size: 200% 100% !important;
  background-position: 100% 0 !important;
  color: #17130a !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: 0 18px 40px rgba(244,200,75,.32), inset 0 1px 0 rgba(255,255,255,.5) !important;
}