/* =========================================================================
   TOUBKAL-MAROC — single tour booking card (YITH calendar + form).
   Moved from checkout.css; loaded on single product pages only.
   ========================================================================= */

/* Moved from Bricks Code elements on the Single Tour templates (guest stepper,
   lightbox slide animation). Kept above the rules below so those still take precedence,
   as they did when this CSS was printed by Bricks before the theme stylesheets. */
#tour-booking-card .tour-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: transparent;
}
#tour-booking-card .tour-stepper input.yith-wcbk-booking-persons,
#tour-booking-card .tour-stepper input[type="number"] {
	width: 2.4rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-align: center;
	padding: 0.4rem 0 !important;
	font-family: "Ubuntu";
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--tbk-ink);
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}
#tour-booking-card .tour-stepper input.yith-wcbk-booking-persons::-webkit-outer-spin-button,
#tour-booking-card .tour-stepper input.yith-wcbk-booking-persons::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
#tour-booking-card .tour-stepper__btn {
	width: 2.7rem;
	height: 2.7rem;
	border: 0;
	border-radius: 9999px;
	background: #f1f0ee;
	color: var(--tbk-ink);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#tour-booking-card .tour-stepper__btn:hover {
	background: var(--tbk-ink);
	color: #fff;
}
#tour-booking-card .tour-stepper__btn:active {
	background: var(--tbk-primary);
	color: #fff;
}

@keyframes tourLbIn {
	from { transform: scale(1.04); }
	to { opacity: 1; transform: scale(1); }
}
.pswp.brx .pswp__img.tour-lb-in {
	animation: tourLbIn 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
	.pswp.brx .pswp__img.tour-lb-in { animation: none; }
}

/* Single tour: constrain the booking form column to 300px (desktop only) */
@media (min-width: 992px) {
	#tour-booking-card {
		max-width: 300px;
		margin-left: auto;
	}
}

/* Single tour: inline YITH calendar restyle (brand orange) */
#tour-booking-card .ui-datepicker {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	padding: 12px 0 14px;
	border: 1px solid rgba(var(--tbk-ink-rgb), 0.12);
	border-radius: 12px;
	background: #fff;
	box-shadow: none !important;
	font-family: "Ubuntu", sans-serif;
}

/* Header: chevrons + centered month/year */
#tour-booking-card .ui-datepicker-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px 12px;
	margin: 0;
	background: transparent;
	border: 0;
}

#tour-booking-card .ui-datepicker-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--tbk-ink);
	text-align: center;
}

#tour-booking-card .ui-datepicker-title .ui-datepicker-month {
	text-transform: capitalize;
}

#tour-booking-card .ui-datepicker-prev,
#tour-booking-card .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #9a9a9a;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease;
}

#tour-booking-card .ui-datepicker-prev { left: 6px; }
#tour-booking-card .ui-datepicker-next { right: 6px; }

#tour-booking-card .ui-datepicker-prev:hover,
#tour-booking-card .ui-datepicker-next:hover {
	background: rgba(var(--tbk-primary-rgb), 0.12);
}

#tour-booking-card .ui-datepicker-prev.ui-state-disabled,
#tour-booking-card .ui-datepicker-next.ui-state-disabled {
	opacity: 0.3;
	cursor: default;
	background: transparent;
}

#tour-booking-card .ui-datepicker-prev .ui-icon,
#tour-booking-card .ui-datepicker-next .ui-icon {
	width: 9px;
	height: 9px;
	margin: 0;
	padding: 0;
	font-size: 0;
	text-indent: 0;
	background: none !important;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(135deg);
}

#tour-booking-card .ui-datepicker-next .ui-icon {
	transform: rotate(-45deg);
}

/* Table */
#tour-booking-card .ui-datepicker-calendar {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
}

#tour-booking-card .ui-datepicker-calendar th {
	padding: 0;
	border: 0;
}

#tour-booking-card .ui-datepicker-calendar th span {
	display: block;
	padding: 8px 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--tbk-ink);
	text-align: center;
}

/* Weekday band */
#tour-booking-card .ui-datepicker-calendar thead tr {
	background: rgba(var(--tbk-primary-rgb), 0.15);
}

#tour-booking-card .ui-datepicker-calendar td {
	padding: 2px;
	border: 0;
	text-align: center;
}

#tour-booking-card .ui-datepicker-calendar td .ui-state-default {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 auto;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	color: var(--tbk-ink);
	text-align: center;
}

#tour-booking-card .ui-datepicker-calendar td.ui-datepicker-other-month .ui-state-default,
#tour-booking-card .ui-datepicker-calendar td.ui-state-disabled .ui-state-default {
	color: #c7c7c7;
	font-weight: 500;
}

/* YITH strikes through unavailable days; remove it so the digits stay legible */
#tour-booking-card .ui-datepicker-calendar td,
#tour-booking-card .ui-datepicker-calendar td.ui-state-disabled,
#tour-booking-card .ui-datepicker-calendar td.ui-datepicker-unselectable,
#tour-booking-card .ui-datepicker-calendar td.ui-datepicker-other-month,
#tour-booking-card .ui-datepicker-calendar td .ui-state-default {
	text-decoration: none !important;
}

#tour-booking-card .ui-datepicker-calendar td a.ui-state-default:hover {
	background: rgba(var(--tbk-primary-rgb), 0.14);
}

#tour-booking-card .ui-datepicker-calendar td a.ui-state-default.ui-state-highlight:not(.ui-state-active) {
	color: var(--tbk-primary);
	font-weight: 700;
	border: 1px solid var(--tbk-primary);
}

#tour-booking-card .ui-datepicker-calendar .ui-state-active,
#tour-booking-card .ui-datepicker-calendar .ui-datepicker-current-day a {
	background: var(--tbk-primary) !important;
	color: #fff !important;
	font-weight: 700;
}

/* Flat booking card + calendar: no shadows */
#tour-booking-card,
#tour-booking-card .ui-datepicker,
#tour-booking-card .ui-datepicker.ui-widget-content {
	box-shadow: none !important;
}

/* ---- Booking form: reference-style fields ---- */

#tour-booking-card .yith-wcbk-form-section {
	margin: 0 0 20px;
}

#tour-booking-card .yith-wcbk-form-section__label {
	display: block;
	font-family: "Ubuntu", sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--tbk-ink);
	margin: 0 0 10px;
}

/* Duration -> gray rounded field */
#tour-booking-card .yith-wcbk-form-section-duration .yith-wcbk-form-section__content {
	display: block;
	padding: 0;
	min-height: 0;
}

#tour-booking-card .yith-wcbk-booking-duration__label {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 10px;
	background: #f2f2f2;
	font-family: "Ubuntu", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: var(--tbk-ink);
}

/* Persons -> bordered rounded field with stepper */
#tour-booking-card .yith-wcbk-form-section-persons .yith-wcbk-form-section__content {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0 12px;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	background: #fff;
}

#tour-booking-card .yith-wcbk-form-section-persons .tour-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 0;
	border: 0;
	background: transparent;
}

#tour-booking-card .yith-wcbk-form-section-persons .tour-stepper__btn {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	min-width: 34px;
	border-radius: 50%;
	background: #f2f2f2;
	color: var(--tbk-ink);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
}

#tour-booking-card .yith-wcbk-form-section-persons .tour-stepper__btn:hover {
	background: var(--tbk-ink);
	color: #fff;
}

#tour-booking-card .yith-wcbk-form-section-persons input.yith-wcbk-booking-persons {
	flex: 1 1 0;
	min-width: 0;
	width: 100% !important;
	text-align: center;
	font-family: "Ubuntu", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--tbk-ink);
	background: transparent;
	border: 0 !important;
}

/* Add to cart -> flat full-width brand pill */
#tour-booking-card .yith-wcbk-add-to-cart-button,
#tour-booking-card button.yith-wcbk-add-to-cart-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: 9999px;
	background: var(--tbk-primary);
	color: #fff;
	font-family: "Ubuntu", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: none !important;
	transition: background 0.18s ease;
}

#tour-booking-card .yith-wcbk-add-to-cart-button:hover {
	background: var(--tbk-primary-dark);
}