.bd-index-snippet {
	width: calc(100% + 16px); /* Looks odd, but needed to match comp layout, and does not overflow */
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: var(--space-1);
	flex-wrap: wrap;
	bottom: -2px;
	margin-top: var(--space-4);
}

.bd-index-snippet .price-container {
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	font-family: var(--font-body);
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	gap: 5px;
	color: var(--text-black);
	padding: 0;
}

.bd-index-snippet .label {
	display: block;
	font-size: var(--text-sm);
	line-height: var(--leading-none);
	text-align: left;
	white-space: pre-wrap;
	font-weight: 400;
	white-space: pre-wrap;
}

.bd-index-snippet .price {
	font-size: var(--text-sm);
	font-weight: 400;
	display: inline-flex;
	align-items: flex-end;
	line-height: var(--leading-none);
}

.bd-index-snippet .book {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--text-black);
	padding: var(--space-1) 0;
	height: 32px;
	border-bottom: 5px solid var(--alert-color-secondary);
	white-space: nowrap;
}

.bd-index-snippet .book:hover {
	text-decoration: none;
}

@media (min-width: 64em) {
	.bd-index-snippet {
		width: 100%;
		bottom: -1px;
	}

	.layoutjs .content.grid .bd-index-snippet {
		position: relative;
		flex-direction: row;
		bottom: -1px;
		right: 0;
		justify-content: space-between;
		margin-top: 0;
	}

	.layoutjs .content .bd-index-snippet .price-container,
	.layoutjs .content .bd-index-snippet .book.check-rates {
		height: 37px;
	}

	.layoutjs .content .bd-index-snippet .price-container {
		padding: 10px 0px;
	}

	.bd-index-snippet .label {
		font-size: var(--text-base);
	}
	
	.bd-index-snippet .price {
		font-size: var(--text-base);
	}

	.bd-index-snippet .book {
		height: 37px;
		font-size: var(--text-base);
		padding: 2px 0px;
		border-bottom: 4px solid var(--alert-color-secondary);
	}
}

/* Detail */
.booking-detail-snippet {
	margin:19px 15px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 4px;
	background-color: var(--light-blue);
}

.booking-detail-snippet .rate-info {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	margin-top: 23px;
	margin-bottom: 10px;
	gap: 4px;
}

.booking-detail-snippet .rate-info .nights {
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-normal);
	color: var(--text-black);
	margin-right: 0;
}

.booking-detail-snippet .rate-info .price {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: var(--leading-none);
	color: var(--text-black);
}

.booking-detail-snippet .dates {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	column-gap: 2px;
	margin-bottom: 10px;
}

.booking-detail-snippet .dates input {
	position: relative;
	font-size: var(--text-sm);
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--text-black);
	background: var(--white);
	gap: var(--space-1);
	padding: .5313rem var(--space-2);
	padding-right: var(--space-5);
	letter-spacing: var(--tracking-wide);
	width: 152px;
}

.booking-detail-snippet .dates .start-date {
	border-radius: 4px 0px 0px 4px;
}
.booking-detail-snippet .dates .end-date {
	border-radius: 0px 4px 4px 0px;
}

.booking-detail-snippet .dates input[type="date"]::-webkit-inner-spin-button,
.booking-detail-snippet .dates input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
	cursor: pointer;
}

.booking-detail-snippet .dates input::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f133";
	position: absolute;
	font-size: var(--text-base);
	right: 10px;
}

.booking-detail-snippet .dates input::after {
	content: none;
}

.booking-detail-snippet .dates button {
	height: max-content;
	background-color: var(--text-black);
	color: var(--light-blue);
	padding: 6px 15px;
}

.shared-detail .detail-top .info-section .booking-detail-snippet .more-info a {
	background: var(--text-black);
	color: var(--light-blue-cc);
	font-size: var(--text-sm);
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	white-space: nowrap;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	gap: 6px;
	padding: 6px 19px 6px 12px;
}

.booking-detail-snippet .more-info {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.booking-detail-snippet .more-info a {
	background: var(--orange);
	width: 100%;
	text-align: center;
	font-size: var(--text-lg);
	margin: 0 var(--space-5) 29px;
	color: var(--white);
	font-weight: 700;
	border-radius: 4px;
	padding: .4063rem 0;
	max-width: 305px;
	justify-content: center;
	align-items: center;
}

@media (hover: hover) {
	.booking-detail-snippet .more-info a:hover {
		text-decoration: unset;
	}
}

.shared-detail .detail-top .info-section .booking-detail-snippet .more-info a:hover {
	text-decoration: none;
}

@media (min-width: 40em) {
	.booking-detail-snippet .dates input {
		font-size: var(--text-base);
		padding: 1.1563rem var(--space-2);
		width: 300px;
	}

	.booking-detail-snippet .dates input::before {
		right: 20px;
	}

	.booking-detail-snippet .rate-info .nights,
	.booking-detail-snippet .rate-info .price {
		font-size: var(--text-xl);
	}

	.booking-detail-snippet .more-info a {
		padding: 16.5px 0;
	}
}


@media (min-width: 64em) {
	.booking-detail-snippet {
		display: grid;
		grid-template-columns: minmax(170px, max-content) minmax(485px, 1fr) minmax(210px, max-content);
		gap: 20px;
		margin-top: 0;
		margin-inline: auto;
		margin-bottom: var(--space-8);
		width: calc(100% - 30px);
		max-width: 1200px;
		padding: 36px 48px;
	}

	.booking-detail-snippet .rate-info {
		grid-column: 1 / 2;
		margin-top: 0;
		margin-bottom: 0;
		align-items: center;
	}

	.booking-detail-snippet .rate-info .nights,
	.booking-detail-snippet .rate-info .price {
		font-size: var(--text-xl);
	}

	.booking-detail-snippet .dates {
		margin-bottom: 0;
		justify-content: flex-end;
	}
	
	.booking-detail-snippet .dates input {
		padding: 1.0625rem 1.25rem;
		width: 100%;
	}

	.booking-detail-snippet .date-input-cont.arrival,
	.booking-detail-snippet .date-input-cont.departure {
		width: 100%;
		max-width: 300px;
	}

	.booking-detail-snippet .more-info a {
		margin: 0;
	}

	.shared-detail .detail-top .info-section .booking-detail-snippet .more-info a {
		font-size: var(--text-lg);
		gap: var(--space-3);
		padding: var(--space-3) var(--space-6) var(--space-3) var(--space-5);
		height: 45px;
	}

	.booking-detail-snippet .more-info {
		max-width: 210px;
	}
}

@media (max-width: 374px) {
	.booking-detail-snippet .dates {
		gap: 2px;
		flex-direction: column;
	}

	.booking-detail-snippet .dates .start-date,
	.booking-detail-snippet .dates .end-date {
		border-radius: 4px;
	}

	.booking-detail-snippet .dates input {
		width: min(calc(247px + (302 - 247) * ((100vw - 320px) / (374 - 320))), 302px);
	}
}