/* =====================================================================
   TOPEE - HEADER QUICK DIAL
   ---------------------------------------------------------------------
   The phone disc in the header fans out into three choices: WhatsApp,
   Call, and the booking form. Its own file, so a change here can only
   ever break this control - not the bar, not the drawer, not the site.

   Geometry note: the menu is absolutely positioned inside .tp-qd, which
   sits inside the floating header pill. Anything on that path with
   overflow:hidden would clip the fan, so the ancestors are forced to
   overflow:visible below rather than left to chance.
   ===================================================================== */

html body .tp-qd{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Keep the fan out of any clipping context on the way up. */
html body header#site-header .skiper38-actions,
html body header#site-header .skiper38-container,
html body header#site-header.skiper38-header{
  overflow:visible!important;
}

/* ---------------------------------------------------------------------
   THE DISC
   It keeps .skiper38-wa-btn, so it inherits the 36px disc the header
   already draws. Only the swap between the phone glyph and the close
   glyph is added here.
   --------------------------------------------------------------------- */
html body .tp-qd .tp-qd-toggle{
  background:none;
  border:0;
  cursor:pointer;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  /* touch-action:manipulation removes the double-tap-to-zoom wait. Without it
     Safari holds the tap back to see whether a second one is coming, and on a
     control that also has hover styling nearby that shows up as "the first tap
     does nothing" - which is exactly how a close button reads as broken. */
  touch-action:manipulation!important;
  pointer-events:auto!important;
  position:relative!important;
  z-index:2!important;
}
html body .tp-qd .tp-qd-item{
  touch-action:manipulation!important;
}
/* The glyphs must never swallow the tap meant for the button beneath them. */
html body .tp-qd .tp-qd-toggle svg,
html body .tp-qd .tp-qd-toggle svg *{
  pointer-events:none!important;
}
/*
 * Both glyphs are stacked on the button's exact centre point.
 *
 * They used to sit in the button's flex row as two in-flow items, which is
 * why neither was centred: the phone landed 9px left of centre and the close
 * 9px right, each pushed aside by the other. The header stylesheet also forces
 * position:relative onto svgs inside this button, so the absolute positioning
 * needs !important to win.
 *
 * The centring translate is baked into every transform below - a transform
 * declaration replaces the whole value, so the rotate/scale states have to
 * carry it too or the icon jumps off centre mid-animation.
 */
html body .tp-qd .tp-qd-toggle svg{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  transform:translate(-50%,-50%) rotate(0deg) scale(1);
  transition:opacity .18s ease,transform .22s cubic-bezier(.22,.61,.36,1);
}
html body .tp-qd .tp-qd-ico-close{
  opacity:0;
  transform:translate(-50%,-50%) rotate(-90deg) scale(.7);
  pointer-events:none;
}
html body .tp-qd[data-open="true"] .tp-qd-ico-phone{
  opacity:0;
  transform:translate(-50%,-50%) rotate(90deg) scale(.7);
}
html body .tp-qd[data-open="true"] .tp-qd-ico-close{
  opacity:1;
  transform:translate(-50%,-50%) rotate(0deg) scale(1);
}

/* ---------------------------------------------------------------------
   THE FAN
   Right-aligned under the disc, label to the left of each disc - the
   layout in the reference. Hidden state uses visibility rather than
   display:none so the items can animate, and pointer-events:none so a
   hidden fan can never swallow a tap on the page behind it.
   --------------------------------------------------------------------- */
/*
 * ALIGNMENT
 *
 * The column used to be pinned with right:0 and its rows right-aligned, so the
 * discs lined up by their RIGHT EDGES with the toggle's tap target. The toggle
 * is a 44px tap target and the fan discs measured 40.5px, so equal right edges
 * put their centres ~4px apart - visible as a fan that hangs slightly off the
 * button it came from.
 *
 * Now the column is exactly one disc wide and centred on the wrapper, so every
 * disc shares the toggle's centre line by construction. Widths can change
 * without the alignment drifting again. The labels are lifted out of the flow
 * and hung to the left, where they can be any length without pushing the discs
 * off centre.
 */
html body .tp-qd .tp-qd-menu{
  position:absolute!important;
  top:calc(100% + 12px)!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:44px!important;
  z-index:100010!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:12px!important;
  padding:0!important;
  margin:0!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
}
/*
 * !important is required here, not decorative.
 *
 * The markup carries the hidden state as an INLINE style so that a missing
 * stylesheet fails closed (see the note in topee-header-markup.php). An inline
 * declaration outranks any stylesheet rule regardless of selector weight, so
 * without !important the fan could never open once that fallback was added.
 */
html body .tp-qd[data-open="true"] .tp-qd-menu{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

html body .tp-qd .tp-qd-item{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:44px!important;
  height:44px!important;
  flex:0 0 auto!important;
  text-decoration:none!important;
  border:0!important;
  background:none!important;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-8px) scale(.92);
  transition:opacity .2s ease,transform .26s cubic-bezier(.22,1.2,.36,1);
}
html body .tp-qd[data-open="true"] .tp-qd-item{
  opacity:1;
  transform:translateY(0) scale(1);
}
/* Staggered, top-down, so the fan reads as one motion rather than three. */
html body .tp-qd[data-open="true"] .tp-qd-item:nth-child(1){transition-delay:.02s}
html body .tp-qd[data-open="true"] .tp-qd-item:nth-child(2){transition-delay:.06s}
html body .tp-qd[data-open="true"] .tp-qd-item:nth-child(3){transition-delay:.10s}

/* ---- the label chip ---- */
html body .tp-qd .tp-qd-label{
  position:absolute!important;
  right:calc(100% + 10px)!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:inline-block!important;
  background:rgba(20,22,26,.92)!important;
  color:#FFFFFF!important;
  font-size:11px!important;
  line-height:1!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  font-weight:500!important;
  padding:9px 12px!important;
  border-radius:9px!important;
  box-shadow:0 8px 20px -10px rgba(20,22,26,.55)!important;
}

/* ---- the round action itself ---- */
html body .tp-qd .tp-qd-disc{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
  background:#FFFFFF!important;
  color:#14161A!important;
  border:1px solid rgba(20,22,26,.10)!important;
  box-shadow:0 10px 24px -12px rgba(20,22,26,.55),0 1px 0 rgba(255,255,255,.8) inset!important;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s ease,background .18s ease,color .18s ease!important;
}
html body .tp-qd .tp-qd-item:hover .tp-qd-disc,
html body .tp-qd .tp-qd-item:focus-visible .tp-qd-disc{
  transform:translateY(-1px) scale(1.04)!important;
  box-shadow:0 14px 28px -12px rgba(20,22,26,.6)!important;
}
html body .tp-qd .tp-qd-item:active .tp-qd-disc{
  transform:translateY(0) scale(.97)!important;
}

/* WhatsApp keeps its own colour - people look for green, and a monochrome
   WhatsApp icon reads as a generic chat bubble. */
html body .tp-qd .tp-qd-wa .tp-qd-disc{
  background:#25D366!important;
  color:#FFFFFF!important;
  border-color:rgba(0,0,0,.06)!important;
}
/* The form is the primary action, so it carries the brand charcoal. */
html body .tp-qd .tp-qd-form .tp-qd-disc{
  background:#14161A!important;
  color:#FFFFFF!important;
  border-color:rgba(255,255,255,.10)!important;
}

/* ---------------------------------------------------------------------
   PHONE
   Slightly tighter, and the discs get the full 44px tap target rather
   than shrinking with the viewport.
   --------------------------------------------------------------------- */
@media (max-width:600px){
  html body .tp-qd .tp-qd-menu{gap:10px!important;top:calc(100% + 10px)!important}
  html body .tp-qd .tp-qd-label{font-size:10px!important;padding:8px 10px!important}
}

/* Motion preference: no slide, no stagger - the fan just appears. */
@media (prefers-reduced-motion:reduce){
  html body .tp-qd .tp-qd-item,
  html body .tp-qd .tp-qd-menu,
  html body .tp-qd .tp-qd-toggle svg{
    transition:none!important;
  }
  html body .tp-qd .tp-qd-item{transform:none!important}
  /* Not transform:none - these two still need their centring translate. */
  html body .tp-qd .tp-qd-menu{transform:translateX(-50%)!important}
  html body .tp-qd .tp-qd-toggle svg{transform:translate(-50%,-50%)!important}
}

/* =====================================================================
   NO-JS FALLBACK - and why it is scoped to :not(.tp-qd--js)
   ---------------------------------------------------------------------
   THIS RULE WAS THE "the X does not close it" BUG.

   Tapping the toggle gives it focus. While it holds focus the wrapper
   matches :focus-within, so this rule forced the fan open - no matter
   what the JS had just set data-open to. Tapping the X did close it in
   JS, and this rule immediately painted it open again. Tapping anywhere
   else blurred the button, :focus-within stopped matching, and the fan
   finally disappeared - which is precisely the reported behaviour: "you
   have to tap elsewhere to close it".

   It was written for the visitor whose JS never arrives, so it is now
   scoped to exactly that case. The script adds .tp-qd--js the moment it
   initialises; while that class is present the JS owns the open state
   alone and CSS never second-guesses it. Keyboard users with JS are
   unaffected - focusing the toggle and pressing Enter fires the same
   handler a tap does.
   ===================================================================== */
html body .tp-qd:not(.tp-qd--js):focus-within .tp-qd-menu{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
html body .tp-qd:not(.tp-qd--js):focus-within .tp-qd-item{
  opacity:1;
  transform:none;
}