/* Block Servicing – SaaS Bento UI
   Font: DM Sans (weights 400, 500, 700) loaded via Google Fonts in the form partials
   Palette: Deep navy #0f172a, Brand blue #2563eb, Soft slate backgrounds
*/

/* ── Loading overlay ─────────────────────────────────────────────────────── */
/* Hidden by default. JS sets style.display = 'flex' to show. The previous   */
/* duplicate `display: none` (1.6.7.6 and earlier) made the second-line      */
/* flex-centering rules unreachable; fixed in 1.6.7.7.                       */
#bs-loading {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15,23,42,0.72);
	backdrop-filter: blur(4px);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 22px;
}
#bs-loading .bs-load-label {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: #f8fafc;
	text-align: center;
	letter-spacing: 0.01em;
	margin: 0;
}
#bs-loading .bs-load-sublabel {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: rgba(248,250,252,0.72);
	text-align: center;
	margin: -14px 0 0;
}

/* ── Concentric Rings (default — booking confirmation) ──────────────────── */
/* Three rings, different speeds, opposite rotations.                        */
.bs-load-rings {
	position: relative;
	width: 88px;
	height: 88px;
}
.bs-load-rings .bs-ring {
	position: absolute;
	border-radius: 50%;
	border: 2px solid transparent;
	border-top-color: #00d1b2;
}
.bs-load-rings .bs-ring-1 {
	inset: 0;
	border-top-color: #00d1b2;
	animation: bs-rings-cw 1.4s linear infinite;
}
.bs-load-rings .bs-ring-2 {
	inset: 12px;
	border-top-color: rgba(0,209,178,0.75);
	animation: bs-rings-ccw 1.0s linear infinite;
}
.bs-load-rings .bs-ring-3 {
	inset: 24px;
	border-top-color: rgba(0,209,178,0.55);
	animation: bs-rings-cw 0.7s linear infinite;
}
@keyframes bs-rings-cw  { to { transform: rotate(360deg);  } }
@keyframes bs-rings-ccw { to { transform: rotate(-360deg); } }

/* ── Orbital Pulse (Stripe card payment) ────────────────────────────────── */
/* Glowing teal core with £ glyph; satellite circles on a dashed ring.       */
.bs-load-orbital {
	position: relative;
	width: 110px;
	height: 110px;
}
.bs-load-orbital .bs-orbit-track {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px dashed rgba(0,209,178,0.5);
	animation: bs-rings-cw 6s linear infinite;
}
.bs-load-orbital .bs-orbit-satellite {
	position: absolute;
	inset: 0;
	animation: bs-rings-cw 2.2s linear infinite;
}
.bs-load-orbital .bs-orbit-satellite::before {
	content: '';
	position: absolute;
	top: -5px;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	background: #00d1b2;
	border-radius: 50%;
	box-shadow: 0 0 12px 2px rgba(0,209,178,0.7);
}
.bs-load-orbital .bs-orbit-core {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, #00d1b2 0%, #00a890 70%, #007e6b 100%);
	box-shadow:
		0 0 0 1px rgba(0,209,178,0.3),
		0 0 24px 4px rgba(0,209,178,0.45),
		inset 0 0 12px rgba(255,255,255,0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: #f8fafc;
	text-shadow: 0 1px 2px rgba(0,0,0,0.25);
	animation: bs-orbital-pulse 1.6s ease-in-out infinite;
}
@keyframes bs-orbital-pulse {
	0%, 100% {
		box-shadow:
			0 0 0 1px rgba(0,209,178,0.3),
			0 0 24px 4px rgba(0,209,178,0.45),
			inset 0 0 12px rgba(255,255,255,0.18);
	}
	50% {
		box-shadow:
			0 0 0 1px rgba(0,209,178,0.5),
			0 0 36px 8px rgba(0,209,178,0.65),
			inset 0 0 12px rgba(255,255,255,0.22);
	}
}

/* ── Root shell ──────────────────────────────────────────────────────────── */
#bs-container {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	color: #0f172a;
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 0 40px;
}

.bs-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	color: #0f172a;
}

/* ── Step header card ────────────────────────────────────────────────────── */
.bs-step-header {
	background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
	border-radius: 20px;
	padding: 28px 32px;
	margin-bottom: 20px;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 18px;
	position: relative;
	overflow: hidden;
}
.bs-step-header::before {
	content: '';
	position: absolute;
	top: -40px; right: -40px;
	width: 180px; height: 180px;
	background: rgba(37,99,235,0.25);
	border-radius: 50%;
}
.bs-step-header::after {
	content: '';
	position: absolute;
	bottom: -60px; left: 30%;
	width: 240px; height: 240px;
	background: rgba(255,255,255,0.04);
	border-radius: 50%;
}
.bs-step-icon {
	width: 56px; height: 56px;
	background: rgba(37,99,235,0.3);
	border: 1px solid rgba(37,99,235,0.5);
	border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px;
	flex-shrink: 0;
	position: relative; z-index: 1;
}
.bs-step-text { position: relative; z-index: 1; }
.bs-step-title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.bs-step-sub { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 3px; }

/* ── Section label ───────────────────────────────────────────────────────── */
.bs-section-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #64748b;
	margin: 24px 0 10px;
}

/* ── Bento cards grid ────────────────────────────────────────────────────── */
.bs-bento-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}
.bs-bento-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 560px) {
	.bs-bento-grid, .bs-bento-grid-2 { grid-template-columns: 1fr; }
}

/* ── Bento service / option cards ────────────────────────────────────────── */
.bs-bento-option {
	position: relative;
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 16px;
	padding: 18px 20px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
	display: block;
}
.bs-bento-option:hover {
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
	transform: translateY(-1px);
}
.bs-bento-option input[type=radio] {
	position: absolute;
	top: 16px; right: 16px;
	accent-color: #2563eb;
	width: 18px; height: 18px;
}
.bs-bento-option input[type=radio]:checked ~ .bs-bento-option-inner {
	color: #2563eb;
}
.bs-bento-option:has(input:checked) {
	border-color: #2563eb;
	background: #f0f7ff;
	box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
}
.bs-bento-option-icon {
	font-size: 24px;
	margin-bottom: 10px;
	display: block;
}
.bs-bento-option-name {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 4px;
}
.bs-bento-option-desc {
	font-size: 12px;
	color: #64748b;
	line-height: 1.4;
}
.bs-bento-option-price {
	font-size: 20px;
	font-weight: 700;
	color: #2563eb;
	margin-top: 10px;
}
.bs-bento-option-price small {
	font-size: 12px;
	font-weight: 400;
	color: #94a3b8;
}

/* ── Form card shell ─────────────────────────────────────────────────────── */
/* 1.6.5.8 — !important on background + colour because the live site's
   surrounding dark theme overrides .bs-form-card's intended white bg,
   producing dark text on dark card. Pages were designed as light-theme
   cards and we enforce that.

   1.6.6.1-fix — added explicit modifier classes for tinted variants
   (amber/green/blue) because the broad !important above was beating
   inline-styled tinted cards too, turning the amber "Important" notice,
   the green Current Booking summary, and the blue Card Payment block
   into plain white. Each variant declares its own !important pair so
   it wins over both the default and the dark-theme override. */
.bs-form-card {
	background: #fff !important;
	color: #0f172a !important;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	padding: 24px 28px;
	margin-bottom: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
}
/* Amber warning variant — used on the "Important" notice on the
   confirmation page and on the data-badge upload card on the
   booking-details form. Cream bg + deep amber text. */
.bs-form-card.bs-form-card--amber {
	background: #fffbeb !important;
	border-color: #fde68a !important;
	color: #92400e !important;
}
.bs-form-card--amber .bs-form-card-title { color: #92400e !important; border-bottom-color: #fde68a !important; }
.bs-form-card--amber * { color: inherit; }
/* Green success variant — intentionally a DARK-tinted card with light
   text, used for the Current Booking summary on the change-service
   flow. The deeper translucent green sits cleanly on either a light
   or dark surrounding (the lightness of the parent shows through but
   never enough to make the card itself light), and the light text
   inside reads on it consistently. */
.bs-form-card.bs-form-card--green {
	background: linear-gradient(135deg, rgba(5,150,105,0.55), rgba(5,95,70,0.7)) !important;
	border-color: rgba(5,150,105,0.45) !important;
	color: #e2e8f0 !important;
}
.bs-form-card--green .bs-form-card-title { color: #d1fae5 !important; border-bottom-color: rgba(255,255,255,0.15) !important; }
.bs-form-card--green table td { color: #e2e8f0 !important; }
.bs-form-card--green table td:first-child { color: #94a3b8 !important; }
/* Blue info variant — used on the Card Payment / 3DS info blocks. */
.bs-form-card.bs-form-card--blue {
	background: #f0f7ff !important;
	border-color: #bfdbfe !important;
	color: #1d4ed8 !important;
}
.bs-form-card--blue .bs-form-card-title { color: #1d4ed8 !important; }
.bs-form-card-title {
	font-size: 13px;
	font-weight: 700;
	color: #0f172a !important;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid #f1f5f9;
	display: flex;
	align-items: center;
	gap: 8px;
}
.bs-form-card-title-icon {
	width: 28px; height: 28px;
	background: #f0f7ff;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.bs-msg { margin-bottom: 14px; }
.bs-alert { padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.bs-alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.bs-alert-error a { color: #991b1b; text-decoration: underline; font-weight: 600; }
.bs-alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

.bs-field { margin-bottom: 14px; }
.bs-field label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}
.bs-req { color: #ef4444; }

.bs-field input[type=text],
.bs-field input[type=email],
.bs-field input[type=tel],
.bs-field input[type=password],
.bs-field select,
.bs-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	font-size: 14px;
	font-family: 'DM Sans', sans-serif;
	color: #0f172a;
	background: #fafbfc;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
	-webkit-appearance: none;
}
.bs-field input:focus,
.bs-field select:focus,
.bs-field textarea:focus {
	border-color: #2563eb;
	outline: none;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.bs-field textarea { min-height: 80px; resize: vertical; }
.bs-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

/* ── Row / columns ───────────────────────────────────────────────────────── */
.bs-row { display: flex; flex-wrap: wrap; gap: 0 14px; }
.bs-col-full  { width: 100%; }
.bs-col-half  { width: calc(50% - 7px); }
.bs-col-third { width: calc(33.333% - 10px); }
@media (max-width: 560px) {
	.bs-col-half, .bs-col-third { width: 100%; }
}

/* ── Datepicker input with icon ──────────────────────────────────────────── */
.bs-date-wrap {
	position: relative;
}
.bs-date-wrap input {
	padding-left: 42px !important;
	cursor: pointer;
}
.bs-date-wrap::before {
	content: '📅';
	position: absolute;
	left: 13px; top: 50%; transform: translateY(-50%);
	font-size: 16px;
	pointer-events: none;
	z-index: 1;
}

/* ── Terms / checkbox card ───────────────────────────────────────────────── */
.bs-tc-card {
	background: #f8fafc;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px 16px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	transition: border-color 0.2s;
	margin-bottom: 16px;
}
.bs-tc-card:hover { border-color: #2563eb; }
.bs-tc-card input[type=checkbox] {
	width: 18px; height: 18px;
	margin-top: 1px;
	flex-shrink: 0;
	accent-color: #2563eb;
	cursor: pointer;
}
.bs-tc-text { font-size: 13px; color: #475569; line-height: 1.6; }
.bs-tc-text a { color: #2563eb; text-decoration: underline; font-weight: 600; }

/* ── Primary button ──────────────────────────────────────────────────────── */
.bs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 32px;
	background: #2563eb;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-family: 'DM Sans', sans-serif;
	letter-spacing: 0.3px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
	box-shadow: 0 1px 3px rgba(37,99,235,0.3), 0 4px 12px rgba(37,99,235,0.2);
}
.bs-btn:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,0.35); }
.bs-btn:active { transform: translateY(0); }
.bs-btn-secondary {
	background: #f1f5f9; color: #0f172a;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.bs-btn-secondary:hover { background: #e2e8f0; }
.bs-btn-ghost {
	background: transparent;
	color: #64748b;
	border: 1.5px solid #e2e8f0;
	box-shadow: none;
}
.bs-btn-ghost:hover { background: #f8fafc; border-color: #cbd5e1; }
.bs-btn-danger { background: #dc2626; box-shadow: 0 1px 3px rgba(220,38,38,0.3); }
.bs-btn-danger:hover { background: #b91c1c; }
.bs-btn-full { width: 100%; }
.bs-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none;
}
@media (max-width: 480px) { .bs-btn { width: 100%; text-align: center; padding: 14px 20px; } }

/* ── Payment method cards ────────────────────────────────────────────────── */
.bs-payment-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}
@media (max-width: 480px) { .bs-payment-grid { grid-template-columns: 1fr; } }

.bs-payment-card {
	position: relative;
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 16px;
	padding: 20px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
	display: block;
}
.bs-payment-card:hover {
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
	transform: translateY(-1px);
}
.bs-payment-card:has(input:checked) {
	border-color: #2563eb;
	background: #f0f7ff;
	box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
}
.bs-payment-card input[type=radio] {
	position: absolute; top: 16px; right: 16px;
	accent-color: #2563eb;
	width: 18px; height: 18px;
}
.bs-payment-icon {
	font-size: 28px; margin-bottom: 10px; display: block;
}
.bs-payment-name {
	font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 4px;
}
.bs-payment-desc {
	font-size: 12px; color: #64748b; line-height: 1.5;
}

/* ── Total display ───────────────────────────────────────────────────────── */
.bs-total-bar {
	background: #f0f7ff;
	border: 1px solid #bfdbfe;
	border-radius: 12px;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.bs-total-label { font-size: 13px; color: #3b82f6; font-weight: 600; }
.bs-total-amount { font-size: 24px; font-weight: 800; color: #1d4ed8; }
.bs-total-vat { font-size: 11px; color: #93c5fd; }

/* ── Booking summary mini-cards ──────────────────────────────────────────── */
.bs-summary-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 16px 0;
}
@media (max-width: 480px) { .bs-summary-bento { grid-template-columns: 1fr; } }
.bs-summary-bento-card {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 14px;
}
.bs-summary-bento-label {
	font-size: 10px; font-weight: 700; color: #94a3b8 !important;
	text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px;
}
.bs-summary-bento-value {
	font-size: 13px; font-weight: 700; color: #0f172a !important;
}

/* ── Stripe elements ─────────────────────────────────────────────────────── */
.bs-stripe-wrap { }
.bs-stripe-el {
	padding: 11px 14px;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	background: #fafbfc !important;
	transition: border-color 0.15s, box-shadow 0.15s;
}
/* 1.6.6.1-fix — !important on the wrapper background because Stripe
   Elements iframes are transparent. Without a forced light surface
   under the iframe the dark theme override bleeds through, and the
   dark-navy card-number text we configure inside the iframe becomes
   invisible. Caller-reported on the live booking flow. */
.bs-el-focus  { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); background: #fff !important; }
.bs-el-invalid{ border-color: #ef4444; }
.bs-card-error { color: #dc2626; font-size: 13px; min-height: 20px; margin: 6px 0; font-weight: 500; }

/* ── Confirmation panel ─────────────────────────────────────────────────── */
.bs-confirmed { text-align: center; padding: 10px 0 20px; }
.bs-tick {
	width: 68px; height: 68px; line-height: 68px;
	margin: 0 auto 20px;
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	color: #fff; font-size: 32px; border-radius: 50%;
	box-shadow: 0 4px 20px rgba(37,99,235,0.35);
}
.bs-confirmed h2 { color: #0f172a; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.bs-confirmed p { color: #475569; margin-bottom: 8px; }
.bs-summary {
	display: inline-block; text-align: left;
	background: #f0f7ff; border: 1px solid #bfdbfe;
	border-radius: 16px; padding: 18px 22px;
	margin: 18px auto; min-width: 280px; max-width: 480px; width: 100%;
}
.bs-summary-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 0; font-size: 14px;
	border-bottom: 1px solid rgba(37,99,235,0.1);
}
.bs-summary-row:last-child { border-bottom: none; }
.bs-summary-row span { color: #64748b !important; font-weight: 500; }
.bs-summary-row strong { color: #0f172a !important; font-weight: 700; }

/* ── Step indicator pill ─────────────────────────────────────────────────── */
.bs-steps {
	display: flex; align-items: center; gap: 0;
	margin-bottom: 20px;
}
.bs-step-pill {
	display: flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 700;
	color: #94a3b8;
	padding: 6px 0;
}
.bs-step-pill.active { color: #2563eb; }
.bs-step-pill.done { color: #22c55e; }
.bs-step-dot {
	width: 24px; height: 24px; border-radius: 50%;
	background: #e2e8f0; display: flex; align-items: center;
	justify-content: center; font-size: 11px; font-weight: 800; color: #94a3b8;
	flex-shrink: 0;
}
.bs-step-pill.active .bs-step-dot { background: #2563eb; color: #fff; }
.bs-step-pill.done .bs-step-dot { background: #22c55e; color: #fff; }
.bs-step-line { flex: 1; height: 2px; background: #e2e8f0; margin: 0 6px; }
.bs-step-line.done { background: #22c55e; }

/* ── jQuery UI datepicker overrides ─────────────────────────────────────── */
.ui-datepicker {
	z-index: 9999 !important; font-size: 14px; font-family: 'DM Sans', sans-serif;
	background: #1e293b; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
	padding: 0; overflow: hidden; min-width: 288px;
}
.ui-datepicker .ui-datepicker-header {
	background: linear-gradient(135deg, #0f172a, #1e3a5f);
	border: none; border-radius: 0; padding: 12px 40px; position: relative;
}
.ui-datepicker .ui-datepicker-title { color: #fff; font-weight: 700; font-size: 14px; text-align: center; }
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
	width: 28px !important; height: 28px !important; cursor: pointer !important;
	border-radius: 8px !important; display: block !important; overflow: visible !important;
}
.ui-datepicker .ui-datepicker-prev { left: 8px; }
.ui-datepicker .ui-datepicker-next { right: 8px; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background: rgba(255,255,255,0.15); }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { display: none !important; }
.ui-datepicker a.ui-datepicker-prev::after { content: "\276E"; color:#fff !important; font-size:16px; font-weight:900; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.ui-datepicker a.ui-datepicker-next::after { content: "\276F"; color:#fff !important; font-size:16px; font-weight:900; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.ui-datepicker table { width: 100%; border-collapse: collapse; padding: 10px 12px 12px; display: table; }
.ui-datepicker th { color: rgba(255,255,255,0.45); font-size: 11px; font-weight: 700; padding: 6px 4px 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; }
.ui-datepicker td { padding: 2px; text-align: center; }
.ui-datepicker td a, .ui-datepicker td span { display: block; padding: 6px 4px; border-radius: 8px; color: #f8fafc; background: rgba(255,255,255,0.07); text-decoration: none; font-size: 13px; font-weight: 500; transition: background 0.15s, color 0.15s; border: 1px solid transparent; }
.ui-datepicker td a:hover { background: rgba(0,209,178,0.2); color: #00d1b2; border-color: rgba(0,209,178,0.4); }
.ui-datepicker td a.ui-state-active { background: #00d1b2; color: #0f172a; border: none; font-weight: 700; }
.ui-datepicker td.ui-datepicker-today a { border: 2px solid #00d1b2; color: #00d1b2; font-weight: 700; padding: 4px 4px; background: rgba(0,209,178,0.1); }
.ui-datepicker td.ui-state-disabled span { color: rgba(255,255,255,0.2); background: none; border-color: transparent; }

/* ── Bento Stripe Checkout (kept from existing) ──────────────────────────── */
.bento-header {
	display: flex; justify-content: space-between; align-items: center;
	background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
	border-radius: 20px; padding: 24px 28px; margin-bottom: 16px; color: #fff;
	position: relative; overflow: hidden;
}
.bento-header::before {
	content: ''; position: absolute; top: -50px; right: -50px;
	width: 200px; height: 200px; background: rgba(37,99,235,0.2); border-radius: 50%;
}
.bento-header-left { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.bento-icon { font-size: 28px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 14px; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.bento-project { font-size: 17px; font-weight: 700; }
.bento-label { font-size: 12px; opacity: 0.7; margin-top: 2px; }
.bento-amount { text-align: right; position: relative; z-index: 1; }
.bento-amount-label { font-size: 11px; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.6px; }
.bento-amount-value { font-size: 34px; font-weight: 800; line-height: 1.1; }
.bento-amount-vat { font-size: 11px; opacity: 0.6; }

.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
@media(max-width:560px){ .bento-grid { grid-template-columns: 1fr; } }
.bento-card {
	background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px;
	padding: 14px 16px; transition: box-shadow 0.2s;
}
.bento-card:hover { box-shadow: 0 2px 12px rgba(37,99,235,0.1); }
.bento-card-icon { font-size: 20px; margin-bottom: 6px; }
.bento-card-label { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; margin-bottom: 4px; }
.bento-card-value { font-size: 13px; font-weight: 700; color: #0f172a; }

.bento-form-card {
	background: #fff; border: 1px solid #e2e8f0; border-radius: 20px;
	padding: 24px 28px; box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}
.bento-form-title { font-size: 13px; font-weight: 700; color: #0f172a; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
.bento-field { margin-bottom: 14px; }
.bento-field label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.bento-field input {
	width: 100%; padding: 11px 14px; border: 1.5px solid #e2e8f0;
	border-radius: 10px; font-size: 14px; color: #0f172a; background: #fafbfc;
	box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
	font-family: 'DM Sans', sans-serif;
}
.bento-field input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); background: #fff; }
.bento-field-row { display: flex; gap: 12px; }
.bento-field-row .bento-field { flex: 1; }
@media(max-width:480px){ .bento-field-row { flex-direction: column; } }
.bento-stripe-el {
	padding: 11px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px;
	background: #fafbfc; transition: border-color 0.15s, box-shadow 0.15s;
}
.bento-stripe-el.StripeElement--focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); background: #fff; }
.bento-stripe-el.StripeElement--invalid { border-color: #ef4444; }
.bento-card-error { color: #dc2626; font-size: 13px; min-height: 18px; margin: 6px 0 10px; font-weight: 500; }
.bento-pay-btn {
	width: 100%; padding: 14px 20px; margin-top: 6px;
	background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
	color: #fff; font-size: 15px; font-weight: 700; font-family: 'DM Sans', sans-serif;
	border: none; border-radius: 12px; cursor: pointer; display: flex;
	align-items: center; justify-content: center; gap: 8px;
	transition: opacity 0.2s, transform 0.15s; letter-spacing: 0.3px;
	box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}
.bento-pay-btn:hover { opacity: 0.93; transform: translateY(-1px); }
.bento-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.bento-stripe-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.bento-footer-links { display: flex; gap: 14px; }
.bento-footer-links a { color: #94a3b8; font-size: 12px; text-decoration: underline; }
.bento-footer-links a:hover { color: #2563eb; }

/* ── Cancel screen ───────────────────────────────────────────────────────── */
.bs-cancel-icon { font-size: 48px; text-align: center; margin-bottom: 8px; }
.bs-cancel-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Reschedule / cancel lookup ──────────────────────────────────────────── */
.bs-wrap h3 {
	font-size: 20px; font-weight: 700; margin-bottom: 6px;
	/* 1.6.7.12 — inherit theme text colour so the heading is readable on
	   both light and dark page backgrounds. Previously hardcoded to
	   #0f172a (dark navy), which became invisible on the site's dark theme. */
	color: inherit; letter-spacing: -0.3px;
}
.bs-wrap > p { color: #64748b; margin-bottom: 20px; font-size: 14px; }

/* ── options (legacy fallback) ───────────────────────────────────────────── */
.bs-options { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.bs-option-card {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 16px; border: 1.5px solid #e2e8f0;
	border-radius: 12px; cursor: pointer;
	transition: border-color 0.2s, background 0.2s; margin: 0; font-weight: 400;
}
.bs-option-card:hover { border-color: #2563eb; background: #f0f7ff; }
.bs-option-card input[type=radio] { margin-top: 3px; flex-shrink: 0; accent-color: #2563eb; }
.bs-option-inner { display: flex; flex-direction: column; gap: 2px; }
.bs-option-inner strong { font-size: 14px; font-weight: 700; }
.bs-option-inner small { font-size: 12px; color: #64748b; }
.bs-price { font-size: 16px; font-weight: 700; color: #2563eb; margin-top: 4px; }
.bs-price small { font-size: 12px; font-weight: 400; color: #94a3b8; }
.bs-tc-row { margin-top: 4px; }
.bs-tc-label {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 13px 16px; border: 1.5px solid #e2e8f0; border-radius: 12px;
	font-weight: 400; cursor: pointer; line-height: 1.5; font-size: 13px; color: #475569;
}
.bs-tc-label:hover { border-color: #2563eb; }
.bs-tc-label input[type=checkbox] { margin-top: 3px; flex-shrink: 0; accent-color: #2563eb; }
.bs-tc-label a { color: #2563eb; text-decoration: underline; }
.bs-total { font-size: 17px; margin-bottom: 18px; color: #475569; }
.bs-total strong { color: #2563eb; font-size: 20px; }