/* ============================================================
   Recent bookings toast (condition landing pages only)
   "Justin from Madurai · Booked an appointment · 12 min ago"
   Real, opted-in bookings only - see includes/recent-bookings.php
   ============================================================ */
.sf-rb{
  --rb-bottom:22px;
  position:fixed;left:100px;bottom:var(--rb-bottom);z-index:960;
  width:min(340px,calc(100vw - 120px));
  display:flex;align-items:center;gap:12px;
  padding:12px 38px 12px 12px;
  background:#fff;color:#1c2b3a;
  border:1px solid rgba(14,47,90,.08);border-radius:16px;
  box-shadow:0 18px 40px -14px rgba(14,47,90,.35),0 2px 6px rgba(14,47,90,.08);
  font-family:inherit;line-height:1.35;text-align:left;
  overflow:hidden;
  opacity:0;visibility:hidden;translate:0 16px;scale:.98;
  transition:opacity .35s ease,translate .45s cubic-bezier(.2,.8,.2,1),scale .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s;
}
.sf-rb.is-on{
  opacity:1;visibility:visible;translate:0 0;scale:1;
  transition:opacity .35s ease,translate .45s cubic-bezier(.2,.8,.2,1),scale .45s cubic-bezier(.2,.8,.2,1),visibility 0s;
}

.sf-rb__ico{
  position:relative;flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#2fbf55,#1f9d42);color:#fff;
  box-shadow:0 6px 14px -6px rgba(31,157,66,.75);
}
.sf-rb__ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sf-rb.is-on .sf-rb__ico::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(47,191,85,.45);
  animation:sfRbPulse 1.6s ease-out .2s 2 both;
}
@keyframes sfRbPulse{from{opacity:1;scale:.85}to{opacity:0;scale:1.25}}

.sf-rb__txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.sf-rb__who{font-size:14px;font-weight:700;color:#0e2f5a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-rb__who span{font-weight:500;color:#5a7a96}
.sf-rb__what{font-size:12.5px;color:#4b647c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-rb__what time{color:#1f9d42;font-weight:600}
.sf-rb__what time::before{content:"\00B7";margin:0 .35em;color:#9db1c4;font-weight:400}

.sf-rb__x{
  position:absolute;top:6px;right:6px;width:28px;height:28px;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:#8aa0b4;cursor:pointer;
  transition:background .2s,color .2s;
}
.sf-rb__x:hover,.sf-rb__x:focus-visible{background:#eef4fa;color:#0e2f5a}
.sf-rb__x:focus-visible{outline:2px solid #00b4d8;outline-offset:1px}
.sf-rb__x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* time-left line along the bottom edge */
.sf-rb__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(47,191,85,.12)}
.sf-rb__bar i{display:block;height:100%;background:linear-gradient(90deg,#2fbf55,#00b4d8);transform-origin:0 50%;transform:scaleX(0)}
.sf-rb.is-on .sf-rb__bar i{animation:sfRbBar var(--rb-show,6s) linear both}
.sf-rb.is-paused .sf-rb__bar i{animation-play-state:paused}
@keyframes sfRbBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* phones: full width, sits just above the Call / WhatsApp / Book bar */
@media (max-width:760px){
  .sf-rb{
    left:12px;right:12px;width:auto;max-width:440px;margin-inline:auto;
    padding:10px 36px 10px 10px;gap:10px;border-radius:14px;
  }
  .sf-rb__ico{width:34px;height:34px}
  .sf-rb__ico svg{width:17px;height:17px}
  .sf-rb__who{font-size:13.5px}
  .sf-rb__what{font-size:12px}
}
@media (max-width:340px){
  .sf-rb__what time::before{content:"";margin:0}
  .sf-rb__what time{display:block}
  .sf-rb__what{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  .sf-rb,.sf-rb.is-on{translate:none;scale:none;transition:opacity .2s linear,visibility 0s linear .2s}
  .sf-rb.is-on{transition:opacity .2s linear,visibility 0s}
  .sf-rb.is-on .sf-rb__ico::after{animation:none;display:none}
}
@media print{.sf-rb{display:none!important}}

/* narrow toast (squeezed between floating buttons on small phones) */
.sf-rb.is-narrow .sf-rb__who{display:block}/*
.sf-rb.is-narrow .sf-rb__who span{display:block;font-size:10.5px;overflow:hidden;}*/
.sf-rb.is-narrow .sf-rb__what{white-space:normal}
.sf-rb.is-narrow .sf-rb__what time{display:block}
.sf-rb.is-narrow .sf-rb__what time::before{content:"";margin:0}

/* tiny screens with no free space at the bottom: drop in just under the header instead */
.sf-rb.is-top{bottom:auto;translate:0 -16px}
.sf-rb.is-top.is-on{translate:0 0}

/* no close (x) button on the landing pages; the space kept for it is removed */
.sf-rb__x{display:none!important}
.sf-rb{padding-right:12px}
@media (max-width:760px){
  .sf-rb{padding-right:10px}
}