/* ==========================================================================
   booking-pop.css — small white "just booked" card with cycling content
   and a sticker-style "Booked" badge.

   Markup:
     <div class="booking-pop">
       <span class="booking-pop__badge" id="hiwBadge">
         <i data-lucide="check-circle-2"></i> Booked
       </span>
       <div class="booking-pop__inner" id="hiwPopInner">
         <img class="av" src="..." alt="">
         <div class="info">
           <div class="t">Trainer Name</div>
           <div class="session">Session title</div>
           <div class="s"><span class="star">★</span> 4.9 · Tomorrow 7pm</div>
         </div>
         <div class="price">$X</div>
       </div>
     </div>

   Self-contained: drop into any layer (light or dark photo background) and
   the white frame keeps it readable. Positioning (overhang, anchor corner)
   is applied by the host context — this file only owns the card itself.
   JS that powers the cycle lives in landing.js (#7).
   ========================================================================== */

.booking-pop {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-12) var(--space-18);
  min-width: 300px;
  color: var(--ink);
}

/* ── Inner content row (gets innerHTML-swapped by JS each tick) ──────── */
.booking-pop__inner {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .35s ease,
    transform .35s cubic-bezier(.2, .8, .2, 1);
}
.booking-pop__inner.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}
.booking-pop__inner.is-entering {
  animation: booking-pop-in .4s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes booking-pop-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.booking-pop .av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.booking-pop .info { min-width: 0; flex: 1; }
.booking-pop .info .t {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-pop .info .session {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  font-weight: var(--fw-medium);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-pop .info .s {
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-top: var(--space-2);
}
.booking-pop .info .star { color: var(--star); }
.booking-pop .price {
  margin-left: auto;
  font-weight: var(--fw-bold);
  font-size: var(--fs-price);
  color: var(--brand);
  letter-spacing: var(--ls-snug);
}

/* ── "Booked" sticker badge ─────────────────────────────────────────────
   Overhangs the top-right corner of the card. JS toggles .is-on shortly
   after each card swap so the pill reads as "just booked". */
.booking-pop__badge {
  position: absolute;
  top: calc(var(--space-10) * -1);
  right: calc(var(--space-10) * -1);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  background: var(--brand);
  color: white;
  border-radius: var(--pill);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: 1;
  box-shadow: var(--shadow-brand);
  opacity: 0;
  transform: scale(.6) rotate(-6deg);
  transform-origin: center;
  transition:
    opacity .25s ease,
    transform .4s cubic-bezier(.34, 1.56, .64, 1); /* slight overshoot */
}
.booking-pop__badge.is-on {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.booking-pop__badge svg.lucide,
.booking-pop__badge [data-lucide] { width: 14px; height: 14px; }