/* Tour Booking section ----------------------------------------------- */
.tour-booking {
	padding: 0;
	width: 100%;
}

.tour-booking .container {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.tour-booking__title {
	text-align: center;
	font-size: 28px;
	margin-bottom: 30px;
}

.tour-booking__cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.tour-card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	width: 100%;
}

.tour-card__summary {
	display: grid;
	grid-template-columns: 1fr 1.4fr 1.4fr 1.4fr auto;
	align-items: center;
	gap: 10px;
	padding: 20px 24px;
	transition: background-color 0.2s ease;
}

.tour-card__summary:hover {
	background-color: #f7f3f3;
}

.tour-card__label {
	display: block;
	font-size: 12px;
	color: #8a8a8a;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

.tour-card__price strong s {
	color: #b3b3b3;
	margin-right: 6px;
	font-weight: 400;
}

.tour-card__price-value {
	color: #a21a28;
	font-size: 20px;
	font-weight: 700;
}

.tour-card__price strong {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.tour-card__price strong small {
	font-size: 11px;
	font-weight: 400;
	color: #8a8a8a;
}

.tour-card__toggle-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #a21a28;
	background: #fff;
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	padding: 0;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.tour-card__toggle-btn,
.tour-card__toggle-btn:focus,
.tour-card__toggle-btn:active {
	background-color: #fff;
}

.tour-card__toggle-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(162, 26, 40, 0.25);
}

.tour-card__toggle-btn:focus .icon-plus svg line,
.tour-card__toggle-btn:focus .icon-minus svg line,
.tour-card__toggle-btn:active .icon-plus svg line,
.tour-card__toggle-btn:active .icon-minus svg line {
	stroke: #a21a28;
}

.tour-card__toggle-btn .icon-plus,
.tour-card__toggle-btn .icon-minus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
}

.tour-card__toggle-btn .icon-plus svg,
.tour-card__toggle-btn .icon-minus svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.tour-card__toggle-btn .icon-plus svg line,
.tour-card__toggle-btn .icon-minus svg line {
	stroke: #a21a28;
	stroke-width: 2;
	stroke-linecap: round;
	transition: stroke 0.2s ease;
}

.tour-card__toggle-btn[aria-expanded="true"] .icon-plus {
	display: none;
}

.tour-card__toggle-btn[aria-expanded="false"] .icon-minus {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.tour-card__toggle-btn:hover {
		background: #a21a28;
	}

	.tour-card__toggle-btn:hover .icon-plus svg line,
	.tour-card__toggle-btn:hover .icon-minus svg line {
		stroke: #fff;
	}
}

.tour-card__details {
	border-top: 1px solid #f0f0f0;
	padding: 24px;
	background: #fafafa;
}

.tour-card__row {
	margin-bottom: 18px;
}

.tour-card__row-title {
	font-weight: 600;
	margin-bottom: 10px;
}

.tour-card__discounted-price {
	color: #a21a28;
	font-weight: 600;
}

.tour-card__single-sup-text s,
.tour-card__extra-price s {
	color: #b3b3b3;
	margin-right: 4px;
	font-weight: 400;
}

.tour-card__single-sup label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.tour-card__single-sup-text {
	flex: 1;
}

.tour-card__hint {
	display: block;
	font-size: 12px;
	color: #8a8a8a;
	margin-top: 6px;
	margin-left: 24px;
}

.tour-card__extra {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	cursor: pointer;
	border-bottom: 1px dashed #e6e6e6;
}

.tour-card__extra-name {
	flex: 1;
}

.tour-card__extra-price {
	font-weight: 600;
	text-align: right;
}

.tour-card__extra-base-price {
	display: block;
}

.tour-card__extra-ss-note {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #a21a28;
	margin-top: 2px;
}

.tour-card__extra-ss-note .js-extra-ss-total {
	font-weight: 600;
}

.tour-card__passengers {
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
}

.tour-card__passengers label {
	white-space: nowrap;
}

.tour-card__passengers select {
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
}

.tour-card__passengers.is-hidden {
	display: none;
}

.tour-card__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-left: auto;
	max-width: 320px;
	width: 100%;
}

.tour-card__totals {
	border-top: 1px solid #e6e6e6;
	padding-top: 16px;
	width: 100%;
}

.tour-card__totals-line {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 4px 0;
	color: #555;
}

.tour-card__totals-line--main {
	font-size: 18px;
	color: #1a1a1a;
}

.tour-card__totals-line--deposit strong {
	color: #a21a28;
}

.tour-card__action {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: flex-end;
	width: 100%;
}

.tour-card .btn-primary.js-book-online {
	background: #a21a28;
	color: #fff;
	border: none;
	border-radius: 30px;
	padding: 12px 32px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.tour-card .btn-primary.js-book-online:hover {
	background: #8a1620;
}

.tour-card .btn-primary.js-book-online:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.tour-card__error {
	color: #a21a28;
	font-size: 13px;
}

@media (max-width: 768px) {
	.tour-card__summary {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: auto;
	}
	.tour-card__toggle {
		grid-column: span 2;
		display: flex;
		justify-content: flex-end;
	}
}

/* WooCommerce cart / checkout booking detail alignment ----------------- */
.woocommerce-cart .variation,
.woocommerce-checkout .variation {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 14px;
	margin: 8px 0;
}

.woocommerce-cart .variation dt,
.woocommerce-checkout .variation dt {
	margin: 0;
	font-weight: 600;
	font-size: inherit;
	color: #8a8a8a;
	white-space: nowrap;
}

.woocommerce-cart .variation dd,
.woocommerce-checkout .variation dd {
	margin: 0;
	color: #1a1a1a;
}

.woocommerce-cart .variation dd p,
.woocommerce-checkout .variation dd p {
	margin: 0;
}

/* Mini-cart uses a simple stacked layout (label, then value beneath)
   rather than side-by-side columns. The slide-out panel is narrow and
   some values (dates, extension names) are long, so a two-column
   layout either wraps awkwardly or misaligns depending on the theme's
   exact markup. Stacking avoids both problems entirely. */
.widget_shopping_cart .variation,
.woocommerce-mini-cart-item .variation {
	display: block;
	margin: 10px 0;
}

.widget_shopping_cart .variation dt,
.woocommerce-mini-cart-item .variation dt {
	margin: 10px 6px 2px 0;
	font-weight: 600;
	font-size: inherit;
	letter-spacing: 0.01em;
	color: #8a8a8a;
	display: inline-block;
	vertical-align: middle;
	line-height: 1.3;
}

.widget_shopping_cart .variation dt:first-child,
.woocommerce-mini-cart-item .variation dt:first-child {
	margin-top: 0;
}

.widget_shopping_cart .variation dd,
.woocommerce-mini-cart-item .variation dd {
	margin: 0;
	color: #1a1a1a;
	display: inline-block;
	vertical-align: middle;
	line-height: 1.3;
}

.widget_shopping_cart .variation dd p,
.woocommerce-mini-cart-item .variation dd p {
	margin: 0;
	display: inline;
}

/* The default "1 × £0.00" WooCommerce quantity/price line in the
   slide-out mini-cart is redundant for tour bookings - our own
   "Total trip price" / "Deposit due today" lines already cover it. */
.widget_shopping_cart .woocommerce-mini-cart-item .quantity {
	display: none;
}

/* Checkout passenger name fields --------------------------------------- */
.tour-booking-passenger-names {
	padding: 0;
	margin-top: 20px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

.tour-booking-passenger-names h3 {
	margin: 0 0 4px 0;
}

.tour-booking-passenger-names h3 small {
	display: block;
	font-size: 0.65em;
	font-weight: 400;
	color: #8a8a8a;
	margin-top: 2px;
}

.tour-booking-passenger-heading {
	margin: 0 0 14px 0;
}

.tour-booking-passenger-names .input-text {
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.4;
	height: auto;
	min-height: 44px;
}

/* iOS Safari often ignores percentage widths on date inputs and falls
   back to its own native intrinsic sizing, which is what was pushing
   the DOB fields past the screen edge even though everything else
   behaved correctly. Forcing it explicitly fixes that. */
.tour-booking-passenger-names input[type="date"] {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #ddd !important;
	min-height: 44px;
	padding: 10px 12px;
	/* iOS Safari's native date widget sometimes fails to paint the
	   border on the side where the calendar icon sits, even though the
	   border is genuinely set - box-shadow renders independently of
	   the native control's own layout and reliably shows on all sides. */
	box-shadow: inset 0 0 0 1px #ddd;
}

.tour-booking-passenger-names .form-row {
	margin: 0 0 14px 0;
}

.tour-booking-passenger-names .form-row label {
	display: block;
	margin: 0 0 4px 0;
}

/* Deliberately not overriding .form-row-first / .form-row-last width,
   padding, or float here - WooCommerce's own grid relies on a small
   negative margin on the parent column, compensated for by padding on
   .form-row itself. Overriding that padding broke the compensation and
   caused fields to bleed past the screen edge on mobile. Letting
   WooCommerce's native styling handle the two-column layout (which
   already works correctly for every other checkout field) avoids that
   entirely - we only need to force single-column stacking below a
   breakpoint, nothing else. */
@media (max-width: 600px) {
	.tour-booking-passenger-names .form-row-first,
	.tour-booking-passenger-names .form-row-last {
		width: 100% !important;
		float: none !important;
		display: block !important;
	}
}