/* ==========================================================================
   recent-bookings.css — animated activity feed (booking entries fade in/out)
   Markup: <div class="recent-bookings">
            <h4>Recently booked</h4>
            <div class="rb-viewport">
              <div class="rb-stack" id="rbStack"></div>   (filled by JS)
            </div>
   JS (assets/js/landing.js, section 4) injects .rb-item nodes into #rbStack
   and rotates them on a timer using .entering / .leaving classes.
   ========================================================================== */

.recent-bookings {
  position: relative;
  z-index: 2;
  margin-top: -20px;
  margin-left: var(--space-20);
  color: white;
  padding: var(--space-16) var(--space-22) var(--space-20);
  background: rgba(var(--bg-dark-rgb), .55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(var(--white-rgb), .14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass-lg);
  overflow: hidden;
}

/* "Recently booked" heading with pulsing live dot */
.recent-bookings h4 {
  margin: var(--space-4) 0 var(--space-8);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: rgba(var(--white-rgb), .6);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.recent-bookings h4::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-live);
  box-shadow: 0 0 0 0 rgba(var(--accent-live-rgb), .55);
  animation: rb-live-blink 1.8s ease-out infinite;
}
@keyframes rb-live-blink {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-live-rgb), .55); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--accent-live-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-live-rgb), 0); }
}

/* Viewport with top/bottom fade-mask so items appear/disappear softly */
.rb-viewport {
  height: 210px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 14px), transparent 100%);
}
.rb-stack { display: flex; flex-direction: column; }

.rb-item {
  display: flex;
  gap: var(--space-14);
  align-items: center;
  padding: var(--space-14) 0;
  border-top: 1px solid rgba(var(--white-rgb), .08);
  overflow: hidden;
  transition: opacity .55s ease, transform .55s ease, padding .55s ease, border-color .55s ease;
}
.rb-item:first-child { border-top: none; }

/* JS-driven animation states */
.rb-item.entering { animation: rb-slide-in .6s cubic-bezier(.22,1,.36,1); }
.rb-item.leaving {
  opacity: 0;
  transform: translateY(-14px);
  padding-top: 0;
  padding-bottom: 0;
  height: 0 !important;
  border-color: transparent;
}
@keyframes rb-slide-in {
  0%   { opacity: 0; transform: translateY(28px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Item internals */
.rb-item .av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(var(--white-rgb), .08);
  border: 1px solid rgba(var(--white-rgb), .1);
  flex-shrink: 0;
}
.rb-item .av img { width: 100%; height: 100%; object-fit: cover; }

.rb-item .info { flex: 1; min-width: 0; }
.rb-item .info .t {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-item .info .s {
  font-size: var(--fs-micro);
  color: rgba(var(--white-rgb), .65);
}
.rb-item .price {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: white;
  text-align: right;
}
.rb-item .price small {
  display: block;
  color: rgba(var(--white-rgb), .6);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Mobile layout: same card internals as desktop (avatar / title-sub /
     price), but the stack runs horizontally as a single-card carousel —
     one booking visible at a time, new entry slides in from the right. */
  .recent-bookings {
    margin: var(--space-12) 0 0;
    /* Compact mobile card — tighter than desktop's 16/22/20 to minimize
       vertical footprint without changing structure or alignment. */
    padding: var(--space-10) var(--space-16) var(--space-10);
    border-radius: var(--radius-lg);
    /* Reset the hero's centered-text cascade — recent-bookings content
       is left-aligned like on desktop. */
    text-align: left;
  }
  .recent-bookings h4 {
    margin: 0 0 var(--space-4);
  }

  /* Carousel-only overrides — everything inside .rb-item keeps the desktop
     styling (display:flex / gap-14 / padding-14-0 / 42px avatar / fs-sm
     title / fs-micro sub / bold fs-md price) untouched. */
  .rb-viewport {
    height: 50px;
    overflow: hidden;
    /* No edge-mask on mobile — the price/"per session" sits on the right
       and we don't want it darkened by a fade gradient. */
  }
  .rb-stack {
    flex-direction: row;
    height: 100%;
  }
  .rb-item {
    flex-shrink: 0;
    width: 100%;
    padding: var(--space-6) 0;    /* tighter than desktop's 14/0 */
    gap: var(--space-12);         /* override desktop 14 for compactness */
    border-top: 0;                /* no dividers — only one card visible */
    transition: opacity .55s ease, transform .55s ease, width .55s ease;
  }
  /* Smaller avatar on mobile to shrink overall card height. */
  .rb-item .av { width: 36px; height: 36px; }
  .rb-item.entering { animation: rb-slide-in-x .55s cubic-bezier(.22,1,.36,1); }
  .rb-item.leaving {
    transform: translateX(-32px);
    width: 0 !important;
    opacity: 0;
  }
  @keyframes rb-slide-in-x {
    0%   { opacity: 0; transform: translateX(60px); }
    100% { opacity: 1; transform: translateX(0); }
  }
}