/* Float With Babs 2.0 — mobile-first styles */
:root{
  --navy:#03045e;
  --deep:#003049;
  --blue:#0077b6;
  --aqua:#00b4d8;
  --foam:#90e0ef;
  --sun:#ffb703;
  --ink:#1b2a3a;
  --muted:#5b6b7b;
  --radius:18px;
  --shadow:0 10px 25px rgba(0,0,0,.15);
}
*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  background:linear-gradient(160deg,var(--deep) 0%,var(--aqua) 55%,var(--foam) 100%);
  min-height:100vh;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--ink);
  font-size:16px;
}

/* ---------- Hero ---------- */
.hero{
  text-align:center; color:#fff;
  padding:36px 16px 20px;
  text-shadow:0 2px 6px rgba(0,0,0,.25);
}
.hero h1{ font-weight:800; font-size:clamp(1.55rem, 6vw, 2.6rem); line-height:1.2; margin-bottom:.5rem; }
.hero .meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.hero .chip{
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
  border-radius:30px; padding:4px 12px; font-size:.9rem; backdrop-filter:blur(4px);
}

.section-title{ color:#fff; font-weight:700; font-size:1.15rem; margin:0 0 12px; text-shadow:0 1px 3px rgba(0,0,0,.25); }

/* ---------- Ticket options ---------- */
.ticket-option{
  display:flex; align-items:center; gap:14px;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 16px; cursor:pointer; height:100%;
  border:3px solid transparent;
  transition:transform .15s ease, border-color .15s ease;
  text-align:left; width:100%;
}
.ticket-option:hover{ transform:translateY(-3px); }
.ticket-option.selected{ border-color:var(--sun); }
.ticket-option .cat-emoji{ font-size:1.9rem; flex:0 0 auto; }
.ticket-option .cat-body{ flex:1 1 auto; min-width:0; }
.ticket-option .cat-name{ display:block; font-weight:700; color:var(--navy); margin:0; font-size:1rem; }
.ticket-option .price-tag{ font-size:1.2rem; font-weight:800; color:var(--blue); }
.ticket-option .tick{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  border:2px solid #c9d6e2; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:transparent;
}
.ticket-option.selected .tick{ background:var(--sun); border-color:var(--sun); color:var(--navy); }

@media (min-width:768px){
  .ticket-option{ flex-direction:column; text-align:center; padding:26px 18px; }
  .ticket-option .cat-emoji{ font-size:2.4rem; }
  .ticket-option .price-tag{ font-size:1.6rem; }
  .ticket-option .tick{ margin-top:6px; }
}

/* ---------- Cards / forms ---------- */
.card-box{
  background:#fff; border-radius:var(--radius); padding:22px 18px;
  box-shadow:var(--shadow);
}
@media (min-width:576px){ .card-box{ padding:30px; } }

.form-control, .form-select{ min-height:48px; font-size:16px; border-radius:12px; } /* 16px stops iOS zoom */
.form-label{ font-weight:600; font-size:.95rem; }

.qty-stepper{ display:flex; align-items:stretch; max-width:180px; }
.qty-stepper button{
  width:48px; border:1px solid #ced4da; background:#f1f6fa; font-size:1.3rem; font-weight:700; color:var(--navy);
}
.qty-stepper button:first-child{ border-radius:12px 0 0 12px; }
.qty-stepper button:last-child{ border-radius:0 12px 12px 0; }
.qty-stepper input{ border-radius:0; text-align:center; border-left:0; border-right:0; }

.summary-row{ display:flex; justify-content:space-between; align-items:center; }
.total-amount{ font-size:1.5rem; font-weight:800; color:var(--navy); }

.btn-pay{
  background:var(--navy); color:#fff; border-radius:30px; padding:14px; font-weight:700; font-size:1.05rem; border:none;
}
.btn-pay:hover,.btn-pay:focus{ background:var(--blue); color:#fff; }
.btn-pay:disabled{ background:#8a93a6; color:#fff; }
.btn-download{
  background:var(--blue); color:#fff; border-radius:30px; padding:14px 24px; font-weight:700; border:none;
}
.btn-download:hover{ background:var(--navy); color:#fff; }

/* ---------- Sticky mobile checkout bar ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  background:#fff; box-shadow:0 -6px 20px rgba(0,0,0,.15);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px;
  transform:translateY(110%); transition:transform .2s ease;
}
.mobile-bar.show{ transform:translateY(0); }
.mobile-bar .mb-label{ font-size:.8rem; color:var(--muted); line-height:1.1; }
.mobile-bar .mb-total{ font-size:1.2rem; font-weight:800; color:var(--navy); }
.mobile-bar .btn{ margin-left:auto; border-radius:30px; font-weight:700; padding:10px 22px; }
body.has-mobile-bar{ padding-bottom:84px; }
@media (min-width:768px){ .mobile-bar{ display:none; } body.has-mobile-bar{ padding-bottom:0; } }

/* ---------- Status pages ---------- */
.center-screen{ min-height:calc(100vh - 70px); display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.center-screen .card-box{ width:100%; max-width:520px; }
.status-icon{ font-size:3rem; line-height:1; margin-bottom:10px; }
.ref-pill{ display:inline-block; background:#eef6fb; color:var(--navy); border-radius:30px; padding:6px 14px; font-family:monospace; font-size:.95rem; word-break:break-all; }

.site-footer{ color:#eaf7ff; text-align:center; padding:22px 16px; font-size:.85rem; }

/* Loading overlay while Paystack opens */
.loading-overlay{
  position:fixed; inset:0; background:rgba(3,4,94,.55); z-index:2000;
  display:none; align-items:center; justify-content:center; color:#fff; flex-direction:column; gap:12px;
}
.loading-overlay.show{ display:flex; }