/* LEVEL UP LIVE COLOURS */
:root{
  --lul-orange:#f16e24;
  --lul-blue:#4878ff;
  --lul-bg:#050913;
  --lul-pill:#0b0d12;
  --lul-text:#f6f9ff;
}

/* Base wrapper (position handled per breakpoint) */
.lul-nav{
  /* removed pointer-events:none so it's fully clickable */
}

/* The pill nav itself */
.lul-nav-inner{
  pointer-events:auto;
  display:flex;
  gap:10px;
  background:var(--lul-pill);
  border-radius:999px;
  border:1px solid rgba(72,120,255,.5);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
}

/* Links */
.lul-nav-inner a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 16px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:500;
  text-decoration:none;
  color:var(--lul-text);
  border:1px solid transparent;
  background:transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;
}

/* Hover — solid orange */
.lul-nav-inner a:hover{
  background:var(--lul-orange);
  border-color:var(--lul-orange);
  color:#050913;
}

/* Active state */
.lul-nav-inner a.is-active{
  background:var(--lul-orange);
  border-color:var(--lul-orange);
  color:#050913;
  font-weight:600;
}

/* Optional "Top" link styling (if used) */
.lul-nav-inner .lul-top-link::before{
  content:"↑";
  margin-right:6px;
  font-size:.8em;
}

/* ========== MOBILE: STICKY BOTTOM BAR + SWIPE HINT INSIDE ========== */
@media (max-width:768px){
  .lul-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999; /* make sure it's above theme elements & iOS oddities */
    padding:8px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)); /* sit above iPhone bottom bar */
    background:rgba(5,9,19,.96); /* dark strip behind the pill */
    display:flex;
    justify-content:center;
  }

  .lul-nav-inner{
    position:relative;
    width:100%;
    max-width:none;
    padding:6px 70px 6px 10px;  /* reserve 70px at right for the swipe block */
    gap:6px;
    border-radius:18px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    justify-content:flex-start;
    scrollbar-width:none;
  }

  .lul-nav-inner::-webkit-scrollbar{
    display:none;
  }

  .lul-nav-inner a{
    font-size:.8rem;
    padding:6px 12px;
  }

  /* "swipe →" INSIDE the bar, covering the full right-hand end */
  .lul-nav-inner::after{
    content:"swipe →";
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:70px;                      /* matches the padding-right above */
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.7rem;
    color:var(--lul-text);
    background:var(--lul-pill);      /* same background as nav bar */
    border-radius:0 18px 18px 0;     /* match bar shape at the end */
    pointer-events:none;
    opacity:1;
    animation:lul-hide-swipe 4s 3s forwards; 
    /* 3s delay, 4s fade – adjust if you want */
  }
}

/* Extra small mobile tweaks */
@media (max-width:480px){
  .lul-nav-inner a{
    font-size:.78rem;
    padding:6px 10px;
  }

  .lul-nav-inner{
    padding-right:64px;
  }

  .lul-nav-inner::after{
    width:64px;
    font-size:.68rem;
  }
}

/* ========== DESKTOP: FLOATING SIDE NAV (NO SWIPE HINT) ========== */
@media (min-width:769px){
  .lul-nav{
    position:fixed;
    top:50%;
    right:24px;          /* change to left:24px; right:auto; to move it left side */
    transform:translateY(-50%);
    z-index:900;
  }

  .lul-nav-inner{
    flex-direction:column;   /* vertical stack */
    padding:10px;
    border-radius:24px;
  }

  .lul-nav-inner a{
    padding:6px 14px;
    font-size:.8rem;
  }

  /* No swipe hint at all on desktop */
  .lul-nav-inner::after{
    display:none;
  }
}

/* Avoid anchors jumping under header (especially for desktop) */
[id]{
  scroll-margin-top:120px; /* tweak if you have a tall sticky header */
}

/* Keyframes to fade hint out and keep it gone */
@keyframes lul-hide-swipe{
  0%{ opacity:1; }
  100%{ opacity:0; }
}
/* Force nav + children to accept pointer events */
.lul-nav,
.lul-nav *{
  pointer-events:auto;
}
/* Hide / disable any generic back-to-top / scroll-top widgets on MOBILE only */
@media (max-width:768px){
  .elementor-widget-scroll-top,
  .elementor-scroll-to-top,
  .elementor-scroll-top,
  .back-to-top,
  .scroll-top,
  [class*="back-to-top"],
  [class*="scroll-top"]{
    display:none !important;
    pointer-events:none !important;
  }
}
/* LEVEL UP LIVE COLOURS */
:root{
  --lul-orange:#f16e24;
  --lul-blue:#4878ff;
  --lul-bg:#050913;
  --lul-pill:#0b0d12;
  --lul-text:#f6f9ff;
}

/* ================== BASE NAV ================== */

/* Base wrapper (position handled per breakpoint) */
.lul-nav{
  /* wrapper is controlled by media queries below */
}

/* The pill nav itself */
.lul-nav-inner{
  pointer-events:auto;
  display:flex;
  gap:10px;
  background:var(--lul-pill);
  border-radius:999px;
  border:1px solid rgba(72,120,255,.5);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
}

/* Links */
.lul-nav-inner a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 16px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:500;
  text-decoration:none;
  color:var(--lul-text);
  border:1px solid transparent;
  background:transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;
}

/* Hover — solid orange */
.lul-nav-inner a:hover{
  background:var(--lul-orange);
  border-color:var(--lul-orange);
  color:#050913;
}

/* Active state */
.lul-nav-inner a.is-active{
  background:var(--lul-orange);
  border-color:var(--lul-orange);
  color:#050913;
  font-weight:600;
}

/* Optional "Top" link styling (if used) */
.lul-nav-inner .lul-top-link::before{
  content:"↑";
  margin-right:6px;
  font-size:.8em;
}

/* ================== MOBILE ================== */
/* Sticky bottom bar + swipe hint */
@media (max-width:768px){
  .lul-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    padding:8px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
    background:rgba(5,9,19,.96);
    display:flex;
    justify-content:center;
  }

  .lul-nav-inner{
    position:relative;
    width:100%;
    max-width:none;
    padding:6px 70px 6px 10px;  /* reserve 70px at right for the swipe block */
    gap:6px;
    border-radius:18px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    justify-content:flex-start;
    scrollbar-width:none;
  }

  .lul-nav-inner::-webkit-scrollbar{
    display:none;
  }

  .lul-nav-inner a{
    font-size:.8rem;
    padding:6px 12px;
  }

  /* "swipe →" INSIDE the bar, covering the full right-hand end */
  .lul-nav-inner::after{
    content:"swipe →";
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.7rem;
    color:var(--lul-text);
    background:var(--lul-pill);
    border-radius:0 18px 18px 0;
    pointer-events:none;
    opacity:1;
    animation:lul-hide-swipe 4s 3s forwards; 
  }
}

/* Extra small mobile tweaks */
@media (max-width:480px){
  .lul-nav-inner a{
    font-size:.78rem;
    padding:6px 10px;
  }

  .lul-nav-inner{
    padding-right:64px;
  }

  .lul-nav-inner::after{
    width:64px;
    font-size:.68rem;
  }
}

/* ================== DESKTOP ================== */
/* Floating side nav (no swipe hint) */
@media (min-width:769px){
  .lul-nav{
    position:fixed;
    top:50%;
    right:24px;          /* change to left:24px; right:auto; to move it left side */
    transform:translateY(-50%);
    z-index:900;
  }

  .lul-nav-inner{
    flex-direction:column;
    padding:10px;
    border-radius:24px;
  }

  .lul-nav-inner a{
    padding:6px 14px;
    font-size:.8rem;
  }

  .lul-nav-inner::after{
    display:none;
  }
}

/* Avoid anchors jumping under header (especially for desktop) */
[id]{
  scroll-margin-top:120px;
}

/* Keyframes to fade hint out and keep it gone */
@keyframes lul-hide-swipe{
  0%{ opacity:1; }
  100%{ opacity:0; }
}

/* Force nav + children to accept pointer events */
.lul-nav,
.lul-nav *{
  pointer-events:auto;
}

/* Hide / disable any generic back-to-top / scroll-top widgets on MOBILE only */
@media (max-width:768px){
  .elementor-widget-scroll-top,
  .elementor-scroll-to-top,
  .elementor-scroll-top,
  .back-to-top,
  .scroll-top,
  [class*="back-to-top"],
  [class*="scroll-top"]{
    display:none !important;
    pointer-events:none !important;
  }
}

/* BOOK NOW: Full highlight treatment */
.lul-nav-inner a.lul-book-now{
  position:relative;
  background:var(--lul-blue);
  border-color:var(--lul-blue);
  color:#ffffff !important;   /* white text */
  font-weight:700;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.55);
  animation:lul-button-pulse 2s ease-in-out infinite;
  transform-origin:center;
  overflow:hidden; /* needed for shimmer */
  flex:0 0 auto;   /* 👈 prevent shrinking so full text + icon show */
}

/* Icon before the text (bigger + pulsing) */
.lul-nav-inner a.lul-book-now::before{
  content:"🎟️";
  margin-right:6px;
  font-size:1.25em;                
  display:inline-block;
  animation:lul-icon-pulse 1.5s ease-in-out infinite;
}

/* Text shimmer effect */
.lul-nav-inner a.lul-book-now::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.6) 50%,
    transparent 100%
  );
  animation:lul-text-shimmer 2.5s infinite;
  pointer-events:none;
}

/* Keep it blue when active */
.lul-nav-inner a.lul-book-now.is-active{
  background:var(--lul-blue);
  border-color:var(--lul-blue);
  color:#ffffff;
}

/* Slight brighter hover */
.lul-nav-inner a.lul-book-now:hover{
  background:#5a87ff;
  border-color:#5a87ff;
  color:#ffffff;
}

/* --- PULSE ANIMATIONS --- */

/* Button breathe pulse */
@keyframes lul-button-pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
  100%{ transform:scale(1); }
}

/* Icon pulse (slightly stronger) */
@keyframes lul-icon-pulse{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.35); opacity:.9; }
  100%{ transform:scale(1); opacity:1; }
}

/* Text shimmer animation */
@keyframes lul-text-shimmer{
  0%{ left:-100%; }
  100%{ left:150%; }
}