/* ============================================================
   FLOATING UI — mobile bottom bar, roaming discount jar, offers popup.
   Self-contained: ships its own tokens (falling back to the values in
   chrome.css / index.php's inline <style> so this still renders sanely
   if it is ever the first stylesheet on the page) so this file can be
   dropped on any template without depending on load order.
   ============================================================ */
:root{
  --bottombar-h:68px;
  --ofz-forest:var(--forest,#1E3A2B);
  --ofz-gold:var(--gold,#D9A441);
  --ofz-gold-lt:var(--gold-lt,#E8C071);
  --ofz-cream:var(--cream,#F7F1E3);
  --ofz-cream-3:var(--cream-3,#FEFCF6);
  --ofz-ink:var(--ink,#1B2718);
  --ofz-muted:var(--muted,#5E6C58);
  --ofz-line:var(--line,rgba(30,58,43,.13));
  --ofz-r-md:var(--r-md,22px);
  --ofz-r-lg:var(--r-lg,30px);
  --ofz-shadow-m:var(--shadow-m,0 20px 50px -24px rgba(20,38,28,.3));
  --ofz-shadow-l:var(--shadow-l,0 48px 100px -44px rgba(20,38,28,.5));
  --ofz-ease:var(--ease,cubic-bezier(.22,.61,.36,1));
}

/* ============================================================
   BOTTOM BAR (mobile only)
   Sits below the booking modal's z-index:1000 on purpose — the modal
   must always win if both are somehow visible at once.
   ============================================================ */
.ofz-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:grid;grid-template-columns:repeat(4,1fr);
  height:var(--bottombar-h);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--ofz-cream-3);
  border-top:1px solid var(--ofz-line);
  box-shadow:0 -10px 30px -18px rgba(20,38,28,.35);
}
/* Offers data came back empty/unavailable — collapse to 3 equal columns
   rather than leaving a dead gap where the button used to be. */
.ofz-bar.ofz-bar--3{grid-template-columns:repeat(3,1fr)}
.ofz-bar__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  color:var(--ofz-forest);text-decoration:none;font-family:"Manrope",system-ui,sans-serif;
  font-size:.62rem;font-weight:700;letter-spacing:.01em;line-height:1.1;
  border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.ofz-bar__item:active{transform:scale(.95)}
.ofz-bar__item:disabled{opacity:.4;pointer-events:none}
.ofz-bar__ic{display:flex;width:22px;height:22px}
.ofz-bar__ic svg{width:100%;height:100%}
/* Four equal cells divided by hairlines, so the bar reads as four squares
   rather than three buttons around a floating badge. Book Now is marked by
   colour alone. */
.ofz-bar__item + .ofz-bar__item{border-left:1px solid var(--ofz-line,rgba(0,0,0,.10))}
.ofz-bar__item--book{color:var(--ofz-forest,#1E3A2B);font-weight:800}
.ofz-bar__item--book .ofz-bar__lb{font-weight:800}
.ofz-bar__lb{white-space:nowrap}
[hidden]{display:none!important}

@media (min-width:860px){
  .ofz-bar{display:none}
}

/* ============================================================
   ROAMING JAR MASCOT
   Outer element owns the slide-in/out (transform+opacity transition,
   toggled by .is-visible); the inner wrap owns the gentle bob loop, so
   the two motions never fight over the same `transform`.
   ============================================================ */
.ofz-jar{
  position:fixed;z-index:900;top:30%;
  opacity:0;pointer-events:none;
  transition:transform .6s var(--ofz-ease),opacity .5s var(--ofz-ease);
}
/* On a phone the jar sat mid-screen with a full-width speech bubble under it,
   which read as a whole band of the page. Shrink it and tuck it just under the
   hero heading, where it is noticeable without owning a row of its own. */
@media (max-width:700px){
  .ofz-jar{top:var(--ofz-jar-top,232px)}
  .ofz-jar{--ofz-jar-rest-l:10px;--ofz-jar-rest-r:calc(100vw - 54px)}
  .ofz-jar__btn{width:38px;height:52px}
  .ofz-jar__cloud{
    max-width:132px;font-size:.68rem;line-height:1.3;
    padding:.42rem 1.15rem .42rem .55rem;margin-bottom:.35rem;
  }
  .ofz-jar__cloud-x{width:16px;height:16px;font-size:.8rem}
}
/* It darts in from an edge, rests against that side long enough to be tapped,
   then slips back out the way it came. It stays at the sides — parking it in
   the middle of the screen covered the content it was meant to sell.
   --ofz-jar-rest-r is where the right-hand rest position sits; the mobile
   block below narrows it for the smaller jar. */
.ofz-jar{left:0;right:auto;--ofz-jar-rest-l:14px;--ofz-jar-rest-r:calc(100vw - 74px)}
.ofz-jar.is-visible{opacity:1;pointer-events:auto}

@keyframes ofzDartL{
  0%   {transform:translate(-150px,0);            opacity:0}
  9%   {opacity:1}
  22%  {transform:translate(var(--ofz-jar-rest-l),0)}
  78%  {transform:translate(var(--ofz-jar-rest-l),0)}   /* the pause — tappable */
  92%  {opacity:1}
  100% {transform:translate(-150px,0);            opacity:0}
}
@keyframes ofzDartR{
  0%   {transform:translate(calc(100vw + 150px),0); opacity:0}
  9%   {opacity:1}
  22%  {transform:translate(var(--ofz-jar-rest-r),0)}
  78%  {transform:translate(var(--ofz-jar-rest-r),0)}
  92%  {opacity:1}
  100% {transform:translate(calc(100vw + 150px),0); opacity:0}
}
/* Same two sides, arriving on a slight diagonal so repeat visits differ. */
@keyframes ofzDartLd{
  0%   {transform:translate(-150px,-60px);        opacity:0}
  9%   {opacity:1}
  22%  {transform:translate(var(--ofz-jar-rest-l),0)}
  78%  {transform:translate(var(--ofz-jar-rest-l),0)}
  92%  {opacity:1}
  100% {transform:translate(-150px,60px);         opacity:0}
}
@keyframes ofzDartRd{
  0%   {transform:translate(calc(100vw + 150px),60px); opacity:0}
  9%   {opacity:1}
  22%  {transform:translate(var(--ofz-jar-rest-r),0)}
  78%  {transform:translate(var(--ofz-jar-rest-r),0)}
  92%  {opacity:1}
  100% {transform:translate(calc(100vw + 150px),-60px); opacity:0}
}

.ofz-jar.run-lr  {animation:ofzDartL  8.5s cubic-bezier(.3,.72,.32,1) forwards}
.ofz-jar.run-rl  {animation:ofzDartR  8.5s cubic-bezier(.3,.72,.32,1) forwards}
.ofz-jar.run-down{animation:ofzDartLd 9s   cubic-bezier(.3,.72,.32,1) forwards}
.ofz-jar.run-up  {animation:ofzDartRd 9s   cubic-bezier(.3,.72,.32,1) forwards}
.ofz-jar__wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.ofz-jar.is-visible .ofz-jar__wrap{animation:ofzBob 2.6s ease-in-out infinite}
@keyframes ofzBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* The product jar itself, standing free rather than cropped into a badge —
   a tall jar squeezed into a circle just read as a smudge. */
.ofz-jar__btn{
  width:54px;height:74px;padding:0;border:0;background:none;
  cursor:pointer;display:flex;align-items:flex-end;justify-content:center;
  filter:drop-shadow(0 8px 14px rgba(20,38,28,.28));
}
.ofz-jar__btn:hover{filter:drop-shadow(0 10px 18px rgba(217,164,65,.55))}
.ofz-jar__img{width:100%;height:100%;object-fit:contain;display:block}

.ofz-jar__cloud{
  position:relative;margin-bottom:.5rem;max-width:168px;
  background:#fff;color:var(--ofz-ink);border:1px solid var(--ofz-line);
  border-radius:var(--ofz-r-md);padding:.65rem 1.6rem .65rem .8rem;
  font-size:.78rem;font-weight:600;line-height:1.35;box-shadow:var(--ofz-shadow-m);
}
.ofz-jar__cloud::after{
  content:"";position:absolute;bottom:-7px;left:50%;margin-left:-7px;
  width:14px;height:14px;background:#fff;border-right:1px solid var(--ofz-line);
  border-bottom:1px solid var(--ofz-line);transform:rotate(45deg);
}
.run-rl .ofz-jar__cloud::after,
.run-up .ofz-jar__cloud::after{left:auto;right:20px;margin-left:0}
.run-lr .ofz-jar__cloud::after,
.run-down .ofz-jar__cloud::after{left:20px;right:auto;margin-left:0}
/* Resting against an edge, the bubble must not spill off screen. */
.run-lr .ofz-jar__wrap,.run-down .ofz-jar__wrap{align-items:flex-start}
.run-rl .ofz-jar__wrap,.run-up .ofz-jar__wrap{align-items:flex-end}
.ofz-jar__cloud-x{
  position:absolute;top:.25rem;right:.35rem;width:18px;height:18px;border:0;background:none;
  color:var(--ofz-muted);font-size:1rem;line-height:1;cursor:pointer;padding:0;
}

@media (prefers-reduced-motion:reduce){
  .ofz-jar{transition:opacity .25s linear;transform:none!important}
  .ofz-jar[class*="run-"]{animation:none!important;transform:translate(var(--ofz-jar-rest-l),0)!important}
  .ofz-jar.is-visible .ofz-jar__wrap{animation:none}
}

/* Keep the jar clear of the bottom bar on mobile. */
@media (max-width:859.98px){
  .ofz-jar{top:auto;bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom,0px) + 18px)}
}

/* ============================================================
   OFFERS POPUP  (also the "you caught the jar" reward screen)
   z-index sits above the bar/jar (900) but below the booking modal
   (1000) — by design, per the brief.
   ============================================================ */
.ofz-popup{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:clamp(1rem,4vw,2.5rem)}
.ofz-popup__backdrop{position:absolute;inset:0;background:rgba(11,26,17,.68)}
.ofz-popup__dialog{
  position:relative;width:min(420px,100%);max-height:85vh;overflow-y:auto;
  background:var(--ofz-cream-3);border-radius:var(--ofz-r-lg);box-shadow:var(--ofz-shadow-l);
  padding:2rem 1.6rem 1.6rem;font-family:"Manrope",system-ui,sans-serif;
}
.ofz-popup__close{
  position:absolute;right:1rem;top:1rem;width:38px;height:38px;border:0;border-radius:50%;
  background:#fff;font-size:1.4rem;line-height:1;color:var(--ofz-forest);cursor:pointer;
}
.ofz-popup__kicker{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ofz-gold)}
.ofz-popup__title{font-family:"Fraunces","Georgia",serif;font-weight:400;color:var(--ofz-forest);
  font-size:1.5rem;line-height:1.08;margin:.35rem 0 .3rem;letter-spacing:-.02em}
.ofz-popup__sub{color:var(--ofz-muted);font-size:.85rem;margin:0 0 1rem}
.ofz-popup__catch{margin-bottom:1.3rem;padding-bottom:1.2rem;border-bottom:1px solid var(--ofz-line)}

.ofz-coupon-list{display:flex;flex-direction:column;gap:.7rem}
.ofz-coupon{
  display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--ofz-line);
  border-radius:var(--ofz-r-md);padding:.85rem .9rem;
}
.ofz-coupon--catch{border-color:var(--ofz-gold);background:var(--gold-pale,#F3DFB4)}
.ofz-coupon__body{flex:1;min-width:0}
.ofz-coupon__label{display:block;font-weight:800;color:var(--ofz-forest);font-size:.92rem}
.ofz-coupon__blurb{display:block;color:var(--ofz-muted);font-size:.78rem;margin-top:.1rem}
.ofz-coupon__code{
  display:inline-block;margin-top:.35rem;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--ofz-forest);
  background:var(--ofz-cream);border:1px dashed var(--ofz-line);border-radius:8px;padding:.15rem .5rem;
}
.ofz-coupon__copy{
  flex-shrink:0;border:1.5px solid rgba(30,58,43,.26);border-radius:999px;background:none;
  color:var(--ofz-forest);font-weight:700;font-size:.76rem;padding:.55rem .9rem;cursor:pointer;
  white-space:nowrap;transition:background .15s,border-color .15s,color .15s;
}
.ofz-coupon__copy:hover{background:var(--ofz-forest);border-color:var(--ofz-forest);color:var(--ofz-cream)}
.ofz-coupon__copy.is-copied{background:var(--ofz-forest);border-color:var(--ofz-forest);color:var(--ofz-cream)}

@media (max-width:400px){
  .ofz-coupon{flex-wrap:wrap}
  .ofz-coupon__copy{width:100%}
}