
.payment-section{
margin-top:16px;
padding:16px;
background:#fffdf7;
border-radius:18px;
border:1px solid #e8e1d6;
test-align:center;
}

.payment-qr{
width:120px;
height:auto;
max-width:100%;
object-fit:contain ;
display:block;
margin:12px auto;
border-radius:12px;
}

.payment-section p{
    font-size:14px;
    margin-bottom:12px;
}

.payment-section input{
    width:100%;
    padding:12px;
    border-radius:12px;
    border:1px solid #ddd;
    margin-top:8px;
}
:root{
  --olive:#657452;
  --olive-soft:#dce6cc;
  --olive-pale:#eff4e5;
  --cream:#fff9eb;
  --cream2:#fffdf5;
  --coral:#df8a6c;
  --pink:#eeb8b9;
  --yellow:#f3d68e;
  --lav:#c9b9d9;
  --ink:#3e3b31;
  --muted:#706b5e;
  --line:#e5d9bd;
  --shadow:0 14px 35px rgba(86,80,56,.12);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:'Nunito', Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 3% 20%, rgba(180,211,219,.55) 0 22px, transparent 24px),
    radial-gradient(circle at 0 42%, rgba(204,218,185,.55) 0 48px, transparent 50px),
    radial-gradient(circle at 100% 78%, rgba(241,190,183,.50) 0 58px, transparent 60px),
    linear-gradient(#fffdf5,#fff7dc);
}

.nav{
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 38px;
  background:rgba(255,253,245,.92);
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:20;
}

.brand img{
  width:160px;
  height:auto;
  display:block;
  mix-blend-mode:multiply;
}

.nav-links{
  display:flex;
  gap:28px;
  font-weight:800;
  font-size:15px;
}

.nav-links a{
  color:var(--ink);
  text-decoration:none;
}

.nav-links a:hover{color:var(--olive)}

.nav-actions{display:flex;gap:12px}

.hamburger{display:none}

.btn{
  border:0;
  border-radius:10px;
  padding:13px 22px;
  font-weight:900;
  font-family:inherit;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.btn.solid{
  background:var(--olive);
  color:white;
  box-shadow:0 7px 14px rgba(101,116,82,.18);
}

.btn.ghost{
  background:rgba(255,255,255,.8);
  color:var(--olive);
  border:1.5px solid var(--olive);
}

.btn.large{padding:16px 24px;border-radius:12px}

.hero{
  min-height:650px;
  display:grid;
  grid-template-columns:40% 60%;
  position:relative;
  overflow:hidden;
  padding:30px 0 0 0;
}

.hero:after{
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:-2px;
  height:120px;
  background:var(--cream);
  border-radius:55% 45% 0 0 / 45% 45% 0 0;
  z-index:4;
}

.hero-copy{
  padding:80px 0 0 90px;
  z-index:5;
  position:relative;
}

.hero-copy h1{
  margin:0 0 24px;
  color:var(--olive);
  font-family:'Baloo 2', cursive;
  font-size:58px;
  line-height:.98;
  letter-spacing:.5px;
}

.hero-copy h1 span{
  font-size:64px;
  letter-spacing:1px;
  color:#D99732;
}

.hero-copy h1 em{
  color:#D99732;
  font-style:normal;
  font-size:64px;
}

.hero-copy p{
  font-size:18px;
  line-height:1.45;
  max-width:430px;
  margin-bottom:32px;
}

.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}

.hero-photo{
  position:relative;
  height:650px;
  z-index:1;
}

.hero-photo:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--cream) 0%, rgba(255,249,235,.75) 12%, rgba(255,249,235,.15) 48%, rgba(255,249,235,0) 100%);
  z-index:2;
}

.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.decor{position:absolute;z-index:6}
.heart{top:170px;left:31%;color:#ebb0b6;font-size:38px;transform:rotate(-12deg)}
.bee{top:270px;left:39%;width:36px;height:28px;border-radius:50%;background:#f4d56c;box-shadow:0 0 0 4px #3e3b31 inset}
.cloud{top:170px;left:10px;width:72px;height:35px;background:#c6dce5;border-radius:40px}

main{position:relative;z-index:6}

.features{
  max-width:1180px;
  margin:-10px auto 0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  padding:0 36px;
}

.feature-card{
  background:rgba(255,255,255,.78);
  border-radius:20px;
  padding:28px 20px;
  text-align:center;
  box-shadow:var(--shadow);
  min-height:168px;
}

.feature-icon{
  font-size:52px;
  color:var(--olive);
  line-height:1;
  font-family:'Baloo 2';
}

.feature-icon.puzzle{color:var(--lav)}
.feature-icon.people{color:#df907e}
.feature-icon.smile{color:#e6bd5c}
.feature-icon.love{color:#e9959d}

.feature-card h3{
  margin:14px 0 8px;
  font-size:18px;
  color:var(--ink);
}

.feature-card p{
  margin:0;
  font-size:14px;
  line-height:1.35;
}

.teacher-banner{
  max-width:1120px;
  margin:28px auto;
  background:rgba(213,225,196,.9);
  border-radius:999px;
  padding:16px 28px;
  display:flex;
  justify-content:center;
  gap:6px;
  color:var(--olive);
  font-size:18px;
  text-align:center;
}

.teacher-banner span{font-weight:900}

.quick-panels{
  max-width:1120px;
  margin:20px auto;
  display:grid;
  grid-template-columns:1fr 1fr 1.15fr;
  gap:28px;
  padding:0 22px;
}

.info-panel,.love-panel,.booking-form-section,.reminders,.rates,.faq{
  background:rgba(255,253,245,.90);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.info-panel{
  padding:24px;
  position:relative;
}

.panel-badge{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:white;
  font-size:25px;
  font-weight:900;
  float:left;
  margin-right:18px;
}

.panel-badge.blue{background:#a9bce2}
.panel-badge.coral{background:var(--coral)}

.info-panel h3,.love-panel h3{
  margin:4px 0 8px;
  color:var(--olive);
  text-transform:uppercase;
  font-size:19px;
}

.info-panel p{
  font-size:15px;
  line-height:1.4;
  margin-bottom:18px;
}

.panel-photo{
  height:160px;
  border-radius:20px;
  background-image:url("assets/inside.jpg");
  background-size:cover;
  background-position:center;
  margin-top:12px;
  position:relative;
  overflow:hidden;
}

.event-photo{
  background-image:
    linear-gradient(rgba(255,235,225,.25),rgba(255,235,225,.25)),
    url("assets/party-photo.jpeg");
  background-position:center;
}

.panel-button{
  background:var(--olive);
  color:white;
  padding:12px 22px;
  border-radius:12px;
  text-decoration:none;
  display:inline-block;
  font-weight:900;
  position:absolute;
  bottom:34px;
  left:50%;
  transform:translateX(-50%);
}

.love-panel{
  padding:26px 34px;
  position:relative;
}

.love-panel ul{
  list-style:none;
  padding:0;
  margin:22px 0 0;
  display:grid;
  gap:21px;
}

.love-panel li{
  position:relative;
  padding-left:32px;
  font-size:16px;
}

.love-panel li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--olive);
  font-weight:900;
}

.heart-face{
  position:absolute;
  bottom:18px;
  right:26px;
  color:#efb5ba;
  font-size:85px;
  opacity:.8;
}

.booking-form-section{
  max-width:1120px;
  margin:36px auto;
  padding:32px;
}

h2{
  font-family:'Baloo 2';
  color:var(--olive);
  text-align:center;
  font-size:34px;
  margin:0 0 22px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.booking-form{
  display:grid;
  gap:22px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

label{
  display:grid;
  gap:7px;
  font-weight:900;
  color:var(--olive);
}

input,select{
  border:1px solid #ded1b5;
  border-radius:12px;
  padding:14px 14px;
  font-family:inherit;
  font-size:15px;
  background:white;
}

small{color:var(--muted);font-weight:700}

.hidden{display:none !important}

.policy-box{
  background:var(--olive-pale);
  border:1px solid #d8e0cb;
  padding:20px;
  border-radius:18px;
  line-height:1.55;
}

.check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;
  color:var(--ink);
}

.check input{width:auto;margin-top:4px}

.booking-summary{
  background:#f7eed8;
  border-radius:18px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.booking-summary span{
  font-weight:900;
  color:var(--olive);
}

.booking-summary strong{
  font-size:32px;
  color:var(--coral);
}

.reminders{
  max-width:1120px;
  margin:30px auto;
  padding:22px;
}

.reminder-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:white;
}

.reminder-grid div{
  text-align:center;
  padding:22px 14px;
  border-right:1px solid var(--line);
}

.reminder-grid div:last-child{border-right:0}

.reminder-grid p{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.35;
}

.avatar{
  height:58px;
  width:58px;
  background:#f3d7c6;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  color:white;
  font-weight:900;
}

.avatar.group{background:#c7d8b7}
.avatar.group:after{content:"👨‍👩‍👧"}
.avatar.kids{background:#f7d0bf}
.avatar.kids:after{content:"kids";font-size:12px}
.avatar.mom{background:#f0c8b3}
.avatar.sock{background:#a9bce2}
.avatar.sock:after{content:"sock";font-size:12px}
.avatar.clock{background:#c2a98f}
.avatar.clock:after{content:"time";font-size:12px}

.rates,.faq{
  max-width:1120px;
  margin:34px auto;
  padding:32px;
}

.rate-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.rate-card{
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  text-align:center;
  padding:26px;
}

.rate-card h3{
  color:var(--olive);
  font-size:22px;
  margin:0 0 8px;
}

.rate-card strong{
  font-size:42px;
  display:block;
  color:var(--coral);
  margin:12px 0;
}

.faq details{
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  margin:12px 0;
}

.faq summary{
  font-weight:900;
  color:var(--olive);
  cursor:pointer;
}

footer{
  margin-top:50px;
  background:#edf3df;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:40px;
  padding:34px 8%;
}

footer h3{
  color:var(--olive);
  margin:0 0 10px;
  text-transform:uppercase;
}

.socials{
  display:flex;
  gap:12px;
}

.socials a{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#3b5998;
  color:white;
  text-decoration:none;
  font-weight:900;
  font-size:24px;
}

.socials a:nth-child(2){background:#e4405f}

.copyright{
  background:var(--olive);
  color:white;
  text-align:center;
  padding:14px;
  font-size:14px;
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:50;
  display:grid;
  place-items:center;
  padding:20px;
}

.modal-card{
  background:white;
  width:min(420px,92%);
  border-radius:24px;
  padding:18px;
  max-height:85vh;
  overflow-y: auto;
  margin:auto;
  position:relative;
}

.close{
  position:absolute;
  right:18px;
  top:14px;
  border:0;
  background:none;
  font-size:28px;
  cursor:pointer;
}

.full{width:100%;text-align:center;margin-top:16px}

/* DESKTOP */

.nav-actions{

display:flex;

gap:12px;

}

.nav-actions .btn{

padding:13px 22px;

font-size:15px;

}

/* MOBILE ONLY */

@media(max-width:768px){

.hamburger{
display:flex;
}

.nav-links{
display:none;
}

.nav-actions{
display:flex !important;
gap:8px;
}

.nav-actions .btn{
padding:8px 12px;
font-size:12px;
white-space:nowrap;
}

}

/* Force Desktop Fix*/
@media(min-width:1001px){

.nav-actions{
display:flex !important;
gap:12px !important;
}

.nav-actions .btn{
padding:13px 22px !important;
font-size:15px !important;
width:auto !important;
max-width:none !important;
}

}
/* DESKTOP NAV FIX */

@media(min-width:769px){

.hamburger{
display:block !important;
}

.nav-links{
display:flex !important;
}

.nav-actions{
display:flex !important;
}

}
  .hamburger{display:block;border:1px solid var(--olive);background:white;border-radius:9px;padding:10px;color:var(--olive);font-weight:900}
  .nav-links.open{display:flex;position:absolute;top:100px;left:0;right:0;background:white;flex-direction:column;padding:24px}
  .hero{
      display:grid;
      grid-template-columns:1.1fr 1fr;
      gap:40px;
      align-items:center;
      padding-top:0;
      
  }
  .hero-copy{padding:60px 28px 20px}
  .hero-photo{height:360px}
  .features,.quick-panels,.form-grid,.reminder-grid,.rate-grid,footer{grid-template-columns:1fr}
  .features{margin:20px auto}
  .teacher-banner{border-radius:18px;display:block;margin:20px}
  .booking-summary{flex-direction:column;align-items:stretch}
  .reminder-grid div{border-right:0;border-bottom:1px solid var(--line)}
}

.login-note{
  background:var(--olive-pale);
  border:1px solid #d8e0cb;
  border-radius:18px;
  padding:18px;
  margin-bottom:22px;
  font-weight:800;
  color:var(--olive);
}
.waiver-card{
  background:var(--olive-pale);
  border:1px solid #d8e0cb;
  padding:20px;
  border-radius:18px;
  line-height:1.55;
}
.waiver-card h3{
  margin:0 0 12px;
  color:var(--olive);
  font-size:24px;
}
.waiver-scroll{
  max-height:340px;
  overflow:auto;
  background:white;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  line-height:1.6;
  color:var(--ink);
}
.waiver-scroll li{margin-bottom:8px}
.modal-card label{margin-top:12px}

.children-section{
  grid-column:1 / -1;
  background:#fffdf7;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
}
.children-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:16px;
}
.children-header strong{
  display:block;
  color:var(--olive);
  font-size:18px;
}
.children-header small{
  display:block;
  color:var(--muted);
  font-weight:700;
}
.small-btn{
  padding:10px 14px;
  border-radius:10px;
  white-space:nowrap;
}
#childrenList{
  display:grid;
  gap:14px;
}
.child-card{
  display:grid;
  grid-template-columns:120px 1fr 160px auto;
  gap:14px;
  align-items:end;
  background:var(--olive-pale);
  border:1px solid #d8e0cb;
  border-radius:16px;
  padding:14px;
}
.child-card h4{
  margin:0 0 12px;
  color:var(--olive);
}
.remove-child{
  background:#f6d6d0;
  color:#9b4d42;
  border:0;
  border-radius:10px;
  padding:12px 14px;
  font-weight:900;
  cursor:pointer;
}
@media(max-width:768px){
  .children-header{flex-direction:column;align-items:stretch}
  .child-card{grid-template-columns:1fr}
}
@media(max-width:600px){
    
    .payment-qr{
        width:100px;
        max-width:220px;
        height:auto;
        display:block;
        margin:20px auto;
        border-radius:18px;
    }
    .modal-card{
        padding:14px;
        max-height:80vh;
    }
    }
}

#party-packages{

padding:60px 20px;

overflow:hidden;

}

.party-banner{

width:100%;

max-width:900px;

margin:0 auto;

}

.party-banner img{

width:100%;

height:auto;

display:block;

border-radius:24px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/* MOBILE */

@media (max-width:768px){

#party-packages{
padding:24px 10px !important;
}

.party-banner{
width:100% !important;
max-width:320px !important;
margin:0 auto !important;
}

.party-banner img{
width:100% !important;
max-width:320px !important;
height:auto !important;
display:block !important;
border-radius:14px !important;
}

}
@media (max-width:768px){
    .standalone-qr{
        max-width:160px;
        border-radius:14px;
    }

@media (min-width: 769px){

.hamburger{
display:none !important;
}

.nav-links{
display:flex !important;
position:static !important;
flex-direction:row !important;
background:transparent !important;
padding:0 !important;
}

.nav-actions{
display:flex !important;
}

.features{
grid-template-columns:repeat(5, 1fr) !important;
max-width:1180px !important;
}

.quick-panels{
grid-template-columns:1fr 1fr 1.15fr !important;
max-width:1120px !important;
}

.form-grid{
grid-template-columns:repeat(2, 1fr) !important;
}

.rate-grid{
grid-template-columns:repeat(3, 1fr) !important;
}

.reminder-grid{
grid-template-columns:repeat(6, 1fr) !important;
}

}

@media(min-width:769px){

.hamburger{
display:none !important;
}

.nav-links{
display:flex !important;
}

.nav-actions{
display:flex !important;
}

}
/* FINAL DESKTOP FIX */
@media (min-width: 900px){

body{
overflow-x:hidden;
}

.hamburger{
display:none !important;
}

.nav{
display:flex !important;
width:100% !important;
max-width:none !important;
}

.nav-links{
display:flex !important;
flex-direction:row !important;
position:static !important;
width:auto !important;
max-width:none !important;
background:transparent !important;
padding:0 !important;
gap:24px !important;
}

.nav-actions{
display:flex !important;
flex-direction:row !important;
width:auto !important;
max-width:none !important;
}

.features{
width:92% !important;
max-width:1180px !important;
display:grid !important;
grid-template-columns:repeat(5, 1fr) !important;
}

.quick-panels{
width:92% !important;
max-width:1120px !important;
display:grid !important;
grid-template-columns:1fr 1fr 1.15fr !important;
}

.booking-form-section,
.reminders,
.rates,
.faq{
width:92% !important;
max-width:1120px !important;
}

}
.mobile-google-btn,
.mobile-guest-btn{
display:none;
}

@media(max-width:768px){

.mobile-google-btn,
.mobile-guest-btn{
display:block !important;
width:100%;
padding:14px 18px;
border-radius:12px;
font-weight:900;
text-align:center;
margin-top:10px;
font-family:inherit;
text-decoration:none;
}

.mobile-google-btn{
background:white;
color:var(--olive);
border:1.5px solid var(--olive);
}

.mobile-guest-btn{
background:var(--olive);
color:white;
border:1.5px solid var(--olive);
}
}

/* Hide mobile menu buttons on desktop */
.mobile-google-btn,
.mobile-guest-btn{
display:none !important;
}

/* Show mobile menu buttons only on phones */
@media(max-width:768px){

.mobile-google-btn,
.mobile-guest-btn{
display:block !important;
width:100%;
padding:14px 18px;
border-radius:12px;
font-weight:900;
text-align:center;
margin-top:10px;
font-family:inherit;
text-decoration:none;
}

.mobile-google-btn{
background:white;
color:var(--olive);
border:1.5px solid var(--olive);
}

.mobile-guest-btn{
background:var(--olive);
color:white;
border:1.5px solid var(--olive);
}
}

@media(max-width:768px){

.nav{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
padding:12px 18px !important;
}

.brand img{
width:150px !important;
}

.hamburger{
display:block !important;
padding:10px 14px !important;
font-size:14px !important;
}

.nav-actions{
display:flex !important;
gap:6px !important;
}

.nav-actions .btn{
display:inline-flex !important;
padding:10px 12px !important;
font-size:13px !important;
white-space:nowrap !important;
}

.nav-links{
display:none !important;
}
}

/* FORCE MOBILE LOGIN/GUEST */

@media(max-width:768px){

.nav{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
}

.nav-actions{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
position:static !important;
flex-direction:row !important;
gap:6px !important;
}

.nav-actions .btn{
display:inline-flex !important;
visibility:visible !important;
opacity:1 !important;
padding:8px 10px !important;
font-size:12px !important;
white-space:nowrap !important;
}

}
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#657452;
  color:white;
  padding:12px;
  text-align:center;
  z-index:9999;
}

.cookie-banner button{
  margin-left:10px;
  padding:6px 12px;
  border:none;
  cursor:pointer;
  border-radius:6px;
}