/**
 * Campsite Booking System Frontend Styles
 * Mobile-first, minimal, functional
 */

/* ─────────────────────────────────────────────────────────────────────
 * Defensive root reset — isolates the booking form from theme inheritance
 * Every property below sets an explicit value so themes can't leak in.
 * ───────────────────────────────────────────────────────────────────── */
#tpcbs-booking-form {
    color: #1f2937;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    box-sizing: border-box;
    background: transparent;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
}

#tpcbs-booking-form *,
#tpcbs-booking-form *::before,
#tpcbs-booking-form *::after {
    box-sizing: border-box;
}

#tpcbs-booking-form h1,
#tpcbs-booking-form h2,
#tpcbs-booking-form h3,
#tpcbs-booking-form h4,
#tpcbs-booking-form h5,
#tpcbs-booking-form h6 {
    color: #111827;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 16px 0;
    padding: 0;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
    background: transparent;
}
#tpcbs-booking-form h2 { font-size: 24px; }
#tpcbs-booking-form h3 { font-size: 20px; }
#tpcbs-booking-form h4 { font-size: 18px; }

#tpcbs-booking-form p {
    color: #1f2937;
    margin: 0 0 12px 0;
    font-size: 16px;
    line-height: 1.5;
}
#tpcbs-booking-form small,
#tpcbs-booking-form .tpcbs-field-note {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
    display: block;
    margin-top: 4px;
}

#tpcbs-booking-form label,
#tpcbs-booking-form .tpcbs-label {
    color: #1f2937;
    font-weight: 500;
    font-size: 15px;
    display: block;
    margin-bottom: 6px;
    line-height: 1.4;
}

#tpcbs-booking-form input[type="text"],
#tpcbs-booking-form input[type="date"],
#tpcbs-booking-form input[type="number"],
#tpcbs-booking-form input[type="email"],
#tpcbs-booking-form input[type="tel"],
#tpcbs-booking-form select,
#tpcbs-booking-form textarea {
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    text-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#tpcbs-booking-form input:focus,
#tpcbs-booking-form select:focus,
#tpcbs-booking-form textarea:focus {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
    border-color: #2563eb;
}

#tpcbs-booking-form button {
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

#tpcbs-booking-form a {
    color: #2563eb;
    text-decoration: underline;
    background: transparent;
}
#tpcbs-booking-form a:hover {
    color: #1d4ed8;
}

#tpcbs-booking-form ul,
#tpcbs-booking-form ol {
    margin: 0 0 12px 0;
    padding-left: 20px;
}
#tpcbs-booking-form li {
    color: #1f2937;
    margin-bottom: 4px;
}

/* =====================================================
   REUSABLE UI COMPONENTS (Namespaced with .mhb)
   ===================================================== */

/* Base Wrapper */
.mhb {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	box-sizing: border-box;
}

.mhb *,
.mhb *::before,
.mhb *::after {
	box-sizing: inherit;
}

/* Card Component */
.tpcbs-card {
	max-width: 400px;
	margin: 30px auto;
	padding: 20px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tpcbs-card__title {
	margin-top: 0;
	margin-bottom: 20px;
	text-align: center;
	color: #2271b1;
	font-size: 20px;
	font-weight: 600;
}

/* Button Component */
.tpcbs-btn {
	display: inline-block;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s;
	line-height: 1.5;
}

.tpcbs-btn--primary {
	background: #2271b1;
	color: white;
}

.tpcbs-btn--primary:hover {
	background: #135e96;
	color: white;
}

.tpcbs-btn--logout {
	background: #dc3232;
	color: white;
}

.tpcbs-btn--logout:hover {
	background: #a02222;
	color: white;
}

/* =====================================================
   WARDEN LOGIN FORM STYLING
   ===================================================== */

.tpcbs-warden-login {
	/* Extends .tpcbs-card */
}

/* Style wp_login_form() elements ONLY within warden login */
.tpcbs-warden-login form {
	margin: 0;
}

.tpcbs-warden-login label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
	font-size: 16px;
}

.tpcbs-warden-login input[type="text"],
.tpcbs-warden-login input[type="password"] {
	width: 100%;
	padding: 12px 16px;
	font-size: 16px;
	line-height: 1.5;
	border: 2px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	transition: border-color 0.2s;
	margin-bottom: 15px;
}

.tpcbs-warden-login input[type="text"]:focus,
.tpcbs-warden-login input[type="password"]:focus {
	outline: none;
	border-color: #2271b1;
}

.tpcbs-warden-login .login-remember {
	margin-bottom: 15px;
}

.tpcbs-warden-login .login-remember label {
	display: inline;
	font-weight: normal;
	font-size: 14px;
	margin-left: 5px;
}

.tpcbs-warden-login input[type="checkbox"] {
	margin: 0;
	transform: scale(1.1);
	cursor: pointer;
}

.tpcbs-warden-login input[type="submit"] {
	width: 100%;
	padding: 14px 24px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	color: #fff;
	background: #2271b1;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s;
	min-height: 50px;
}

.tpcbs-warden-login input[type="submit"]:hover {
	background: #135e96;
}

/* =====================================================
   WARDEN FRONTEND VIEWS
   ===================================================== */

.tpcbs-warden-frontend {
	max-width: 100%;
	padding: 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tpcbs-warden-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 15px;
	background: #f9f9f9;
	border-radius: 8px;
}

.tpcbs-warden-user {
	font-size: 14px;
	color: #666;
}

.tpcbs-warden-message {
	padding: 20px;
	text-align: center;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 8px;
	color: #333;
}

.tpcbs-warden-section {
	margin-bottom: 20px;
}

.tpcbs-warden-frontend {
	container-type: inline-size;
	container-name: tpcbswarden;
}

.tpcbs-warden-section-header {
	background: #2271b1;
	color: white;
	padding: 8px 12px;
	margin: 0 0 12px 0;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

/* Wider screens can afford a slightly larger header. */
@container tpcbswarden (min-width: 480px) {
	.tpcbs-warden-section-header { font-size: 16px; padding: 10px 14px; }
}
@container tpcbswarden (max-width: 420px) {
	.tpcbs-warden-today-grid { grid-template-columns: 1fr; }
}

.tpcbs-warden-today-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tpcbs-warden-today-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: 12px;
}

.tpcbs-warden-today-item {
	background: #fff;
	border: 1px solid #d6dce1;
	border-left: 4px solid #2271b1;
	border-radius: 15px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	cursor: pointer;
	position: relative;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.tpcbs-warden-card-head {
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 6px;
	padding-bottom: 4px;
}

.tpcbs-warden-pitch {
	font-size: 18px;
	font-weight: 700;
	color: #2271b1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tpcbs-warden-zone {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tpcbs-warden-reg {
	font-family: monospace;
	font-size: 16px;
	font-weight: 700;
	color: #111;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tpcbs-warden-reg--surname {
	font-family: inherit;
	color: #8a2b2b;
	text-transform: none;
	letter-spacing: 0;
}

.tpcbs-warden-reg-missing {
	font-family: inherit;
	font-style: italic;
	color: #999;
	font-weight: 400;
}

.tpcbs-warden-vehicle-details {
	font-size: 12px;
	color: #666;
	margin-top: 4px;
}

.tpcbs-warden-vehicle-details span {
	margin-right: 6px;
}

@media (max-width: 640px) {
	/* In the field on a phone — one card per row, full width. */
	.tpcbs-warden-today-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
	.tpcbs-warden-pitch {
		font-size: 16px;
	}
}

.tpcbs-warden-empty {
	text-align: center;
	padding: 30px;
	color: #666;
	background: #f9f9f9;
	border-radius: 8px;
}

/* ── L1 Today View: check-in card fields ─────────────────────────────────── */

.tpcbs-warden-guest-name {
	font-size: 16px;
	font-weight: 700;
	color: #111;
	margin: 2px 0 2px;
	line-height: 1.2;
}

.tpcbs-warden-party {
	font-size: 13px;
	color: #333;
	margin-bottom: 2px;
}

.tpcbs-warden-party-tents {
	color: #555;
	margin-left: 4px;
}

.tpcbs-warden-stay {
	font-size: 13px;
	color: #333;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin-bottom: 2px;
}

.tpcbs-warden-nights {
	font-weight: 600;
}

.tpcbs-warden-dates {
	color: #555;
}

/* ETA badge — glanceable outdoors. */
.tpcbs-warden-eta-badge {
	display: inline-block;
	align-self: flex-start;
	background: #1e3a5f;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 12px;
	margin: 2px 0;
	letter-spacing: 0.02em;
}

.tpcbs-warden-addons {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 4px 0 2px;
}

.tpcbs-warden-addon-chip {
	background: #eef2f6;
	color: #33414f;
	border: 1px solid #d3dde6;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	line-height: 1.4;
}

.tpcbs-warden-pay-row {
	margin: 4px 0;
}

/* Payment pill — solid bg, white text, uppercase, high daylight contrast. */
.tpcbs-warden-pay-pill {
	display: inline-block;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3px 10px;
	border-radius: 12px;
	white-space: nowrap;
}

.tpcbs-warden-pay-pill--green {
	background: #1f7a3d;
}

.tpcbs-warden-pay-pill--amber {
	background: #9a5d00; /* WCAG AA contrast for white text — was #b76e00 */
}

.tpcbs-warden-pay-pill--red {
	background: #b32424;
}

/* Check-in toggle + arrived state. */
.tpcbs-warden-checkin {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #eee;
}

.tpcbs-warden-arrived-stamp {
	font-size: 13px;
	font-weight: 700;
	color: #1f7a3d;
	white-space: nowrap;
}

.tpcbs-warden-arrived-time {
	font-weight: 600;
	color: #2c5f3f;
}

.tpcbs-warden-checkin-btn {
	-webkit-appearance: none;
	appearance: none;
	border: 2px solid #1f7a3d;
	background: #1f7a3d;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 9px 14px;
	border-radius: 8px;
	cursor: pointer;
	min-height: 40px;
	flex: 1 1 auto;
	transition: background 0.15s ease;
}

.tpcbs-warden-checkin-btn:hover:not(:disabled) {
	background: #196530;
}

.tpcbs-warden-checkin-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Once arrived, the toggle becomes a quiet "Undo". */
.tpcbs-warden-checkin-btn.is-arrived {
	background: #fff;
	color: #666;
	border-color: #ccc;
	flex: 0 0 auto;
}

.tpcbs-warden-checkin-btn.is-arrived:hover:not(:disabled) {
	background: #f3f3f3;
}

/* Arrived cards visually settle so the warden sees who's still to come. */
.tpcbs-warden-today-item--arrived {
	border-color: #1f7a3d;
	background: #f4faf6;
	opacity: 0.9;
	order: 2;
}

.tpcbs-warden-today-item--arrived .tpcbs-warden-pitch {
	color: #1f7a3d;
}

/* L2 owner card: "On site" badge for arrived guests. */
.tpcbs-warden-onsite-badge {
	display: inline-block;
	background: #1f7a3d;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 9px;
	border-radius: 12px;
	white-space: nowrap;
}

/* ── L1 arrival lookup ───────────────────────────────────────────────────── */

.tpcbs-warden-lookup__form {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.tpcbs-warden-lookup__input {
	flex: 1 1 auto;
	min-height: 48px;
	font-size: 16px; /* >=16px avoids iOS zoom-on-focus */
	padding: 10px 14px;
	border: 2px solid #c7d0d8;
	border-radius: 10px;
}

.tpcbs-warden-lookup__input:focus {
	outline: none;
	border-color: #2271b1;
}

.tpcbs-warden-lookup__btn {
	flex: 0 0 auto;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: #2271b1;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 0 18px;
	min-height: 48px;
	border-radius: 10px;
	cursor: pointer;
}

.tpcbs-warden-lookup__btn:hover {
	background: #185a8d;
}

.tpcbs-warden-lookup__hint {
	color: #5a6b7a;
	padding: 10px 2px;
	font-size: 14px;
}

.tpcbs-warden-arrival-card {
	background: #fff;
	border: 2px solid #2271b1;
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 10px;
}

.tpcbs-warden-arrival-greet {
	font-size: 17px;
	font-weight: 700;
	color: #111;
	line-height: 1.3;
	margin-bottom: 10px;
}

.tpcbs-warden-arrival-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 6px 14px;
	font-size: 14px;
	color: #33414f;
}

.tpcbs-warden-arrival-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #8a97a3;
	font-weight: 700;
}

.tpcbs-warden-reg-inline {
	font-family: monospace;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tpcbs-warden-arrival-actions {
	margin-top: 12px;
}

/* Tap-to-call button (Today View rows + arrival cards). */
.tpcbs-warden-call-btn {
	-webkit-appearance: none;
	appearance: none;
	border: 2px solid #2271b1;
	background: #2271b1;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 9px 14px;
	border-radius: 8px;
	cursor: pointer;
	min-height: 40px;
}

.tpcbs-warden-call-btn:hover:not(:disabled) {
	background: #185a8d;
}

.tpcbs-warden-call-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.tpcbs-warden-call-btn.is-revealed {
	background: #1f7a3d;
	border-color: #1f7a3d;
}

.tpcbs-warden-advanced {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 3px solid #ddd;
}

.tpcbs-warden-filters {
	background: #f9f9f9;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 8px;
	border: 1px solid #ddd;
}

.tpcbs-warden-filter-group {
	margin-bottom: 12px;
}

.tpcbs-warden-filter-group:last-child {
	margin-bottom: 0;
}

.tpcbs-warden-filter-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	font-size: 14px;
}

.tpcbs-warden-filter-group input,
.tpcbs-warden-filter-group select {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
}

.tpcbs-warden-filter-actions {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.tpcbs-warden-button {
	flex: 1;
	padding: 12px;
	font-size: 16px;
	font-weight: 600;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	text-align: center;
}

.tpcbs-warden-button-primary {
	background: #2271b1;
	color: white;
}

.tpcbs-warden-button-secondary {
	background: #f0f0f0;
	color: #333;
}

.tpcbs-warden-booking-card {
	background: white;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;
}

.tpcbs-warden-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.tpcbs-warden-status-CONFIRMED {
	background: #d4edda;
	color: #155724;
}

.tpcbs-warden-status-COMPLETED {
	background: #d1ecf1;
	color: #0c5460;
}

.tpcbs-warden-status-CANCELLED {
	background: #f8d7da;
	color: #721c24;
}

.tpcbs-warden-field {
	margin-bottom: 8px;
}

.tpcbs-warden-label {
	font-weight: 600;
	color: #666;
	font-size: 13px;
	display: inline-block;
	min-width: 80px;
}

.tpcbs-warden-value {
	color: #333;
	font-size: 14px;
}

@media (min-width: 768px) {
	.tpcbs-warden-frontend {
		padding: 20px;
		max-width: 800px;
		margin: 0 auto;
	}
	
	.tpcbs-warden-filter-actions {
		justify-content: flex-start;
	}
	
	.tpcbs-warden-button {
		flex: 0 0 auto;
		min-width: 120px;
	}
}

/* =====================================================
   BOOKING FORM STYLES (Pre-existing)
   ===================================================== */

/* Base Container */
#tpcbs-booking-form .tpcbs-booking-form {
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

/* Step Containers */
#tpcbs-booking-form .tpcbs-step {
	margin-bottom: 30px;
	padding: 20px;
	background: #f9f9f9;
	border-radius: 8px;
	border: 1px solid #ddd;
}

#tpcbs-booking-form .tpcbs-step h3 {
	margin: 0 0 20px 0;
	font-size: 20px;
	font-weight: 600;
	color: #111827;
}

#tpcbs-booking-form .tpcbs-zone-picker {
	margin-bottom: 24px;
}

#tpcbs-booking-form .tpcbs-zone-picker__heading {
	margin: 0 0 20px 0;
	font-size: 22px;
	font-weight: 600;
	color: #333;
	text-align: center;
}

/* ── Zone grid: 1 col mobile → 2 col tablet → up to 3 col desktop ── */
#tpcbs-booking-form .tpcbs-zone-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (min-width: 640px) {
	#tpcbs-booking-form .tpcbs-zone-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── Zone card ── */
#tpcbs-booking-form .tpcbs-zone-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px 12px 14px;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
	min-height: 120px; /* 44px minimum touch target guaranteed by flex height */
	line-height: 1.3;
	color: #333;
}

#tpcbs-booking-form .tpcbs-zone-card:hover {
	border-color: #0073aa;
	box-shadow: 0 4px 14px rgba(0, 115, 170, 0.14);
}

#tpcbs-booking-form .tpcbs-zone-card.is-selected {
	border-color: #0073aa;
	background: #f0f8ff;
	box-shadow: 0 4px 14px rgba(0, 115, 170, 0.18);
}

#tpcbs-booking-form .tpcbs-zone-icon {
	display: block;
	margin: 0 auto 8px;
	color: #0073aa;
	width: 36px;
	height: 36px;
}

#tpcbs-booking-form .tpcbs-zone-card__name {
	margin: 0 0 4px 0;
	font-size: 16px;
	font-weight: 700;
	color: #333;
}

#tpcbs-booking-form .tpcbs-zone-card__desc {
	margin: 0 0 6px 0;
	font-size: 13px;
	color: #666;
	line-height: 1.3;
}

#tpcbs-booking-form .tpcbs-zone-card__price {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #0073aa;
}

#tpcbs-booking-form .tpcbs-zone-card__photo {
	width: 100%;
	margin-top: 10px;
	border-radius: 6px;
	overflow: hidden;
}

#tpcbs-booking-form .tpcbs-zone-card__img {
	width: 100%;
	height: 80px;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}

#tpcbs-booking-form .tpcbs-pitch-image {
	margin: 8px 0;
}

#tpcbs-booking-form .tpcbs-pitch-image img {
	width: 100%;
	max-width: 220px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
}

#tpcbs-selected-pitch-preview {
	margin-bottom: 15px;
}

#tpcbs-booking-form .tpcbs-selected-pitch-preview__img img {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}

#tpcbs-booking-form .tpcbs-selected-pitch-preview__text {
	margin-top: 8px;
}

/* Form Groups */
#tpcbs-booking-form .tpcbs-form-group {
	margin-bottom: 20px;
}

#tpcbs-booking-form .tpcbs-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 16px;
}

/* Labels */
#tpcbs-booking-form .tpcbs-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
	font-size: 16px;
}

/* Input Fields */
#tpcbs-booking-form .tpcbs-input {
	width: 100%;
	padding: 12px 16px;
	font-size: 16px;
	line-height: 1.5;
	border: 2px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	transition: border-color 0.2s;
	max-width: 100%;
}

#tpcbs-booking-form .tpcbs-input:focus {
	outline: none;
	border-color: #0073aa;
}

#tpcbs-booking-form .tpcbs-input.tpcbs-invalid {
	border-color: #c62828;
}

#tpcbs-booking-form .tpcbs-input:disabled {
	background: #f0f0f0;
	cursor: not-allowed;
}

/* Date input specific fixes for mobile */
#tpcbs-booking-form .tpcbs-date-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Select Dropdown */
#tpcbs-booking-form .tpcbs-select {
	appearance: none;
	background: #fff;
	background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27%3E%3Cpath fill=%27%23333%27 d=%27M0 0l6 8 6-8z%27/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
	padding-right: 36px;
}

/* Field Notes */
#tpcbs-booking-form .tpcbs-field-note {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: #666;
	font-style: italic;
}

#tpcbs-booking-form .tpcbs-field-error {
	display: none;
	margin-top: 6px;
	color: #c62828;
	font-size: 13px;
}

/* Buttons */
#tpcbs-booking-form .tpcbs-button {
	display: inline-block;
	width: 100%;
	padding: 14px 24px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	color: #fff;
	background: #0073aa;
	border: 1px solid #0073aa;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	min-height: 50px;
}

#tpcbs-booking-form .tpcbs-button:hover {
	background: #005a87;
	border-color: #005a87;
	color: #fff;
}

#tpcbs-booking-form .tpcbs-button:disabled {
	color: #6b7280;
	background: #e5e7eb;
	border-color: #d1d5db;
	cursor: not-allowed;
	opacity: 1;
}

#tpcbs-booking-form .tpcbs-button-primary {
	color: #fff;
	background: #0073aa;
	border-color: #0073aa;
}

/* ── Back link ── */
#tpcbs-booking-form .tpcbs-back-link {
	display: inline-block;
	margin-bottom: 12px;
	font-size: 14px;
	color: #0073aa;
	text-decoration: none;
	padding: 6px 0;
	cursor: pointer;
}

#tpcbs-booking-form .tpcbs-back-link:hover {
	text-decoration: underline;
}

/* ── Form card ── */
#tpcbs-booking-form .tpcbs-form-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px 20px;
	margin-bottom: 16px;
}

#tpcbs-booking-form .tpcbs-form-card__title {
	margin: 0 0 20px 0;
	font-size: 20px;
	font-weight: 700;
	color: #333;
}

/* Form fields (replaces .tpcbs-form-group) */
#tpcbs-booking-form .tpcbs-form-field {
	margin-bottom: 18px;
}

#tpcbs-booking-form .tpcbs-form-actions {
	margin-top: 24px;
}

/* ── +/− Quantity wrapper ── */
#tpcbs-booking-form .tpcbs-qty-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 160px;
}

#tpcbs-booking-form .tpcbs-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 44×44px minimum touch target */
	width: 44px;
	height: 44px;
	border: 2px solid #0073aa;
	border-radius: 8px;
	background: #fff;
	color: #0073aa;
	font-size: 22px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
	transition: background 0.15s, color 0.15s;
	flex-shrink: 0;
}

#tpcbs-booking-form .tpcbs-qty-btn:hover {
	background: #0073aa;
	color: #fff;
}

#tpcbs-booking-form .tpcbs-qty-btn:disabled {
	border-color: #ccc;
	color: #ccc;
	cursor: not-allowed;
}

#tpcbs-booking-form .tpcbs-qty-input {
	width: 64px;
	height: 44px;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	border: 2px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
	-moz-appearance: textfield;
}

#tpcbs-booking-form .tpcbs-qty-input::-webkit-inner-spin-button,
#tpcbs-booking-form .tpcbs-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ── Radio card group (caravan sizes) ── */
#tpcbs-booking-form .tpcbs-radio-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (min-width: 480px) {
	#tpcbs-booking-form .tpcbs-radio-group {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

#tpcbs-booking-form .tpcbs-radio-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	min-height: 44px;
	background: #fff;
	transition: border-color 0.15s, background 0.15s;
	flex: 1 1 auto;
}

#tpcbs-booking-form .tpcbs-radio-card input[type="radio"] {
	margin-top: 2px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	cursor: pointer;
}

#tpcbs-booking-form .tpcbs-radio-card:has(input:checked) {
	border-color: #0073aa;
	background: #f0f8ff;
}

#tpcbs-booking-form .tpcbs-radio-card__body {
	display: flex;
	flex-direction: column;
}

#tpcbs-booking-form .tpcbs-radio-card__title {
	font-size: 15px;
	font-weight: 600;
	color: #333;
}

#tpcbs-booking-form .tpcbs-radio-card__desc {
	font-size: 13px;
	color: #666;
	margin-top: 2px;
}

/* Slide-in dimensions block */
#tpcbs-booking-form .tpcbs-caravan-dimensions {
	background: #f9f9f9;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 14px;
	margin-top: -8px;
	margin-bottom: 18px;
}

/* ── Toggle switch ── */
#tpcbs-booking-form .tpcbs-toggle-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	min-height: 44px;
}

#tpcbs-booking-form .tpcbs-toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

#tpcbs-booking-form .tpcbs-toggle-pill {
	display: inline-flex;
	width: 52px;
	height: 28px;
	background: #ccc;
	border-radius: 14px;
	transition: background 0.2s;
	position: relative;
	flex-shrink: 0;
}

#tpcbs-booking-form .tpcbs-toggle-input:checked ~ .tpcbs-toggle-pill {
	background: #0073aa;
}

#tpcbs-booking-form .tpcbs-toggle-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	transition: transform 0.2s;
}

#tpcbs-booking-form .tpcbs-toggle-input:checked ~ .tpcbs-toggle-pill .tpcbs-toggle-knob {
	transform: translateX(24px);
}

#tpcbs-booking-form .tpcbs-toggle-label {
	color: #111827 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

#tpcbs-booking-form .tpcbs-toggle-label,
#tpcbs-booking-form .tpcbs-awning-toggle-label,
#tpcbs-booking-form .tpcbs-toggle-pill-label,
#tpcbs-booking-form label.tpcbs-toggle-wrap {
	color: #111827 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

/* ── Zone type badge (warden) ── */
#tpcbs-booking-form .tpcbs-zone-type-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: #e2e8f0;
	color: #334155;
	vertical-align: middle;
}

/* Pitch Selection */
#tpcbs-booking-form .tpcbs-pitch-option {
	margin-bottom: 15px;
	padding: 15px;
	border: 2px solid #ddd;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

#tpcbs-booking-form .tpcbs-pitch-option:hover {
	border-color: #0073aa;
	background: #f0f8ff;
}

#tpcbs-booking-form .tpcbs-pitch-option input[type="radio"] {
	margin-right: 10px;
	transform: scale(1.2);
	cursor: pointer;
}

#tpcbs-booking-form .tpcbs-pitch-name {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin-bottom: 5px;
}

#tpcbs-booking-form .tpcbs-pitch-price {
	font-size: 16px;
	color: #0073aa;
	font-weight: 600;
}

#tpcbs-booking-form .tpcbs-pricing-total {
	font-size: 18px;
	font-weight: 700;
	color: #111827;
}

#tpcbs-booking-form .tpcbs-pricing-deposit {
	margin-top: 4px;
	font-size: 15px;
	font-weight: 700;
	color: #4b5563;
}

#tpcbs-booking-form .tpcbs-pricing-balance {
	margin-top: 4px;
	font-size: 13px;
	color: #4b5563;
}

#tpcbs-booking-form .tpcbs-pricing-breakdown {
	margin-top: 5px;
	font-size: 14px;
	color: #4b5563;
}

#tpcbs-booking-form .tpcbs-payment-summary {
	margin: 12px 0;
	padding: 10px 12px;
	background: #f0f8ff;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	color: #333;
}

/* Messages */
#tpcbs-booking-form .tpcbs-messages {
	margin: 20px 0;
}

#tpcbs-booking-form .tpcbs-message {
	padding: 15px;
	margin-bottom: 15px;
	border-radius: 4px;
	font-size: 16px;
	color: #1f2937;
	background: #f9fafb;
	border: 1px solid #d1d5db;
}

#tpcbs-booking-form .tpcbs-error-message,
#tpcbs-booking-form .tpcbs-message-error {
	background: #ffebee;
	color: #c62828;
	border-color: #fecaca;
	border-left: 4px solid #c62828;
}

#tpcbs-booking-form .tpcbs-success-message,
#tpcbs-booking-form .tpcbs-message-success {
	background: #e8f5e9;
	color: #2e7d32;
	border-color: #bbf7d0;
	border-left: 4px solid #2e7d32;
}

#tpcbs-booking-form .tpcbs-info-message,
#tpcbs-booking-form .tpcbs-message-info {
	background: #e3f2fd;
	color: #1565c0;
	border-color: #bfdbfe;
	border-left: 4px solid #1565c0;
}

/* Loading Indicator */
#tpcbs-booking-form .tpcbs-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.95);
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	z-index: 9999;
	text-align: center;
}

#tpcbs-booking-form .tpcbs-spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #0073aa;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: tpcbs-spin 1s linear infinite;
	margin: 0 auto 15px;
}

@keyframes tpcbs-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#tpcbs-booking-form .tpcbs-loading p {
	margin: 0;
	font-size: 16px;
	color: #333;
}

/* Availability Results */
#tpcbs-availability-results {
	margin-bottom: 20px;
}

#tpcbs-booking-form .tpcbs-availability-header {
	font-size: 16px;
	margin-bottom: 15px;
	color: #333;
}

#tpcbs-booking-form .tpcbs-no-availability {
	padding: 20px;
	text-align: center;
	color: #4b5563;
	background: #fff;
	border: 2px dashed #ddd;
	border-radius: 4px;
}

/* Smart alternative dates — one-click suggestions when a search is full. */
#tpcbs-booking-form .tpcbs-alt-dates {
	margin-top: 12px;
}
#tpcbs-booking-form .tpcbs-alt-dates__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
#tpcbs-booking-form .tpcbs-alt-date-btn {
	flex: 0 1 auto;
}
@media (max-width: 600px) {
	#tpcbs-booking-form .tpcbs-alt-dates__buttons {
		flex-direction: column;
	}
	#tpcbs-booking-form .tpcbs-alt-date-btn {
		width: 100%;
	}
}

/* Registration Fields Validation States */
#tpcbs-booking-form .tpcbs-reg-input.tpcbs-valid {
	border-color: #4caf50;
}

#tpcbs-booking-form .tpcbs-reg-input.tpcbs-invalid {
	border-color: #f44336;
}

#tpcbs-booking-form .tpcbs-reg-match-status {
	margin-top: 10px;
	padding: 10px;
	border-radius: 4px;
	font-size: 14px;
}

#tpcbs-booking-form .tpcbs-reg-match-status.match {
	background: #e8f5e9;
	color: #2e7d32;
}

#tpcbs-booking-form .tpcbs-reg-match-status.no-match {
	background: #ffebee;
	color: #c62828;
}

/* Tablet and Desktop Enhancements */
@media (min-width: 768px) {
	#tpcbs-booking-form .tpcbs-booking-form {
		padding: 30px;
	}
	
	#tpcbs-booking-form .tpcbs-step {
		padding: 30px;
	}
	
	#tpcbs-booking-form .tpcbs-button {
		width: auto;
		min-width: 200px;
	}
	
	#tpcbs-booking-form .tpcbs-form-group {
		margin-bottom: 25px;
	}

	#tpcbs-booking-form .tpcbs-form-grid {
		grid-template-columns: 1fr 1fr;
	}

	#tpcbs-booking-form .tpcbs-zone-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	#tpcbs-booking-form .tpcbs-zone-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* High Contrast for Accessibility */
@media (prefers-contrast: high) {
	#tpcbs-booking-form .tpcbs-input {
		border-width: 3px;
	}
	
	#tpcbs-booking-form .tpcbs-pitch-option {
		border-width: 3px;
	}
}

/* Alternatives Section */
#tpcbs-booking-form .tpcbs-alternatives-section {
	margin-top: 30px;
	padding: 20px;
	background: #fff;
	border: 2px solid #0073aa;
	border-radius: 8px;
}

#tpcbs-booking-form .tpcbs-alternatives-header {
	margin: 0 0 10px 0;
	font-size: 18px;
	font-weight: 600;
	color: #0073aa;
}

#tpcbs-booking-form .tpcbs-alternatives-note {
	margin: 0 0 15px 0;
	font-size: 14px;
	color: #666;
}

#tpcbs-booking-form .tpcbs-alternatives-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#tpcbs-booking-form .tpcbs-alternative-option {
	margin: 0;
}

#tpcbs-booking-form .tpcbs-alternative-button {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 18px;
	background: #f5f5f5;
	border: 2px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
	font-size: 16px;
}

#tpcbs-booking-form .tpcbs-alternative-button:hover {
	background: #e8f5fa;
	border-color: #0073aa;
}

#tpcbs-booking-form .tpcbs-alternative-button:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

#tpcbs-booking-form .tpcbs-alternative-date {
	font-weight: 600;
	color: #333;
}

#tpcbs-booking-form .tpcbs-alternative-count {
	font-size: 14px;
	color: #666;
}

/* Print Styles */
@media print {
	#tpcbs-booking-form .tpcbs-button {
		display: none;
	}
	
	#tpcbs-booking-form .tpcbs-loading {
		display: none;
	}
}

/* Calendar Section */
#tpcbs-booking-form .tpcbs-calendar-section {
	margin: 25px 0;
	padding: 20px;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
}

#tpcbs-booking-form .tpcbs-calendar-section h4 {
	margin: 0 0 10px 0;
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

#tpcbs-booking-form .tpcbs-calendar-note {
	margin: 0 0 15px 0;
	font-size: 14px;
	color: #666;
}

#tpcbs-booking-form .tpcbs-calendar-container {
	overflow-x: auto;
	margin-bottom: 15px;
}

#tpcbs-booking-form .tpcbs-calendar-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 600px;
	color: #1f2937;
	background: #fff;
}

#tpcbs-booking-form .tpcbs-calendar-grid {
	color: #1f2937;
	background: #fff;
}

#tpcbs-booking-form .tpcbs-calendar-grid th,
#tpcbs-booking-form .tpcbs-calendar-grid td {
	color: #1f2937;
	background: #fff;
	border: 1px solid #ddd;
}

#tpcbs-booking-form .tpcbs-calendar-table th,
#tpcbs-booking-form .tpcbs-calendar-table td {
	padding: 8px;
	text-align: center;
	border: 1px solid #ddd;
	color: #1f2937;
	background: #fff;
}

#tpcbs-booking-form .tpcbs-cal-pitch-header,
#tpcbs-booking-form .tpcbs-cal-date-header {
	background: #f5f5f5;
	font-weight: 600;
	color: #333;
}

#tpcbs-booking-form .tpcbs-cal-date-header {
	white-space: nowrap;
	line-height: 1.1;
}
#tpcbs-booking-form .tpcbs-cal-dow {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	color: #6b7280;
}
#tpcbs-booking-form .tpcbs-cal-dom {
	display: block;
	font-size: 13px;
	font-weight: 700;
}

#tpcbs-booking-form .tpcbs-cal-pitch-name {
	font-weight: 500;
	text-align: left;
	background: #fafafa;
	color: #1f2937;
	white-space: nowrap;
}

#tpcbs-booking-form .tpcbs-cal-cell {
	width: 40px;
	height: 40px;
	position: relative;
}

/* Calendar Cell States */
#tpcbs-booking-form .tpcbs-cal-available {
	background: #c8e6c9;
}

#tpcbs-booking-form .tpcbs-cal-unavailable {
	background: #ffcdd2;
}

#tpcbs-booking-form .tpcbs-cal-partial {
	background: #fff9c4;
}

#tpcbs-booking-form .tpcbs-cal-past {
	background: #f0f0f0;
	color: #999;
}

/* Selectable cells - enabled for both desktop and mobile */
#tpcbs-booking-form .tpcbs-cal-selectable {
	cursor: pointer;
	transition: transform 0.1s, box-shadow 0.1s;
}

#tpcbs-booking-form .tpcbs-cal-selectable:hover {
	transform: scale(1.05);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	z-index: 10;
}

/* Mobile-specific touch improvements */
@media (max-width: 767px) {
	#tpcbs-booking-form .tpcbs-cal-selectable {
		touch-action: manipulation; /* Prevent double-tap zoom */
	}
	
	#tpcbs-booking-form .tpcbs-cal-selectable:active {
		transform: scale(0.95);
		background-color: rgba(0, 115, 170, 0.1);
	}
}

/* Calendar Legend */
#tpcbs-booking-form .tpcbs-calendar-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	font-size: 14px;
	color: #1f2937;
}

#tpcbs-booking-form .tpcbs-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

#tpcbs-booking-form .tpcbs-legend-swatch {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #ddd;
	border-radius: 3px;
}

#tpcbs-booking-form .tpcbs-legend-available {
	background: #c8e6c9;
}

#tpcbs-booking-form .tpcbs-legend-unavailable {
	background: #ffcdd2;
}

#tpcbs-booking-form .tpcbs-legend-partial {
	background: #fff9c4;
}

/* Mobile adjustments for calendar */
@media (max-width: 767px) {
	#tpcbs-booking-form .tpcbs-calendar-table {
		font-size: 12px;
	}
	
	#tpcbs-booking-form .tpcbs-calendar-table th,
	#tpcbs-booking-form .tpcbs-calendar-table td {
		padding: 6px 4px;
	}
	
	#tpcbs-booking-form .tpcbs-cal-cell {
		width: 30px;
		height: 30px;
	}
	
	#tpcbs-booking-form .tpcbs-calendar-note {
		font-size: 13px;
	}
}

/* =====================================================
   BRANDING & ATTRIBUTION (Milestone 9.3)
   ===================================================== */

/* Frontend Powered By Footer */
#tpcbs-booking-form .tpcbs-poweredby {
margin-top: 24px;
padding: 12px 16px;
background: #f8f9fa;
border-top: 1px solid #ddd;
text-align: center;
font-size: 13px;
color: #666;
}

#tpcbs-booking-form .tpcbs-poweredby p {
margin: 0;
line-height: 1.5;
}

#tpcbs-booking-form .tpcbs-poweredby a {
color: #2271b1;
text-decoration: none;
}

#tpcbs-booking-form .tpcbs-poweredby a:hover {
text-decoration: underline;
}

/* Responsive: smaller padding on narrow screens */
@media (max-width: 480px) {
#tpcbs-booking-form .tpcbs-poweredby {
padding: 10px 12px;
font-size: 12px;
}
}

/* =====================================================
   ADD-ONS SECTION
   ===================================================== */

#tpcbs-booking-form .tpcbs-addons-section {
	margin: 20px 0;
	padding: 20px;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
}

#tpcbs-booking-form .tpcbs-addons-section h4 {
	margin: 0 0 15px 0;
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

#tpcbs-booking-form .tpcbs-addons-deposit-note {
	margin: -8px 0 12px 0;
	font-size: 13px;
	color: #666;
}

#tpcbs-booking-form .tpcbs-addons-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#tpcbs-booking-form .tpcbs-addon-option {
	padding: 15px;
	border: 2px solid #ddd;
	border-radius: 4px;
	background: #f9f9f9;
	transition: border-color 0.2s, background 0.2s;
}

#tpcbs-booking-form .tpcbs-addon-option:hover {
	background: #f0f8ff;
	border-color: #0073aa;
}

#tpcbs-booking-form .tpcbs-addon-label {
	display: flex;
	align-items: flex-start;
	cursor: pointer;
	margin: 0;
	color: #1f2937;
}

#tpcbs-booking-form .tpcbs-addon-checkbox {
	margin-right: 12px;
	margin-top: 2px;
	width: 18px;
	height: 18px;
	cursor: pointer;
	flex-shrink: 0;
}

#tpcbs-booking-form .tpcbs-addon-details {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
}

#tpcbs-booking-form .tpcbs-addon-name {
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

#tpcbs-booking-form .tpcbs-addon-price {
	font-size: 15px;
	color: #0073aa;
	font-weight: 600;
}

#tpcbs-booking-form .tpcbs-addon-row .tpcbs-addon-label {
	color: #1f2937;
}

#tpcbs-booking-form .tpcbs-addon-row .tpcbs-addon-price {
	color: #0073aa;
}

#tpcbs-booking-form .tpcbs-addon-description {
	font-size: 14px;
	color: #666;
	font-style: italic;
}

/* Tablet and Desktop - horizontal layout for add-on details */
@media (min-width: 768px) {
	#tpcbs-booking-form .tpcbs-addon-details {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	#tpcbs-booking-form .tpcbs-addon-name {
		flex: 0 0 auto;
	}
	
	#tpcbs-booking-form .tpcbs-addon-price {
		flex: 0 0 auto;
		margin-left: auto;
	}
	
	#tpcbs-booking-form .tpcbs-addon-description {
		flex: 1 0 100%;
		margin-top: 5px;
	}
}

/* ── v0.13.0 legacy stub (kept for compat) ── */
#tpcbs-booking-form .tpcbs-card-title {
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── v0.15.0 (Milestone 2): Type-first booking flow ── */

/* Step heading */
#tpcbs-booking-form .tpcbs-step-heading {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 1.2rem 0;
	color: #111827;
}

/* ─── Type card grid ─── */
#tpcbs-booking-form .tpcbs-type-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 8px;
}

@media (min-width: 540px) {
	#tpcbs-booking-form .tpcbs-type-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 900px) {
	#tpcbs-booking-form .tpcbs-type-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

#tpcbs-booking-form .tpcbs-type-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px 12px 14px;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
	min-height: 110px;
	line-height: 1.3;
	color: #333;
}

#tpcbs-booking-form .tpcbs-type-card:hover {
	border-color: #0073aa;
	box-shadow: 0 4px 14px rgba(0, 115, 170, 0.14);
	transform: translateY(-2px);
}

#tpcbs-booking-form .tpcbs-type-card.is-selected {
	border-color: #0073aa;
	background: #f0f8ff;
	box-shadow: 0 4px 14px rgba(0, 115, 170, 0.18);
}

#tpcbs-booking-form .tpcbs-type-icon {
	display: block;
	margin: 0 auto;
	color: #0073aa;
}

#tpcbs-booking-form .tpcbs-type-card__label {
	font-size: 15px;
	font-weight: 700;
	color: #333;
	display: block;
}

#tpcbs-booking-form .tpcbs-type-card__price {
	font-size: 13px;
	font-weight: 600;
	color: #0073aa;
	display: block;
}

/* ─── Feature chip grid ─── */
#tpcbs-booking-form .tpcbs-feature-chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 1.2rem;
}

#tpcbs-booking-form .tpcbs-feature-chip {
	display: inline-flex;
	align-items: center;
	color: #1f2937;
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	margin: 2px 4px 2px 0;
	cursor: default;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#tpcbs-booking-form .tpcbs-feature-chip.is-selected {
	color: #fff;
	background: #2563eb;
	border-color: #1d4ed8;
}

#tpcbs-booking-form .tpcbs-feature-chip {
	cursor: default;
	font-size: 12px;
	padding: 2px 8px;
}

/* ─── Step action row ─── */
#tpcbs-booking-form .tpcbs-step-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 1rem;
}

@media (min-width: 480px) {
	#tpcbs-booking-form .tpcbs-step-actions {
		flex-direction: row;
	}
}

#tpcbs-booking-form .tpcbs-button-secondary {
	background: #f1f5f9;
	color: #334155;
	border: 2px solid #cbd5e1;
}

#tpcbs-booking-form .tpcbs-button-secondary:hover {
	background: #e2e8f0;
	border-color: #94a3b8;
	color: #1e293b;
}

/* ─── Zone card (reused, keep + extend) ─── */
#tpcbs-booking-form .tpcbs-zone-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (min-width: 640px) {
	#tpcbs-booking-form .tpcbs-zone-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

#tpcbs-booking-form .tpcbs-zone-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px 12px 14px;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
	min-height: 120px;
	line-height: 1.3;
	color: #333;
}

#tpcbs-booking-form .tpcbs-zone-card:hover {
	border-color: #0073aa;
	box-shadow: 0 4px 14px rgba(0, 115, 170, 0.14);
}

#tpcbs-booking-form .tpcbs-zone-card.is-selected {
	border-color: #0073aa;
	background: #f0f8ff;
	box-shadow: 0 4px 14px rgba(0, 115, 170, 0.18);
}

#tpcbs-booking-form .tpcbs-zone-icon {
	display: block;
	margin: 0 auto 8px;
	color: #0073aa;
	width: 36px;
	height: 36px;
}

#tpcbs-booking-form .tpcbs-zone-card__name {
	margin: 0 0 4px 0;
	font-size: 16px;
	font-weight: 700;
	color: #333;
}

#tpcbs-booking-form .tpcbs-zone-card__desc {
	margin: 0 0 6px 0;
	font-size: 13px;
	color: #666;
	line-height: 1.3;
}

#tpcbs-booking-form .tpcbs-zone-card__price {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #0073aa;
}

#tpcbs-booking-form .tpcbs-zone-card__photo {
	width: 100%;
	margin-top: 10px;
	border-radius: 6px;
	overflow: hidden;
}

#tpcbs-booking-form .tpcbs-zone-card__img {
	width: 100%;
	height: 80px;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}

/* ─── Loading placeholder ─── */
#tpcbs-booking-form .tpcbs-loading-placeholder {
	color: #888;
	font-style: italic;
	padding: 8px 0;
	margin: 0;
}

/* ─── Back link ─── */
#tpcbs-booking-form .tpcbs-back-link {
	display: inline-block;
	margin-bottom: 12px;
	font-size: 14px;
	color: #0073aa;
	text-decoration: none;
	padding: 6px 0;
	cursor: pointer;
}

#tpcbs-booking-form .tpcbs-back-link:hover {
	text-decoration: underline;
}

/* ─── Form note ─── */
#tpcbs-booking-form .tpcbs-form-note {
	margin: 0 0 16px 0;
	padding: 10px 12px;
	background: #f0f8ff;
	border-left: 4px solid #0073aa;
	border-radius: 4px;
	font-size: 14px;
	color: #333;
}

/* ─── Pitch image + selected preview ─── */
#tpcbs-booking-form .tpcbs-pitch-image {
	margin: 8px 0;
}

#tpcbs-booking-form .tpcbs-pitch-image img {
	width: 100%;
	max-width: 220px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
}

#tpcbs-selected-pitch-preview {
	margin-bottom: 15px;
}

#tpcbs-booking-form .tpcbs-selected-pitch-preview__img img {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}

#tpcbs-booking-form .tpcbs-selected-pitch-preview__text {
	margin-top: 8px;
}

#tpcbs-booking-form .tpcbs-pitch-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-bottom: 0.5rem;
}

#tpcbs-booking-form .tpcbs-pitch-row-photo {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

#tpcbs-booking-form .tpcbs-pitch-row-info {
	flex: 1;
}

/* =====================================================
   FLOW REBUILD v0.17.0 — Slot cards, step layout,
   per-type forms, reg blocks, coming-soon notices
   ===================================================== */

/* ── Step 2: per-type dates form ── */
#tpcbs-booking-form .tpcbs-step-dates {
max-width: 580px;
margin: 0 auto;
}

#tpcbs-booking-form .tpcbs-step-dates .tpcbs-form-group {
margin-bottom: 1.25rem;
}

#tpcbs-booking-form .tpcbs-step-dates .tpcbs-label {
display: block;
font-weight: 600;
margin-bottom: 0.35rem;
font-size: 0.95rem;
color: #333;
}

#tpcbs-booking-form .tpcbs-step-dates .tpcbs-input {
width: 100%;
padding: 0.55rem 0.75rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
background: #fff;
transition: border-color 0.15s;
}

#tpcbs-booking-form .tpcbs-step-dates .tpcbs-input:focus {
outline: none;
border-color: #2271b1;
box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

#tpcbs-booking-form .tpcbs-step-dates .tpcbs-field-note {
display: block;
font-size: 0.8rem;
color: #666;
margin-top: 0.3rem;
}

/* ── Toggle (awning, own-bedding) in step-2 forms ── */
#tpcbs-booking-form .tpcbs-step-dates .tpcbs-toggle-wrap {
display: flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
}

/* ── Step 4: Slot grid ── */
#tpcbs-booking-form .tpcbs-slot-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin: 16px 0;
}

@media (min-width: 640px) {
#tpcbs-booking-form .tpcbs-slot-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
}

#tpcbs-booking-form .tpcbs-slot-card {
background: #fff;
border: 1px solid #dde1e7;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.2s, border-color 0.2s;
}

#tpcbs-booking-form .tpcbs-slot-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
border-color: #b0c4de;
}

#tpcbs-booking-form .tpcbs-slot-card__photo {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}

#tpcbs-booking-form .tpcbs-slot-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

#tpcbs-booking-form .tpcbs-slot-card__body {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}

#tpcbs-booking-form .tpcbs-slot-card__name {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: #1a1a2e;
}

#tpcbs-booking-form .tpcbs-slot-card__zone {
display: inline-block;
font-size: 0.8rem;
font-weight: 500;
color: #555;
background: #f0f4f9;
border-radius: 4px;
padding: 0.15rem 0.5rem;
}

/* Feature chips on slot card */
#tpcbs-booking-form .tpcbs-slot-card__features {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.25rem 0;
}

#tpcbs-booking-form .tpcbs-slot-chip {
font-size: 0.75rem;
font-weight: 500;
padding: 0.2rem 0.55rem;
background: #e8f0fe;
color: #2c5aa0;
border-radius: 20px;
white-space: nowrap;
}

/* Pricing block inside slot card */
#tpcbs-booking-form .tpcbs-slot-card__pricing {
margin: 0.25rem 0;
}

#tpcbs-booking-form .tpcbs-slot-card__price-total {
font-size: 1.15rem;
font-weight: 700;
color: #1a1a2e;
}

#tpcbs-booking-form .tpcbs-slot-card__price-vat,
#tpcbs-booking-form .tpcbs-slot-card__price-deposit {
font-size: 0.82rem;
color: #555;
margin-top: 0.15rem;
}

/* Book this pitch button inside card */
#tpcbs-booking-form .tpcbs-book-this-pitch {
margin-top: auto;
width: 100%;
text-align: center;
}

/* ── Step 5: Registration blocks ── */
#tpcbs-booking-form #tpcbs-step-registration .tpcbs-form-group {
margin-bottom: 1.25rem;
}

#tpcbs-booking-form #tpcbs-step-registration .tpcbs-label {
display: block;
font-weight: 600;
margin-bottom: 0.35rem;
font-size: 0.95rem;
color: #333;
}

#tpcbs-booking-form #tpcbs-step-registration .tpcbs-field-note {
display: block;
font-size: 0.8rem;
color: #666;
margin-top: 0.3rem;
}

/* ── Coming-soon notice (cottage / bunkhouse) ── */
#tpcbs-booking-form .tpcbs-coming-soon-notice {
background: #fff8e5;
border: 1px solid #f0d070;
border-radius: 8px;
padding: 1.5rem 1.75rem;
text-align: center;
max-width: 480px;
margin: 1.5rem auto;
}

#tpcbs-booking-form .tpcbs-coming-soon-notice h3 {
margin-top: 0;
color: #b5850a;
}

/* ── Availability header in step 4 ── */
#tpcbs-booking-form .tpcbs-availability-header {
font-size: 0.95rem;
color: #555;
margin-bottom: 0.75rem;
}

#tpcbs-booking-form .tpcbs-slot-count {
	color: #6b7280;
	font-size: 13px;
	margin: 0 0 12px 0;
	font-weight: 500;
}


#tpcbs-booking-form .tpcbs-inline-availability {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid #e2e8f0;
}

#tpcbs-booking-form .tpcbs-slot-card {
	position: relative;
	background: #fff;
	padding: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	display: block;
	transition: border-color 0.15s, box-shadow 0.15s;
}

#tpcbs-booking-form .tpcbs-slot-card:hover {
	border-color: #93c5fd;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#tpcbs-booking-form .tpcbs-slot-card input[type="radio"] {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 18px;
	height: 18px;
	cursor: pointer;
}

#tpcbs-booking-form .tpcbs-slot-card.is-selected,
#tpcbs-booking-form .tpcbs-slot-card:has(input:checked) {
	border-color: #2563eb;
	box-shadow: 0 0 0 1px #2563eb;
}

#tpcbs-booking-form .tpcbs-slot-card__header {
	display: block;
	padding-left: 28px;
	margin: 0;
}

#tpcbs-booking-form .tpcbs-slot-radio {
	margin: 0;
}

#tpcbs-booking-form .tpcbs-slot-card__title-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#tpcbs-booking-form .tpcbs-slot-zone {
	display: inline;
	font-size: 13px;
	color: #6b7280;
	font-weight: 400;
	margin-left: 4px;
}

#tpcbs-booking-form .tpcbs-slot-name,
#tpcbs-booking-form .tpcbs-slot-card__name {
	display: inline;
	color: #111827;
	font-weight: 600;
	font-size: 16px;
}

#tpcbs-booking-form .tpcbs-slot-features,
#tpcbs-booking-form .tpcbs-slot-card__features {
	margin: 8px 0;
}

#tpcbs-booking-form .tpcbs-slot-card__pricing {
	margin-top: 8px;
}

#tpcbs-booking-form .tpcbs-pricing-total {
	color: #111827;
	font-weight: 600;
	font-size: 16px;
}

#tpcbs-booking-form .tpcbs-pricing-deposit,
#tpcbs-booking-form .tpcbs-pricing-balance {
	color: #4b5563;
	font-size: 14px;
}

#tpcbs-booking-form .tpcbs-slot-card.is-hidden-by-filter {
	display: none !important;
}

@media (max-width: 767px) {
	#tpcbs-booking-form .tpcbs-slot-grid {
		grid-template-columns: 1fr;
	}
}

/* ═════════════════════════════════════════════════════════════════════
 * VISUAL THEME LAYER (v0.17.2)
 *
 * Specificity-armoured rules that produce the canonical rendering on
 * any host theme including Breakdance, Astra, Twenty Twenty-Four, etc.
 *
 * If you find yourself adding overrides ABOVE this block to fix a
 * visual bug, you're going the wrong way — adjust here instead.
 * ═════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
 * VISUAL THEME LAYER — light mode default
 * Specificity-armoured to defeat host theme overrides.
 * !important is used deliberately where Breakdance and similar themes
 * are known to win otherwise; do not strip these without testing.
 * ───────────────────────────────────────────────────────────────────── */

/* Step headings (Select Your Dates / Available Pitches / Vehicle Registration / etc.) */
#tpcbs-booking-form .tpcbs-step-heading,
#tpcbs-booking-form h2,
#tpcbs-booking-form h3,
#tpcbs-booking-form h4 {
    color: #111827 !important;
    font-weight: 700 !important;
    background: transparent !important;
}

/* Slot-card summary chips — read-only "this pitch has" labels.
   Visually distinct from the clickable filter chips above. */
#tpcbs-booking-form .tpcbs-slot-chip {
    display: inline-block !important;
    background: #eef2ff !important;
    color: #1e3a8a !important;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 2px 4px 2px 0 !important;
    cursor: default !important;
    text-transform: none !important;
    box-shadow: none !important;
}

/* Calendar cell colours — green available, yellow partial, red unavailable, grey past */
#tpcbs-booking-form .tpcbs-calendar-table td.tpcbs-cal-available {
    background: #c8e6c9 !important;
}
#tpcbs-booking-form .tpcbs-calendar-table td.tpcbs-cal-partial {
    background: #fff9c4 !important;
}
#tpcbs-booking-form .tpcbs-calendar-table td.tpcbs-cal-unavailable {
    background: #ffcdd2 !important;
}
#tpcbs-booking-form .tpcbs-calendar-table td.tpcbs-cal-past {
    background: #f0f0f0 !important;
    color: #999 !important;
}

/* Slot cards */
#tpcbs-booking-form .tpcbs-slot-card {
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 16px !important;
    background: #fff !important;
    cursor: pointer !important;
    display: block !important;
}

#tpcbs-booking-form .tpcbs-slot-card.is-selected {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 1px #2563eb !important;
}

#tpcbs-booking-form .tpcbs-slot-card__name {
    font-weight: 600 !important;
    color: #111827 !important;
    font-size: 16px !important;
}

#tpcbs-booking-form .tpcbs-slot-zone {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin-left: 4px !important;
}

#tpcbs-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	max-width: 380px;
	background: #fef3c7;
	color: #78350f;
	border: 1px solid #fcd34d;
	border-radius: 8px;
	padding: 12px 16px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	font-size: 14px;
	line-height: 1.4;
	z-index: 9999;
	transform: translateY(120%);
	opacity: 0;
	transition: transform 200ms ease-out, opacity 200ms ease-out;
	cursor: pointer;
	display: none;
}

#tpcbs-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}

@media (max-width: 640px) {
	#tpcbs-toast {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
	}
}

/* Demo Mode warden banner */
#tpcbs-booking-form .tpcbs-warden-demo-banner,
.tpcbs-warden .tpcbs-warden-demo-banner {
    background: #fef3c7;
    color: #78350f;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* v0.19.0: Add-on chip rail (above Check Availability) */
#tpcbs-booking-form .tpcbs-addon-chips-wrap {
margin: 12px 0 16px;
}

#tpcbs-booking-form .tpcbs-addon-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}

/* v0.19.1: colour-armoured so themes cannot override chip label to white-on-white */
#tpcbs-booking-form .tpcbs-addon-chip {
    color: #1f2937 !important;
    background: #fff !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin: 4px 6px 4px 0 !important;
    display: inline-block !important;
}

#tpcbs-booking-form .tpcbs-addon-chip.is-selected {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #1d4ed8 !important;
}

#tpcbs-booking-form .tpcbs-addon-chip.is-locked {
    cursor: not-allowed !important;
    opacity: 0.85;
}

#tpcbs-booking-form .tpcbs-addon-chip.is-locked.is-selected {
    background: #1e40af !important;
    border-color: #1e3a8a !important;
}

#tpcbs-booking-form .tpcbs-addon-chip.tpcbs-hidden { display: none; }

#tpcbs-booking-form .tpcbs-cal-cell { cursor: pointer; }
#tpcbs-booking-form .tpcbs-cal-cell.tpcbs-cell-unavailable { cursor: not-allowed; }
#tpcbs-booking-form .tpcbs-cal-cell.is-preselected { outline: 2px solid #1e88e5; outline-offset: -2px; }

/* Add-to-home-screen hint (warden) */
.tpcbs-aths-hint {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: #2271b1;
	color: #fff;
	padding: 10px 12px;
	border-radius: 8px;
	margin: 0 0 14px;
	font-size: 13px;
}
.tpcbs-aths-hint span { flex: 1 1 auto; }
.tpcbs-aths-hint__dismiss {
	background: transparent;
	border: 1px solid rgba(255,255,255,.6);
	color: #fff;
	border-radius: 6px;
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
}

/* ──────────────────────────────────────────────────────────────
   v0.28.18 — Pitch photos on booking slot cards
   Pitch photo → pitch-type default photo → zone photo (resolved server-side).
   These rules sit at the end of the file so they win the cascade over the
   earlier .tpcbs-slot-card block (display:block; padding:16px).
   ────────────────────────────────────────────────────────────── */
#tpcbs-booking-form .tpcbs-slot-card__body {
	padding: 0; /* card already supplies 16px padding when there's no photo */
}

#tpcbs-booking-form .tpcbs-slot-card--has-photo {
	padding: 0;
	overflow: hidden;
}

#tpcbs-booking-form .tpcbs-slot-card--has-photo .tpcbs-slot-card__body {
	padding: 16px;
}

#tpcbs-booking-form .tpcbs-slot-card--has-photo .tpcbs-slot-card__header {
	padding-left: 0; /* radio now sits on the photo, not beside the title */
}

#tpcbs-booking-form .tpcbs-slot-card--has-photo input[type="radio"] {
	top: 12px;
	left: 12px;
	z-index: 2;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #fff;
}

#tpcbs-booking-form .tpcbs-slot-card__photo {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f0f4f9;
}

#tpcbs-booking-form .tpcbs-slot-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* v0.28.28 — single-pitch mode ([tpcbs_pitch id="X"]) */
.tpcbs-single-pitch #tpcbs-slot-count { display: none; }

/* v0.28.30 — single-pitch header (image + name) for [tpcbs_pitch] */
.tpcbs-single-pitch-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e2e8f0;
}
.tpcbs-single-pitch-photo {
	width: 100%;
}
.tpcbs-single-pitch-photo img {
	width: 100%;
	max-height: 360px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}
.tpcbs-single-pitch-meta { width: 100%; }
.tpcbs-single-pitch-name { margin: 0 0 4px; font-size: 1.6rem; }
.tpcbs-single-pitch-zone { margin: 0; color: #64748b; font-size: .95rem; }
.tpcbs-single-pitch-description {
	margin: 12px 0 0;
	color: #475569;
	font-size: .95rem;
	line-height: 1.55;
}
.tpcbs-single-pitch-features {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tpcbs-single-pitch-features li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	font-size: .85rem;
	color: #334155;
	line-height: 1.2;
}
.tpcbs-single-pitch-features li::before {
	content: "✓";
	color: #16a34a;
	font-weight: 700;
}

/* v0.28.32 — pitch gallery for [tpcbs_book type="..."] */
.tpcbs-pitch-gallery { margin-top: 8px; }
.tpcbs-pitch-gallery-grid {
	display: grid;
	gap: 16px;
	margin-top: 12px;
}
.tpcbs-gallery-card {
	display: flex;
	flex-direction: column;
	text-align: left;
	background: #fff;
	border: 1px solid #dde1e7;
	border-radius: 12px;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow .15s, border-color .15s, transform .15s;
	font: inherit;
	color: inherit;
}
.tpcbs-gallery-card:hover {
	border-color: #2271b1;
	box-shadow: 0 6px 18px rgba(0,0,0,.10);
	transform: translateY(-2px);
}
.tpcbs-gallery-card-photo { display: block; width: 100%; }
.tpcbs-gallery-card-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	display: block;
}
.tpcbs-gallery-card-name {
	font-weight: 700;
	font-size: 1.05rem;
	padding: 12px 14px 0;
}
.tpcbs-gallery-card-zone {
	color: #64748b;
	font-size: .85rem;
	padding: 2px 14px 0;
}
.tpcbs-gallery-card-desc {
	color: #475569;
	font-size: .9rem;
	line-height: 1.45;
	padding: 8px 14px 14px;
}

/* v0.28.33 — gallery mode fills its container; column count from cols= */
#tpcbs-booking-form.tpcbs-wide { max-width: none; }
.tpcbs-pitch-gallery-grid { grid-template-columns: 1fr; }
@media (min-width: 600px) {
	.tpcbs-pitch-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	#tpcbs-booking-form.tpcbs-wide .tpcbs-pitch-gallery-grid {
		grid-template-columns: repeat(var(--tpcbs-cols, 3), 1fr);
	}
}




/* v0.28.38 — single-pitch image gallery (swipe on mobile, arrows + thumbs on desktop) */
.tpcbs-pgallery { width: 100%; }
.tpcbs-pgallery-stage { position: relative; }
.tpcbs-pgallery-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	border-radius: 12px;
}
.tpcbs-pgallery-track::-webkit-scrollbar { display: none; }
.tpcbs-pgallery-slide {
	flex: 0 0 100%;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	scroll-snap-align: center;
	display: block;
}
.tpcbs-pgallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.45);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.tpcbs-pgallery-nav:hover { background: rgba(0,0,0,.65); }
.tpcbs-pgallery-prev { left: 10px; }
.tpcbs-pgallery-next { right: 10px; }
.tpcbs-pgallery-thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin-top: 8px;
	padding-bottom: 4px;
	scrollbar-width: thin;
}
.tpcbs-pgallery-thumb {
	flex: 0 0 auto;
	border: 2px solid transparent;
	border-radius: 8px;
	padding: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}
.tpcbs-pgallery-thumb img { width: 64px; height: 48px; object-fit: cover; display: block; }
.tpcbs-pgallery-thumb.is-active { border-color: #2271b1; }

/* Desktop: show arrows; thumbnails already help on all sizes. */
@media (min-width: 768px) {
	.tpcbs-pgallery-nav { display: flex; }
	.tpcbs-pgallery-slide { aspect-ratio: 16 / 9; max-height: 460px; }
}

/* v0.28.39 — mini swipe gallery inside gallery cards + dots */
.tpcbs-pgallery--mini { display: block; }
.tpcbs-pgallery--mini .tpcbs-pgallery-stage { display: block; position: relative; }
.tpcbs-pgallery--mini .tpcbs-pgallery-track { border-radius: 0; }
.tpcbs-pgallery--mini .tpcbs-pgallery-slide { aspect-ratio: 4 / 3; }
.tpcbs-pgallery--mini .tpcbs-pgallery-nav { width: 32px; height: 32px; font-size: 20px; }

.tpcbs-pgallery-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 8px 0 4px;
}
.tpcbs-pgallery-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #cbd5e1;
	cursor: pointer;
}
.tpcbs-pgallery-dot.is-active { background: #2271b1; }

/* The card is now a div acting as a button. */
.tpcbs-gallery-card { cursor: pointer; }
.tpcbs-gallery-card:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }

/* v0.28.40 — beat the #tpcbs-booking-form button reset for gallery controls */
#tpcbs-booking-form .tpcbs-pgallery-nav {
	background: rgba(0,0,0,.45);
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 24px;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
}
#tpcbs-booking-form .tpcbs-pgallery--mini .tpcbs-pgallery-nav {
	width: 32px;
	height: 32px;
	font-size: 20px;
}
#tpcbs-booking-form .tpcbs-pgallery-nav:hover { background: rgba(0,0,0,.65); }
#tpcbs-booking-form .tpcbs-pgallery-thumb {
	width: auto;
	height: auto;
	padding: 0;
	background: none;
	border: 2px solid transparent;
	border-radius: 8px;
}
#tpcbs-booking-form .tpcbs-pgallery-thumb img { width: 64px; height: 48px; object-fit: cover; display: block; }
#tpcbs-booking-form .tpcbs-pgallery-thumb.is-active { border-color: #2271b1; }
#tpcbs-booking-form .tpcbs-pgallery-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: #cbd5e1;
	border-radius: 50%;
}
#tpcbs-booking-form .tpcbs-pgallery-dot.is-active { background: #2271b1; }

/* v0.28.42 — single-pitch booking view: fluid, columns on larger screens */
@media (min-width: 600px) {
	#tpcbs-booking-form #tpcbs-step-dates {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
		align-items: start;
	}
	#tpcbs-booking-form #tpcbs-step-dates > .tpcbs-back-link,
	#tpcbs-booking-form #tpcbs-step-dates > .tpcbs-step-heading,
	#tpcbs-booking-form #tpcbs-step-dates > .tpcbs-form-actions,
	#tpcbs-booking-form #tpcbs-step-dates > #tpcbs-inline-availability {
		grid-column: 1 / -1;
	}
}
@media (min-width: 900px) {
	#tpcbs-booking-form.tpcbs-single-pitch {
		max-width: 980px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 28px;
		align-items: start;
	}
	#tpcbs-booking-form.tpcbs-single-pitch > * { grid-column: 1 / -1; }
	#tpcbs-booking-form.tpcbs-single-pitch > #tpcbs-dynamic-pitch-header {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 20px;
		align-self: start;
	}
	#tpcbs-booking-form.tpcbs-single-pitch > #tpcbs-form-template-container,
	#tpcbs-booking-form.tpcbs-single-pitch > #tpcbs-step-registration,
	#tpcbs-booking-form.tpcbs-single-pitch > #tpcbs-step-customer-details {
		grid-column: 2;
		grid-row: 1;
	}
	#tpcbs-booking-form.tpcbs-single-pitch .tpcbs-single-pitch-header {
		border-bottom: 0;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	#tpcbs-booking-form.tpcbs-single-pitch .tpcbs-calendar-section { overflow-x: auto; }
}

/* v0.28.49 — type chooser: more, smaller cards (two rows) on larger screens */
@media (min-width: 600px) and (max-width: 899px) {
	#tpcbs-booking-form.tpcbs-wide .tpcbs-type-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
	#tpcbs-booking-form.tpcbs-wide .tpcbs-type-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── Gallery lightbox (v0.28.60) ─────────────────────────────────────────── */
.tpcbs-pgallery-slide,
.tpcbs-single-pitch-photo img { cursor: zoom-in; }
body.tpcbs-lb-lock { overflow: hidden; }
.tpcbs-lightbox {
	position: fixed; inset: 0; z-index: 100000; display: none;
	align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.92);
}
.tpcbs-lightbox.is-open { display: flex; }
.tpcbs-lb-stage {
	margin: 0; max-width: 92vw; max-height: 88vh;
	display: flex; align-items: center; justify-content: center;
}
.tpcbs-lb-img {
	max-width: 92vw; max-height: 88vh; width: auto; height: auto;
	object-fit: contain; border-radius: 4px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55); cursor: default;
}
.tpcbs-lb-close,
.tpcbs-lb-nav {
	position: absolute; color: #fff; background: rgba(255, 255, 255, 0.14);
	border: none; border-radius: 50%; cursor: pointer; line-height: 1;
	display: flex; align-items: center; justify-content: center; padding: 0;
	transition: background 0.15s ease;
}
.tpcbs-lb-close:hover,
.tpcbs-lb-nav:hover { background: rgba(255, 255, 255, 0.3); }
.tpcbs-lb-close { top: 16px; right: 20px; width: 44px; height: 44px; font-size: 28px; }
.tpcbs-lb-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 34px; }
.tpcbs-lb-prev { left: 18px; }
.tpcbs-lb-next { right: 18px; }
.tpcbs-lb-counter {
	position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
	color: #fff; font-size: 13px; letter-spacing: 0.04em;
	background: rgba(0, 0, 0, 0.45); padding: 4px 12px; border-radius: 999px;
}
@media (max-width: 600px) {
	.tpcbs-lb-nav { width: 44px; height: 44px; font-size: 28px; }
	.tpcbs-lb-prev { left: 6px; }
	.tpcbs-lb-next { right: 6px; }
	.tpcbs-lb-close { top: 8px; right: 10px; }
}

/* ── Amenity feature icons on pitch cards (v0.28.63) ────────────────────── */
.tpcbs-slot-card__features {
	list-style: none; margin: 10px 0 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px;
}
.tpcbs-slot-feature {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; line-height: 1.3; color: #3a4a40;
}
.tpcbs-feat-icon { width: 20px; height: 20px; flex: 0 0 20px; color: #2f7d57; }
.tpcbs-slot-feature--no, .tpcbs-slot-feature--no .tpcbs-feat-icon { color: #b4532a; }
@media (max-width: 520px) { .tpcbs-slot-card__features { grid-template-columns: 1fr; } }

/* ── "Book this Pitch" CTA on gallery cards (v0.28.66) ──────────────────── */
.tpcbs-gallery-card-cta { margin-top: auto; padding: 4px 14px 16px; }
.tpcbs-gallery-card-book { width: 100%; padding: 11px 16px; font-size: 15px; }

/* ── Voucher / discount codes (v0.31.0) ─────────────────────────────────── */
#tpcbs-booking-form .tpcbs-voucher { margin: 18px 0 4px; }
#tpcbs-booking-form .tpcbs-voucher-toggle {
	background: none; border: none; padding: 0; cursor: pointer;
	color: #2f7d57; font-size: 14px; text-decoration: underline;
	text-underline-offset: 3px;
}
#tpcbs-booking-form .tpcbs-voucher-toggle:hover { color: #1f5c3f; }
#tpcbs-booking-form .tpcbs-voucher-toggle:focus-visible {
	outline: 2px solid #2f7d57; outline-offset: 2px; border-radius: 2px;
}
#tpcbs-booking-form .tpcbs-voucher-panel { margin-top: 10px; }
#tpcbs-booking-form .tpcbs-voucher-row {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
#tpcbs-booking-form .tpcbs-voucher-label { margin: 0; }
#tpcbs-booking-form .tpcbs-voucher-input {
	flex: 1 1 140px; max-width: 220px; text-transform: uppercase;
}
#tpcbs-booking-form .tpcbs-voucher-error {
	margin-top: 8px; color: #b4532a; font-size: 14px;
}
#tpcbs-booking-form .tpcbs-voucher-applied {
	display: flex; align-items: center; gap: 10px;
	margin-top: 8px; padding: 10px 14px;
	background: #ecfdf5; border: 1px solid #6ee7b7; border-radius: 6px;
	color: #047857; font-size: 14px; font-weight: 600;
}
#tpcbs-booking-form .tpcbs-voucher-applied-label { flex: 1 1 auto; }
#tpcbs-booking-form .tpcbs-voucher-remove {
	flex: 0 0 auto; background: none; border: none; cursor: pointer;
	color: #047857; font-size: 22px; line-height: 1;
	width: 32px; height: 32px; border-radius: 50%;
}
#tpcbs-booking-form .tpcbs-voucher-remove:hover { background: #d1fae5; }
#tpcbs-booking-form .tpcbs-voucher-remove:focus-visible {
	outline: 2px solid #047857; outline-offset: 2px;
}

/* ─── Shared collapsible card system (.tpcbs-pcard) ──────────────────────────
   One card skeleton across the warden + manager frontends so they read as one
   product. Fixed slots that always render keep every card the same height; the
   detail slot is hidden until the card (or its chevron) is tapped. */
.tpcbs-pcard__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.tpcbs-pcard__top > * { min-width: 0; }
.tpcbs-pcard__spacer { flex: 1 1 auto; }
.tpcbs-pcard__title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}
.tpcbs-pcard__name {
	font-size: 15px;
	font-weight: 700;
	color: #111;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}
.tpcbs-pcard__sub {
	font-size: 13px;
	color: #50575e;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tpcbs-pcard__total {
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tpcbs-pcard__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.tpcbs-pcard__meta > * { min-width: 0; }
.tpcbs-pcard__detail {
	border-top: 1px solid #eef0f2;
	padding-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: #50575e;
}
.tpcbs-pcard__detail[hidden] { display: none; }
.tpcbs-pcard__actions {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 8px;
	border-top: 1px solid #eef0f2;
}

/* Pills + chips — never wrap, sit in fixed slots */
.tpcbs-pill {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tpcbs-pill--eta {
	background: #1e3a5f;
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.02em;
}
.tpcbs-pill--muted { background: #6b7280; }
.tpcbs-chip {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	border-radius: 999px;
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: #eef2f6;
	color: #33414f;
	border: 1px solid #d3dde6;
}
.tpcbs-chip--reg {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #111;
}
.tpcbs-chip--surname { font-family: inherit; text-transform: none; letter-spacing: 0; color: #8a2b2b; }
.tpcbs-chip--muted { color: #999; }
.tpcbs-chip--extras { background: #eaf3ec; color: #1f6b3a; border-color: #cfe6d6; }
.tpcbs-chip--ref {
	background: #eaf1f8;
	color: #1c5a93;
	border-color: #cfe0f0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 700;
}

/* Slot tweaks for the warden today card */
.tpcbs-warden-today-item .tpcbs-warden-pitch { font-size: 17px; font-weight: 700; color: #2271b1; }
.tpcbs-warden-today-item.tpcbs-warden-today-item--arrived .tpcbs-warden-pitch { color: #1f7a3d; }
.tpcbs-warden-today-item .tpcbs-warden-checkin { margin-top: auto; }

/* v0.89.20 — pitch-type size variants picker on booking slot cards */
#tpcbs-booking-form .tpcbs-slot-card__sizes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 4px; font-size: 14px; }
#tpcbs-booking-form .tpcbs-slot-card__sizes-label { font-weight: 600; color: #33424f; margin-right: 4px; }
#tpcbs-booking-form .tpcbs-slot-size { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #cdd6df; border-radius: 999px; cursor: pointer; background: #fff; }
#tpcbs-booking-form .tpcbs-slot-size:has(input:checked) { border-color: #2c6e49; background: #e6efe6; }
#tpcbs-booking-form .tpcbs-slot-size-radio { margin: 0; }
#tpcbs-booking-form .tpcbs-slot-size-label em { color: #6b7280; font-style: italic; font-size: 12px; }