.reservation { 
	@include breakpoint(medium down) { padding-top: 90px; }
	@include breakpoint(large) {
		.reservation-container { display: table; width: 100%; }
		.reservation-form { width: 66.666%; display: table-cell; vertical-align: middle; }
		.reservation-content { width: 33.3332%; display: table-cell; vertical-align: middle; }
	}
	.footer { margin-top: 90px; }
}

.reservation-form  {
	.btn-reservation { /* transition: color .4s;  */
		@include breakpoint(medium down) { margin-bottom: 60px; }
		&.button-success { background: #2ec556 !important; border: #2ec556; 
			.btn-text { color: #fff !important; }
		}
	}
	fieldset {
		&:after { 
			@include breakpoint(medium down) { width: 100%; }
		}
	}
}
.reservation-content {
	@include breakpoint(large) { 
		.reservation-content-wrapper { padding-right: 60px; }
	}
}
.rtb-textarea.message { width: 100%; top: auto !important; left: auto !important; position: relative !important;
	textarea { resize: none; text-align: left; }
}

.rtb-error { display: none !important; }

.picker--focused .picker__day--selected, .picker__day--selected, .picker__day--selected:hover { background: #3c3c3c !important; }
.picker--focused .picker__day--highlighted, .picker__day--highlighted:hover, .picker__day--infocus:hover, .picker__day--outfocus:hover { color: #fff !important; background: #616161 !important;}
.picker__day { transition: 0.3s background-color, 0.3s color; }

/**
 *
 * Widget reservation
 *
 */
.nav-widget-reservation { position: relative; cursor: pointer; 
	.res-i { position: relative; transition: opacity .3s;
		&.hide-header { opacity: 0; }
	}
}
.reda-widget-reservation { background: $accent-color; position: fixed; right: 0; height: 100%; z-index: 7; transform: translateY(-100%); top: 0; transition: transform .5s .5s cubic-bezier(0.77,0,0.175,1), opacity .3s .7s, width .3s .2s cubic-bezier(0.77,0,0.175,1); transform-origin: top right; opacity: 0; overflow: auto;
	.res-i { width: 100%; text-align: center; opacity: 0; transition: opacity .3s 0s; cursor: pointer; 
		span { width: 20px; height: 20px; position: relative; vertical-align: middle; display: inline-block;
			&:before { content: ""; position: absolute; top: 50%; left: 1px; width: 18px; height: 2px; margin-top: -1px; background: $white; transform: rotate(45deg); }
			&:after { content: ""; position: absolute; top: 1px; left: 50%; width: 2px; height: 18px; margin-left: -1px; background: $white; transform: rotate(45deg); }
		}
	}
	&.has-scroll { 
		.widget-reservation-form { overflow: auto; margin-right: -15px; height: 100%; }
	}
	.widget-reservation-form { opacity: 0; transition: opacity .3s 0s cubic-bezier(0.77,0,0.175,1); }
	@include breakpoint(medium down) { width: 100%; }
	&.active-widget { transition: width .3s .6s, transform .5s .1s, opacity .6s 0s; transform: translateY(0); opacity: 1;
		.res-i { opacity: 1; transition: opacity .3s .7s; }
		.widget-reservation-form { transition: opacity .6s .3s cubic-bezier(0.77,0,0.175,1); opacity: 1; }
	}
	.success-message { position: absolute; top: 50%; z-index: 1; left: 60px; padding: 30px; text-align: center; background: transparent; opacity: 0; right: 60px; color: $black; transform: translateY(-50%); visibility: hidden; transition: opacity .6s 0.9s, visibility 0s 0s; color: inherit;
		h5 { margin-bottom: 0; color: inherit; }
	}
	&.message-sent { 
		.widget-reservation-form { opacity: 0; pointer-events: none; }
		.success-message { opacity: 1; visibility: visible; }
	}
	
}
.widget-reservation-form { padding: 60px; transition: opacity 0.6s 0.6s;
	.forms-style { margin: 0 -10px; position: relative; display: flex; overflow: hidden; }
	.reda-fieldset { width: 100%; overflow: hidden;
		@include breakpoint(small only) { 
			> div { margin-bottom: 10px; }
		}
		@include breakpoint(large) { margin-bottom: 10px; display: flex; }
		&:not(.reda-fieldset-checkbox, .reda-fieldset-radio) {
			.input-required { position: relative; 
				label:after { content: "*"; color: inherit; font-size: 18px; display: inline-block; vertical-align: middle; margin-left: 5px; line-height: 1; }
			}
		}
		label { transition: color .3s; }
		input, select, textarea { margin-bottom: 0; font-size: 14px; transition: border .3s; 
			&:focus { box-shadow: none; }
		}
		> div { width: 100%; }
		> * { margin: 0 10px; }
	}
	.booking-part-form, .contact-part-form { flex: 0 0 100%; }
	.booking-part-form { transition: margin .4s cubic-bezier(0.77,0,0.175,1), opacity .4s cubic-bezier(0.77,0,0.175,1); }
	.contact-part-form { transition: opacity .4s cubic-bezier(0.77,0,0.175,1); opacity: 0; }
	.show-next-step { 
		.booking-part-form { margin-left: -100%; opacity: 0; }
		.contact-part-form { opacity: 1; }
	}
	.reda-fieldset-checkbox { position: relative; height: auto; z-index: 1;
		.input-required { position: relative; 
			&:after { content: "*"; color: inherit; font-size: 18px; display: inline-block; vertical-align: middle; margin-left: 5px; transition: color .4s; line-height: 1; }
			label:after { left: 0; margin-left: 0; }
			&.message-error:after { color: #f10a4a; }
		}
		input { position: absolute; top: 3px;/*  left: 10px;  */height: 15px; width: 15px; z-index: 1; margin: 0; }
		label { left: 0; margin: 0; right: auto;
			&:before { content: ""; width: 15px; height: 15px; position: absolute; top: 3px; /* left: 10px;  */cursor: pointer; border: none; z-index: 0; }
			span { margin-left: 30px; }
			&:after { content: ''; width: 15px; height: 15px; position: absolute; top: 3px; left: 10px; border: 4px solid; opacity: 0; transition: opacity .4s, transform .4s, background .4s; z-index: 0;
		    }
			&:hover:after { opacity: .5; }
		}
	  	input[type=checkbox] { visibility: hidden;
		    &:checked + label:after {
		      opacity: 1; transform: scale(.4); 
		    }   
	  	} 
	}
	.btn { margin-right: 10px; margin-bottom: 60px; }
	.form-steps { margin: 30px 0 60px; text-align: center; }
	.next-step { cursor: pointer; position: relative; 
		span:first-of-type() { font-family: $header-font-family; font-size: 32px; margin-right: 4px; width: 15px; display: inline-block; font-weight: bold; }
		span:nth-of-type(2) { margin-left: 2px; font-family: $header-font-family; font-size: 24px; }
		div { position: absolute; display: inline-block; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; top: 50%; }
		.next { left: 50%; margin-left: 35px; }
		.prev { right: 50%; margin-right: 35px; }
	}
	.message-error { 
		> *:not(label) { border: 1px solid #f10a4a !important; }
		label { color: #f10a4a !important; }
	}
}