/* =========================
   BEMO — CONTAINER
========================= */

.bemo-booking{
	background:#F0EAE5;
	padding:clamp(32px,6vw,80px);
	max-width:880px;
	margin:0 auto;
	font-family:var(--e-global-typography-1a50e84-font-family), serif;
}

/* =========================
   STEPPER
========================= */

.bemo-stepper__nav{
	display:flex;
	gap:40px;
	margin-bottom:60px;
	border-bottom:1px solid rgba(0,0,0,.1);
	padding-bottom:16px;
}

.bemo-stepper__step{
	position:relative;
	font-size:14px;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:rgba(0,0,0,.4);
	cursor:pointer;
	transition:all .3s ease;
}

.bemo-stepper__step::after{
	content:'';
	position:absolute;
	left:0;
	bottom:-17px;
	width:0;
	height:1px;
	background:#181A14;
	transition:width .35s ease;
}

.bemo-stepper__step.active{
	color:#181A14;
}

.bemo-stepper__step.active::after{
	width:100%;
}

/* =========================
   STEPS
========================= */

.bemo-step{
	display:none;
	animation:fadeStep .4s ease;
}

.bemo-step.active{
	display:block;
}

@keyframes fadeStep{

	from{
		opacity:0;
		transform:translateY(10px);
	}

	to{
		opacity:1;
		transform:translateY(0);
	}
}

/* =========================
   HOTEL LIST
========================= */

.bemo-hotel-list{
	display:flex;
	flex-direction:column;

	max-height:320px;
	overflow-y:auto;

	border-top:1px solid rgba(0,0,0,.06);
	border-bottom:1px solid rgba(0,0,0,.06);

	-webkit-overflow-scrolling:touch;
}

.bemo-hotel-list::-webkit-scrollbar{
	width:6px;
}

.bemo-hotel-list::-webkit-scrollbar-thumb{
	background:rgba(0,0,0,.2);
	border-radius:10px;
}

.bemo-hotel-item{
	font-size:22px;
	padding:18px 12px;
	border-bottom:1px solid rgba(0,0,0,.06);
	cursor:pointer;
	user-select:none;

	transition:
		opacity .35s ease,
		background .35s ease,
		color .35s ease;
}

.bemo-hotel-item:hover{
	opacity:.6;
	transform:none !important;
}

.bemo-hotel-item.active{
	background:rgba(0,0,0,.04);
	font-weight:500;
}

.bemo-hotel-item.is-coming-soon{
	color:rgba(0,0,0,.35);
	pointer-events:none;
}

.bemo-hotel-item.is-coming-soon::after{
	content:'Coming soon';
	float:right;
	font-size:11px;
	letter-spacing:.12em;
	text-transform:uppercase;
}

/* =========================
   SEARCH
========================= */

.bemo-hotel-search{
	width:100%;
	border:none;
	border-bottom:1px solid rgba(0,0,0,.2);
	padding:18px 0;
	margin-top:24px;
	background:transparent;
	font-size:16px;
	outline:none;
	font-family:inherit;
}

.bemo-hotel-search:focus{
	border-color:#181A14;
}

/* =========================
   DATES
========================= */

.bemo-booking__dates{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:32px;
	margin-top:20px;
}

.bemo-booking__date-field{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.bemo-booking__date-field label{
	font-size:12px;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:rgba(0,0,0,.5);
}

/* =========================
   DATE INPUTS
========================= */

.bemo-booking__dates input[type="date"]{

	appearance:none;
	-webkit-appearance:none;

	width:100%;
	height:74px;

	padding:0 18px;

	border:1px solid rgba(0,0,0,.35) !important;
	border-radius:0;

	background:transparent;

	font-size:18px;
	line-height:74px;

	color:#181A14;

	box-sizing:border-box;

	font-family:var(--e-global-typography-1a50e84-font-family), serif;

	outline:none;

	transition:
		border-color .25s ease,
		background .25s ease;
}

.bemo-booking__dates input[type="date"]:focus{
	border-color:#181A14 !important;
	background:rgba(255,255,255,.3);
}

.bemo-booking__dates input[type="date"]::-webkit-date-and-time-value{
	text-align:left;
	height:74px;
	line-height:74px;
}

.bemo-booking__dates input[type="date"]::-webkit-calendar-picker-indicator{
	opacity:.7;
	cursor:pointer;
}

/* =========================
   ROOMS
========================= */

.bemo-room{
	display:block;
	padding:24px 0;
	border-bottom:1px solid rgba(0,0,0,.08);
}

.bemo-room__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;

	margin-bottom:18px;
	font-size:18px;
}

.bemo-room__controls{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px;
}

.bemo-room__controls label{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}

/* =========================
   COUNTERS
========================= */

.bemo-counter{
	display:inline-flex;
	align-items:center;
	gap:10px;
}

.bemo-counter span{
	min-width:20px;
	text-align:center;
}

/* =========================
   RESET BUTTONS
========================= */

.bemo-booking button:not(.bemo-next):not(.bemo-prev):not(.bemo-submit):not(.bemo-link-btn){
	all:unset;
	box-sizing:border-box;
	font-family:inherit;
}

/* =========================
   COUNTER BUTTONS
========================= */

.bemo-room label button{
	width:32px;
	height:32px;

	display:inline-flex;
	align-items:center;
	justify-content:center;

	border:1px solid rgba(0,0,0,.15);

	background:transparent;

	cursor:pointer;

	font-size:16px;
	line-height:1;

	transition:all .25s ease;
}

.bemo-room label button:hover{
	background:#181A14;
	color:#F0EAE5;
	border-color:#181A14;
}

/* =========================
   ROOM ACTIONS
========================= */

.bemo-room-actions{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;

	margin-top:28px;
	padding-top:24px;

	border-top:1px solid rgba(0,0,0,.08);
}

/* =========================
   ADD ROOM
========================= */

.bemo-booking__add-room{
	all:unset;
	box-sizing:border-box;

	display:inline-flex;
	align-items:center;

	cursor:pointer;

	font-size:14px;
	letter-spacing:.04em;

	color:#181A14;

	font-family:var(--e-global-typography-1a50e84-font-family), serif;

	transition:opacity .25s ease;
}

.bemo-booking__add-room:hover{
	opacity:.6;
}

.bemo-booking__add-room span{
	font-size:22px;
	line-height:1;
	margin-right:10px;
}

/* =========================
   PROMO
========================= */

.bemo-promo-inline{
	width:280px;
	max-width:100%;
}

.bemo-booking__promo{
	width:100%;
	height:48px;

	border:1px solid rgba(0,0,0,.14);
	border-radius:100px;

	background:transparent;

	padding:0 20px;

	font-size:12px;
	letter-spacing:.14em;
	text-transform:uppercase;

	color:#181A14;

	outline:none;

	font-family:var(--e-global-typography-1a50e84-font-family), serif;

	transition:
		border-color .3s ease,
		background .3s ease;
}

.bemo-booking__promo:focus{
	border-color:#181A14;
	background:rgba(255,255,255,.45);
}

.bemo-booking__promo::placeholder{
	color:rgba(0,0,0,.42);
}

/* =========================
   BENEFITS
========================= */

.bemo-benefits{
	margin-top:36px;
	padding:28px;
	border:1px solid rgba(0,0,0,.08);
	background:rgba(255,255,255,.25);
}

.bemo-benefits__title{
	font-size:13px;
	letter-spacing:.14em;
	text-transform:uppercase;
	margin-bottom:18px;
	color:#181A14;
}

.bemo-benefits__list{
	list-style:none;
	padding:0;
	margin:0;

	display:grid;
	gap:12px;
}

.bemo-benefits__list li{
	position:relative;
	padding-left:22px;

	font-size:15px;
	line-height:1.5;

	color:rgba(0,0,0,.72);
}

.bemo-benefits__list li::before{
	content:'+';

	position:absolute;
	left:0;
	top:0;

	color:#181A14;
	font-weight:500;
}

/* =========================
   BUTTONS
========================= */

.bemo-booking .bemo-next,
.bemo-booking .bemo-submit,
.bemo-booking button.bemo-next,
.bemo-booking button.bemo-submit{

	all:unset;
	box-sizing:border-box;

	display:block;
	width:100%;

	margin-top:48px;
	padding:18px;

	font-size:14px;
	letter-spacing:.12em;
	text-transform:uppercase;

	cursor:pointer;

	text-align:center;

	font-family:var(--e-global-typography-1a50e84-font-family), serif;

	transition:
		background .4s ease,
		color .4s ease,
		border-color .4s ease;
}

.bemo-booking .bemo-next{
	background:transparent !important;
	border:1px solid #181A14 !important;
	color:#181A14 !important;
}

.bemo-booking .bemo-next:hover{
	background:#181A14 !important;
	color:#F0EAE5 !important;
}

.bemo-booking .bemo-submit{
	background:#181A14 !important;
	color:#F0EAE5 !important;
	border:1px solid #181A14 !important;
}

.bemo-booking .bemo-submit:hover{
	background:#2a2d29 !important;
	border-color:#2a2d29 !important;
}

/* =========================
   BACK LINK
========================= */

.bemo-booking .bemo-link-btn,
.bemo-booking button.bemo-link-btn{

	all:unset;

	display:block;
	width:fit-content;

	margin:18px auto 0;

	font-size:13px;
	letter-spacing:.08em;
	text-transform:uppercase;

	color:rgba(0,0,0,.55) !important;

	cursor:pointer;

	font-family:var(--e-global-typography-1a50e84-font-family), serif;

	transition:
		color .25s ease,
		transform .25s ease;
}

.bemo-booking .bemo-link-btn:hover{
	color:#181A14 !important;
	transform:translateX(-4px);
}

.bemo-room__remove{
	background:none;
	border:0;
	padding:0;
	cursor:pointer;
	font-size:14px;
	color:#999;
	transition:.2s ease;
}

.bemo-room__remove:hover{
	color:#000;
}

.bemo-next{

	background:#d9d4cf;
	color:#8f8a85;

	pointer-events:none;

	transition:all .3s ease;
}

.bemo-next:not(.is-disabled){

	background:#111;
	color:#fff;

	pointer-events:auto;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px){

	.bemo-booking{
		padding:28px 20px;
	}

	.bemo-stepper__nav{
		gap:20px;
		font-size:12px;
		overflow-x:auto;
	}

	.bemo-hotel-item{
		font-size:18px;
	}

	.bemo-booking__dates{
		grid-template-columns:1fr;
		gap:20px;
	}

	.bemo-booking__dates input[type="date"]{
		height:64px;
		font-size:16px;
		line-height:64px;
	}

	.bemo-booking__dates input[type="date"]::-webkit-date-and-time-value{
		height:64px;
		line-height:64px;
	}

	.bemo-room__controls{
		grid-template-columns:1fr;
		gap:16px;
	}

	.bemo-room-actions{
		flex-direction:column;
		align-items:flex-start;
	}

	.bemo-promo-inline{
		width:100%;
	}

	.bemo-hotel-list{
		max-height:260px;
	}
}