/* //==============================// 
  LOADER STYLES
*/

/* Fullscreen translucent overlay */
.app-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;                /* above everything */
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.6);   /* translucent, dark theme friendly */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);   /* subtle polish */
  transition: opacity .35s ease;
  opacity: 1;
  visibility: visible;
}

/* Center content block (kept minimal to match site) + vibe color cycle */
.app-loader__center {
  text-align: center;
  padding: 1rem 1.25rem;
  text-shadow: 0 0 10px rgba(255,255,255,.06);
  color: var(--v1);
  animation: loaderVibe 10s linear infinite;
}

/* Bigger spinner + text */
.app-loader .spinner-border{
  width: 4.25rem;   /* was 3.5rem */
  height: 4.25rem;
  border-width: .45rem;
  color: inherit !important; /* see #2 so it follows the animated color */
}

.app-loader__center .fw-semibold{   /* “Loading…” */
  font-size: 1.35rem;               /* was 1.15rem */
  letter-spacing: .3px;
}

#appLoaderHint{                      /* hint line */
  font-size: 1.05rem;               /* was .95rem */
}

/* Fade-out */
.app-loader--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;               /* prevent blocking clicks underneath */
}

/* Avoid scroll/jumps while loading */
body.is-loading { overflow: hidden; }

/* Animate color across your existing palette (spinner uses currentColor) */
@keyframes loaderVibe {
  0%   { color: var(--v1); }   /* neon green */
  20%  { color: var(--v2); }   /* electric cyan */
  40%  { color: var(--v3); }   /* vivid pink */
  60%  { color: var(--v4); }   /* amber */
  80%  { color: var(--v5); }   /* electric purple */
  100% { color: var(--v1); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .app-loader__center { animation: none; color: var(--v2); }
}



/* ==============================//
   LOADER STYLES
   ==============================*/











/* //==============================//
// SITEWIDE UTILITIES & SMALL COMPONENTS
//==============================// */

/* ==[ BUTTONS ]=================================================== */
.btn-pill { border-radius: 999px; }

.btn-light {
  background: #f7f9ff;
  color: #0d1020;
  border: 1px solid rgba(0,0,0,.08);
  will-change: transform;
}
.btn-light:hover { filter: brightness(0.95); transform: translateY(-1px); }

.btn-outline-light {
  border-color: rgba(255,255,255,0.25);
  color: var(--text-200);
  will-change: transform;
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-100);
  transform: translateY(-1px);
}

/* Solid light-on-dark button */
.btn-solid-light {
  background: rgba(255,255,255,.14);
  color: var(--text-100);
  border: 1px solid rgba(255,255,255,.22);
}
.btn-solid-light:hover {
  background: rgba(255,255,255,.22);
  color: var(--text-100);
  transform: translateY(-1px);
}
/* //==============================//
// HERO CTA BUTTONS (used on courses & home hero)
//==============================// */

.btn.btn-hero-primary {
  background: #f8f9ff;
  color: #0b1020;
  border-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn.btn-hero-primary:hover {
  background: #ffffff;
  color: #0a0e16;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset, 0 6px 18px rgba(0, 0, 0, .35);
}

.btn.btn-hero-secondary {
  color: #e9e7ff;
  border: 1px solid rgba(233, 231, 255, .5);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn.btn-hero-secondary:hover {
  background: rgba(233, 231, 255, .12);
  color: #ffffff;
  border-color: rgba(233, 231, 255, .9);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(233, 231, 255, .6) inset, 0 6px 18px rgba(0, 0, 0, .35);
}


/* ==[ /BUTTONS ]================================================== */

/* ==[ VIBRANT UTILITIES ]======================================== */
.bg-v1 { background: var(--v1) !important; }
.bg-v2 { background: var(--v2) !important; }
.bg-v3 { background: var(--v3) !important; }
.bg-v4 { background: var(--v4) !important; }
.bg-v5 { background: var(--v5) !important; }

.text-on-v1 { color: var(--on-v1) !important; }
.text-on-v2 { color: var(--on-v2) !important; }
.text-on-v3 { color: var(--on-v3) !important; }
.text-on-v4 { color: var(--on-v4) !important; }
.text-on-v5 { color: var(--on-v5) !important; }

/* Force light ink inside dark/glass sections when needed */
.text-on-dark { color: var(--text-200) !important; }
.text-on-dark a:not(.btn) { color: var(--text-300); }
.text-on-dark a:not(.btn):hover { color: var(--text-100); }

/* ==[ /VIBRANT UTILITIES ]======================================= */

/* ==[ SPACING UTIL ]============================================= */
.py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
@media (min-width: 992px) {
  .py-lg-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
}
/* ==[ /SPACING UTIL ]============================================ */

/* ==[ LINKS (NON-DEFAULT VARIANT) ]============================== */
.link-faint { color: var(--text-300); text-decoration: none; }
.link-faint:hover { color: var(--text-100); }
/* ==[ /LINKS VARIANT ]=========================================== */

/* //==============================//
// PAGE / SECTION SPECIFIC BLOCKS
//==============================// */

/* ==[ HERO SECTION ]============================================= */
/* Transparent section bg so space/canvas shows through */
#hero { background: transparent !important; }

/* Column that holds the hex/canvas */
#hero .hex-col {
  display: flex;
  justify-content: center;
}

/* The mount for your p5/WebGL canvas (works with class or id) */
.hex-mount, #hex-mount { 
  margin-inline: auto; 
  display: grid; 
  place-items: center; 
}


/* Ensure the canvas fills the mount */
#hex-mount { position: relative; }
#hex-mount canvas {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

/* ==[ /HERO SECTION ]============================================ */

/* ==[ HEXAGON PLACEHOLDER (if used) ]============================ */
.hexagon-placeholder {
  width: min(360px, 100%);
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  position: relative;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  display: grid;
  place-items: center;
}
.placeholder-label {
  font-size: .9rem;
  letter-spacing: 0.15em;
  color: var(--text-300);
}
/* Hexagon mount sizing/centering */
#hex-mount{
  width: 100%;
  min-height: 450px;          /* adjust to taste */
  padding-block: 24px;        /* vertical breathing room */
  position: relative;
}

/* ==[ /HEXAGON PLACEHOLDER ]===================================== */

/* //==============================//
// END SITEWIDE UTILITIES & SMALL COMPONENTS
//==============================// */


/* //==============================//
// HOME PAGE (home.php)
//==============================// */

/* ==[ Hover Utilities used on Home ]============================== */
.hvr-float { will-change: transform; transition: transform .18s ease; }
.hvr-float:hover { transform: translateY(-2px); }

.hvr-pulse-grow { transition: transform .18s ease; }
.hvr-pulse-grow:hover { transform: scale(1.03); }
/* ==[ /Hover Utilities ]========================================= */

/* ==[ Accent Headline Gradient ]================================= */
.text-gradient{
  background: linear-gradient(90deg, #9ad3ff, #c29aff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ==[ /Accent Headline Gradient ]================================ */

/* ==[ Home Cards: Opaque-on-Hover Variant ]====================== */
/* Base: define dynamic inks & aura; keep glass look at rest */
.card-hover-opaque{
  --vibrant: var(--v4);         /* fallback if no data-variant provided */
  --ink: #0a0e16;             /* text color when hovered (on bright bg) */
  --ring: color-mix(in oklab, var(--vibrant) 70%, white 30%);
  --aura: color-mix(in oklab, var(--vibrant) 55%, black 45%);
  border-radius: 16px;
  transition: background .22s ease, transform .22s ease,
              color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* Per-variant palettes (match your cards’ data-variant) */
.card-hover-opaque[data-variant="v1"]{ --vibrant:var(--v2); --ink:#03121a; font-weight:600; }  /* electric cyan */
.card-hover-opaque[data-variant="v2"]{ --vibrant:var(--v4); --ink:#051108; font-weight:600; }  /* neon green */
.card-hover-opaque[data-variant="v3"]{ --vibrant:var(--v2); --ink:#17040c; font-weight:600; }  /* vivid pink */
.card-hover-opaque[data-variant="v4"]{ --vibrant:var(--v3); --ink:#120a00; font-weight:600; }  /* amber */
.card-hover-opaque[data-variant="v5"]{ --vibrant:var(--v1); --ink:#0d0720; font-weight:600; }  /* electric purple */

/* Hover: flip to vibrant solid bg + high-contrast ink */
.card-hover-opaque:hover{
  background: var(--vibrant) !important;      /* becomes opaque, on purpose */
  color: var(--ink) !important;
  transform: translateY(-3px);
  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    0 18px 50px rgba(0,0,0,.55),
    0 0 0 1px var(--ring) inset,
    0 0 40px 6px color-mix(in oklab, var(--vibrant) 40%, transparent 60%);
}

/* Make inner elements readable on the bright hover */
.card-hover-opaque:hover h1,
.card-hover-opaque:hover h2,
.card-hover-opaque:hover h3,
.card-hover-opaque:hover .h1,
.card-hover-opaque:hover .h2,
.card-hover-opaque:hover .h3,
.card-hover-opaque:hover .display-1,
.card-hover-opaque:hover .display-2,
.card-hover-opaque:hover .display-3,
.card-hover-opaque:hover .display-4,
.card-hover-opaque:hover .display-5,
.card-hover-opaque:hover .display-6,
.card-hover-opaque:hover p,
.card-hover-opaque:hover li,
.card-hover-opaque:hover .text-muted-70,
.card-hover-opaque:hover .card-icon{
  color: var(--ink) !important;
}

/* Badges & buttons inside hovered cards */
.card-hover-opaque:hover .badge{
  background: rgba(255,255,255,.18);
  color: var(--ink);
  border-color: rgba(0,0,0,.12);
}
.card-hover-opaque:hover .btn-outline-light{
  background: rgba(255,255,255,.12);
  color: var(--ink);
  border-color: rgba(0,0,0,.18);
}
.card-hover-opaque:hover .btn-light{
  background: #ffffff;
  color: var(--ink);
  border-color: rgba(0,0,0,.12);
}

/* Small helpers used by home cards */
.kicker{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--text-300);
}
.card-icon{ color: var(--text-300); }
/* ==[ /Home Cards ]============================================== */

/* //==============================//
// END HOME PAGE
//==============================// */


/* //==============================//
// COURSES: TRIPLE STREAM — JOURNEY STEPPER
// (scoped variables + component styles)
//==============================// */

/* ==[ Scoped tokens for this component ]========================= */
.journey-grid{
  /* local-only variables (were in :root before) */
  --done-line: rgba(255,255,255,.16);
  --done-node: #2a2b38;
}

/* Each step gets its own color vars (set by JS up to active index) */
.step{
  --step-color: var(--done-node);   /* node & card color of this step */
  --on-step: #ffffff;               /* readable text on --step-color */
}

/* ==[ Layout ]=================================================== */
.journey-grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr 80px 1fr;
}
.steps{ grid-column:1/-1; list-style:none; margin:0; padding:0; }
.step{
  display:grid; grid-template-columns:1fr 80px 1fr;
  align-items:center; min-height:120px;
  position:static; /* segments anchor to journey-grid, not li */
}
.step + .step{ margin-top:18px; }
.left{ grid-column:1/2; justify-self:end; max-width:640px; }
.right{ grid-column:3/4; justify-self:start; max-width:640px; }

/* Base spine (subtle, behind) */
.spine{
  position:absolute; left:50%; transform:translateX(-50%);
  top:0; bottom:0; width:2px; background: rgba(255,255,255,.12); z-index:0;
}

/* ==[ Nodes ]==================================================== */
.node{
  grid-column:2/3; position:relative; overflow:hidden;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--border-lite);
  background:#191a24;
  display:grid; place-items:center; margin:0 auto; cursor:pointer; z-index:3;
}
.num{ position:relative; z-index:2; font-weight:800; font-size:14px; color:#fff; }
.dot{ position:absolute; inset:0; border-radius:50%; background: var(--step-color); transform: scale(0); opacity:.98; z-index:1; }

/* White pulse on ACTIVE node */
@keyframes pulseWhite{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.75), 0 0 0 0 rgba(255,255,255,.35); }
  35%{ box-shadow:0 0 0 8px rgba(255,255,255,.35), 0 0 0 16px rgba(255,255,255,.15); }
  60%{ box-shadow:0 0 0 14px rgba(255,255,255,.18), 0 0 0 28px rgba(255,255,255,.08); }
  100%{ box-shadow:0 0 0 22px rgba(255,255,255,0), 0 0 0 44px rgba(255,255,255,0); }
}
.step.is-active .node{ animation: pulseWhite 1.1s cubic-bezier(.22,.61,.36,1) infinite; }
.step.is-done .node .num,
.step.is-active .node .num{ color: var(--on-step); }

/* ==[ Per-step segment (sized in JS) ]=========================== */
.segment{
  position:absolute; left:50%; transform:translateX(-50%);
  top:0; height:0; width:4px; z-index:1; pointer-events:none;
}
.segment .bar{
  position:absolute; inset:0; border-radius:2px;
  background: var(--done-line);
  transform-origin: top; transform: scaleY(0);
  filter: none; /* glow only for active segment */
}
.step:last-child .segment{ display:none; }

/* ==[ Cards ]==================================================== */
.card.glass.step-card{
  background: var(--glass);
  border:1px solid var(--border-lite);
  border-radius:16px; color: var(--text-200);
  box-shadow:0 16px 38px rgba(0,0,0,.36);
  padding:14px 18px; opacity:.72; transform: translateY(4px) scale(.99);
  position:relative; overflow:hidden; z-index:2;
}
.card.glass.step-card::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--step-color) 18%, transparent) 0%, transparent 60%);
  opacity:0; transition:opacity .25s ease;
}

/* Solid, vibrant for done/active */
.step.is-done  .step-card,
.step.is-active .step-card{
  background: var(--step-color) !important;
  color: var(--on-step) !important;
  border-color: var(--step-color) !important;
  box-shadow: 0 18px 46px color-mix(in srgb, var(--step-color) 32%, rgba(0,0,0,.38));
  opacity: 1; transform: translateY(0) scale(1.01);
}
.step.is-done  .step-card::before,
.step.is-active .step-card::before{ opacity: 0 !important; }

/* ==[ Responsive ]================================================ */
@media (max-width: 992px){
  .journey-grid, .step{ grid-template-columns:1fr 64px 1fr; }
  .node{ width:42px; height:42px; }
}
@media (max-width: 720px){
  /* let the content actually shrink on mobile */
  .journey-grid, .step{
    grid-template-columns: 18px 56px minmax(0, 1fr);
  }

  /* ensure cards actually fill the track and don’t impose their own width */
  .left, .right{
    grid-column: 3 / 4;
    justify-self: stretch;
    max-width: none;
    margin: 0;
  }
  .card.glass.step-card{
    width: 100%;
  }

  /* in case any inner element tries to force width */
  .card.glass.step-card *{
    min-width: 0;            /* fixes flex children */
    overflow-wrap: anywhere; /* belt-and-suspenders */
  }
}


/* ==[ COURSES TRIPLE: fixes for text, links, buttons inside cards ]== */

/* Inactive card (glass) typography defaults */
.card.glass.step-card :is(h1,h2,h3,h4,h5,h6){ color: var(--text-100); }
.card.glass.step-card :is(p,li,small,span){ color: var(--text-200); }
.card.glass.step-card a:not(.btn){ color: var(--text-300); }
.card.glass.step-card a:not(.btn):hover{ color: var(--text-100); }

/* Active/Done card: enforce high-contrast ink for all content */
.step:is(.is-active,.is-done) .step-card :is(h1,h2,h3,h4,h5,h6,
  .display-1,.display-2,.display-3,.display-4,.display-5,.display-6,
  p,li,small,span){ color: var(--on-step) !important; }

.step:is(.is-active,.is-done) .step-card a:not(.btn){
  color: var(--on-step) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Buttons inside cards (inactive state) */
.card.glass.step-card .btn.btn-outline-light{
  border-color: rgba(255,255,255,0.28);
  color: var(--text-200);
}
.card.glass.step-card .btn.btn-outline-light:hover{
  background: rgba(255,255,255,0.08);
  color: var(--text-100);
}
.card.glass.step-card .btn.btn-light{
  background: #f7f9ff; color:#0d1020; border:1px solid rgba(0,0,0,.08);
}

/* Buttons inside Active/Done (solid vibrant background) */
.step:is(.is-active,.is-done) .step-card .btn.btn-outline-light{
  border-color: color-mix(in srgb, var(--on-step) 70%, transparent);
  color: var(--on-step);
}
.step:is(.is-active,.is-done) .step-card .btn.btn-outline-light:hover{
  background: rgba(255,255,255,.14);
  color: var(--on-step);
}

.step:is(.is-active,.is-done) .step-card .btn.btn-light{
  background: #ffffff;
  color: color-mix(in srgb, var(--step-color) 28%, #0a0e16);
  border-color: rgba(0,0,0,.12);
}

/* Badges and small pills inside Active/Done cards */
.step:is(.is-active,.is-done) .step-card .badge{
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(0,0,0,.12);
  color: var(--on-step);
}

/* Optional: “muted” text tone in inactive cards */
.card.glass.step-card .text-muted-70{ color: var(--text-muted-70) !important; }

/* Outcomes compact UI */
.outcome-tile {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 1rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.outcome-tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.16); box-shadow: 0 6px 20px rgba(0,0,0,.25); }

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .25rem; }
.mini-chip {
  font-size: .75rem; line-height: 1;
  padding: .4rem .55rem; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}

.outcome-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; opacity: .9; text-decoration: none; }
.outcome-link:hover { text-decoration: underline; }

.outcome i.fa-check { margin-right: .5rem; opacity: .85; }

/* Ship row cards */
.ship-card {
  display: flex; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px; padding: .75rem .9rem; height: 100%;
}
.ship-card i { font-size: 1.1rem; opacity: .9; }
.ship-title { font-weight: 600; }





/* changes done in steps */
/* STEPPER: reveal-on-visit cards
   - future steps: collapsed (only heading)
   - current + previous: expanded with vibrant ink already handled by your CSS
*/

/* Layout for the new wrappers */
.step-card .step-head { display: grid; gap: .15rem; }
.step-card .step-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transform: translateY(-2px);
  transition: max-height .28s ease, opacity .22s ease, transform .22s ease, margin-top .22s ease;
}

/* Expand body when the step is active or done (visited) */
.step.is-active .step-card .step-body,
.step.is-done  .step-card .step-body {
  max-height: 240px;   /* large enough for your content */
  opacity: 1;
  transform: translateY(0);
  margin-top: .35rem;
}

/* Optional: make unvisited cards feel “teaser-only” */
.step:not(.is-active):not(.is-done) .step-card .step-head .fw-semibold {
  opacity: .95;
}
.step:not(.is-active):not(.is-done) .step-card .small { opacity: .8; }

/* Optional: subtle hover hint on future cards */
.step:not(.is-active):not(.is-done) .step-card:hover {
  outline: 1px dashed rgba(255,255,255,.16);
  outline-offset: 3px;
}

/* You already have vibrant solid + contrast ink for done/active cards:
   .step.is-done .step-card, .step.is-active .step-card { background: var(--step-color) ... }
   We keep using that behavior as-is. */


   /* Modal Styling */
/* optional: price badge polish */
.modal .badge.rounded-pill { vertical-align: baseline; }
.modal-content{color: var(--text-100);}
.bg-success-subtle { background: rgba(25, 135, 84, .15) !important; }
.text-success-emphasis { color: #7DFFB3 !important; }
/* optional: hero CTA glow */
.glow-cta { box-shadow: 0 0 18px rgba(0, 180, 255, .35); }
.glow-cta:hover { box-shadow: 0 0 26px rgba(0, 180, 255, .55); }
/* Place in your global CSS (e.g., navbar.css or base.css) */
.modal            { z-index: 4000; }
.modal-backdrop   { z-index: 3950; }





/* //==============================//
// END COURSES: TRIPLE STREAM — JOURNEY STEPPER
//==============================// */

.alert-glass{
  --bs-alert-color: #e6eaff;
  --bs-alert-bg: rgba(16,18,28,.78);
  --bs-alert-border-color: rgba(255,255,255,.10);
  --bs-alert-link-color: #ffffff;
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
  border-radius: .75rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


/* //==============================//
// Start demo.php specific styles
//==============================// */

/* Modal theme */
.modal-hero { background: rgba(20,22,28,.95); color:#eaeef5; border:1px solid rgba(255,255,255,.08); }
.modal-hero--success { box-shadow: 0 0 0 2px rgba(34,197,94,.35), 0 16px 60px rgba(0,0,0,.55); }
.modal-hero--error   { box-shadow: 0 0 0 2px rgba(239,68,68,.35), 0 16px 60px rgba(0,0,0,.55); }
#heroFeedbackDialog.modal-lg-custom { max-width: 720px; }
.modal-hero__icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; font-weight:800; background:#222; }

/* SLOT LIST – simple, non-pill radios */
/* SLOT LIST – compact tiles, multi-column, dark-theme friendly */
.slot-list { padding:.25rem 0; }
.slot-rows{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* auto-wrap tiles */
  gap:.5rem .5rem;
}
.slot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  padding: .45rem .8rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .5rem;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
  user-select: none;
}
.slot-row:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); }
.slot-row:has(.form-check-input:checked) {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.45);
  box-shadow: inset .18rem 0 0 rgba(34,197,94,.9);
}
.slot-row .form-check-input {
  pointer-events: none; /* let clicks fall through */
  margin: 0 .3rem 0 0;
}


.slot-row .form-check-label{
  margin:0;
  font-weight:600;
  letter-spacing:.1px;
  color:#e8edf5;
  line-height:1.1;
  white-space:nowrap;
}

/* selected tile highlight (subtle, not pill-y) */
.slot-row.is-selected{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.45);
  box-shadow:inset .18rem 0 0 rgba(34,197,94,.9);
}

/* tighten grid a bit more on large screens */
@media (min-width: 992px){
  .slot-rows{ grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:.45rem; }
}

/* Small label spacing & typed wrap (unchanged) */
#heroSignupForm .small i { opacity: .9; }
#heroTypedWrap p { margin-bottom: .5rem; }
#heroTypedWrap .typed-cursor { opacity: .85; }



/* Live Join button (green, pulsing) */
/* Hero bar: title left, button right */
.hero-bar{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; margin-bottom:.75rem;
}
.hero-title{ min-width:0; } /* allow title to wrap nicely */
@media (max-width: 640px){
  .hero-bar{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .live-join-wrap{ align-self:flex-end; }
}

/* Live Join button (green, with outer pulse aura) */
.live-join-wrap{ display:flex; }
.btn-live-join{
  position:relative; overflow:visible; /* allow aura to extend outside */
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:.7rem; font-weight:700;
  background:#16a34a; color:#fff; text-decoration:none;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 6px 18px rgba(22,163,74,.35);
}
.btn-live-join:hover{ filter:brightness(1.06); }

/* small inner ping dot */
.pulse-dot{
  width:.6rem; height:.6rem; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:pulseRing 1.6s ease-in-out infinite;
}

/* BIG outer glow that extends beyond the button */
.pulse-aura{
  position:absolute; inset:-12px; border-radius:999px; pointer-events:none;
  background: radial-gradient( circle at 20% 50%,
             rgba(34,197,94,.35), rgba(34,197,94,0) 60% );
  animation:pulseAura 1.8s ease-out infinite;
  z-index: -1; /* sit behind the button */
}

/* animations */
@keyframes pulseRing {
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.55); transform:scale(1); }
  60%  { box-shadow:0 0 0 14px rgba(34,197,94,0); transform:scale(1.06); }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); transform:scale(1); }
}
@keyframes pulseAura {
  0%   { transform:scale(.9);  opacity:.85; }
  70%  { transform:scale(1.15); opacity:0;  }
  100% { opacity:0; }
}


/* //==============================//
// End demo.php specific styles */