/* ============================================================
   BOOKING
   Persistent "book us" furniture: a sticky action bar, inline
   booking strips between sections, and card-level book buttons.
   ============================================================ */

/* ---------------------------------------------------------------
   STICKY BOOKING BAR
   --------------------------------------------------------------- */
.book-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky);
  transform: translateY(110%);
  transition: transform .55s var(--e-out);
  pointer-events:none;
}
.book-bar.is-on{ transform:none; pointer-events:auto; }

.book-bar__in{
  width:var(--wrap); margin-inline:auto;
  margin-bottom: clamp(.7rem,1.6vw,1.2rem);
  display:flex; align-items:center; gap: clamp(.7rem,1.6vw,1.4rem);
  padding: clamp(.6rem,1.2vw,.85rem) clamp(.7rem,1.4vw,1.1rem);
  border-radius: var(--r-pill);
  background: var(--glass); border:1px solid var(--glass-line);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--shadow-lg);
}

.book-bar__msg{ display:grid; gap:.15rem; margin-right:auto; min-width:0; }
.book-bar__msg .t{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(.95rem,1.6vw,1.15rem); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.book-bar__msg .s{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mut);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:720px){ .book-bar__msg{ display:none; } }

.book-bar__acts{ display:flex; align-items:center; gap:.5rem; margin-inline:auto; }
@media (min-width:721px){ .book-bar__acts{ margin-inline:0; } }

.book-bar .btn{ padding:.85em 1.6em; }

/* ---- phone layout: edge-to-edge, CTA takes the room it deserves ---- */
@media (max-width:640px){
  .book-bar__in{
    width:100%; margin-bottom:0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    gap:.5rem;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    border-bottom:0;
    box-shadow: 0 -10px 34px rgba(0,0,0,.22);
  }
  .book-bar__acts{
    display:flex; width:100%; align-items:center; gap:.5rem; margin:0;
  }
  .book-bar__icon{
    width:42px; height:42px;
    background: var(--surface-hi); border-color: var(--line);
  }
  .book-bar .btn{
    flex:1 1 auto; min-width:0;
    padding: .95em 1rem; font-size:10px; letter-spacing:.14em;
  }
  .book-bar__x{
    width:26px; height:26px; border:0; color:var(--text-mut);
    align-self:center;
  }
  .book-bar__x svg{ width:10px; height:10px; }

  /* the bar already offers WhatsApp, so hide the duplicate floating button */
  body.has-bookbar .wa-fab{ opacity:0; visibility:hidden; pointer-events:none; }
}
@media (max-width:380px){
  .book-bar__icon:nth-of-type(2){ display:none; }
}

.book-bar__icon{
  width:44px; height:44px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); color:var(--text); background:var(--surface);
  transition: background-image .4s, border-color .4s, color .4s, transform .4s var(--e-out);
}
.book-bar__icon:hover{
  background-image: var(--grad-hot); border-color:transparent; color:#fff;
  transform: translateY(-3px);
}
.book-bar__icon svg{ width:17px; height:17px; }
.book-bar__icon svg.stroke{ stroke:currentColor; fill:none; stroke-width:1.5; }
.book-bar__icon svg.fill{ fill:currentColor; }

.book-bar__x{
  width:30px; height:30px; flex:none; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--text-mut);
  display:grid; place-items:center;
  transition: color .3s, border-color .3s;
}
.book-bar__x:hover{ color:var(--text); border-color:var(--line-strong); }
.book-bar__x svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* keep the floating buttons clear of the bar */
body.has-bookbar .to-top{ bottom: calc(clamp(1rem,2.5vw,2rem) + 78px); }
body.has-bookbar .wa-fab{ bottom: calc(clamp(1rem,2.5vw,2rem) + 78px); }
.book-bar__x{ order:99; }

/* ---------------------------------------------------------------
   INLINE BOOKING STRIP
   --------------------------------------------------------------- */
.book-strip{
  position:relative; overflow:hidden;
  border-radius: var(--r-lg);
  border:1px solid transparent;
  background-image: linear-gradient(var(--bg-elev), var(--bg-elev)), var(--grad-hot);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--shadow-md);
  padding: clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,3.2vw,2.8rem);
  display:flex; flex-wrap:wrap; align-items:center;
  gap: clamp(1rem,2.5vw,2.4rem);
}
.book-strip__halo{
  position:absolute; inset:-50%;
  background:
    radial-gradient(26% 40% at 18% 30%, var(--halo-1), transparent 66%),
    radial-gradient(24% 36% at 82% 66%, var(--halo-2), transparent 66%);
  filter: blur(30px); pointer-events:none;
  animation: haloDrift 18s ease-in-out infinite;
}
.book-strip > *{ position:relative; z-index:2; }

.book-strip__body{ flex:1 1 320px; display:grid; gap:.5rem; }
.book-strip__body h3{
  font-size: clamp(1.15rem,2.4vw,1.75rem); line-height:1.18;
}
.book-strip__body p{ font-size:var(--t-sm); color:var(--text-mut); max-width:52ch; }

.book-strip__acts{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
@media (max-width:440px){
  .book-strip{ padding: 1.3rem 1.15rem; }
  .book-strip__acts{ display:grid; width:100%; }
  .book-strip__acts .btn{ width:100%; }
}

.book-strip--dark{
  background-image: none; background-color: var(--bg-invert);
  color: var(--text-invert); border-color: transparent;
}
.book-strip--dark h3{ color: var(--text-invert); }
.book-strip--dark p{ color: color-mix(in srgb, var(--text-invert) 70%, transparent); }
.book-strip--dark .btn--ghost{ --btn-fg: var(--text-invert); border-color: color-mix(in srgb, var(--text-invert) 32%, transparent); }

/* ---------------------------------------------------------------
   CARD-LEVEL BOOK BUTTON
   --------------------------------------------------------------- */
.book-mini{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:.9rem; padding:.6em 1.15em;
  border-radius: var(--r-pill);
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  color:#fff; background-image: var(--grad-hot);
  box-shadow: 0 6px 18px rgba(225,29,110,.24);
  transition: transform .4s var(--e-out), box-shadow .4s var(--e-out);
}
.book-mini:hover{ transform: translateY(-2px); box-shadow: var(--shadow-glow); color:#fff; }
.book-mini svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; }