/* The Pool By The Bain: booking page. Goes in the plugin as assets/pbb-booking.css
   Phone first. Everything is scoped under .pbb so it cannot leak into the theme. */

.pbb {
	--ink: #0E3A47; --ink-soft: #3E5A60; --deep: #0A2E3A; --sand: #F3EEE6; --aqua: #7FD1D6;
	--line: #B9C9C9; --paper: #fff; --err: #9B1C1C;
	box-sizing: border-box; max-width: 980px; margin: 0 auto; padding: 16px 16px 360px; /* fallback; the script sets the real space from the bar's height */
	font-family: var(--pbb-body, Inter, system-ui, -apple-system, "Segoe UI", sans-serif); font-size: 16px; line-height: 1.5; color: var(--ink);
}
.pbb *, .pbb *::before, .pbb *::after { box-sizing: border-box; }
.pbb h2 { margin: 0 0 12px; font-family: var(--pbb-display, Fraunces, Georgia, serif); font-weight: 400; font-size: 32px; line-height: 1.1; }
.pbb h3 { margin: 24px 0 8px; font-size: 16px; font-weight: 600; }
.pbb a { color: inherit; }
.pbb p { margin: 0 0 8px; }
.pbb-small { font-size: 14px; color: var(--ink-soft); }
.pbb-center { text-align: center; }
.pbb-hello { margin: 0 0 4px; font-size: 16px; }
.pbb-eyebrow { margin: 0 0 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #1B6E7C; }
.pbb-error { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #FBE9E9; color: var(--err); font-size: 15px; }
.pbb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* month picker: a plain dropdown, so phones show their own easy picker */
.pbb-month { margin: 0 0 12px; }
.pbb-month label { display: block; margin: 0 0 6px; font-weight: 600; font-size: 15px; }
.pbb-month select { width: 100%; max-width: 360px; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1.5px solid #8FA6A8; background: #fff; color: var(--ink); font: inherit; font-size: 17px; }

/* day strip: swipes sideways on a phone */
.pbb-dows { display: none; }
.pbb-days { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-snap-type: x proximity; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; }
.pbb-day { flex: 0 0 auto; scroll-snap-align: start; min-width: 64px; min-height: 68px; padding: 6px 8px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.pbb-day b { display: block; font-size: 18px; }
.pbb-day.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* phone: the bar is a small strip until you tap Review and pay, then it opens to the full list */
.pbb-bar:not(.is-open) .pbb-detail { display: none; }
.pbb-bar.is-open .pbb-mini { display: none; }
.pbb-mini .pbb-bar-row { margin-bottom: 4px; }
.pbb-mini .pbb-btn-pay { margin-top: 6px; min-height: 52px; }
.pbb-fold { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 15px; cursor: pointer; }
.pbb-detail .pbb-bar-row { gap: 10px; }
.pbb-detail .pbb-bar-row > div:first-child { flex: 1; }

/* time tiles: two across on a phone */
.pbb-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pbb-time { min-width: 0; min-height: 60px; padding: 8px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.pbb-time b { display: block; font-weight: 600; white-space: nowrap; }
.pbb-time span { font-size: 13px; }
.pbb-time.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pbb-time:disabled { border-style: dashed; background: #E8E3D9; color: #46585A; cursor: not-allowed; }

.pbb-swimmers { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 6px; }
.pbb-swimmers-label { font-weight: 600; font-size: 15px; }
.pbb-stepper { display: flex; align-items: center; gap: 12px; }
.pbb-sw-note { margin: 0 0 8px; }
.pbb-round { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font: inherit; font-size: 24px; cursor: pointer; }
.pbb-round:disabled { opacity: .35; cursor: not-allowed; }
.pbb-count { min-width: 28px; text-align: center; font-family: var(--pbb-display, Fraunces, Georgia, serif); font-size: 26px; }
.pbb-bar .pbb-round { border-color: rgba(255, 255, 255, .6); background: transparent; color: #fff; }
.pbb-bar .pbb-count { color: #fff; }

/* summary bar: stuck to the bottom of the phone screen */
.pbb-bar { max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--ink); color: #fff; box-shadow: 0 -6px 24px rgba(10, 46, 58, .25); }
.pbb-bar-empty { text-align: center; background: var(--paper); color: var(--ink-soft); }
.pbb-bar-empty p { margin: 0; }
.pbb-bar-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; font-size: 14px; }
.pbb-total { font-family: var(--pbb-display, Fraunces, Georgia, serif); font-size: 22px; text-align: right; }
.pbb-bar .pbb-check { font-size: 13px; color: #D6E8EA; }
.pbb-bar .pbb-check a { color: #fff; }
.pbb-bar .pbb-small { color: #B9D6DA; }
.pbb-bar .pbb-error { margin: 6px 0; }
.pbb-lines { list-style: none; margin: 0 0 8px; padding: 0; }
.pbb-lines li { padding: 8px 0 4px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 14px; line-height: 1.3; }
.pbb-line-top { display: flex; align-items: center; gap: 10px; }
.pbb-line-when { flex: 1; }
.pbb-lines .pbb-swimmers { margin: 2px 0 4px; }
.pbb-line-price { font-weight: 600; white-space: nowrap; }
.pbb-x { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }

.pbb-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px; font: inherit; font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; }
.pbb-btn:disabled { opacity: .6; cursor: wait; }
.pbb .pbb-btn-pay { background: var(--aqua); color: var(--deep); margin-top: 8px; }
.pbb .pbb-btn-dark { background: var(--ink); color: #fff; margin-top: 12px; } /* .pbb prefix beats the link colour rule above */

.pbb-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 14px; line-height: 1.4; }
.pbb-check input { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--aqua); }

/* sign-in / sign-up card */
.pbb-card { margin: 20px 0; padding: 20px; border-radius: 22px; background: var(--paper); }
.pbb-card h2, .pbb-card h3 { margin-top: 0; }
.pbb-narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.pbb-card label { display: block; margin: 12px 0 6px; font-weight: 600; font-size: 15px; }
.pbb-card .pbb-check { font-weight: 400; }
.pbb-card input[type=text], .pbb-card input[type=email], .pbb-card input[type=tel], .pbb-card input[type=password], .pbb-card input:not([type]) {
	width: 100%; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1.5px solid #8FA6A8; background: #fff; color: var(--ink); font: inherit; font-size: 17px; /* 16px or more stops iPhones zooming in */
}
.pbb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pbb-tabs { display: flex; gap: 8px; margin: 12px 0 4px; }
.pbb-tabs button { flex: 1; min-height: 48px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.pbb-tabs button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.pbb :focus-visible { outline: 3px solid #1B6E7C; outline-offset: 2px; }

/* bigger screens: times in a row, summary bar becomes a card */
@media (min-width: 720px) {
	.pbb { padding-bottom: 48px !important; }
	.pbb-bar { max-height: none; overflow: visible; }
	.pbb-mini { display: none !important; }
	.pbb-bar:not(.is-open) .pbb-detail { display: block; }
	.pbb-fold { display: none; }
	.pbb-times { grid-template-columns: repeat(4, 1fr); }
	.pbb-dows { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 420px; margin: 4px 0 4px; text-align: center; font-size: 13px; color: var(--ink-soft); }
	.pbb-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 420px; margin: 0; padding: 0 0 8px; overflow: visible; }
	.pbb-day { min-width: 0; min-height: 52px; padding: 4px; border-radius: 12px; }
	.pbb-day .pbb-dow { display: none; }
	.pbb-day b { font-size: 17px; }
	.pbb-day:hover:not(.is-on) { border-color: var(--ink); }
	.pbb-bar { position: static; margin-top: 28px; padding: 24px; border-radius: 24px; box-shadow: none; }
	.pbb-bar-empty { background: transparent; }
	.pbb-btn { width: auto; min-width: 280px; }
}

/* desktop: choices on the left, the summary card stays in view on the right */
@media (min-width: 960px) {
	/* the theme keeps page text in a narrow column; this lets the booking page use the width of the screen */
	.pbb.pbb { width: min(1120px, calc(100vw - 64px)); max-width: none; position: relative; left: 50%; margin-left: calc(min(1120px, calc(100vw - 64px)) / -2) !important; margin-right: 0 !important; padding-top: 32px; }
	.pbb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
	.pbb-side { position: sticky; top: 24px; }
	.pbb-side .pbb-bar { margin-top: 0; }
	.pbb-side .pbb-bar-empty { border: 1.5px dashed var(--line); background: transparent; }
	.pbb-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pbb-btn { width: 100%; min-width: 0; }
	.pbb h2 { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) { .pbb * { scroll-behavior: auto !important; transition: none !important; } }

/* voucher / promo code box */
.pbb-sr { position: absolute; left: -9999px; }
.pbb-link { padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; min-height: 44px; }
.pbb-offer { display: flex; gap: 8px; margin: 6px 0; }
.pbb-offer input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #8FA6A8; background: #fff; color: var(--ink); font: inherit; font-size: 17px; text-transform: uppercase; }
.pbb-btn-small { flex: 0 0 auto; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.pbb-offer-on { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 15px; color: #CFF0F2; }

/* Wide screens: the calendar on the left, the times for the chosen day beside it. */
@media (min-width: 960px) {
	.pbb-pick-day h3, .pbb-pick-time h3 { margin-top: 0; }
	.pbb-pick { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
	.pbb-pick .pbb-dows, .pbb-pick .pbb-days { max-width: 330px; }
	.pbb-pick .pbb-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pbb-pick-time { position: sticky; top: 24px; }
}

.pbb-arrival { background: #E6F4F2; border-radius: 12px; padding: 12px 14px; margin: 14px 0; text-align: left; }
.pbb-arrival p { margin: 4px 0 0; }

/* Paying on a computer: the form sits where the summary was; the rest of the page is held still. */
.pbb-paybox { background: var(--paper, #fff); border: 1.5px solid var(--line, #cfe3e4); border-radius: 24px; padding: 20px; }
.pbb-paybox h2 { margin-top: 0; }
.pbb.is-paying .pbb-main { opacity: .45; pointer-events: none; }

.pbb-timer b { font-variant-numeric: tabular-nums; }
.pbb-timer.is-low { color: #A33A12; font-weight: 600; }

/* 1.3.2: Paying on a phone. The secure payment form sat inside the page gutter (16px) AND the white card's padding (20px),
   leaving it only about 320px on an iPhone, so Stripe's form ran off the right-hand side. On phones the payment card now
   runs to the screen edges and the form uses the card's full width; the heading and text keep their padding. */
.pbb #pbb-pay-box { min-width: 0; max-width: none; }
@media (max-width: 719px) {
	.pbb #pbb-pay-box { margin-left: -20px; margin-right: -20px; }
	.pbb .pbb-card:has(#pbb-pay-box) { margin-left: -16px; margin-right: -16px; max-width: none; border-radius: 0; }
}