.f80-reservation-button[hidden],
.f80-reservation-drawer[hidden]{

	display:none!important;

}

.f80-reservation-services[hidden]{

	display:none!important;

}

/*
|--------------------------------------------------------------------------
| Fiveighty MotoPress Reservation Drawer
|--------------------------------------------------------------------------
*/

:root {

	--f80-primary: #1d3557;
	--f80-primary-hover: #16304d;

	--f80-bg: #ffffff;
	--f80-border: #e5e7eb;

	--f80-text: #222;
	--f80-text-light: #666;

	--f80-radius: 14px;

	--f80-shadow:
		0 18px 45px rgba(0,0,0,.15);

	--f80-transition:
		.30s cubic-bezier(.4,0,.2,1);

	--f80-button-height: 58px;

}

/*
|--------------------------------------------------------------------------
| Floating Button
|--------------------------------------------------------------------------
*/

.f80-reservation-button{

	position:fixed;

	right:24px;
	bottom:24px;

	display:flex;
	align-items:center;
	gap:12px;

	height:var(--f80-button-height);

	padding:0 22px;

	border:0;
	border-radius:999px;

	background:var(--f80-primary);

	color:#fff;

	font-size:15px;
	font-weight:600;

	cursor:pointer;

	box-shadow:var(--f80-shadow);

	z-index:99998;

	transition:all var(--f80-transition);

}

.f80-reservation-button:hover{

	background:var(--f80-primary-hover);

	transform:translateY(-2px);

}

.f80-reservation-button svg{

	display:block;

	width:20px;
	height:20px;

}

/*
|--------------------------------------------------------------------------
| Drawer
|--------------------------------------------------------------------------
*/

.f80-reservation-drawer{

	position:fixed;

	inset:0;

	visibility:hidden;

	pointer-events:none;

	z-index:99999;

}

/*
|--------------------------------------------------------------------------
| Active
|--------------------------------------------------------------------------
*/

.f80-reservation-drawer.is-open{

	visibility:visible;

	pointer-events:auto;

}

/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.f80-reservation-drawer__overlay{

	position:absolute;

	inset:0;

	background:rgba(0,0,0,.45);

	backdrop-filter:blur(3px);

	opacity:0;

	transition:opacity var(--f80-transition);

}

.f80-reservation-drawer.is-open
.f80-reservation-drawer__overlay{

	opacity:1;

}

/*
|--------------------------------------------------------------------------
| Panel
|--------------------------------------------------------------------------
*/

.f80-reservation-drawer__panel{

	position:absolute;

	right:0;
	top:0;
	bottom:0;

	width:420px;
	max-width:100%;

	display:flex;
	flex-direction:column;
	overflow-x:hidden;
	overflow-y:auto;

	background:var(--f80-bg);

	box-shadow:var(--f80-shadow);

	transform:translateX(100%);

	transition:transform var(--f80-transition);

}

.f80-reservation-drawer.is-open
.f80-reservation-drawer__panel{

	transform:translateX(0);

}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.f80-reservation-header{

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:22px;

	border-bottom:1px solid var(--f80-border);

}

.f80-reservation-header h2{

	margin:0;

	font-size:22px;

	color:var(--f80-text);

}

.f80-reservation-close{

	border:0;

	background:none;

	font-size:34px;

	line-height:1;

	cursor:pointer;

	color:#777;

	transition:.2s;

}

.f80-reservation-close:hover{

	color:#000;

}

/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.f80-reservation-content{

	flex:none;

	overflow:visible;

	padding:22px;

}

/*
|--------------------------------------------------------------------------
| Image
|--------------------------------------------------------------------------
*/

.f80-reservation-image{

	margin-bottom:20px;

}

.f80-reservation-image img{

	display:block;

	width:100%;

	border-radius:12px;

	background:#f4f4f4;

}

/*
|--------------------------------------------------------------------------
| Accommodation
|--------------------------------------------------------------------------
*/

.f80-reservation-accommodation{

	margin:0 0 20px;

	font-size:22px;
	
	text-transform: none;

	color:var(--f80-text);

}

/*
|--------------------------------------------------------------------------
| Meta
|--------------------------------------------------------------------------
*/

.f80-meta-row{

	display:flex;

	justify-content:space-between;

	align-items:center;

	padding:10px 0;

	border-bottom:1px solid var(--f80-border);

}

.f80-meta-row:last-child{

	border-bottom:0;

}

.f80-meta-row span{

	color:var(--f80-text-light);

	font-size:14px;

}

.f80-meta-row strong{

	font-size:15px;

	font-weight:600;

	color:var(--f80-text);

}

/*
|--------------------------------------------------------------------------
| Services
|--------------------------------------------------------------------------
*/

.f80-reservation-services{

	margin-top:30px;

}

.f80-reservation-services h4{

	margin:0 0 15px;

	font-size:18px;

}

.f80-empty{

	color:#888;

	font-size:14px;

}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.f80-reservation-footer{

	padding:22px;

	border-top:1px solid var(--f80-border);

	background:#fff;

}

.f80-total-row{

	display:flex;

	align-items:center;

	justify-content:space-between;

	margin-bottom:18px;

	font-size:18px;

}

.f80-total-row strong{

	font-size:24px;

	font-weight:700;

}

/*
|--------------------------------------------------------------------------
| Continue Button
|--------------------------------------------------------------------------
*/

.f80-continue-booking{

	display:block;

	width:100%;

	padding:16px;

	border-radius:10px;

	background:var(--f80-primary);

	color:#fff;

	font-weight:600;

	text-align:center;

	text-decoration:none;

	transition:all var(--f80-transition);

}

.f80-continue-booking:hover{

	background:var(--f80-primary-hover);

	color:#fff;

	text-decoration:none;

}

/*
|--------------------------------------------------------------------------
| Body Lock
|--------------------------------------------------------------------------
*/

body.f80-reservation-open{

	overflow:hidden;

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:768px){

	.f80-reservation-button{

		right:16px;

		bottom:16px;

	}

	.f80-reservation-drawer__panel{

		width:100%;

	}

}

.f80-reservation-collection{

	display:block;
	margin-bottom:20px;
	color:var(--f80-text-light);
	font-size:14px;

}

.f80-reservation-collection[hidden]{

	display:none!important;

}

.f80-reservation-close:only-child{

	margin-left:auto;

}

.f80-clear-reservation{

	display:block;
	margin:12px auto 0;
	padding:0;
	border:0;
	background:transparent;
	color:var(--f80-text-light);
	cursor:pointer;
	font:inherit;
	text-decoration:underline;

}

.f80-clear-reservation:hover,
.f80-clear-reservation:focus{

	color:var(--f80-text);

}

.f80-total-breakdown{

	margin-bottom:14px;

}

.f80-total-breakdown .f80-service-row{

	padding:7px 0;
	font-size:14px;

}

.f80-service-row{

	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;

	padding:10px 0;

	border-bottom:1px solid var(--f80-border);

}

.f80-service-row:last-child{

	border-bottom:0;

}

.f80-reservation-debug{

	margin-top:30px;

	border:1px solid var(--f80-border);
	border-radius:8px;

}

.f80-reservation-debug summary{

	cursor:pointer;
	padding:12px;
	font-weight:600;

}

.f80-reservation-debug pre{

	max-height:360px;
	margin:0;
	padding:12px;
	overflow:auto;

	border-top:1px solid var(--f80-border);
	background:#111;
	color:#b7f7b7;

	font-size:11px;
	white-space:pre-wrap;
	word-break:break-word;

}