@font-face {
	font-family: "BRCandor";
	src: url("webfonts/BRCandor-Regular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

:root {
	--tooltip-font-size: 0.875rem;
	--tooltip-max-width: 200px;
	--tooltip-color: #ffffffcc;
	--tooltip-bg: #334454;
	--tooltip-border-radius: 12px;
	--tooltip-opacity: 0.9;
	--tooltip-padding-y: 0.125rem;
	--tooltip-padding-x: 0.25rem;
	--tooltip-margin: 0;

	--tooltip-arrow-width: 0.8rem;
	--tooltip-arrow-height: 0.4rem;
	--tooltip-arrow-color: black;
}


body,
html {
	height: 100%;
	margin: 0;
	font-family: "BRCandor", sans-serif;
}


/* Main Wrapper */
.main-wrapper {
	width: 100%;
	margin: auto;

	.header-wrapper {
		width: 100%;
		box-shadow: 0px 0px 4px 0px #00000014 !important;
		border-bottom: 1px solid #00000014;

		img.supplierLogo {
			max-width: 500px;
			max-height: 56px;
		}
	}

	.header {
		width: 90%;
		margin: auto;

		.logo-text {
			font-weight: 500;
			font-size: 12px;
			line-height: 100%;
			letter-spacing: 0%;
			text-align: center;
			color: #26AF51;
		}

		.title {
			font-weight: 600;
			font-size: 16px;
			line-height: 24px;
			letter-spacing: 0%;
			text-align: center;
			color: #444444CC;
		}

		.shopping-cart {
			position: relative;
			border: 1px solid #EBEBEB;
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;

			.cart-value {
				position: absolute;
				top: -6px;
				right: -6px;
				width: 18px;
				height: 18px;
				border-radius: 50%;
				background-color: #26AF51;
				color: #fff;
				font-weight: 500;
				font-size: 12px;
				line-height: 12px;
				letter-spacing: 0%;
				text-align: center;

			}
		}
	}
}


/* Cart panel start*/
.cart-panel {
	width: 436px !important;
	padding: 24px !important;
	border-radius: 16px !important;
}

.cart-info {
	.cart-title {
		font-weight: 600;
		font-size: 20px;
		line-height: 22px;
		letter-spacing: 0%;
		color: #303233;
	}

	.cart-value {
		width: 31px;
		height: 22px;
		border-radius: 50px;
		background: #F3F3F3;
		font-weight: 600;
		font-size: 14px;
		line-height: 22px;
		letter-spacing: 0%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.close-btn {
		width: 32px;
		height: 32px;
		border-radius: 40px;
		padding: 10px;
		background-color: #F0F3F6;
	}

	.product-wrapper {
		border-radius: 12px;
		padding: 12px 16px;
		background-color: #F0F3F6;
	}


	.cart-product-img {
		width: 48px;
		height: 48px;
		border-radius: 4px;
		overflow: hidden;

	}

	.product-title {
		color: #303233;
		font-weight: 500;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0%;
	}

	.quantity {
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0px;
		color: #00171D;
		background-color: white;
		border: 1px solid #EBEBEB;
		border-radius: 4px;
	}

	.price {
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0%;
		text-align: right;
		color: #303233;
	}

	.hourly-price {
		font-weight: 500;
		font-size: 12px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #6E88A2;
	}

	.product-close {
		border: none;
		outline: none;
		background-color: transparent;
	}

	.cart-products-container {
		max-height: 400px;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		padding-bottom: 8px;
	}

	.footer-text {
		font-weight: 400;
		font-size: 12px;
		line-height: 100%;
		letter-spacing: 0px;
		vertical-align: middle;
		color: #444444CC;
	}


	.chekout-btn {
		padding-top: 8px;
		padding-right: 16px;
		padding-bottom: 7px;
		padding-left: 16px;
		border-radius: 8px;
		border: none;
		outline: none;
		width: 100%;
		transition: all 0.3s ease-in-out;
		background-color: #26AF51;
		color: white;

		&:hover {
			opacity: 0.7;
		}
	}
}

/* Cart panel end */
/* main content */
.content {
	width: 90%;
	margin: auto;

	.section-title {
		font-weight: 600;
		font-size: 24px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #231F20;
	}

	.sub-title {
		font-weight: 400;
		font-size: 16px;
		line-height: 25px;
		letter-spacing: 0%;
		color: #231F20CC;

		a.text-primary {
			text-decoration: none;
			transition: opacity 0.3s ease-in-out;

			&:hover {
				opacity: 0.7;
			}
		}
	}

	.btn-theme-primary,
	.btn-theme-secondary {
		font-weight: 500;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0%;
		text-align: center;

	}

	.btn-theme-primary,
	.btn-theme-secondary {
		padding-top: 8px;
		padding-right: 16px;
		padding-bottom: 7px;
		padding-left: 16px;
		border-radius: 8px;
		transition: all 0.3s ease-in-out;

		&:hover {
			opacity: 0.7;
		}
	}

	.btn-theme-primary {
		background-color: #26AF51;
		color: white;
	}

	.btn-theme-secondary {
		border: 1px solid #F0F3F6;
		color: #26AF51;
	}
}

/* Global styling start */

.dropdown {
	box-shadow: none !important;

	.btn {
		border: 1px solid #dadada;
		background: none;
		/* border-radius: 50px; */
		/* color: #003264CC; */
		color: #303233;
		padding: 9px 20px 7px 20px;
		border-radius: 12px;

		&:hover {
			background-color: #e8ecf3;
		}

		img {
			margin-top: -2px;
		}

		&.v1 {
			background: #F0F3F6;
			border-color: #F0F3F6;
		}

		&.v2 {
			background-color: #ffffff;
			border-color: #ffffff;
		}
	}

	.dropdown-menu {
		padding: 12px;
		border-radius: 12px;
		border: none;
		background-color: white;
		overflow: hidden;
		box-shadow: 0 1px 8px #0000001a;
		width: 200px;

		.dropdown-item {
			padding: 8px;
			color: #003264cc;
			display: flex;
			align-items: center;
			gap: 8px;

			&:focus {
				background-color: rgba(255, 255, 255, 0.076);
				color: #00326487;
			}
		}

		.v1 {
			padding-right: 0px;
		}


		.menu-items {
			max-height: 200px;
			overflow-x: hidden;
			overflow-y: scroll;
			padding-right: 2px;

			&::-webkit-scrollbar {
				width: 8px;
				/* Width of the scrollbar */
				height: 8px;
				/* Height of the scrollbar for horizontal scrollbars */
			}

			&::-webkit-scrollbar-track {
				background: #f6f6f6;
				/* Track background color for dark theme */
				border-radius: 4px;
				/* Track border-radius */
			}

			&::-webkit-scrollbar-thumb {
				background-color: #565656;
				/* Thumb color for dark theme */
				border-radius: 4px;
				/* Thumb border-radius */
				border: 2px solid #e3e3e3;
				/* Padding around thumb */
			}

			&::-webkit-scrollbar-thumb:hover {
				background-color: #c0c0c0;
				/* Thumb color on hover for dark theme */
			}
		}
	}

	.dropdown-item {
		font-size: 14px;
		color: #2c3e50;
	}

	.dropdown-item:hover {
		background-color: #e8f0fe;
	}

	/* Selected/active item uses the widget's themed primary color with its
	   contrast text — was Bootstrap's hardcoded #0d6efd blue with low-contrast
	   dark navy text (highlight and text read as the same color). */
	.dropdown-menu .dropdown-item.active,
	.dropdown-menu .dropdown-item.active:hover,
	.dropdown-menu .dropdown-item.active:focus {
		background-color: var(--widget-primary-color, #0d3b66);
		color: var(--widget-primary-contrast, #ffffff);
	}

	.form-control {
		font-size: 14px;
	}

	.dropdown-header {
		position: sticky;
		top: 0;
		background: white;
		z-index: 1;
		padding: 0px;
		padding-right: 12px;
		padding-bottom: 8px;

		.search-box {
			border-radius: 8px;
			background-color: white;
			color: #003264cc;
		}

		input {
			margin-top: 2px;
			/* border: 1px solid #DADADA; */
			/* background-color: white; */
			/* margin-bottom: 0px; */
			/* height: 32px; */
		}
	}

	.dropdown-toggle {
		width: 100%;
		padding: 10px;
		background-color: white;
		border: 1px solid #ccc;
		border-radius: 12px;
		text-align: left;
		cursor: pointer;
	}

	.dropdown-toggle::after {
		display: none;
	}

	.dropdown-options {
		display: none;
		position: absolute;
		width: 100%;
		background-color: white;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		max-height: 150px;
		overflow-y: auto;

		&.show {
			display: block;
		}
	}

	.dropdown-option {
		padding: 10px;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.dropdown-option:hover {
		background-color: #f1f7ee;
	}

	.dropdown-options {
		display: none;
		position: absolute;
		width: 100%;
		background-color: white;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		max-height: 150px;
		overflow-y: auto;
	}
}

.status {
	padding: 6px 16px;
	border-radius: 40px;
	font-weight: 500;
	font-size: 12px;
	line-height: 100%;
	letter-spacing: 0%;
	width: max-content;

	&.success {
		color: #26AF51;
		background: #26AF5114;
	}

	&.danger {
		color: #E0211F;
		background-color: #E0211F0F;
	}

}

.input-group {
	position: relative;
	height: 40px;
}

.input-group span {
	z-index: 100;
}

.input-group .form-control {
	border-radius: 12px !important;
	padding-left: 50px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin: 0 !important;

	&::placeholder {
		color: #00326466;
	}
}

.input-group .input-icon {
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	color: #00326466;
}

.form-control:focus {
	box-shadow: none;
}

.check {
	padding: 13px 23px 11px;
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	border-radius: 12px;
	border: 1px solid #ebebeb;
	cursor: pointer;
	color: #303233;

	&.checked {
		font-weight: 500;
		background-color: #26AF511A;
		border: 1px solid #26AF5199
	}
}

textarea {
	background-color: #F6F7F9;
	resize: none;

	&:focus {
		background-color: #f6f7f9 !important;
	}
}

.form-group {
	input {
		border-radius: 12px;
		padding: 13px 12px 11px;

		&:focus {
			background-color: #f6f7f9;
			border-color: var(--widget-primary-accent, #26AF51);
			border-width: 1px;
			border-style: solid;
		}
	}

	label {
		font-size: 16px;
		font-weight: 600;
		line-height: 20.8px;
		text-align: left;
		text-underline-position: from-font;
		text-decoration-skip-ink: none;
	}

	small {
		font-size: 12px;
		font-weight: 400;
		color: #00326499;
	}
}


.form-control {
	border-radius: 10px;
	border: none;
	padding: 12px;
	padding-top: 16px;
	margin-bottom: 10px;
	background-color: #F6F7F9;

	&::placeholder {
		color: #30323366;
	}

	&:focus {
		border-color: var(--widget-primary-accent, #26AF51);
		border-width: 1px;
		border-style: solid;
		/* background-color: #F9F9F9; */
		outline: 0;
		box-shadow: none;
	}
}

.form-select {
	border: none;
	background-color: #f6f7f9;
	border-radius: 12px;
	padding: 13px 12px 11px;
}

.help-box {
	display: flex;
	align-items: center;
	background-color: #f7c33329;
	border-radius: 12px;
	padding: 20px;
	max-width: 100%;
}

.help-box-mob {
	display: flex;
	align-items: center;
	background-color: #f7c33329;
	border-radius: 12px;
	padding: 20px;
	padding-bottom: 28px;
	max-width: 100%;
	line-height: 1px;
}

.help-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fdeccf;
	color: #f1a60e;
	font-size: 32px;
	font-weight: 100;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	margin-right: 15px;
}

.help-text p {
	font-size: 16px;
	color: #003264cc;
	line-height: 20.8px;
}

.help-link {
	font-size: 14px;
	color: #00274d;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	transition: all 0.3s ease-in-out;
	cursor: pointer;

	&:hover {
		opacity: 0.7;
	}
}

.help-link:hover {
	text-decoration: underline;
}


.right-canvas {
	width: 35% !important;
	padding: 32px;
	z-index: 9999;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;

}

.form-control-category {
	border-radius: 10px;
	background-color: #f9f9f9;

	&::placeholder {
		color: #30323366;
	}

	&:focus {
		border-color: #003264;
		outline: 0;
		box-shadow: none;
	}

	.form-control-category-input {
		background: #f9f9f9;
		width: 100%;

		&:focus {
			outline: none;
			border: none;
		}
	}
}

.add-btn {
	font-weight: 600;
	background-color: transparent;
	border-radius: 50px;
	padding: 8px 16px 7px 12px;
	border: #26AF51 solid;
	color: #26AF51;
	transition: all 0.3s ease-in-out;


	&:hover {
		opacity: 0.7;
	}
}




/* Global styling end */




/* Stepper form */
.stepper {
	.checkpoint-active {
		width: 40px;
		height: 40px;
		border: 2.5px solid #26AF51;
		border-radius: 50%;
		font-weight: 600;
		font-size: 20px;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: center;
		vertical-align: middle;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #26AF51;
		font-size: 20px;
		font-weight: 600;
		flex-shrink: 0;

	}

	.checkpoint-next {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		font-weight: 600;
		font-size: 20px;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: center;
		vertical-align: middle;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #6E88A2;
		color: white;
		font-size: 20px;
		font-weight: 600;
		flex-shrink: 0;

	}

	.checkpoint-completed {
		width: 40px;
		height: 40px;
		border: 2.5px solid #26AF51;
		background-color: #26AF51;
		border-radius: 50%;
		font-weight: 600;
		font-size: 20px;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: center;
		vertical-align: middle;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #26AF51;
		font-size: 20px;
		font-weight: 600;
		flex-shrink: 0;
	}

	.stepper-divider {
		border: 3px solid #6E88A229;
		height: 0;
		width: 100%;
	}

	.checkpoint-label {
		font-weight: 600;
		font-size: 16px;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: center;
		vertical-align: middle;
		color: #6E88A28A;
		white-space: nowrap;

		&.active {
			color: #303233;
		}
	}
}

.section-divider {
	border-bottom: 1px solid #6E88A229;
	width: 100%;
}


.stepper-card {
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
	border: none;
	padding: 24px;
	border-radius: 16px;
	background-color: #FFFFFF;
	width: 70%;

	.stepper-form-label {
		font-weight: 600;
		font-size: 16px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #303233;
	}
}

.increment-btn-wrapper {
	background-color: #F0F3F6;
	border-radius: 12px;
	padding: 12px 24px;

	font-weight: 600;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #303233;

	.text-subscript {
		font-weight: 400;
		font-size: 14px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #303233;
	}
}

.increment-btn {
	border: 1px solid #DBDEE0;
	background-color: #ffffff;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	transition: all 0.3s ease-in-out;

	&:hover {
		opacity: 0.7;
	}

}

.label-text {
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	vertical-align: middle;
	color: #6E88A2;
}

.form-check-input {
	background-color: #6e88a27a;
}

.form-check-input:checked {
	background-color: #26AF51;
	border: transparent;
}


.selectable-card {
	background: #6E88A214;
	/* border: 1.5px solid #26AF51; */
	padding: 20px;
	border-radius: 12px;
	flex: 1 1 calc((100% - 64px) / 5);
	min-width: 150px;
	cursor: pointer;
	transition: opacity 0.3s ease-in-out;
	
	@media (max-width: 768px) {
		flex: 1 1 calc(50% - 8px);
		min-width: calc(50% - 8px);
	}

	&:hover {
		opacity: 0.7;
	}

	&.active {
		border: 1.5px solid var(--widget-primary-accent, #26AF51);
	}

	.title {
		font-weight: 600;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0%;
		color: #303233;
	}

	.subtitle {
		font-weight: 400;
		font-size: 12px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #303233CC;
		;
	}
}


.product-card {
	box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	border: 1px solid #e8eaed;
	padding: 0;
	border-radius: 16px;
	cursor: pointer;
	transition: box-shadow 0.15s, transform 0.15s;
	overflow: hidden;

	.card-img {
		overflow: hidden;
		aspect-ratio: 4/3;
		background: #e8eaed;
		display: flex;
		align-items: center;
		justify-content: center;

		img.widgetListingGrid {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	/* Ensure spacing between card rows - use more specific selector */
	div.products > div.row {
		margin-bottom: 24px !important;
	}
	
	div.products > div.row:last-child {
		margin-bottom: 0 !important;
	}
	
	/* Align product title at consistent height - ensure availability pill area has consistent height */
	.product-card .card-body {
		display: flex;
		flex-direction: column;
	}
	
	.product-card .card-body > .product-availablity:first-child {
		min-height: 0;
		margin-bottom: 0;
	}

	.product-title {
		font-weight: 700;
		font-size: 15px;
		line-height: 1.3;
		color: var(--widget-primary-accent, #0f1f3d);
		margin-bottom: 2px;
	}

	.product-stock {
		color: #444444;
		font-weight: 500;
		font-size: 12px;
		line-height: 100%;
		letter-spacing: 0%;

	}

	.product-description {
		font-weight: 400;
		font-size: 12px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #00326480;
	}

	.product-description-list {
		font-weight: 400;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 0%;
		color: #444444CC;
	}

	.card-btn {
		background-color: transparent;
		border: none;
		outline: none;
		font-weight: 500;
		font-size: 12px;
		line-height: 100%;
		color: #1a56db;
		padding: 0;
		margin: 0;
		transition: all 0.15s ease;

		&:hover {
			opacity: 0.7;
		}
	}

	.product-price {
		font-weight: 700;
		font-size: 22px;
		line-height: 100%;
		letter-spacing: -0.5px;
		color: var(--widget-primary-accent, #0f1f3d);
	}

	.card-subscript {
		font-weight: 500;
		font-size: 12px;
		line-height: 22px;
		letter-spacing: 0%;
		color: #444444;
	}


	.product-booking-btn {
		background-color: var(--widget-primary-color, #0d3b66);
		color: var(--widget-primary-contrast, white);
		border: none;
		outline: none;
		width: 100%;
		padding: 10px;
		border-radius: 9px;
		font-weight: 700;
		font-size: 13px;
		transition: all 0.12s ease;

		&:hover {
			opacity: 0.85;
		}

		&.v1 {
			border: 1px solid #D0D5DD;
			color: #303233;
			background-color: white;
			font-weight: 600;

			&:hover {
				background-color: #f9fafb;
			}
		}

		&:disabled,
		&[disabled] {
			background-color: #B0BFCD !important;
			color: white !important;
			cursor: not-allowed;
			opacity: 1 !important;

			&:hover {
				opacity: 1 !important;
			}
		}

	}

	.product-date {
		font-weight: 600;
		font-size: 14px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #303233;
	}

	.product-available-time {
		font-weight: 400;
		font-size: 12px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #6E88A2;
	}

	.product-time-slot {
		background-color: #F3F5F8;
		cursor: pointer;
		border-radius: 50px;
		padding-top: 8px;
		padding-right: 12px;
		padding-bottom: 8px;
		padding-left: 12px;
		transition: all 0.2s ease;

		&:hover {
			background-color: var(--widget-primary-color, #0d3b66);
			color: var(--widget-primary-contrast, white);
		}

		&.selected {
			background-color: #26AF51;
			color: white;
		}

	}


	&:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
		transform: translateY(-2px);
	}

	.card-body {
		padding: 14px 16px 16px;
	}

}



/* "Try next available — Wed 29 Apr" pill on listing cards when the
   selected date has no availability. Subtle/small by design — it is a
   fallback hint, not the primary CTA. */
.next-available-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background-color: #f0fdf4;
	color: #15803d;
	border: 1px dashed #86efac;
	border-radius: 50px;
	padding: 5px 12px;
	margin: 8px 0 12px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: all 0.2s ease;
	width: fit-content;
	max-width: 100%;
	white-space: nowrap;
}

.next-available-pill:hover {
	background-color: #dcfce7;
	border-color: #15803d;
}

/* Override for Select variation outline button style */
.product-card .product-booking-btn.v1 {
	background-color: #f7f8fa !important;
	color: var(--widget-primary-accent, #0f1f3d) !important;
	border: 1px solid #e8eaed !important;
}

.product-card .product-booking-btn.v1:hover {
	background-color: #e8eaed !important;
}

.product-card .product-booking-btn.v1:disabled,
.product-card .product-booking-btn.v1[disabled] {
	background-color: #f7f8fa !important;
	color: #B0BFCD !important;
	border-color: #e8eaed !important;
	cursor: not-allowed;
}

/* ===================== All Rentals Start =============== */
.filters {
	button {
		border: none;
		outline: none;
		background-color: transparent;
		font-weight: 600;
		font-size: 14px;
		line-height: 100%;
		letter-spacing: 6%;
		color: #444444CC;
	}

}

/* ── Listing page layout (mockup style) ── */
.widget-listing-layout {
	display: flex;
	min-height: calc(100vh - 80px);
}

.widget-products-main {
	flex: 1;
	padding: 24px;
	min-width: 0;
}

.widget-products-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.widget-results-count {
	font-size: 13px;
	color: #6b7280;
}

.widget-results-count strong {
	color: #0f1117;
}

.widget-search-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 8px;
	padding: 7px 12px;
	width: 200px;
}

.widget-search-wrap input {
	border: none;
	background: none;
	font-size: 13px;
	outline: none;
	width: 100%;
	font-family: inherit;
	color: #0f1117;
}

.widget-search-wrap input::placeholder {
	color: #9ca3af;
}

/* Hide "Showing X of Y" in pagination footer since it's in the toolbar header */
.widget-products-main .small.text-mute {
	display: none !important;
}

.widget-products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

@media (max-width: 992px) {
	.widget-products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.widget-products-grid {
		grid-template-columns: 1fr;
	}

	.widget-listing-layout {
		flex-direction: column;
	}

	.widget-search-wrap {
		width: 100%;
	}
}

.filters-bar {
	width: 380px;
	min-width: 380px;
	flex-shrink: 0;
	padding: 24px 20px;
	background: #fff;
	border-right: 1px solid #e8eaed;

	.title {
		font-weight: 700;
		font-size: 16px;
		line-height: 100%;
		color: var(--widget-primary-accent, #0f1f3d);
		margin-bottom: 20px;
	}

	.title-2 {
		font-weight: 600;
		font-size: 16px;
		line-height: 22px;
	}

	.subtitle {
		font-weight: 600;
		font-size: 14px;
		line-height: 100%;
		color: #303233;
		margin: 5px 0;
	}

	.description {
		font-weight: 400;
		font-size: 12px;
		line-height: 100%;
		color: #303233CC;
	}

	.filter-card {
		border-radius: 12px;
		padding: 16px;
		border: 1px solid #e8eaed;
	}
}

/* Rental period — clear gap between the pick-up date/time (and return date/time)
   boxes. Specificity (.filter-card .row = 0,2,0) beats Bootstrap's .g-* (0,1,0),
   so the 20px gutter wins regardless of the gutter class the row carries. */
.filter-card .row {
	--bs-gutter-x: 1.25rem;
}

.view-toggle-buttons button {
	width: 32px;
	height: 32px;
	border: 1px solid #e8eaed;
	background: #fff;
	padding: 0;
	cursor: pointer;
	transition: all 0.12s ease;
	color: #6b7280;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;

	&:hover {
		background-color: #f3f4f6;
	}

	&.active {
		background-color: var(--widget-primary-color, #0d3b66);
		border-color: var(--widget-primary-color, #0d3b66);
		color: var(--widget-primary-contrast, #fff);
	}
}

.product-availability-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 20px;
	line-height: 1.2;
	z-index: 2;
	backdrop-filter: blur(8px);
}

.product-availability-badge.available,
.product-availability-badge.available-low {
	background-color: #dcfce7;
	color: #16a34a;
}

.product-availability-badge.unavailable {
	background-color: #fee2e2;
	color: #dc2626;
}

.search-view-heading {
	font-weight: 600;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 6%;
	color: #444444CC;
}

.text-success {
	color: #26AF51 !important;
}

.searchBoxListing {
	border: 1px solid #DADADA;
	background-color: transparent;
}

/* Legacy size caps removed — inside .product-card / .product-card-image-list
   these images must fully cover their aspect-ratio wrapper (rules at .product-card
   .card-img img.widgetListingGrid and .product-card-image-list img). Leaving
   max-width here caused grey gutters on wider cards.

   List-view thumbnail (≥768px). The image+body sit side-by-side in a flex
   row; without a desktop size cap on the image wrapper the picture renders
   at its natural width and dwarfs the body. The 72×72 mobile rule lower
   in this stylesheet (@media max-width: 767px) overrides this. */
.product-card-image-list {
	flex: 0 0 240px;
	width: 240px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
}
.product-card-image-list img.widgetListing,
.product-card-image-list img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.clear-filter-btn {
	border: none;
	background-color: transparent;
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	text-align: left;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
	color: #DC1313;
	padding:0;
}
/* ===================== All Rentals End =============== */


/* ===================== Product Page Start =============== */

/* .row>div {
	border: 1px solid;
} */

.product-page {
	.product-image {
		border-radius: 16px;
		overflow: hidden;
	}

	.product-image img {
		max-height: 380px;
		border-radius: 16px;
	}

	.breadcrum {
		background: #6E88A229;
		font-weight: 500;
		font-size: 14px;
		line-height: 22px;
		letter-spacing: 0%;
		color: #003264;
		border-radius: 50px;
		padding: 4px 10px;
		width: max-content;
		padding: 4px 10px;


		button {
			border: none;
			background-color: transparent;
			padding: 0;
			color: #003264;
			transition: all 0.3s ease-in-out;

			&:hover {
				opacity: 0.7;
			}

		}

	}

	.product-title {
		font-weight: 600;
		font-size: 24px;
		line-height: 100%;
		letter-spacing: 0%;
	}

	.product-price {
		font-weight: 600;
		font-size: 20px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #303233;
	}

	.hourly-price {
		font-weight: 500;
		font-size: 12px;
		line-height: 22px;
		letter-spacing: 0%;
		color: #444444CC;
	}

	.product-description {
		font-weight: 400;
		line-height: 22px;
		font-size: 16px;
		letter-spacing: 0%;
		color: #444444CC;
	}

	.availaibility {
		font-weight: 500;
		font-size: 16px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #444444;
	}

	.calender-card {
		box-shadow: 0px 1px 4px 0px #0000001A;
		border-radius: 12px;
		padding: 24px 16px;
		width: 100%;
		max-width: 100%;


		.calender-heading {
			color: #303233;
			font-weight: 600;
			font-size: 14px;
			line-height: 100%;
			letter-spacing: 0%;
		}

		#current-month-display {
			font-weight: 600;
			font-size: 14px;
			line-height: 100%;
			letter-spacing: 0%;
			color: #303233;
		}

		.month-nav {
			cursor: pointer;
		}

		.days {
			font-weight: 500;
			font-size: 12px;
			line-height: 100%;
			letter-spacing: 0%;
			text-align: center;
			color: #6E88A2;
			display: grid;
			grid-template-columns: repeat(7, 1fr);
		}

		.calender-wraper {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			/* 7 columns */
			gap: 5px;
		}

		.calender-legends {

			font-weight: 500;
			font-size: 12px;
			line-height: 100%;
			letter-spacing: 0%;

			.legend {
				border-radius: 50%;
				width: 6px;
				height: 6px;
				background-color: #26AF51;

				&.available {
					background-color: #26AF5129;
				}

				&.unavailable {
					background-color: #D9D9D9;
				}
			}
		}

		.calender-box {
			cursor: pointer;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #6E88A2;
			background-color: #F3F5F8;
			font-weight: 500;
			font-size: 12px;
			line-height: 100%;
			letter-spacing: 0%;
			text-align: center;


			&.available {
				background-color: #26AF511A;
				color: #26AF51;
				transition: background-color 120ms ease, color 120ms ease, transform 80ms ease;
			}

			&.available:not(.selected):hover {
				background-color: #26AF5140;
				color: #1B7D3B;
			}

			&.selected {
				background-color: #14532D; /* dark forest — unmistakable */
				color: white;
				font-weight: 600;
				box-shadow: 0 0 0 2px rgba(20, 83, 45, 0.25);
			}
		}

		.time-slots-container {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 8px;
		}

		.calender-time-slot {
			background-color: #F3F5F8;
			cursor: pointer;
			border-radius: 50px;
			padding-top: 8px;
			padding-right: 12px;
			padding-bottom: 8px;
			padding-left: 12px;

			&.selected {
				background-color: #26AF51;
				color: white;
			}

		}

		button {
			border-radius: 12px;
		}
	}
}

/* Override for product cards inside detail pages to prevent 24px detail title from applying */
.product-card .card-body .product-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	line-height: 100% !important;
	color: #444444 !important;
}

/* ===================== Product Page End =============== */

/* ===================== Cart page Start =============== */

.label {
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0px;
	vertical-align: middle;
	color: #6E88A2;
}

.label-value {
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0px;
	vertical-align: middle;
	color: #003264;
}


.total {
	color: #003264;
	font-weight: 500;
	font-size: 18px;
	line-height: 100%;
	letter-spacing: 0px;
	vertical-align: middle;
}

.cart-page {
	.cart-card {
		box-shadow: 0px 1px 4px 0px #0000001A;
		border-radius: 16px;
		padding: 32px;

	}

	.heading {
		font-weight: 500;
		font-size: 16px;
		line-height: 100%;
		letter-spacing: 0px;
		color: #231F20CC;
	}

	.cart-heading {
		font-weight: 600;
		font-size: 18px;
		line-height: 100%;
		letter-spacing: 0px;
		vertical-align: middle;
		color: #003264;
	}

	.apply-btn {
		max-width: 332px;
		height: 40px;
		border: 1px solid #26AF51;
		border-radius: 8px;
		padding: 8px 16px;
		background-color: #26AF5114;

		input {
			border: none;
			outline: none;
			background-color: transparent;
			width: 100%;

		}

		button {
			border: none;
			color: white;
			border: none;
			position: absolute;
			right: 2px;
			top: 2px;
			background-color: #26AF51;
			border-radius: 8px;
			padding: 9px 16px;
			transition: all 0.3s ease-in-out;


			&:hover {
				opacity: 0.7;
			}
		}

	}

	.btn-theme-secondary {
		padding: 10px 24px;
		border-radius: 12px;
		border: 1px solid #26AF51
	}

	.btn-theme-primary {
		padding: 10px 50px;
		border-radius: 12px;
		border: 1px solid #26AF51
	}

	.coupon {
		border-radius: 8px;
		border: 1px solid #26AF51;
		padding: 16px;
		width: 260px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		background: #26AF5114;

	}



	.item-1 {
		flex: 5;
		/* flex-grow: 5, flex-shrink: 1, flex-basis: 0 */
		min-width: 0;
		/* Allows item to shrink below default minimum size */
	}

	.item-2 {
		flex: 2;
		/* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
		min-width: 0;
		/* Allows item to shrink below default minimum size */
		overflow-wrap: break-word;
		/* Ensures content wraps instead of expanding */
	}

	.cart-image {
		width: 64px;
		height: 64px;
	}

	.cart-increment-btn {
		width: 32px !important;
		height: 32px !important;
		border: 1px solid #EBEBEB !important;
		background-color: #F0F3F6 !important;
	}

	.quantity {
		width: 32px !important;
		height: 32px !important;
	}
}

/* Cart line wrapper: keep the two-column rows comfortably wide on desktop,
   but let them shrink/stack on mobile (the floor is reset to 0 in the
   max-width:768px block below). Replaces a hardcoded inline min-width:600px
   that pinned the whole "My booking" page to 600px and clipped columns on
   phones. */
.cart-line-wrap {
	min-width: 600px;
}

/* ===================== Cart page End =============== */

/* ===================== Checkout page Start =============== */

.checkout-stepper {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	margin-bottom: 8px;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;

	&::-webkit-scrollbar { display: none; }

	.checkout-step {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: default;
		flex-shrink: 0;

		.step-number {
			width: 28px;
			height: 28px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 14px;
			line-height: 1;
			background-color: #E8ECF0;
			color: #6E88A2;
			transition: all 0.3s ease;
		}

		.step-label {
			font-weight: 500;
			font-size: 15px;
			color: #6E88A2;
			transition: all 0.3s ease;
			white-space: nowrap;
		}

		&.active .step-number {
			background-color: var(--widget-primary-color, #003264);
			color: var(--widget-primary-contrast, #fff);
		}

		&.active .step-label {
			color: #231F20;
			font-weight: 600;
		}
	}

	.step-separator {
		color: #C0C9D2;
		font-size: 16px;
		margin: 0 4px;
	}
}

.checkout-card {
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0px 1px 4px 0px #0000001A;

	.heading {
		font-weight: 600;
		font-size: 18px;
		line-height: 22px;
		letter-spacing: 0%;
		color: #6E88A2;
	}
}

.cart-summary {
	.cart-summary-title {
		font-weight: 600;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0%;
		color: #303233;
	}
}

.payment-option {
	display: flex;
	align-items: center;
	padding: 16px;
	border: 1px solid #6e88a23d;
	border-radius: 12px;
	cursor: pointer;
	margin-bottom: 12px;
	background-color: white;
	transition: all 0.3s ease-in-out;
}

.payment-option-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	text-align: left;
}

.payment-option-details {
	font-size: 13px;
	font-weight: 400;
	line-height: 16.9px;
	text-align: left;
	color: #00326480;
}

.payment-option:hover {
	border-color: #26AF51;
	background-color: #26AF5114;
}

.payment-option img {
	width: 30px;
	margin-right: 1rem;
}

.payment-btn-active {
	background: #26AF5114;

}


.participant-btn {
	font-weight: 600;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 0%;
	color: #003264;
	text-decoration: none;
	transition: all 0.3s ease-in-out;

	&:hover {
		opacity: 0.7;
	}
}

.participant-email {
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #6E88A2;
}


.add-participant-canvas {
	.participat-form-header {
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
		text-align: left;
		text-underline-position: from-font;
		text-decoration-skip-ink: none;
		color: #303233;

		label {
			font-weight: 400;
		}
	}

	.add-participant-form {
		border: 1px solid #EBEBEB;
		padding: 1rem;
		border-radius: 12px;
	}

	.customer-info {
		padding: 1.5rem;
		background-color: #F6F7F9;
		border-radius: 16px;

		.customer-email,
		.customer-phone {
			padding: 4px 0;
			font-size: 16px;
			font-weight: 400;
			line-height: 22px;
			text-align: left;
			text-underline-position: from-font;
			text-decoration-skip-ink: none;
			color: #303233CC;

		}
	}
}

/* ===================== Checkout page End =============== */

/* ===================== Booking Confirmed page Start =============== */

.confirmed-booking-card {
	border-radius: 16px;
	border: 1px solid #E5EAEF;
	padding: 32px 24px;
	margin: auto;

	max-width: 546px;

	.btn-theme-primary,
	.btn-theme-secondary {
		border-radius: 12px;
	}

	.btn-theme-secondary {
		border: 1px solid #26AF51;
		background-color: transparent;
		color: #26AF51;
	}

	.btn-theme-secondary:hover {
		background-color: #26AF51;
		color: white;
	}

	.form-check label {
		color: #303233;
		font-weight: 400;
		font-size: 14px;
		line-height: 100%;
		letter-spacing: 0%;
	}

	.form-check input:checked {
		background-color: #1C1C1A;
	}
}

.booking-inner-card {
	background-color: #FAFAFA;
	border-radius: 12px;
	padding: 24px;
}

.booking-description {
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	vertical-align: middle;
	color: #6E88A2;
	padding: 0 20px;
}

.booking-label {
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0%;
	color: #6E88A2;
}

.booking-value {
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0%;
	color: #545964;
}

.booking-icon {
	width: 80px;
	height: 80px;
	background-color: #26AF511A;
	border-radius: 50%;
	margin: 0 auto;
}

.booking-icon img {
	width: 40px;
	height: 40px;
}

.booking-heading {
	font-weight: 600;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	vertical-align: middle;
	color: #303233;
}

.booking-subheading {
	font-weight: 500;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0%;

	color: #303233CC;
}

/* ===================== Booking Confirmed page End =============== */


/* Media Query  Start*/

/* Tablet breakpoint - stepper card needs more width */
@media screen and (max-width: 992px) and (min-width: 769px) {
	.stepper-card {
		width: 90%;
	}
}

@media screen and (max-width: 768px) {
	.content {
		width: 100%;
		padding: 16px;
	}

	.stepper-card {
		width: 100%;


		.stepper-form-row {
			gap: 5px !important;
		}

		.increment-btn-wrapper {
			margin: 10px 0;
		}

	}

	.checkpoint-label {
		font-size: 12px !important;
	}

	.stepper-wrapper {
		width: 75% !important;
	}

	.cart-panel {
		width: 100% !important;
		padding: 16px !important;
	}

	.cart-info {
		.cart-products-container {
			max-height: 400px;
			overflow-y: auto;
			overflow-x: hidden;
			-webkit-overflow-scrolling: touch;
			scroll-behavior: smooth;
			padding-bottom: 8px;
		}
	}

	.breadcrum {
		margin-top: 16px;
	}

	.calender-card {
		width: 100%;
	}

	.payment-option {
		flex-direction: column;
		align-items: start;
		gap: 10px;

		.payment-option-title {
			font-size: 14px;
		}
	}

	.checkout-row {
		gap: 20px;
	}

	.checkout-payment-form {
		margin-top: 20px;
	}

	#offcanvasCart {
		height: auto !important;
	}

	/* Drop the desktop 600px floor so the cart fits a phone viewport instead
	   of overflowing/clipping. The .item-1/.item-2 flex resets below then let
	   each row shrink cleanly. (Replaces the old .cart-card{overflow:scroll}
	   hack that only papered over the clipped columns.) */
	.cart-line-wrap {
		min-width: 0;
	}

	.item-1,
	.item-2 {
		min-width: 0;
		/* Critical for small screens */
	}

	.item-1 {
		flex: auto !important;
	}

	.item-2 {
		flex: auto;
	}

	.coupon,
	.apply-btn {
		max-width: 207px !important;
		font-size: 12px !important;
	}

	.checkout-payment-form {
		gap: 16px !important;
	}

	.right-canvas {
		padding: 16px;
	}

	#offcanvasCart {
		padding: 0px !important;
	}
}


.canvas-cross-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #F7F7F7;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 992px) {
	.right-canvas {
		width: 100% !important;
		height: 90vh !important;
	}
}


/* List-view thumbnail sizing for narrow viewports. `d-md-none` content
   renders up to 767px, so we need the thumbnail cap to match — the old
   480px cutoff left a 480–767px gap where the list card used the image's
   full natural width and bled over the title + pills. `flex: 0 0 72px`
   also prevents flexbox from stretching the thumbnail wider. */
@media screen and (max-width: 767px) {
	.product-card-image-list {
		flex: 0 0 72px;
		width: 72px;
		height: 72px;
		max-width: 72px;
		overflow: hidden;
		border-radius: 8px;
	}
	.product-card-image-list img {
		width: 72px !important;
		height: 72px !important;
		max-width: 72px !important;
		object-fit: cover;
	}
}

/* Media Query  End*/

/* Alert Styles */
.successfully-added-card {
	padding: 24px 32px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: start;
	gap: 12px;
	width: 100%;
	max-width: 341px;
	position: fixed;
	bottom: 30px;
	left: 30px;
	z-index: 1100 !important;
}

.successfully-icon {
	width: 40px;
	height: 40px;
	background-color: rgba(6, 166, 14, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	flex-shrink: 0;
}

.error-icon {
	background-color: rgba(255, 0, 0, 0.1) !important;
}

.successfully-added-content {
	flex: 1;
}

.successfully-added-content h5 {
	color: #1a1a1a;
	text-align: start;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.165px;
	margin: 0;
}

.successfully-added-content p {
	color: #656565;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.25px;
	margin-bottom: 0;
	margin-top: 8px;
}

.remove-alert {
	position: absolute;
	top: -3px;
	right: -3px;
	background: white;
	border: 1px solid #ddd;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	line-height: 1;
	padding: 0;
}

.remove-alert:hover {
	background: #f9f9f9;
}

@media screen and (max-width: 992px) {
	.successfully-added-content h5 {
		font-size: 18px;
	}

	.successfully-added-content p {
		font-size: 12px;
	}

	.successfully-added-card {
		left: 30px;
		max-width: calc(100% - 60px);
	}
}



/* Date Range Picker */
.daterange {
	background: #f8f9fa;
	border: none;
	border-radius: 16px;
	padding: 10px;
	border-radius: 12px;
	text-align: center;
	font-size: 16px;
	overflow: hidden;
	outline: none;
	width: 100%;
	text-align: left;
}

.date-picker-wrapper {
	position: relative;
	height: 48px;
	width: 100%;
	min-width: 150px;

	button {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		border-radius: 12px;
		padding: 0;
		margin: 0;
	}
}

.daterangepicker::before,
.daterangepicker::after {
	content: none !important;
	/* Remove the pseudo-elements */
}


.daterangepicker {
	border-radius: 12px !important;
	box-shadow: 0px 1px 4px 0px #0000001A !important;
	border: none;

	thead tr:nth-child(2)>th {
		color: #26AF51 !important;
	}
}

.daterangepicker .drp-calendar {
	padding: 15px;
}

.daterangepicker .drp-calendar .month {
	font-size: 18px;
	font-weight: bold;
	color: #303233;
}

.daterangepicker .drp-calendar th {
	font-weight: bold;
	color: #1d3557;
}

.daterangepicker td.in-range {
	background-color: #1d3557 !important;
	color: #ffffff !important;
}

.daterangepicker td.in-range:first-child {
	border-radius: 25px 0px 0px 25px;
}

.daterangepicker td.in-range:last-child {
	border-radius: 0px 25px 25px 0px;
}

.daterangepicker td.in-range:nth-last-child(1) {
	border-radius: 0px 25px 25px 0px;
}

.daterangepicker td.off {
	color: #c0c0c0 !important;
}

.daterangepicker .drp-calendar.right {
	display: none !important;
}

.daterangepicker td.active {
	background-color: #26AF51 !important;
	color: #ffffff !important;
	border-radius: 25px 0px 0px 25px;
}

.daterangepicker td.end-date {
	background-color: #26AF51 !important;
	color: #ffffff !important;
	border-radius: 0px 25px 25px 0px;
}

.daterangepicker .drp-calendar .prev,
.daterangepicker .drp-calendar .next {
	color: #ffffff;
	border-radius: 50%;
	padding: 8px;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* For booking rental */
#datPickerParent {
	width: 100%;
	position: relative;

	.daterangepicker {
		top: 100% !important;
		left: 80% !important;
	}

	/* Adjust for smaller screens (e.g., 1080p or smaller) */
	@media (max-width: 1920px) {
		.daterangepicker {
			left: 80% !important;
			/* Adjust left position for smaller screens */
		}
	}

	/* Adjust for very small screens (e.g., 720p or smaller) */
	@media (max-width: 1280px) {
		.daterangepicker {
			left: 60% !important;
			/* Adjust further for even smaller screens */
		}
	}

	/* Adjust for mobile devices (e.g., 480px and below) */
	@media (max-width: 768px) {
		.daterangepicker {
			left: 30% !important;
			/* Center the date picker for mobile screens */
		}
	}

	@media (max-width: 480px) {
		.daterangepicker {
			left: 0% !important;
			/* Center the date picker for mobile screens */
		}
	}
}

/* ===================== Product Detail Page Styles =============== */

/* Disabled button styling */
.product-detail-add-button button.btn.btn-theme-primary:disabled,
.product-detail-add-button button.btn.btn-theme-primary[disabled],
.product-detail-add-button button.btn.btn-theme-primary.disabled {
	background-color: #B0BFCD !important;
	background: #B0BFCD !important;
	color: white !important;
	cursor: not-allowed !important;
	opacity: 1 !important;
	pointer-events: none !important;
	border-color: #B0BFCD !important;
}

.product-detail-add-button button.btn.btn-theme-primary:disabled:hover,
.product-detail-add-button button.btn.btn-theme-primary[disabled]:hover,
.product-detail-add-button button.btn.btn-theme-primary.disabled:hover,
.product-detail-add-button button.btn.btn-theme-primary:disabled:focus,
.product-detail-add-button button.btn.btn-theme-primary[disabled]:focus,
.product-detail-add-button button.btn.btn-theme-primary.disabled:focus,
.product-detail-add-button button.btn.btn-theme-primary:disabled:active,
.product-detail-add-button button.btn.btn-theme-primary[disabled]:active,
.product-detail-add-button button.btn.btn-theme-primary.disabled:active {
	background-color: #B0BFCD !important;
	background: #B0BFCD !important;
	color: white !important;
	opacity: 1 !important;
	border-color: #B0BFCD !important;
}

/* Price Schedule Table Styles */
.widget-price-table-wrapper {
	width: 50% !important;
	max-width: 50% !important;
	margin-bottom: 1rem;
}

.widget-price-table-wrapper .widget-price-table {
	display: table !important;
	padding: 1px !important;
	border-radius: 12px !important;
	background-color: #ebebeb !important;
	overflow: hidden !important;
	border: 1px solid #ebebeb !important;
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	margin: 0 !important;
	table-layout: auto !important;
}

.widget-price-table-wrapper .widget-price-table thead {
	display: table-header-group !important;
	background-color: #f7f7f7 !important;
}

.widget-price-table-wrapper .widget-price-table thead tr {
	display: table-row !important;
}

.widget-price-table-wrapper .widget-price-table thead th {
	display: table-cell !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	line-height: 20px !important;
	padding: 7px 12px 5px 12px !important;
	text-align: left !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: 1px solid #ebebeb !important;
	border-left: 1px solid #ebebeb !important;
	color: #303233 !important;
	white-space: nowrap !important;
	vertical-align: middle !important;
	background-color: #f7f7f7 !important;
}

.widget-price-table-wrapper .widget-price-table thead th:first-child {
	border-left: none !important;
}

.widget-price-table-wrapper .widget-price-table thead th:last-child {
	border-right: none !important;
}

.widget-price-table-wrapper .widget-price-table tbody {
	display: table-row-group !important;
}

.widget-price-table-wrapper .widget-price-table tbody tr {
	display: table-row !important;
	background-color: #fff !important;
	cursor: default !important;
}

.widget-price-table-wrapper .widget-price-table tbody td {
	display: table-cell !important;
	padding: 11px 12px 9px 12px !important;
	border-width: 0 !important;
	border-left-width: 1px !important;
	border-left-color: #ebebeb !important;
	border-right: none !important;
	border-top: none !important;
	border-bottom: 1px solid #ebebeb !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	line-height: 20px !important;
	color: #303233 !important;
	background-color: #ffffff !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
}

.widget-price-table-wrapper .widget-price-table tbody td:first-child {
	border-left: none !important;
}

.widget-price-table-wrapper .widget-price-table tbody td:last-child {
	border-right: none !important;
}

.widget-price-table-wrapper .widget-price-table tbody tr:last-child td {
	border-bottom: none !important;
}

.widget-price-table-wrapper .widget-price-table tbody tr:hover td {
	background-color: #f7f7f7 !important;
}

/* Product Modal Quantity Buttons */
.productModalQuantity {
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
	margin: 8px 0 !important;
}

.productModalQuantity button,
.productModalQuantity button[type="button"],
div.productModalQuantity > button,
div.productModalQuantity > button[type="button"],
button.productModalQuantity button,
button.productModalQuantity button[type="button"],
.productModalQuantity button.btn,
.productModalQuantity button[type="button"].btn {
	background: #F6F7F9 !important;
	background-color: #F6F7F9 !important;
	border-radius: 4px !important;
	border: none !important;
	border-width: 0 !important;
	padding: 8px !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: opacity 0.3s ease !important;
	cursor: pointer !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	outline: none !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-align: center !important;
	color: inherit !important;
	margin: 0 !important;
	vertical-align: middle !important;
	transform: none !important;
	-webkit-transform: none !important;
	-moz-transform: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}

.productModalQuantity .product-count {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}

.productModalQuantity button:hover,
.productModalQuantity button[type="button"]:hover,
div.productModalQuantity > button:hover,
div.productModalQuantity > button[type="button"]:hover,
.productModalQuantity-btn:hover {
	opacity: 0.7 !important;
	cursor: pointer !important;
	background: #F6F7F9 !important;
	background-color: #F6F7F9 !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	transform: none !important;
	border: none !important;
}

.productModalQuantity button img,
.productModalQuantity button[type="button"] img,
div.productModalQuantity > button img,
div.productModalQuantity > button[type="button"] img {
	margin: 0 !important;
	display: block !important;
}

.productModalQuantity button img:hover,
.productModalQuantity button[type="button"] img:hover,
div.productModalQuantity > button img:hover,
div.productModalQuantity > button[type="button"] img:hover {
	cursor: pointer !important;
}

/* Variations Table Styles */
.variations-table,
.col-md-8 .variations-table {
	table-layout: fixed !important;
	word-wrap: break-word !important;
	width: 100% !important;
	max-width: 100% !important;
}

.variations-table th:nth-child(1),
.variations-table td:nth-child(1) {
	max-width: 150px !important;
	width: 150px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.variations-table th:nth-child(2),
.variations-table td:nth-child(2) {
	max-width: 120px !important;
	width: 120px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.variations-table th:nth-child(3),
.variations-table td:nth-child(3) {
	max-width: 100px !important;
	width: 100px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.variations-table th:nth-child(4),
.variations-table td:nth-child(4) {
	max-width: 120px !important;
	width: 120px !important;
	overflow: hidden !important;
}

.variations-quantity {
	gap: 1px !important;
}

.variations-quantity-btn {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	max-width: 24px !important;
	padding: 6px !important;
	overflow: visible !important;
}

.variations-count {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	max-width: 24px !important;
	font-size: 12px !important;
}

.variations-quantity-btn img {
	width: 12px !important;
	height: 12px !important;
	display: block !important;
	flex-shrink: 0 !important;
	object-fit: contain !important;
}

.variations-add-btn,
.variations-table .btn-theme-primary,
.variations-table button.btn-theme-primary {
	width: auto !important;
	white-space: nowrap !important;
	min-width: auto !important;
	flex-shrink: 0 !important;
	border: none !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	outline: none !important;
	color: white !important;
	padding: 6px 12px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	gap: 4px !important;
}

.variations-add-btn img,
.variations-table .btn-theme-primary img,
.variations-table button.btn-theme-primary img {
	width: 12px !important;
	height: 12px !important;
}

.variations-add-btn:hover,
.variations-table .btn-theme-primary:hover,
.variations-table button.btn-theme-primary:hover {
	color: white !important;
	opacity: 0.9 !important;
	border: none !important;
	box-shadow: none !important;
}

/* Breadcrumb Links */
.breadcrum a.breadcrumb-link {
	text-decoration: none !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	transition: opacity 0.2s ease;
	font-weight: inherit;
	display: inline;
}

.breadcrum a.breadcrumb-link:hover,
.breadcrum a.breadcrumb-link:focus,
.breadcrum a.breadcrumb-link:active {
	opacity: 0.7 !important;
	text-decoration: none !important;
	background: transparent !important;
	border: none !important;
}

.breadcrum > a {
	text-decoration: none !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	transition: opacity 0.2s ease;
}

.breadcrum > a:hover,
.breadcrum > a:focus,
.breadcrum > a:active {
	opacity: 0.7 !important;
	text-decoration: none !important;
}

/* Price Tabs for Seasonal Pricing */
.widget-price-tabs {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #dee2e6;
}

.widget-price-tabs .nav-item {
	margin: 0;
}

.widget-price-tab {
	display: block;
	padding: 8px 16px;
	border: none;
	background: transparent;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	text-decoration: none;
	font-size: 14px;
	transition: all 0.2s ease;
}

.widget-price-tab:hover {
	background-color: rgba(0, 0, 0, 0.02);
}

.widget-price-tab.active {
	font-weight: 600;
}

/* Calendar unavailable days styling */
.calender-box.unavailable {
	background-color: #D9D9D9 !important;
	color: #6E88A2 !important;
}

.calender-box.available {
	background-color: #26AF511A !important;
	color: #26AF51 !important;
}

.calender-box.past-date {
	text-decoration: line-through !important;
	text-decoration-color: #6E88A2 !important;
	text-decoration-thickness: 2px !important;
	position: relative;
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

.calender-box.past-date::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	background-color: #6E88A2;
	transform: translateY(-50%);
	z-index: 1;
}

/* Hover state on available days — slightly darker tint so the change is obvious */
.calender-box.available:not(.selected):hover {
	background-color: #26AF5140 !important;
	color: #1B7D3B !important;
	cursor: pointer;
}

/* Currently-selected date: dark forest green, unmistakable. Uses !important
   to override .calender-box.available above (which also uses !important). */
.calender-box.selected,
.calender-box.available.selected {
	background-color: #14532D !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	box-shadow: 0 0 0 2px rgba(20, 83, 45, 0.25);
}

/* Product Detail Back Link */
.product-detail-back-link {
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: opacity 0.2s ease;
	opacity: 1;
}

.product-detail-back-link:hover,
.product-detail-back-link:focus {
	opacity: 0.7;
	text-decoration: none !important;
}

/* Image Preview Wrapper */
.image-preview-wrapper {
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: 8px;
	cursor: pointer;
	border: 2px solid #F3F5F8;
}

.image-preview-wrapper img {
	object-fit: cover;
}

/* Product Detail Quantity Controls */
.productModalQuantity {
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
	margin-right: 10px;
}

/* Product Detail Section Titles */
.product-personel-details-title {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
}

/* Download Link (See more/less) */
.downloadLink {
	cursor: pointer;
}

/* Variations Table Container */
.variations-table-container {
	width: 100%;
	overflow-x: auto;
	max-width: 100%;
}

/* Variations Table Base Styles */
.variations-table {
	padding: 1px;
	border-radius: 12px;
	background-color: #ebebeb;
	overflow: hidden;
	border: 1px solid #ebebeb;
	width: 100%;
	max-width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
	display: table;
	table-layout: fixed;
}

.variations-table thead {
	background-color: #f7f7f7;
	display: table-header-group;
}

.variations-table thead tr {
	display: table-row;
}

.variations-table thead th {
	display: table-cell;
	font-weight: 600;
	font-size: 12px;
	line-height: 20px;
	padding: 7px 12px 5px 12px;
	text-align: left;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #ebebeb;
	border-left: none;
	color: #303233;
	white-space: nowrap;
	vertical-align: middle;
	background-color: #f7f7f7;
}

.variations-table thead th:not(:first-child) {
	border-left: 1px solid #ebebeb;
}

.variations-table tbody {
	display: table-row-group;
}

.variations-table tbody tr {
	display: table-row;
	background-color: #fff;
	cursor: default;
}

.variations-table tbody td {
	display: table-cell;
	padding: 11px 12px 9px 12px;
	border-width: 0;
	border-left-width: 0;
	border-right: none;
	border-top: none;
	border-bottom: 1px solid #ebebeb;
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	color: #303233;
	background-color: #ffffff;
	vertical-align: middle;
	white-space: nowrap;
}

.variations-table tbody td:not(:first-child) {
	border-left: 1px solid #ebebeb;
}

.variations-table tbody tr:last-child td {
	border-bottom: none;
}

/* Variations Add Button Container */
.variations-add-container {
	display: flex;
	align-items: center;
	max-width: 100%;
	overflow: hidden;
}

/* ===================== Widget Layout Styles =============== */

/* Alpine.js cloak */
[x-cloak] {
	display: none !important;
}

/* Modal overlay styling for widget */
.offcanvas-back.show {
	background: rgba(0, 0, 0, 0.5) !important;
	z-index: 1040 !important;
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
	display: block !important;
}

.delete-modal-main {
	z-index: 1050 !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}

.delete-modal-main .modal-dialog {
	margin: 0 !important;
	max-width: 500px !important;
}

/* Header drop shadow */
.header-wrapper {
	box-shadow: none !important;
	border-bottom: none !important;
	border: none !important;
}

.header-wrapper .header {
	position: relative;
	border-bottom: none !important;
}

.header-wrapper .header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	height: 1px;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
	pointer-events: none;
	z-index: 1;
}

/* View toggle icons styling */
.view-toggle-buttons button svg {
	width: 20px;
	height: 20px;
}

/* Validation error messages */
.invalid-input {
	color: #E0211F !important;
	font-size: 14px;
	font-weight: 400;
	margin-top: 4px;
}

/* Select2 styling for checkout country dropdown */
#country-select-checkout + .select2-container {
	width: 100% !important;
}

#country-select-checkout + .select2-container .select2-selection--single {
	height: auto !important;
	min-height: 48px !important;
	border: none !important;
	border-radius: 10px !important;
	background-color: #F6F7F9 !important;
	padding: 12px !important;
	padding-top: 16px !important;
	margin-bottom: 10px !important;
	display: flex !important;
	align-items: center !important;
}

#country-select-checkout + .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	line-height: 22px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: "BRCandor", sans-serif !important;
	color: #303233 !important;
	width: 100% !important;
}

#country-select-checkout + .select2-container.select2-container--focus .select2-selection--single,
#country-select-checkout + .select2-container.select2-container--open .select2-selection--single {
	border: 1px solid var(--widget-primary-accent, #26AF51) !important;
	border-width: 1px !important;
	border-style: solid !important;
	outline: 0 !important;
	box-shadow: none !important;
}

#country-select-checkout + .select2-container .select2-selection--single .select2-selection__arrow {
	display: none !important;
}

.checkout-card .styled-select {
	position: relative;
}

.checkout-card .styled-select img {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	pointer-events: none;
	height: 20px;
	width: 20px;
}

/* ===========================================
   Active Season Highlighting
   Highlights the season that applies to selected dates
   =========================================== */

/* Table row highlighting for seasonal pricing */
.active-season {
	background-color: #e8f5e9 !important;
	border-left: 3px solid #4caf50 !important;
}

.active-season td {
	background-color: #e8f5e9 !important;
}

/* Tab highlighting for seasonal pricing */
.active-season-tab {
	background-color: #e8f5e9 !important;
	font-weight: 600;
}

/* Badge showing "Applies" on active season */
.active-season-badge {
	display: inline-block;
	background-color: #4caf50;
	color: white;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 4px;
	margin-left: 8px;
	vertical-align: middle;
}

/* Ensure badge styling in tabs */
.nav-link .active-season-badge {
	margin-left: 4px;
}
/* Phase — mobile filters offcanvas
   The sidebar components ship with `d-none d-md-block`, hiding them on
   mobile. When we render the SAME sidebar inside a Bootstrap offcanvas
   as the mobile filter tray, force it visible (the offcanvas itself is
   gated with .d-md-none so it can only appear on mobile anyway). */
.offcanvas#offcanvasFilters .offcanvas-body .filters-bar,
.offcanvas#offcanvasFilters .offcanvas-body .filters-bar.d-none {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
}
.offcanvas#offcanvasFilters .offcanvas-body {
	padding: 16px;
}
.offcanvas#offcanvasFilters .offcanvas-header {
	padding: 16px;
	border-bottom: 1px solid #e5e7eb;
}

/* Mobile — shrink the "Available" pill so it doesn't overflow the 72x72
   product-card-image-list thumbnail in list view. Breakpoint kept in
   sync with the thumbnail sizing rule above. */
@media screen and (max-width: 767px) {
	.product-card-image-list .product-availability-badge {
		top: 4px;
		left: 4px;
		font-size: 9px;
		padding: 2px 5px;
		border-radius: 10px;
	}
}

/* "Back to listings" breadcrumb pill (x-widget.breadcrumb-home). Base + hover
   live here (not inline) so the hover wins the cascade cleanly. Hover deepens
   the primary-color tint from ~8% to ~18% so it reads as interactive while
   staying on-brand and keeping the accent-colored label readable. */
.widget-breadcrumb-home {
	text-decoration: none;
	color: var(--widget-primary-accent, #0d3b66);
	font-size: 13px;
	font-weight: 500;
	padding: 6px 10px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--widget-primary-color, #0d3b66) 8%, transparent);
	transition: background-color 0.15s ease;
}
.widget-breadcrumb-home:hover,
.widget-breadcrumb-home:focus-visible {
	background: color-mix(in srgb, var(--widget-primary-color, #0d3b66) 18%, transparent);
	color: var(--widget-primary-accent, #0d3b66);
}

/* Experiences booking-hero "Back to listings" — a plain accent link (no pill).
   Base + hover live here (not inline) so the hover wins cleanly. Underline on
   hover gives it the same interactive affordance as the breadcrumb pill. */
.widget-booking-hero__back-link {
	color: var(--widget-primary-accent, #0d3b66);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: text-decoration-color 0.15s ease;
}
.widget-booking-hero__back-link:hover,
.widget-booking-hero__back-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ===================== Rental Product Detail · two-step booking rail =============== */

.bw-detail .bw-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.42fr) minmax(360px, 0.86fr);
	grid-template-areas:
		"identity rail"
		"content rail"
		"similar rail";
	column-gap: 34px;
	align-items: start;
	width: 100%;
}

.bw-detail .bw-identity {
	grid-area: identity;
	min-width: 0;
}

.bw-detail .bw-content {
	grid-area: content;
	min-width: 0;
	margin-top: 18px;
}

.bw-detail .bw-similar {
	grid-area: similar;
	min-width: 0;
}

.bw-detail .bw-rail {
	grid-area: rail;
	min-width: 0;
	/* Stretch to the full height of the identity+content column so the
	   sticky child below has room to travel — the grid sets
	   align-items:start, which would otherwise shrink this to content
	   height and the sticky rail would scroll away with the page. */
	align-self: stretch;
}

.bw-detail .bw-rail-sticky {
	position: sticky;
	top: 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* --- Gallery --- */
.bw-gallery .bw-hero {
	border: 1px solid #EBEBEB;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background-color: #F6F7F9;
}

.bw-gallery .bw-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Thumbnails always sit on a single row — they flex-shrink to fit
   however many images the item has (4, 6, 8…) instead of wrapping. */
.bw-gallery .bw-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.bw-gallery .bw-thumb {
	flex: 1 1 0;
	min-width: 0;
	border: 1px solid #EBEBEB;
	border-radius: 9px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	padding: 0;
	background-color: #F6F7F9;
	cursor: pointer;
}

.bw-gallery .bw-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bw-gallery .bw-thumb.sel {
	border-color: var(--widget-primary-color, #0d3b66);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--widget-primary-color, #0d3b66) 18%, transparent);
}

/* --- Identity --- */
.bw-detail .bw-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bw-detail .bw-tag {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bw-detail .bw-title {
	font-weight: 700;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #303233;
}

.bw-detail .bw-priceline {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.bw-detail .bw-price {
	font-weight: 700;
	font-size: 28px;
	color: #303233;
	font-variant-numeric: tabular-nums;
}

.bw-detail .bw-price-sub {
	font-size: 14px;
	color: #6E88A2;
	font-weight: 500;
}

.bw-availpill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.bw-availpill .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}

.bw-availpill.in {
	background-color: #D8F1E4;
	color: #06A60E;
}

.bw-availpill.in .dot {
	background-color: #06A60E;
}

.bw-availpill.out {
	background-color: #FCE0E0;
	color: #A20E0E;
}

.bw-availpill.out .dot {
	background-color: #A20E0E;
}

/* --- Cards --- */
.bw-detail .bw-card {
	background-color: #fff;
	border: 1px solid #DFE3E8;
	border-radius: 12px;
	overflow: hidden;
}

/* Card ① keeps the calender-card class for the calendar's nested styles,
   but the new card chrome replaces its shadow/padding. */
.bw-detail .bw-card.calender-card {
	box-shadow: none;
	padding: 0;
}

.bw-detail .bw-card-h {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 15px;
	color: #303233;
	padding: 15px 18px;
	border-bottom: 1px solid #EBEBEB;
}

.bw-detail .bw-card-b {
	padding: 16px 18px;
}

.bw-detail .bw-step-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: var(--widget-primary-contrast, #fff);
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}

/* The rental-period component renders its own .filter-card box — flatten it
   inside the card so it doesn't double-frame. */
.bw-detail .bw-card-b .filter-card {
	box-shadow: none;
	border: none;
	padding: 0;
	background: transparent;
}

/* --- Card ② Add to booking --- */
.bw-detail .bw-add-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background-color: #FAFBFC;
	border-bottom: 1px solid #EBEBEB;
	padding: 13px 18px;
}

.bw-detail .bw-add-h .ttl {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 15px;
	color: #303233;
}

.bw-detail .bw-add-hint {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6E88A2;
	white-space: nowrap;
}

.bw-detail .bw-add-b {
	padding: 14px 18px;
}

.bw-detail .bw-blocker {
	background-color: #fff3cd;
	border: 1px solid #ffe69c;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 12px;
	font-size: 12.5px;
	color: #856404;
}

.bw-detail .bw-blocker strong {
	display: block;
	font-size: 13px;
	margin-bottom: 2px;
}

.bw-detail .bw-inline-warn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: #fff3cd;
	color: #856404;
	font-size: 12px;
	font-weight: 500;
	padding: 5px 10px;
	border-radius: 6px;
}

.bw-detail .bw-simple-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bw-detail .bw-qty-lbl b {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #303233;
}

.bw-detail .bw-qty-lbl small {
	display: block;
	font-size: 13px;
	color: #6E88A2;
	margin-top: 2px;
}

/* --- Quantity stepper --- */
.bw-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #DFE3E8;
	border-radius: 8px;
	overflow: hidden;
	height: 44px;
	flex-shrink: 0;
	background-color: #fff;
}

.bw-stepper button {
	width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: #303233;
	cursor: pointer;
	padding: 0;
}

.bw-stepper button:hover:not(:disabled) {
	background-color: #F0F3F6;
}

.bw-stepper button:disabled {
	color: #C2CBD4;
	cursor: not-allowed;
}

.bw-stepper .val {
	min-width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	color: #303233;
	font-variant-numeric: tabular-nums;
	border-left: 1px solid #DFE3E8;
	border-right: 1px solid #DFE3E8;
}

.bw-stepper.sm {
	height: 40px;
}

.bw-stepper.sm button {
	width: 38px;
}

.bw-stepper.sm .val {
	min-width: 38px;
	font-size: 14px;
}

/* Clickable middle number — opens the 0..max quantity dropdown. Matches the
   .val look but is a real <button> so it's keyboard-focusable. */
.bw-stepper .val.bw-stepper-val-btn {
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.bw-stepper .val.bw-stepper-val-btn:hover {
	background-color: #F0F3F6;
}

/* Quantity dropdown menu (Alpine-driven, not a native <select>). Sized to
   content, capped + scrollable for long lists. Right-aligned to the stepper. */
.bw-stepper-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 1050;
	min-width: 64px;
	max-height: 220px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #DFE3E8;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(16, 24, 40, 0.12);
	padding: 4px;
}

.bw-stepper-menu-item {
	display: block;
	width: 100%;
	text-align: center;
	background: transparent;
	border: none;
	border-radius: 6px;
	padding: 7px 12px;
	font-size: 14px;
	font-weight: 600;
	color: #303233;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.bw-stepper-menu-item:hover {
	background-color: #F0F3F6;
}

.bw-stepper-menu-item.is-selected {
	background-color: #EAF1F9;
	color: #0d3b66;
}

/* --- Variation rows --- */
.bw-detail .bw-var-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6E88A2;
	padding-bottom: 8px;
}

.bw-detail .bw-var-head span:last-child {
	text-align: right;
}

.bw-detail .bw-var-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 10px;
	align-items: center;
	padding: 11px 0;
	border-top: 1px solid #EBEBEB;
}

.bw-detail .bw-var-row.off .bw-var-name {
	opacity: 0.55;
}

.bw-detail .bw-var-name {
	font-size: 14.5px;
	font-weight: 600;
	color: #303233;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bw-detail .bw-var-sub {
	font-size: 12.5px;
	font-weight: 400;
	color: #6E88A2;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bw-detail .bw-var-row.off .bw-var-sub {
	opacity: 0.55;
}

.bw-stockchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.bw-stockchip .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.bw-stockchip.in {
	background-color: #D8F1E4;
	color: #06A60E;
}

.bw-stockchip.in .dot {
	background-color: #06A60E;
}

.bw-stockchip.out {
	background-color: #FCE0E0;
	color: #A20E0E;
}

.bw-stockchip.out .dot {
	background-color: #A20E0E;
}

.bw-detail .bw-soldout {
	width: 80px;
	text-align: center;
	color: #C2CBD4;
}

.bw-detail .bw-var-notify {
	grid-column: 1 / -1;
}

.bw-detail .bw-unavailable {
	font-size: 13px;
}

/* --- Card ② footer --- */
.bw-detail .bw-add-f {
	background-color: #FAFBFC;
	border-top: 1px solid #EBEBEB;
	padding: 14px 18px 12px 18px;
}

.bw-detail .bw-totals {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.bw-detail .bw-totals .k {
	font-size: 12px;
	font-weight: 600;
	color: #6E88A2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bw-detail .bw-totals .v {
	font-weight: 700;
	font-size: 20px;
	color: #303233;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bw-detail .bw-totals .v small {
	font-size: 12px;
	font-weight: 500;
	color: #6E88A2;
}

.bw-detail .bw-add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	color: var(--widget-primary-contrast, #fff);
	border: none;
}

.bw-detail .bw-add-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.bw-detail .bw-secure-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12px;
	color: #6E88A2;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
	.bw-detail .bw-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"identity"
			"rail"
			"content"
			"similar";
	}

	.bw-detail .bw-rail-sticky {
		position: static;
	}

	.bw-detail .bw-rail {
		margin-top: 18px;
	}

	.bw-detail .bw-title {
		font-size: 24px;
	}

	.bw-detail .bw-price {
		font-size: 23px;
	}
}

@media (max-width: 767.98px) {
	/* Touch targets: small steppers grow to 44px on phones */
	.bw-stepper.sm {
		height: 44px;
	}

	.bw-stepper.sm button {
		width: 42px;
	}
}

@media (max-width: 479.98px) {
	/* Collapse variation rows to two lines: name + chip, stepper below */
	.bw-detail .bw-var-head {
		display: none;
	}

	.bw-detail .bw-var-row {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 10px;
	}

	.bw-detail .bw-var-row .bw-stepper {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.bw-detail .bw-simple-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Supplier-themed accents for the booking rail (CSS vars are set by the layout) */
.bw-detail .bw-tag {
	color: var(--widget-primary-accent, #0d3b66);
	background: color-mix(in srgb, var(--widget-primary-color, #0d3b66) 9%, transparent);
}

.bw-detail .bw-step-no {
	background-color: var(--widget-primary-color, #0d3b66);
}

.bw-detail .bw-add-btn,
.bw-detail .bw-add-btn.btn-theme-primary {
	background-color: var(--widget-primary-color, #0d3b66) !important;
}

.bw-detail .downloadLink {
	color: var(--widget-primary-accent, #0d3b66);
}

/* ---------------------------------------------------------------------------
   Category landing page — /widget/{supplier}
   Card grid of categories; each card offers a pill per booking type.
--------------------------------------------------------------------------- */
.widget-landing {
	max-width: 1080px;
	margin: 0 auto;
	padding: 28px 0 48px;
}

/* "See all" link beside a sidebar Category heading -> category landing page */
.widget-sidebar-see-all {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.widget-landing-header {
	margin-bottom: 20px;
}

.widget-landing-title {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 2px;
}

.widget-landing-subtitle {
	color: #6b7280;
	font-size: 14px;
}

.widget-landing-card {
	cursor: default;
	display: flex;
	flex-direction: column;
}

.widget-landing-card .widget-landing-card-img {
	aspect-ratio: 16/9;
	background: #eef1f4;
	overflow: hidden;
}

.widget-landing-card .widget-landing-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.widget-landing-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 40px;
	font-weight: 700;
	color: #9ca3af;
}

/* Collage of item images shown when a category has no image of its own.
   1 image = full bleed; 2 = side by side; 3 = tall-left + two stacked; 4 = 2x2. */
.widget-landing-collage {
	display: grid;
	width: 100%;
	height: 100%;
	gap: 2px;
	background: #e8eaed;
}

.widget-landing-collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.widget-landing-collage.count-1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.widget-landing-collage.count-2 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

.widget-landing-collage.count-3,
.widget-landing-collage.count-4 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.widget-landing-collage.count-3 img:first-child {
	grid-row: 1 / span 2;
}

.widget-landing-card-description {
	font-size: 13px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.widget-landing-type-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 14px;
}

/* color !important on both states: the widget layout's inline theming block
   forces `a:not(.btn):not(.dropdown-item) { color: accent !important }`. Without
   it, the hover text stays accent-colored on the accent fill — invisible. */
.widget-landing a.widget-landing-type-btn:not(.dropdown-item) {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* CLAUDE.md mobile tap-target minimum */
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--widget-primary-accent, #0d3b66);
	color: var(--widget-primary-accent, #0d3b66) !important;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}

.widget-landing a.widget-landing-type-btn:not(.dropdown-item):hover {
	background: var(--widget-primary-accent, #0d3b66);
	color: #fff !important;
}

/* "Browse everything" boxes — quick links into a whole section, at the top
   of the landing page. Responsive row that wraps; one box per enabled module
   that has items. */
.widget-landing-browse-boxes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin-bottom: 32px;
}

/* color !important: the widget layout's inline theming block forces
   `a:not(.btn):not(.dropdown-item) { color: accent !important }`. */
.widget-landing a.widget-landing-browse-box:not(.dropdown-item) {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 18px;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: #fff;
	color: var(--widget-primary-accent, #0d3b66) !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.widget-landing a.widget-landing-browse-box:not(.dropdown-item):hover {
	border-color: var(--widget-primary-accent, #0d3b66);
	box-shadow: 0 4px 14px rgba(13, 59, 102, 0.12);
	transform: translateY(-1px);
	color: var(--widget-primary-accent, #0d3b66) !important;
}

.widget-landing-browse-box-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 10px;
	background: rgba(13, 59, 102, 0.08);
}

/* ============================================================
   Category showcase (top of Experiences / Rentals listings)
   Supplier opt-in; rendered by components/widget/category-section.
   Minimal themed pills — all color derives from the widget brand
   vars, never a per-category palette.
   ============================================================ */
.widget-category-section {
	margin-bottom: 24px;
}
.widget-category-pills-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b7280;
}
.widget-category-pills-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.widget-category-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid #e8eaed;
	border-radius: 999px;
	background: #fff;
	color: var(--widget-text-color, #303233);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease, opacity .15s ease;
}
.widget-category-pill:hover {
	border-color: var(--widget-primary-color, #0d3b66);
}
.widget-category-pill.selected {
	background: var(--widget-primary-color, #0d3b66);
	border-color: var(--widget-primary-color, #0d3b66);
	color: var(--widget-primary-contrast, #fff);
}
.widget-category-pill[disabled] {
	opacity: 0.55;
	cursor: default;
}
.widget-category-pill-name {
	white-space: nowrap;
}
.widget-category-pill-count {
	color: #9aa0a6;
	font-weight: 400;
}
.widget-category-pill.selected .widget-category-pill-count {
	color: var(--widget-primary-contrast, #fff);
	opacity: 0.65;
}
.widget-category-pill-spinner {
	width: 0.85rem;
	height: 0.85rem;
}

/* ---- Listing loading feedback ---- */
.widget-results-dim {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity .15s ease;
}
.widget-loading-overlay {
	border-radius: 12px;
}

/* Mini-cart loading skeleton — shown while the booking dropdown auto-opens on
   add-to-cart and the items are still fetching. Prevents the brief "no items"
   flash, most visible on slow / production connections. */
.eq-cart-skeleton {
	height: 72px;
	border-radius: 8px;
	margin-bottom: 12px;
	background: #f0f0f0;
	background-image: linear-gradient(90deg, #f0f0f0 0px, #e7e7e7 40px, #f0f0f0 80px);
	background-size: 600px 100%;
	animation: eq-cart-shimmer 1.3s ease-in-out infinite;
}
.eq-cart-skeleton:last-child { margin-bottom: 0; }
@keyframes eq-cart-shimmer {
	0% { background-position: -120px 0; }
	100% { background-position: 480px 0; }
}

/* ===================== Cart "My booking" — phone stacking ================= *
 * On a phone the cart line is too wide to sit on one row: the image + product
 * name don't shrink, so the quantity stepper and the line price get pushed off
 * the right edge (the customer had to scroll sideways). Removing the old 600px
 * floor wasn't enough. Stack each line into a card instead — image + name on
 * top, then the stepper and price on their own full-width row below — so
 * nothing can overflow at 375–414px. The Items/Quantity/Price column header is
 * meaningless once stacked, so hide it. Applies to rental, experience AND store
 * rows (they all share the .heading / .item-1 / .item-2 structure). Phones only
 * (≤600px); tablets keep the side-by-side row, which fits comfortably there. */
@media screen and (max-width: 600px) {
	/* The Items / Quantity / Price column header is the only .heading whose
	   .item-1 is the bare label (inline margin-left:50px); product rows give
	   .item-1 a flex class with no inline margin. Hide just that header — the
	   stacked cards don't need column labels. */
	.cart-page .heading:has(> .item-1[style*="margin-left"]) {
		display: none !important; /* beats Bootstrap .d-flex { display:flex !important } */
	}

	/* The header sat between two section-dividers; with it hidden, drop the
	   divider that immediately followed it so they don't double up. */
	.cart-page .heading:has(> .item-1[style*="margin-left"]) + .section-divider {
		display: none;
	}

	.cart-page .heading {
		flex-direction: column;
		align-items: stretch;
		row-gap: 12px;
	}

	/* Override the side-by-side .item-1 { flex: auto !important } so the children
	   take their natural height and the full card width when stacked. */
	.cart-page .heading > .item-1,
	.cart-page .heading > .item-2 {
		width: 100%;
		flex: 0 0 auto !important;
	}

	.cart-page .heading > .item-2 {
		justify-content: space-between;
		align-items: center;
	}
}

/* ── Widget cart — mobile/responsive polish ───────────────────────────────────
   1. Align the remove (×) button to the TOP of the cart line instead of
      vertically centering it: on a multi-line item title, align-items:center
      left the × floating mid-row with empty space beside it (supplier report).
      Scoped to .item-1 (cart rows) so the header cart-drawer close button — which
      is a single-line row — is untouched.
   2. On phones, stack the cart action buttons (browse + "proceed to checkout")
      full-width instead of cramming them side-by-side (the French labels wrapped
      to 3 lines and overflowed). Same ≤600px breakpoint as the cart-card stacking
      above so the rows and the CTA buttons reflow together. */
.item-1 .close-btn {
	align-self: flex-start;
}

@media screen and (max-width: 600px) {
	.cart-cta-row {
		flex-direction: column;
	}

	.cart-cta-row .btn {
		width: 100%;
	}
}