.booking-widget {
	/*=============================*/
	/*=====----- GENERAL -----=====*/
	/*=============================*/

	position: relative;
	container-type: inline-size;

	.widget-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		margin-bottom: var(--space-20);
	}

	.image,
	.slides {
		padding: 0 var(--space-5);
	}

	.slide-img {
		width: 100%;
	}

	.image {
		position: relative;
		z-index: 3;
		order: -1;
	}

	.form-content {
		position: relative;
		z-index: 2;
		padding: 30px var(--space-5);
		color: var(--white);
	}

	.background {
		position: absolute;
		inset: auto 0 0;
		z-index: -1;
		height: calc(100% + var(--space-10));
		background: var(--blue-dark);
	}

	.bg-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/*============================*/
	/*=====----- HEADER -----=====*/
	/*============================*/

	.template-header {
		max-width: 730px;
		margin-bottom: var(--space-5);
	}

	.template-title {
		margin-bottom: 15px;
		font-family: var(--font-contrast-condensed);
		font-weight: var(--font-weight-extrabold);
		font-size: 2rem;
		line-height: normal;
		color: inherit;
	}

	.subtitle {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-bottom: 15px;
		font-family: var(--font-soft);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-xs);
		line-height: 1;
		text-transform: uppercase;

		&::before {
			display: block;
			width: 14px;
			height: 2px;
			content: '';
			background: var(--white);
		}
	}

	.template-desc {
		margin: 0;
		font-family: var(--font-serif);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-2xl);
		line-height: 1.2;
		color: inherit;
	}

	/*==========================*/
	/*=====----- FORM -----=====*/
	/*==========================*/

	#aresHeader,
	.aresWidgetNav {
		display: none;
	}

	#aresTabs {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: start;
		gap: var(--space-2);
		margin-bottom: var(--space-6);
	}

	.booking-form {
		label,
		input:not([type="submit"]),
		select {
			font-family: var(--font-soft);
			font-weight: var(--font-weight-medium);
			font-size: var(--text-base);
			line-height: var(--leading-tight);
			color: inherit;
		}

		label {
			display: block;
			margin-bottom: var(--space-1);
			color: #333;
		}

		input:not([type="submit"]),
		select {
			display: block;
			width: 100%;
			padding: var(--space-3);
			background: none;
			border: 2px solid var(--white);
			border-radius: 5px;
			color: #333;

			&::-webkit-calendar-picker-indicator {
				padding: 0;
				background-image: url('/includes/public/assets/shared/calendar-icon.svg');
			}
		}

		select {
			appearance: none;
			background: url('/includes/public/assets/shared/angle-down.svg') no-repeat right 12px center / 13px auto;
		}

		option {
			color: var(--gray-dark);
		}
	}

	#hotelSearchForm {
		margin-bottom: var(--space-6);
	}

	#hotelSearchForm > ul {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--space-5);
	}

	.aresLocation {
		display: none;
	}

	.aresDates {
		grid-column: span 3;
	}
	
	.aresNumbers {
		grid-column: span 2;
	}

	.bookNowBtn {
		grid-column: span 6;
	}

	#aresPhone {
		margin-top: var(--space-4);
	}

	/*============================*/
	/*=====----- SLIDES -----=====*/
	/*============================*/

	.slides {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-5);
		margin-top: var(--space-10);
	}

	.slide {
		display: grid;
		grid-template-columns: 35.82% minmax(0, 1fr);
		align-items: center;
		gap: var(--space-5);
	}

	.slide-img-cont {
		order: -1;
	}

	.slide-title {
		margin: 0;
		font-family: var(--font-soft);
		font-weight: var(--font-weight-bold);
		font-size: 1.0625rem;
		line-height: 1.2;
		color: var(--gray-dark);
	}

	.read-more {
		margin-top: var(--space-3);
	}

	/*===================================*/
	/*=====----- MEDIA QUERIES -----=====*/
	/*===================================*/

	@container (min-width: 40em) {
		.slides {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@container (min-width: 64em) {
		.widget-inner {
			grid-template:
				'form image' auto
				'slides image' auto / 58.19% minmax(0, 1fr);
			align-items: end;
			gap: var(--space-5) 52px;
			margin-bottom: 100px;
		}

		.form-content {
			grid-area: form;
			padding: var(--space-20) 0 78px 50px;
		}

		.background {
			inset: 0 auto 0 0;
			width: calc(100% + 150px);
			height: auto;
		}

		.image,
		.slides {
			padding: 0;
		}

		.slides {
			grid-area: slides;
			margin: 0;
			padding: 0 0 25px var(--space-5);
		}

		.image {
			grid-area: image;
		}
	}

	@container (min-width: 90em) {
		.template-title {
			font-size: 2.5rem;
		}

		.subtitle {
			font-size: var(--text-sm);
		}

		.template-desc {
			font-size: 1.625rem;
		}

		.booking-form {
			input:not([type="submit"]),
			select {
				padding: 18px;
			}
		}

		#hotelSearchForm > ul {
			grid-template-columns: repeat(2, minmax(0, 3fr)) repeat(3, minmax(0, 2fr));
			gap: var(--space-10) var(--space-5);
		}

		.aresDates,
		.aresNumbers,
		.bookNowBtn {
			grid-column: unset;
		}

		.slides {
			gap: var(--space-12);
		}

		.slide {
			grid-template-columns: 41.5% minmax(0, 1fr);
		}

		.slide-title {
			font-size: var(--text-xl);
		}
	}
}

.booking-widget #rootrez-widget-form {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin:0;
    gap: 16px;
}
.booking-widget .rootrez_widget_form_wrapper {
    max-width: 640px; 
    background-color: transparent;
	border:none;
	margin: 0;
}
.booking-widget #rootrez-widget-form > div {
    max-width: 200px;
	border: 2px solid #fff;
    border-radius: 8px;
	padding: 12px;
    font-size: 14px;
	color: #fff;
	height: auto !important;
}
.booking-widget #rootrez-widget-form .search_submit{
	height: auto !important;
	padding: 0;
	border: none;
}
.booking-widget #rootrez-widget-form .search_submit #localeSearch{
    --text-color: var(--white);
    --background-color: var(--red);
    --arrow-color: var(--yellow);
    --border-color: var(--background-color);
    --text-color-hover: var(--red);
    --background-color-hover: var(--white);
    --arrow-color-hover: var(--yellow);
    --border-color-hover: var(--background-color);
    align-items: center;
    width: 100%;
    padding: 12px 0;
    height: auto;
    margin: 0 auto;
    font-family: var(--font-soft);
    font-weight: var(--font-weight-bold);
    font-size: 0.8125rem;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    color: var(--text-color);
    background-color: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: 5px;
    transition: color var(--transition-appendix), background-color var(--transition-appendix), border-color var(--transition-appendix);
}
#rootrez-widget-form svg {
    fill: #fff !important;
}
#rootrez-widget-form .booking-extras-options svg {
    fill: var(--primary-color) !important;
}
@media (max-width: 599px) {
    .rootrez_widget_form_wrapper.no-deals #rootrez-widget-form .search_occupancy {
        border-bottom: 2px solid #fff !important;
	}
}