/* ===========================================
   Tiny Valley Tots — Booking page (cards view)
   =========================================== */

.bk-container { max-width: 980px; margin: 0 auto; padding: 10px; }
.bk-h1 { font-family: "Patrick Hand SC", cursive; text-align: center; }

/* Card specifics (cards.css provides base .tvt-form-card) */
.session-card { margin: 0 0 14px; }
.session-row { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; }
@media (max-width: 720px) { .session-row { grid-template-columns: 1fr; } }

/* Clickable image → Google Maps */
.session-media { text-align: left; }
.session-maplink { display:inline-block; }
.session-maplink[aria-disabled="true"] { pointer-events:none; cursor:default; }
.session-cover {
  width: 180px; height: 180px; object-fit: cover;
  border-radius: 12px; display: block; margin: 8px auto 8px;
  border: 2px solid #eee;
}
/* Smaller image on mobile */
@media (max-width: 720px) { .session-cover { width: 140px; height: 140px; } }

.session-main { text-align: center; }

/* Single meta row (bold, only at the top) */
.session-meta { color:#333; font-size: 1rem; margin: 6px 0 10px; }
.session-meta--bold { font-weight: 700; }
.session-meta .sep { margin: 0 6px; color:#aaa; }

/* === Availability (pills + badge) ========================= */
.bk-availability{
  display:flex; flex-direction:column; align-items:center;
  margin:8px 0 14px;
}
.bk-availability .segments{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:6px 0 10px;
}
.bk-availability .segments .seg{
  display:inline-block;
  width:28px; height:10px; border-radius:999px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}
.seg--green{ background:var(--tvt-green, #00B050); }
.seg--grey { background:#e7e7e7; }
.seg--red  { background:#e53935; }

.bk-availability .avail-line{
  display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 16px; border:2px solid var(--tvt-green, #00B050);
  border-radius:14px; background:#f8fbf8; min-width:138px;
}
.bk-availability .avail-line .number{
  display:grid; place-items:center; width:48px; height:48px;
  border-radius:999px; border:2px solid rgba(0,0,0,.12);
  background:#fff; font-weight:800; font-size:1.15rem;
}
.bk-availability .avail-line .text{
  font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  font-size:.8rem; color:#2e2e2e;
}

/* CTA */
.session-cta { margin-top: 10px; }
.session-cta .btn { padding: 10px 18px; border-radius: 999px; }

/* Inline form is no longer used (modal instead), but keep minimal styling for safety */
.session-form-slot{ display:none; }

/* === Modal overlay (self-contained fallback if site modal.css not present) === */
.tvt-modal[hidden] { display: none !important; }
.tvt-modal {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); z-index: 1000; padding: 20px;
}
.tvt-modal.is-open { display: flex; }
.tvt-modal__dialog {
  background: #fff; width: 100%; max-width: 560px;
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
.tvt-modal__hd, .tvt-modal__ft { padding: 14px 16px; background: #f8f8f8; }
.tvt-modal__bd { padding: 14px 16px; max-height: 70vh; overflow: auto; }
.tvt-modal__title { margin: 0; font-size: 1.1rem; }
.tvt-modal__meta { margin: 6px 0 0; }

/* Modal form fields */
.tvt-inline-form .form-row{ margin: 6px 0; }
.tvt-inline-form .form-row.checkbox label{ display:inline-flex; gap:8px; align-items:center; }
.tvt-inline-form input[type="text"],
.tvt-inline-form input[type="email"],
.tvt-inline-form input[type="tel"],
.tvt-inline-form textarea{
  width:100%; border:2px solid #e7e7e7; border-radius:10px;
  padding:8px 10px; font-size:1rem; box-sizing:border-box;
}
.tvt-inline-form .form-actions{ display:flex; gap:10px; justify-content:center; margin-top:10px; }

/* ——— Green accent for the booking modal ——— */
.tvt-modal--green .tvt-modal__dialog { border: 3px solid #1fa64b; }
.tvt-modal--green .tvt-modal__hd { background: #e9f8ee; border-bottom: 2px solid #1fa64b; }
.tvt-modal--green .tvt-modal__title { color: #137a36; }

/* ——— Children repeater (enhances existing childName[] / childAge[] fields) ——— */
.bm-children .child-row{
  display:grid; grid-template-columns: 1fr 120px 44px; gap:8px; align-items:center; margin-bottom:8px;
}
.bm-children .child-row .child-remove{
  display:inline-grid; place-items:center; width:40px; height:40px;
  border-radius:50%; border:2px solid #e7e7e7; background:#fff; font-weight:800;
}
.child-actions{ margin-top:6px; display:flex; gap:8px; }
/* Green booking modal accent */
.tvt-modal--green .tvt-modal__dialog { border: 3px solid #1fa64b; }
.tvt-modal--green .tvt-modal__hd { background: #e9f8ee; border-bottom: 2px solid #1fa64b; }
.tvt-modal--green .tvt-modal__title { color: #137a36; }

/* Children repeater layout */
.bm-children .child-row{
  display:grid; grid-template-columns:1fr 120px 44px; gap:8px; align-items:center; margin-bottom:8px;
}
.bm-children .child-row .child-remove{
  display:inline-grid; place-items:center; width:40px; height:40px;
  border-radius:50%; border:2px solid #e7e7e7; background:#fff; font-weight:800;
}
.child-actions{ margin-top:6px; display:flex; gap:8px; }

/* Fallback popup + confetti (only used if your built-in popup isn't present) */
.tvt-pop--overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:9999; }
.tvt-pop__card{ background:#fff; border-radius:16px; padding:16px 18px; width:min(480px,92vw); box-shadow:0 10px 40px rgba(0,0,0,.25); text-align:center; }
.tvt-pop__hd{ font-size:1.35rem; font-weight:800; margin-bottom:6px; }
.tvt-pop__bd{ font-size:1rem; margin-bottom:10px; }
.tvt-pop__ref{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tvt-pop__ft .btn{ min-width:140px; }
.tvt-pop.is-success .tvt-pop__hd{ color:#137a36; }
.tvt-pop.is-waitlist .tvt-pop__hd{ color:#b26a00; }

/* Tiny confetti */
.tvt-confetti-layer{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:10000; }
.tvt-confetti{ position:absolute; top:-10px; width:10px; height:16px; border-radius:2px; opacity:.95; animation: tvt-fall .9s ease-in forwards; }
@keyframes tvt-fall { to { transform: translate3d(0, 110vh, 0) rotate(720deg); opacity: 0.9; } }