/* ============================================================
   GO IGNITE — BOOKING MODAL COMPONENT
   booking-modal.css  |  v1.1.0
   All selectors scoped to [data-gi-bm] — zero global bleed.

   CHANGELOG v1.1.0:
   - FIX: After closing the modal, the GHL iframe was still capturing
          clicks across the page because its !important overrides for
          visibility/pointer-events overrode the backdrop's hidden state.
   - Defensive overrides now scoped to `.gi-bm-open` ONLY.
   - Added hard kill rules for the closed state (pointer-events, visibility,
     z-index) so nothing the iframe does can block page clicks.
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
[data-gi-bm] {
  --bm-pink      : hsl(322 100% 54%);
  --bm-green     : hsl(161 100% 45%);
  --bm-purple    : #9D00FF;
  --bm-bg        : #0a0e18;
  --bm-surface   : #0d1120;
  --bm-border    : rgba(255,255,255,0.07);
  --bm-border-mid: rgba(255,255,255,0.10);
  --bm-muted     : #99a2b2;
  --bm-white     : #ffffff;
  --bm-radius    : 22px;
  --bm-radius-sm : 12px;
  --bm-font      : 'Inter', ui-sans-serif, system-ui, sans-serif;
  --bm-z         : 2147483640;
  --bm-open-dur  : 0.38s;
  --bm-close-dur : 0.28s;
}

/* ── Backdrop ────────────────────────────────────────────── */
[data-gi-bm].gi-bm-backdrop {
  /* Fully hidden — NOT display:none so transition works */
  position         : fixed;
  inset            : 0;
  z-index          : var(--bm-z);
  background       : rgba(5, 8, 15, 0.88);
  backdrop-filter  : blur(10px);
  -webkit-backdrop-filter : blur(10px);
  display          : flex;
  align-items      : flex-start;
  justify-content  : center;
  padding          : 28px 3% 24px;
  overflow-y       : auto;
  overscroll-behavior : contain;
  /* Hidden state */
  opacity          : 0;
  pointer-events   : none;
  visibility       : hidden;
  transition       : opacity var(--bm-close-dur) ease,
                     visibility var(--bm-close-dur) ease;
  isolation        : isolate;
  box-sizing       : border-box;
}
/* Open state */
[data-gi-bm].gi-bm-backdrop.gi-bm-open {
  opacity        : 1;
  pointer-events : all;
  visibility     : visible;
  transition     : opacity var(--bm-open-dur) ease,
                   visibility 0s;
}

/* ── HARD KILL when modal is CLOSED ──────────────────────────
   Belt-and-braces guarantee that nothing inside the modal
   (especially the GHL iframe) can capture clicks once closed.
   This is the critical fix for "buttons not clickable after close".
─────────────────────────────────────────────────────────────── */
[data-gi-bm].gi-bm-backdrop:not(.gi-bm-open) {
  pointer-events : none !important;
  visibility     : hidden !important;
  z-index        : -1 !important;
}
[data-gi-bm].gi-bm-backdrop:not(.gi-bm-open) * {
  pointer-events : none !important;
}
/* Re-assert correct stacking the moment the modal opens */
[data-gi-bm].gi-bm-backdrop.gi-bm-open {
  z-index : var(--bm-z) !important;
}

/* ── Scroll padding for small screens ───────────────────── */
@media (max-height: 700px) {
  [data-gi-bm].gi-bm-backdrop {
    align-items : flex-start;
    padding-top : 16px;
  }
}
@media (max-width: 640px) {
  [data-gi-bm].gi-bm-backdrop {
    padding : 0;
    align-items : flex-end;
  }
}

/* ── Wrapper (title + card) ──────────────────────────────── */
[data-gi-bm] .gi-bm-wrap {
  width          : 100%;
  max-width      : 1140px;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  transform      : scale(0.94) translateY(22px);
  transition     : transform var(--bm-close-dur) cubic-bezier(.4,0,.2,1);
  will-change    : transform;
}
[data-gi-bm].gi-bm-open .gi-bm-wrap {
  transform  : scale(1) translateY(0);
  transition : transform var(--bm-open-dur) cubic-bezier(.34,1.38,.64,1);
}
@media (max-width: 640px) {
  [data-gi-bm] .gi-bm-wrap {
    max-width  : 100%;
    transform  : translateY(40px);
    transition : transform var(--bm-close-dur) ease;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
  }
  [data-gi-bm].gi-bm-open .gi-bm-wrap {
    transform  : translateY(0);
    transition : transform var(--bm-open-dur) cubic-bezier(.34,1.3,.64,1);
  }
}

/* ── Title block (above card) ────────────────────────────── */
[data-gi-bm] .gi-bm-title-block {
  text-align  : center;
  margin-bottom : 24px;
  width       : 100%;
  font-family : var(--bm-font);
}
[data-gi-bm] .gi-bm-title-block h2 {
  font-size    : clamp(26px, 4.5vw, 40px);
  font-weight  : 900;
  letter-spacing : -0.02em;
  color        : var(--bm-white);
  margin       : 0 0 10px;
  line-height  : 1.1;
}
[data-gi-bm] .gi-bm-title-block h2 .gi-bm-grad {
  background : linear-gradient(135deg, var(--bm-purple) 0%, #C77DFF 50%, var(--bm-pink) 100%);
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
  background-clip : text;
}
[data-gi-bm] .gi-bm-title-block p {
  font-size  : 15px;
  color      : var(--bm-muted);
  margin     : 0;
  font-weight: 500;
}
@media (max-width: 640px) {
  [data-gi-bm] .gi-bm-title-block { display: none; }
}

/* ── Card shell with spinning gradient border ────────────── */
[data-gi-bm] .gi-bm-card {
  position      : relative;
  width         : 100%;
  border-radius : var(--bm-radius);
  background    : var(--bm-bg);
  overflow      : hidden;
}
[data-gi-bm] .gi-bm-card::before {
  content          : '';
  position         : absolute;
  inset            : -160%;
  background       : conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 70deg,
    var(--bm-pink)   115deg,
    var(--bm-purple) 175deg,
    #C77DFF          215deg,
    transparent      255deg,
    transparent      360deg
  );
  animation        : gi-bm-spin 6s linear infinite;
  animation-delay  : 0.5s;
  z-index          : 0;
  pointer-events   : none;
}
@keyframes gi-bm-spin { to { transform: rotate(360deg); } }

/* Inner mask — 2px gap reveals the border */
[data-gi-bm] .gi-bm-inner {
  position      : relative;
  margin        : 2px;
  border-radius : calc(var(--bm-radius) - 2px);
  background    : var(--bm-bg);
  z-index       : 1;
  overflow      : hidden;
}

/* ── Close button ────────────────────────────────────────── */
[data-gi-bm] .gi-bm-close {
  position        : absolute;
  top             : 12px;
  right           : 12px;
  width           : 34px;
  height          : 34px;
  border-radius   : 10px;
  background      : rgba(255,255,255,0.05);
  border          : 1px solid rgba(255,255,255,0.09);
  color           : var(--bm-muted);
  display         : flex;
  align-items     : center;
  justify-content : center;
  cursor          : pointer;
  z-index         : 20;
  transition      : background 0.2s ease, color 0.2s ease,
                    transform 0.3s ease, border-color 0.2s ease;
  flex-shrink     : 0;
}
[data-gi-bm] .gi-bm-close:hover {
  background   : rgba(255, 20, 169, 0.18);
  border-color : rgba(255, 20, 169, 0.45);
  color        : var(--bm-white);
  transform    : rotate(90deg);
}
[data-gi-bm] .gi-bm-close svg {
  width  : 16px;
  height : 16px;
  flex-shrink : 0;
}

/* ── Header row ──────────────────────────────────────────── */
[data-gi-bm] .gi-bm-header {
  padding       : 20px 56px 18px 24px;
  display       : flex;
  align-items   : center;
  gap           : 16px;
  border-bottom : 1px solid var(--bm-border);
  position      : relative;
  box-sizing    : border-box;
  flex-wrap     : wrap;
}
@media (min-width: 640px) {
  [data-gi-bm] .gi-bm-header { padding: 22px 60px 20px 28px; flex-wrap: nowrap; }
}

/* Logo circle */
[data-gi-bm] .gi-bm-logo {
  width        : 52px;
  height       : 52px;
  border-radius: 50%;
  background   : #000;
  border       : 1px solid rgba(255,255,255,0.1);
  display      : flex;
  align-items  : center;
  justify-content: center;
  flex-shrink  : 0;
  overflow     : hidden;
}
[data-gi-bm] .gi-bm-logo img {
  width      : 36px;
  height     : auto;
  object-fit : contain;
  display    : block;
}
[data-gi-bm] .gi-bm-logo-fallback {
  font-family  : var(--bm-font);
  font-weight  : 900;
  font-size    : 10px;
  text-align   : center;
  line-height  : 1.15;
  background   : linear-gradient(135deg, var(--bm-green), var(--bm-pink));
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
  background-clip : text;
  letter-spacing : -0.3px;
}

/* Header text */
[data-gi-bm] .gi-bm-header-info {
  flex     : 1;
  min-width: 0;
}
[data-gi-bm] .gi-bm-header-info h3 {
  font-family    : var(--bm-font);
  font-size      : 18px;
  font-weight    : 800;
  color          : var(--bm-white);
  margin         : 0 0 7px;
  line-height    : 1.2;
  letter-spacing : -0.01em;
}
@media (max-width: 480px) {
  [data-gi-bm] .gi-bm-header-info h3 { font-size: 16px; }
}

[data-gi-bm] .gi-bm-meta {
  display      : flex;
  flex-wrap    : wrap;
  gap          : 4px 12px;
  font-family  : var(--bm-font);
  font-size    : 12px;
  font-weight  : 500;
  color        : var(--bm-muted);
  align-items  : center;
}
[data-gi-bm] .gi-bm-meta-dot {
  color   : rgba(255,255,255,0.2);
  font-size: 10px;
}

/* Available badge */
[data-gi-bm] .gi-bm-available {
  background     : rgba(0, 224, 153, 0.12);
  border         : 1px solid rgba(0, 224, 153, 0.38);
  color          : var(--bm-green);
  font-family    : var(--bm-font);
  font-size      : 10.5px;
  font-weight    : 700;
  padding        : 6px 13px;
  border-radius  : 999px;
  display        : flex;
  align-items    : center;
  gap            : 7px;
  letter-spacing : 0.06em;
  text-transform : uppercase;
  flex-shrink    : 0;
  white-space    : nowrap;
  margin-left    : auto;
}
[data-gi-bm] .gi-bm-available::before {
  content      : '';
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
  background   : var(--bm-green);
  box-shadow   : 0 0 8px var(--bm-green);
  animation    : gi-bm-pulse 1.8s ease-in-out infinite;
  flex-shrink  : 0;
}
@keyframes gi-bm-pulse {
  0%,100% { opacity:1; transform:scale(1);   }
  50%     { opacity:.5; transform:scale(.7); }
}
@media (max-width: 480px) {
  [data-gi-bm] .gi-bm-available { font-size: 9.5px; padding: 5px 10px; }
}

/* ── Rating row ──────────────────────────────────────────── */
[data-gi-bm] .gi-bm-rating {
  display       : flex;
  flex-wrap     : wrap;
  gap           : 8px;
  align-items   : center;
  padding       : 13px 28px;
  border-bottom : 1px solid var(--bm-border);
  font-family   : var(--bm-font);
  font-size     : 12.5px;
  background    : rgba(157, 0, 255, 0.04);
  box-sizing    : border-box;
}
@media (max-width: 640px) {
  [data-gi-bm] .gi-bm-rating { padding: 11px 18px; }
}

[data-gi-bm] .gi-bm-rating-left {
  display     : flex;
  align-items : center;
  gap         : 7px;
  flex-wrap   : wrap;
}
[data-gi-bm] .gi-bm-rating-left svg {
  width  : 14px;
  height : 14px;
  fill   : #FFB800;
  flex-shrink: 0;
}
[data-gi-bm] .gi-bm-rating-score {
  color       : var(--bm-pink);
  font-weight : 700;
}
[data-gi-bm] .gi-bm-rating-text {
  color : var(--bm-muted);
}
[data-gi-bm] .gi-bm-rating-stars {
  display     : inline-flex;
  gap         : 2px;
  margin-left : auto;
}
[data-gi-bm] .gi-bm-rating-stars svg {
  width  : 13px;
  height : 13px;
  fill   : #FFB800;
}
[data-gi-bm] .gi-bm-rating-stars .gi-bm-star-half {
  fill : url(#gi-bm-hs);
}

/* ── Pills row ───────────────────────────────────────────── */
[data-gi-bm] .gi-bm-pills {
  display       : flex;
  flex-wrap     : wrap;
  gap           : 8px;
  padding       : 15px 28px;
  border-bottom : 1px solid var(--bm-border);
  box-sizing    : border-box;
}
@media (max-width: 640px) {
  [data-gi-bm] .gi-bm-pills { padding: 12px 18px; }
}

[data-gi-bm] .gi-bm-pill {
  font-family   : var(--bm-font);
  font-size     : 11.5px;
  font-weight   : 600;
  padding       : 6px 13px;
  border-radius : 999px;
  background    : rgba(255,255,255,0.04);
  border        : 1px solid rgba(255,255,255,0.09);
  color         : #cbd5e1;
  display       : flex;
  align-items   : center;
  gap           : 7px;
  white-space   : nowrap;
}
[data-gi-bm] .gi-bm-pill::before {
  content      : '';
  width        : 5px;
  height       : 5px;
  border-radius: 50%;
  background   : var(--gi-dot, var(--bm-green));
  box-shadow   : 0 0 6px var(--gi-dot, var(--bm-green));
  flex-shrink  : 0;
}
[data-gi-bm] .gi-bm-pill-pink  { --gi-dot: var(--bm-pink);   }
[data-gi-bm] .gi-bm-pill-green { --gi-dot: var(--bm-green);  }

/* ── Calendar iframe body ────────────────────────────────── */
[data-gi-bm] .gi-bm-body {
  position   : relative;
  background : #ffffff;
  /* NO overflow:hidden — clips GHL calendar widgets */
  min-height : 720px;
}
@media (max-width: 900px) {
  [data-gi-bm] .gi-bm-body { min-height: 900px; }
}
@media (max-width: 640px) {
  [data-gi-bm] .gi-bm-body { min-height: 1080px; }
}

[data-gi-bm] .gi-bm-iframe {
  width      : 100%;
  border     : none;
  display    : block;
  min-height : 720px;
}
@media (max-width: 900px) {
  [data-gi-bm] .gi-bm-iframe { min-height: 900px; }
}
@media (max-width: 640px) {
  [data-gi-bm] .gi-bm-iframe { min-height: 1080px; }
}

/* ── DEFENSIVE OVERRIDES — GHL iframe resizer ───────────────
   GHL's form_embed.js sometimes sets inline styles
   (opacity:0, visibility:hidden, position:absolute, left:-9999px)
   on the iframe while it negotiates a handshake. If that handshake
   fails or stalls, the iframe stays hidden forever.

   CRITICAL: These overrides are ONLY active while the modal is OPEN.
   When closed, the iframe MUST inherit the hidden/non-interactive
   state from the backdrop, otherwise it keeps capturing clicks
   across the whole page even though it's visually invisible.
─────────────────────────────────────────────────────────────── */
[data-gi-bm].gi-bm-open .gi-bm-iframe[data-iframe-resizer-initialized],
[data-gi-bm].gi-bm-open iframe.gi-bm-iframe {
  opacity        : 1        !important;
  visibility     : visible  !important;
  pointer-events : auto     !important;
  position       : relative !important;
  left           : 0        !important;
  top            : 0        !important;
}

/* Loading overlay */
[data-gi-bm] .gi-bm-loading {
  position        : absolute;
  inset           : 0;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 18px;
  background      : var(--bm-bg);
  z-index         : 2;
  transition      : opacity 0.4s ease;
}
[data-gi-bm] .gi-bm-loading.gi-bm-hidden {
  opacity        : 0;
  pointer-events : none;
}
[data-gi-bm] .gi-bm-spinner {
  width        : 46px;
  height       : 46px;
  border       : 3px solid rgba(0,224,153,0.15);
  border-top-color : var(--bm-green);
  border-radius: 50%;
  animation    : gi-bm-rotate 1s linear infinite;
}
@keyframes gi-bm-rotate { to { transform: rotate(360deg); } }
[data-gi-bm] .gi-bm-loading-text {
  font-family : var(--bm-font);
  font-size   : 13px;
  font-weight : 500;
  color       : var(--bm-muted);
}

/* ── Mobile bottom-sheet handle ──────────────────────────── */
@media (max-width: 640px) {
  [data-gi-bm] .gi-bm-handle {
    display         : flex;
    justify-content : center;
    padding         : 10px 0 2px;
    background      : var(--bm-bg);
  }
  [data-gi-bm] .gi-bm-handle span {
    width        : 36px;
    height       : 4px;
    border-radius: 4px;
    background   : rgba(255,255,255,0.18);
  }
}
@media (min-width: 641px) {
  [data-gi-bm] .gi-bm-handle { display: none; }
}

/* ── body scroll lock ────────────────────────────────────── */
body.gi-bm-locked {
  overflow : hidden !important;
}

/* ── FLOATING BOOK BUTTON — HERO SCROLL VISIBILITY ───────────
   .gi-float-hidden  → slides down off-screen (hero still visible)
   .gi-float-visible → slides up into view (hero has left viewport)
────────────────────────────────────────────────────────────── */
#book-cta-btn {
  transition  : transform 0.45s cubic-bezier(0.34, 1.28, 0.64, 1),
                opacity   0.35s ease !important;
  will-change : transform, opacity;
}

#book-cta-btn.gi-float-hidden {
  transform      : translateY(140%) !important;
  opacity        : 0               !important;
  pointer-events : none            !important;
}

#book-cta-btn.gi-float-visible {
  transform      : translateY(0) !important;
  opacity        : 1             !important;
  pointer-events : auto          !important;
}

/* ── FLOAT BUTTON BASE STYLES ────────────────────────────────────────
   Replaces the old inline <style> block from index.html.
   Applied via .gi-float-btn class (injected by booking-modal.js).
   Works on every page — zero HTML needed beyond loading the two files.
────────────────────────────────────────────────────────────────────── */
#book-cta-btn,
.gi-float-btn {
  position      : fixed;
  bottom        : 24px;
  left          : 24px;
  z-index       : 9998;
  background    : rgb(1, 231, 145);
  color         : black;
  border        : none;
  padding       : 14px 24px;
  border-radius : 999px;
  font-family   : 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size     : 14px;
  font-weight   : 700;
  letter-spacing: 0.02em;
  cursor        : pointer;
  box-shadow    : 0 4px 20px rgba(16, 185, 129, 0.4);
  display       : inline-flex;
  align-items   : center;
  gap           : 8px;
  white-space   : nowrap;
}

#book-cta-btn:hover,
.gi-float-btn:hover {
  transform  : translateY(-2px);
  box-shadow : 0 6px 28px rgba(16, 185, 129, 0.55);
}

/* Mobile — match original index.html breakpoint */
@media (max-width: 768px) {
  #book-cta-btn,
  .gi-float-btn {
    bottom   : 80px;
    padding  : 12px 18px;
    font-size: 13px;
  }
}