:root{
  --main-color:#b0e0e6;
  --accent-color:#89c2d9;
  --accent-color-dark:#78b0c7;
  --ink:#333;
  --muted:#667a88;
  --bg:#f5f8fa;
  --card:#ffffff;
  --maxw:1200px;
  --wide:1600px;
  --ring:rgba(137,194,217,.35);

  /* Scheduler palette: ensures the scheduler feels cohesive with the rest of the site yet elevated */
  --sched-slot-available: var(--accent-color);
  /* Selected slots use a complementary green to contrast nicely with the blue palette */
  --sched-slot-selected: #5fc996;
  --sched-slot-unavailable: #c5d5e0;
  --sched-slot-text: #ffffff;
  --sched-back-bg: var(--accent-color-dark);
  --sched-back-text: #ffffff;
  --sched-overlay-bg: rgba(0,0,0,.4);
  --sched-pattern-color: rgba(137,194,217,.2);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden}

/* Header (match site) */
header{background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.05);position:relative;z-index:10}
.header-container{max-width:var(--maxw);margin:0 auto;padding:1em;display:flex;align-items:center;justify-content:space-between}
.logo a{text-decoration:none;font-size:1.4em;font-weight:600;letter-spacing:.1em;color:#333}
.logo-img{height:58px;width:auto;margin-right:.5em;vertical-align:middle}
nav a{ text-decoration:none;color:#333;margin:0 1em;position:relative;transition:color .3s }
nav a:hover{color:var(--main-color)}
nav a::after{content:"";position:absolute;bottom:-4px;left:0;height:2px;background:var(--main-color);width:0;transition:width .3s}
nav a:hover::after,nav a.active::after{width:100%}
nav a.active{color:var(--main-color)}
.nav-toggle{display:none}
@media (max-width:768px){
  .nav-toggle{display:flex;flex-direction:column;justify-content:space-between;width:24px;height:18px;background:none;border:none;cursor:pointer;padding:0;z-index:1010}
  .nav-toggle span{display:block;width:100%;height:2px;background:#333;border-radius:2px}
  nav{position:fixed;inset:0;background:rgba(255,255,255,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateX(100%);transition:transform .3s ease;z-index:1000}
  nav.open{transform:translateX(0)}
  nav a{margin:1em 0;font-size:1.4em;font-weight:600;color:var(--accent-color-dark);text-transform:uppercase;letter-spacing:.05em}
  nav a:hover,nav a.active{color:var(--accent-color)}
}

/* Hero */
.hero{
  max-width:var(--maxw);
  margin:0 auto;
  padding:3em 1em 1em;
  text-align:center;
}
.hero h1{font-size:2.2em;margin-bottom:.35em;color:var(--accent-color-dark)}
.hero p{max-width:720px;margin:0 auto;color:#555}

/* Plans grid */
.plans{
  max-width:var(--maxw);
  margin:2.5em auto 4em;
  padding:0 1em;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25em;
}
@media (min-width:1500px){
  .plans{
    max-width:var(--wide);
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media (max-width:1100px){ .plans{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .plans{grid-template-columns:1fr;max-width:680px} }

.plan{
  background:var(--card);
  border-radius:14px;
  padding:2.25em 1.6em;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.05);
  position:relative;
  overflow:hidden;
  transform:translateY(28px);
  opacity:0;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
.plan.visible{ opacity:1; transform:translateY(0) }
.plan:hover{ transform:translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,.09) }

.plan header{background:transparent;box-shadow:none;padding:0;margin:0 0 .75em}
.eyebrow{
  font-size:.85em;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:.25em
}
.title{font-size:1.35em;font-weight:800;color:#222;margin-bottom:.25em}
.sub{font-size:.95em;color:#777;margin-bottom:1.25em}

/* PRICE + STATS */
.price-row{
  display:flex;align-items:flex-start;gap:1.25em;justify-content:flex-start;
  margin:.25em 0 .75em;flex-wrap:wrap;
}
.price{
  font-weight:800;font-size:2em;color:#222;flex:0 0 auto;
  position:relative; top:-6px;             /* ↓ lower the $/hour slightly */
}
@media (max-width:640px){ .price{ top:0 } } /* keep mobile unchanged */
.unit{font-size:.55em;color:#777;font-weight:700;margin-left:.2em}

.meta{flex:0 0 auto}
.stats{display:flex;flex-direction:column;align-items:flex-start;gap:.28em}

/* Remove boxes: make clean text lines */
.statline{
  display:flex;gap:.35em;align-items:center;
  background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;
  line-height:1.2;
}
.label{
  font-size:.72em;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:800
}
.label::after{content:":";margin:0 .25em 0 .15em;opacity:.6}
.value{font-weight:800;color:#0f3f54}

.perks{list-style:none;margin:1.25em 0 1.5em;padding:0}
.perks li{display:flex;align-items:flex-start;gap:.6em;margin:.55em 0;color:#444}
.dot{display:inline-block;width:8px;height:8px;margin-top:.45em;border-radius:999px;background:var(--accent-color)}

.cta{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;background:var(--accent-color);color:#fff;border:none;border-radius:8px;
  padding:.65em 1.1em;font-weight:700;text-decoration:none;
  transition:background .25s, transform .25s, box-shadow .25s;
  box-shadow:0 6px 16px var(--ring);
  cursor:pointer;
}
.cta:hover{ background:var(--accent-color-dark); transform:translateY(-2px) }

.tiny{display:inline-flex;align-items:center;gap:.25em;font-size:.9em;font-weight:600;color:#1e5670;margin-top:.9em;text-decoration:none}
.tiny svg{width:16px;height:16px;vertical-align:-2px}

.badge{
  position:absolute;top:14px;right:14px;background:#f0f7fb;color:#0b5b7a;border:1px solid #d6ecf6;
  padding:.28em .6em;border-radius:999px;font-size:.75em;font-weight:800;letter-spacing:.04em
}

.hr{height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.06),transparent);margin:1.25em 0}

/* Stagger */
.plan[data-delay="0"]{ transition-delay:.00s }
.plan[data-delay="1"]{ transition-delay:.06s }
.plan[data-delay="2"]{ transition-delay:.12s }
.plan[data-delay="3"]{ transition-delay:.18s }

footer{text-align:center;padding:2em 1em;background:#fff;color:#777;font-size:.9em;margin-top:2em}

/* Scheduler overlay styles */
.scheduler-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
  transition:background-color .8s ease;
}
.scheduler-overlay.active{
  background:var(--sched-overlay-bg);
}
.scheduler-overlay.hidden{display:none}

.scheduler-container{
  background:var(--card);
  border-radius:20px;
  max-width:1100px;
  width:95%;
  max-height:92vh;
  overflow-y:auto;
  box-shadow:0 20px 40px rgba(0,0,0,.1);
  padding:2em;
  background-image:radial-gradient(var(--sched-pattern-color) 1px, transparent 1px);
  background-size:20px 20px;
  transform:scale(.9);
  opacity:0;
}

/* ✅ Only make the container taller on the TIMES step (no days-step layout change) */
.scheduler-container.show-times .schedule-content{
  min-height:420px;
}
@media (max-width:768px){
  .scheduler-container.show-times .schedule-content{ min-height:390px; }
}

.scheduler-title{
  font-size:1.6em;
  font-weight:800;
  color:var(--accent-color-dark);
  text-align:center;
  margin-bottom:1.5em;
}

/* Container for the schedule content */
.schedule-content{
  position:relative;
  min-height:320px;
}

.bubble-view,
.days-view,
.times-view{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform:scale(.9) translateY(12px);
  transition:opacity .4s ease, transform .4s ease;
}
.bubble-view.active,
.days-view.active,
.times-view.active{
  opacity:1;
  pointer-events:auto;
  transform:scale(1) translateY(0);
}

/* Bubble */
.bubble-view{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
}
.days-view{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 1em;
}
.bubble-text{
  font-size:2em;
  font-weight:800;
  color:var(--accent-color-dark);
}
@media (max-width:768px){
  .bubble-text{font-size:1.8em;}
}

@keyframes bubble-pop {
  0%   { opacity:0; transform:scale(0.8); }
  60%  { opacity:1; transform:scale(1.05); }
  100% { opacity:1; transform:scale(1); }
}
.bubble-view.active{
  animation: bubble-pop .6s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes container-pop {
  0%   { opacity:0; transform:scale(0.8); }
  60%  { opacity:1; transform:scale(1.05); }
  100% { opacity:1; transform:scale(1); }
}
.scheduler-container.active{
  animation: container-pop .6s cubic-bezier(.2,.8,.2,1) forwards;
}

/* Days grid */
.days-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:1em;
  margin:0 auto 1.25em;
  justify-items:center;
}
@media (max-width:768px){
  .days-grid{grid-template-columns:1fr;}
}

/* ✅ Slightly bigger day blocks */
.day-box{
  width:100%;
  padding:1.28em .35em;
  text-align:center;
  background:var(--sched-slot-available);
  color:var(--sched-slot-text);
  border-radius:22px;
  font-size:1.15em;
  font-weight:700;
  cursor:pointer;
  position:relative;
  opacity:0;
  transform:scale(0.9) translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
}
@media (max-width:768px){
  .day-box{ padding:1.05em .25em; font-size:1.1em; border-radius:20px; }
}

.days-view.active .day-box{
  opacity:1;
  transform:scale(1) translateY(0);
}
.day-box:nth-child(1){transition-delay:.05s;}
.day-box:nth-child(2){transition-delay:.1s;}
.day-box:nth-child(3){transition-delay:.15s;}
.day-box:nth-child(4){transition-delay:.2s;}
.day-box:nth-child(5){transition-delay:.25s;}
.day-box:nth-child(6){transition-delay:.3s;}
.day-box:nth-child(7){transition-delay:.35s;}

.day-box:hover:not(.unavailable){
  transform:translateY(-4px);
  box-shadow:0 6px 16px var(--ring);
}

/* ✅ Clean “Fully booked” hover for unavailable days (no jumbled text) */
.day-box.unavailable{
  background:var(--sched-slot-unavailable);
  color:#5f6b74;
  cursor:not-allowed;
}
.day-box.unavailable::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(255,255,255,.22);
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.day-box.unavailable::after{
  content:"Fully booked";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.82em;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5c6973;
  opacity:0;
  transform:scale(.98);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.day-box.unavailable:hover{
  color:transparent; /* hide the day name so nothing overlaps */
}
.day-box.unavailable:hover::before{
  opacity:1;
}
.day-box.unavailable:hover::after{
  opacity:1;
  transform:scale(1);
}

/* highlight day when it contains a selected time */
.day-box.selected{
  background:var(--sched-slot-selected);
}
.scheduler-hint{
  text-align:center;
  font-size:.85em;
  color:var(--muted);
  margin-top:.5em;
}

/* Times view */
.times-view{
  margin-top:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  height:100%;
  padding:0 1em;
}
.times-view.hidden{display:none}
.times-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1em;
}
.back-button{
  background:var(--sched-back-bg);
  color:var(--sched-back-text);
  border:none;
  border-radius:12px;
  padding:.5em .7em;
  font-size:1.4em;
  cursor:pointer;
  transition:background .2s;
}
.back-button:hover{
  background:var(--accent-color-dark);
}
.times-title{
  flex-grow:1;
  text-align:center;
  font-size:1.4em;
  font-weight:800;
  color:var(--accent-color-dark);
}
.progress-indicator{
  background:var(--sched-back-bg);
  color:var(--sched-back-text);
  padding:.4em .8em;
  border-radius:12px;
  font-weight:700;
  font-size:1em;
}
.times-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8em;
  width:100%;
  flex-grow:1;
  overflow-y:auto;
}

.time-slot{
  width:80%;
  padding:.7em 0;
  text-align:center;
  border-radius:20px;
  font-weight:700;
  font-size:1.05em;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
  position:relative;
}
.time-slot.available{
  background:var(--sched-slot-available);
  color:var(--sched-slot-text);
}
.time-slot.unavailable{
  background:var(--sched-slot-unavailable);
  color:#66707a;
  cursor:not-allowed;
}
.time-slot.selected{
  background:var(--sched-slot-selected);
  color:var(--sched-slot-text);
  transform:translateY(-3px);
  box-shadow:0 4px 12px var(--ring);
}
.time-slot.available:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 12px var(--ring);
}

/* ✅ Clean “Fully booked” hover for unavailable time slots (no jumbled text) */
.time-slot.unavailable::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(255,255,255,.22);
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.time-slot.unavailable::after{
  content:"Fully booked";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.78em;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5c6973;
  opacity:0;
  transform:scale(.98);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.time-slot.unavailable:hover{
  color:transparent; /* hide the time label so nothing overlaps */
}
.time-slot.unavailable:hover::before{
  opacity:1;
}
.time-slot.unavailable:hover::after{
  opacity:1;
  transform:scale(1);
}

/* Pay button */
.schedule-pay-btn{
  display:block;
  margin:2em auto 0;
  padding:.8em 2em;
  font-size:1.2em;
  font-weight:700;
  color:#fff;
  background:var(--sched-slot-selected);
  border:none;
  border-radius:14px;
  cursor:pointer;
  transition:background .2s, transform .2s, box-shadow .2s;
  box-shadow:0 6px 16px var(--ring);
}
 .schedule-pay-btn:hover{
  background:var(--accent-color-dark);
  transform:translateY(-2px);
}

/* Mobile-specific styling for the scheduler day selection bubbles */
@media (max-width:768px){
  /* Ensure all seven day bubbles fit within the viewport without scrolling */
  .days-grid{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.4em;
    width:100%;
  }
  .day-box{
    width:2.2em;
    height:2.2em;
    padding:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.95em;
  }
}

/* Utility for hiding elements */
.hidden{display:none !important}