/* ==========================================================================
   Booking fallback dialog

   When a booking cannot reach dispatch, a line of red text under the button
   is the wrong response: the guest has filled in a form, committed to a
   price and pressed the button, and we have just lost them. This takes over
   the screen instead, puts the phone number under their thumb, and hands
   them the discount code so the offer survives the failure.

   Self-contained on purpose - it loads on the homepage (home.css tokens) and
   on every other page (site.css tokens), so it carries its own colours.
   ========================================================================== */

.plbf{
  width:min(440px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  padding:0;
  border:0;
  border-radius:26px;
  background:transparent;
  overflow:visible;
  color:#F8F5FD;
}
.plbf::backdrop{
  background:rgba(8,5,14,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:plbfVeil .34s ease both;
}
.plbf[open]{animation:plbfRise .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes plbfVeil{from{opacity:0}to{opacity:1}}
@keyframes plbfRise{
  from{opacity:0;transform:translateY(18px) scale(.95)}
  to  {opacity:1;transform:none}
}

/* ---------- the card ---------- */
.plbf-card{
  position:relative;
  overflow:hidden;
  padding:30px 24px 24px;
  border-radius:26px;
  background:
    radial-gradient(ellipse 120% 90% at 50% -20%, rgba(124,58,237,.5), transparent 62%),
    linear-gradient(180deg,#191031,#0C0718);
  box-shadow:
    inset 0 0 0 1px rgba(233,221,255,.14),
    0 40px 80px -30px rgba(0,0,0,.95);
  text-align:center;
}
/* a thread of light across the top edge, the same sodium the hero uses */
.plbf-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.7) 24%,#FFD79A 50%,rgba(124,58,237,.7) 76%,transparent);
}

.plbf-x{
  position:absolute;right:14px;top:14px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(233,221,255,.16);
  color:#B3A6CE;font-size:17px;line-height:1;
  transition:background .2s ease,color .2s ease;
}
.plbf-x:hover{background:rgba(255,255,255,.14);color:#F8F5FD}

/* ---------- the mark ---------- */
/* The company badge, not a warning triangle. The well is a soft violet halo
   rather than a tinted disc, so it lights the mark instead of fighting its
   magenta. */
.plbf-ico{
  position:relative;
  display:grid;place-items:center;
  width:62px;height:62px;margin:2px auto 0;
  border-radius:999px;
  background:radial-gradient(circle at 50% 42%,rgba(199,125,255,.26),rgba(124,58,237,.1) 58%,transparent 76%);
}
.plbf-ico img{
  width:100%;height:100%;
  object-fit:contain;display:block;
  filter:drop-shadow(0 6px 18px rgba(124,58,237,.6));
}
.plbf-ico::after{
  content:'';position:absolute;left:0;right:0;top:0;bottom:0;border-radius:999px;
  box-shadow:0 0 0 0 rgba(199,125,255,.42);
  animation:plbfPing 2.6s ease-out infinite;
}
@keyframes plbfPing{
  0%  {box-shadow:0 0 0 0 rgba(199,125,255,.4)}
  70% {box-shadow:0 0 0 20px rgba(199,125,255,0)}
  100%{box-shadow:0 0 0 0 rgba(199,125,255,0)}
}

.plbf-card h2{
  margin:16px 0 0;
  font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.2;
  color:#FFFFFF;
}
.plbf-lead{
  margin:9px auto 0;max-width:34ch;
  font-size:14px;line-height:1.6;color:#B3A6CE;
}

/* ---------- call ---------- */
.plbf-call{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:54px;margin:20px 0 0;
  border-radius:999px;
  background:linear-gradient(180deg,#8B4DF5,#6D28D9);
  color:#FFFFFF !important;
  font-size:17px;font-weight:600;letter-spacing:-.01em;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 30px -14px rgba(109,40,217,.95);
  transition:transform .18s ease,filter .2s ease;
}
.plbf-call:hover{transform:translateY(-1px);filter:brightness(1.06);color:#FFFFFF !important}
.plbf-call svg{width:19px;height:19px}
.plbf-hours{margin:9px 0 0;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8F82AC}

/* ---------- the offer survives ---------- */
.plbf-deal{
  margin:20px 0 0;padding:16px 16px 18px;
  border-radius:18px;
  background:rgba(255,215,154,.07);
  box-shadow:inset 0 0 0 1px rgba(255,215,154,.26);
}
.plbf-deal-h{
  margin:0;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:15px;font-weight:600;color:#FFD79A;
}
.plbf-deal-h svg{width:16px;height:16px}
.plbf-deal-p{margin:6px auto 0;max-width:32ch;font-size:12.5px;line-height:1.55;color:#C3B7DC}
.plbf-code{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:46px;margin:12px 0 0;
  border:1px dashed rgba(255,215,154,.5);border-radius:12px;
  background:rgba(10,6,17,.5);
  color:#FFE7B8;cursor:pointer;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:15px;font-weight:500;letter-spacing:.1em;
  transition:background .2s ease,border-color .2s ease;
}
.plbf-code:hover{background:rgba(10,6,17,.75);border-color:rgba(255,215,154,.8)}
.plbf-copy{
  font-family:'Geist',system-ui,sans-serif;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:#9C8FB8;
}
.plbf-code.is-copied{border-style:solid;border-color:#5EE6A8;color:#BFF3DC}
.plbf-code.is-copied .plbf-copy{color:#5EE6A8}

.plbf-dismiss{
  display:block;width:100%;margin:14px 0 0;padding:6px;
  border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:13px;color:#8F82AC;
  transition:color .2s ease;
}
.plbf-dismiss:hover{color:#F8F5FD}

/* Phones: the card was filling the screen, which makes a recoverable problem
   feel like a wall. Everything steps down so it reads as a panel the guest is
   looking at rather than a page they have been sent to. */
@media (max-width:520px){
  .plbf{border-radius:22px}
  .plbf-card{padding:20px 16px 15px;border-radius:22px}
  .plbf-x{right:10px;top:10px;width:30px;height:30px;font-size:15px}
  .plbf-ico{width:46px;height:46px}
  .plbf-card h2{margin:11px 0 0;font-size:18px}
  .plbf-lead{margin:6px auto 0;max-width:31ch;font-size:13px;line-height:1.5}
  .plbf-call{height:46px;margin:14px 0 0;font-size:15.5px;gap:8px}
  .plbf-call svg{width:17px;height:17px}
  .plbf-hours{margin:6px 0 0;font-size:9.5px;letter-spacing:.12em}
  .plbf-deal{margin:14px 0 0;padding:12px 12px 13px;border-radius:15px}
  .plbf-deal-h{font-size:13.5px;gap:6px}
  .plbf-deal-h svg{width:14px;height:14px}
  .plbf-deal-p{margin:4px auto 0;max-width:30ch;font-size:11.5px;line-height:1.45}
  .plbf-code{height:40px;margin:9px 0 0;font-size:13.5px;letter-spacing:.08em;gap:8px}
  .plbf-copy{font-size:10px}
  .plbf-dismiss{margin:9px 0 0;font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .plbf[open],.plbf::backdrop{animation:none}
  .plbf-ico::after{animation:none}
  .plbf-call:hover{transform:none}
}