@charset "utf-8";

/* =================================================================
   BASE STYLES & UTILITIES
   ================================================================= */

.underline {
	border-bottom: 1px dotted #6689b4;
	padding-left: 5px;
}

/* =================================================================
   ARROW NAVIGATION
   ================================================================= */

.f_arrow_next_temp,
.f_arrow_next_temp2 {
	position: absolute;
	width: 9px;
	height: 16px;
	right: -32px;
	z-index: 20;
	background: url(../images/f_arrow_next.png) no-repeat bottom;
}

.f_arrow_next_temp {
	top: 21px;
}

.f_arrow_next_temp2 {
	top: 75px;
}

	.f_arrow_next_temp:hover,
	.f_arrow_next_temp2:hover {
		background-image: url(../images/f_arrow_next_hover.png);
	}

.f_arrow_back_temp,
.f_arrow_back_temp2 {
	position: absolute;
	width: 9px;
	height: 16px;
	left: -33px;
	z-index: 20;
	background: url(../images/f_arrow_back.png) no-repeat bottom;
}

.f_arrow_back_temp {
	top: 21px;
}

.f_arrow_back_temp2 {
	top: 75px;
}

	.f_arrow_back_temp:hover,
	.f_arrow_back_temp2:hover {
		background-image: url(../images/f_arrow_back_hover.png);
	}

.f_arrow_next_step {
	position: relative;
	width: 9px;
	height: 16px;
	top: 3px;
	z-index: 20;
	display: inline-block;
	background-image: url(../images/f_arrow_next.png);
	margin-left: 10px;
}

/* Calendar arrows */
.f_arrow_back {
	position: absolute;
	width: 9px;
	height: 16px;
	left: 27px;
	top: 53px;
	background: url(../images/f_arrow_back.png) no-repeat bottom;
}

	.f_arrow_back:hover {
		background-image: url(../images/f_arrow_back_hover.png);
	}

.f_arrow_next {
	position: absolute;
	width: 9px;
	height: 16px;
	left: 263px;
	top: 53px;
	background: url(../images/f_arrow_next.png) no-repeat bottom;
}

	.f_arrow_next:hover {
		background-image: url(../images/f_arrow_next_hover.png);
	}

/* =================================================================
   TYPOGRAPHY
   ================================================================= */

.f_H2 {
	text-align: left;
	font-family: 'PT Sans Narrow', verdana;
	color: #666666;
	font-size: 19px;
	padding: 20px 0;
	line-height: 18px;
}

.f_H3 {
	text-align: left;
	font-family: 'PT Sans Narrow', verdana;
	color: #666666;
	margin-left: 26px;
	padding: 20px 0;
}

/* =================================================================
   FORM CONTAINERS
   ================================================================= */

.redi_f_box {
	background-color: #f3f3f3;
	border-radius: 10px;
	margin: 10px auto;
	height: auto;
	box-shadow: 3px 3px 3px 3px rgb(229, 229, 229);
	line-height: 15px;
	position: relative;
	padding-bottom: 20px;
	min-width: 290px;
	max-width: 460px;
	color: rgb(142, 142, 142);
	cursor: default;
}

	.redi_f_box img {
		box-shadow: none;
		border-radius: 0;
		margin-bottom: 3px;
		padding: 0;
	}

	.redi_f_box td,
	.redi_f_box table {
		border: none;
		padding: 0;
		margin: 0;
	}

#f_tab_box table {
	border: 0;
}

/* Close icon */
.f_close_icon {
	position: absolute;
	left: 430px;
	top: 12px;
	background: url(../images/f_cancel_form_hover.png) no-repeat bottom;
	height: 66px;
}

	.f_close_icon:hover {
		color: #666666;
		background-image: url(../images/f_cancel_form.png);
	}

.f_close_icon_text {
	text-align: left;
	font-family: 'PT Sans Narrow', verdana;
	color: #666666;
	padding-bottom: 20px;
}

.f_close_icon2 {
	position: absolute;
	width: 50px;
	left: 257px;
	top: 6px;
}

/* =================================================================
   STEP HEADERS
   ================================================================= */

.f_step_box {
	margin: 0 auto;
	height: 50px;
	position: relative;
	z-index: 10;
}

.f_active_step1,
.f_active_step2 {
	background-color: #ffffff;
	height: 65px;
	width: 100%;
	font-family: 'PT Sans Narrow', verdana;
	font-weight: 700;
	color: #6689b4;
	text-align: center;
	padding-bottom: 10px;
	top: -1px;
	border-top: 3px solid #6689b4;
	z-index: 10;
	float: left;
	display: block;
}

.f_non_active_step1 {
	height: 50px;
	width: 50%;
	font-family: 'PT Sans Narrow', verdana;
	color: #666666;
	text-align: center;
	padding-bottom: 10px;
	position: absolute;
	left: 0;
	top: 2px;
}

.f_non_active_step2 {
	height: 50px;
	width: 100%;
	font-family: 'PT Sans Narrow', verdana;
	color: #666666;
	text-align: center;
	padding-top: 3px;
}

/* =================================================================
   FORM SUBBOXES
   ================================================================= */

.f_subbox_title {
	background-color: #f3f3f3;
	margin: 0 auto;
	border-radius: 7px 7px 0 0;
	border: 1px solid #cccccc;
	text-align: center;
	max-width: 400px;
}

	.f_subbox_title img {
		display: inline;
	}

	.f_subbox_title table tr td {
		padding-left: 5px;
		padding-top: 3px !important;
		border: none;
		text-align: left;
	}

.f_subbox_data,
.f_subbox_data2,
.f_subbox_data3 {
	margin: 0 auto;
	border-radius: 0 0 7px 7px;
	border: 1px solid #cccccc;
	border-top: none;
	position: relative;
	max-width: 400px;
}

.f_subbox_data3 {
	padding: 3px;
}

	.f_subbox_data table,
	.f_subbox_data2 table,
	.f_subbox_data3 table {
		border: none;
	}

.f_subbox_data table {
	border-collapse: separate;
	border-spacing: 6px;
}

/* =================================================================
   PERSON SELECTION
   ================================================================= */

.f_person_data {
	font-family: 'PT Sans Narrow', verdana;
	padding: 5px 0;
	vertical-align: top;
	text-align: center;
	line-height: 35px;
	border-collapse: separate;
	margin: 0;
	max-width: 400px;
}

	.f_person_data td {
		background-color: #f3f3f3;
		font-family: 'PT Sans Narrow', verdana;
		padding: 5px 0;
		vertical-align: top;
		text-align: center;
		border: 0;
		line-height: 35px;
		font-size: 16px;
	}

		.f_person_data td:hover {
			background-color: #6689b4 !important;
			color: #FFFFFF;
		}

		.f_person_data td.select {
			background-color: #71c18d !important;
			color: #FFFFFF;
		}

		.f_person_data td.close {
			background-color: #FFFFFF;
			color: #ececec;
		}

/* =================================================================
   CALENDAR STYLES
   ================================================================= */

#f_calender_box {
	background-color: #ffffff;
	border-radius: 10px;
	margin: 0 auto;
	height: auto;
	width: 300px;
	box-shadow: 3px 3px 3px 3px rgb(229, 229, 229);
	line-height: 15px;
	position: relative;
}

.f_calender caption {
	font-family: 'PT Sans Narrow', verdana;
	font-weight: 700;
	color: #6689b4;
	text-align: center;
	padding-bottom: 10px;
}

.f_calender th {
	padding: 15px 12px;
	background-color: #FFFFFF;
	color: #6689b4;
	font-family: 'PT Sans Narrow', verdana;
}

.f_calender td {
	background-color: #e5e5e5;
	font-family: 'PT Sans Narrow', verdana;
	padding: 5px 0;
	vertical-align: top;
	text-align: center;
}

	.f_calender td.weekendcal {
		font-family: 'PT Sans Narrow', verdana;
		font-size: 16px;
		line-height: 15px;
		text-align: center;
		color: #fa9090;
	}

	.f_calender td.previous,
	.f_calender td.next {
		background-color: #f3f3f3;
		color: #C6C6C6;
	}

	.f_calender td.today {
		background-color: #a9a9a9;
		color: #FFFFFF;
	}

	.f_calender td:hover {
		background-color: #6689b4;
		color: #FFFFFF;
	}

	.f_calender td.select {
		background-color: #71c18d;
		color: #FFFFFF;
	}

	.f_calender td.close {
		background: #FFFFFF url(../images/f_closed_date.png) no-repeat center;
	}

	.f_calender td.full {
		background: #FFFFFF url(../images/f_reserve.png) no-repeat center;
	}

/* Calendar data grid */
.f_calender_data {
	font-family: 'PT Sans Narrow', verdana;
	text-align: center;
	line-height: 20px;
	border-collapse: separate;
	border-spacing: 6px;
}

	.f_calender_data td {
		background-color: #f3f3f3;
		font-family: 'PT Sans Narrow', verdana;
		padding: 5px 0;
		vertical-align: top;
		text-align: center;
		border-spacing: 6px;
		font-size: 16px;
		line-height: 20px;
	}

		.f_calender_data td:hover {
			background-color: #6689b4 !important;
			color: #FFFFFF;
		}

		.f_calender_data td.select {
			background-color: #71c18d !important;
			color: #FFFFFF;
		}

		.f_calender_data td.close {
			background-color: #FFFFFF;
			color: #a9a9a9;
		}

tr#dates_row td {
	padding: 0;
}

._720kb-datepicker-calendar-header:nth-child(odd) {
	background: #6689b4;
}

#ui-datepicker-div {
	z-index: 20 !important;
}

/* =================================================================
   TIME SELECTION
   ================================================================= */

.f_time_data {
	font-family: 'PT Sans Narrow', verdana;
	vertical-align: top;
	text-align: center;
	line-height: 28px;
	margin: 0;
	width: 100%;
}

.time_item {
	background-color: #f3f3f3;
	font-family: 'PT Sans Narrow', verdana;
	vertical-align: top;
	text-align: center;
	font-size: 16px;
}

	.time_item:hover {
		background-color: #6689b4 !important;
		color: #FFFFFF;
	}

	.time_item.select {
		background-color: #71c18d !important;
		color: #FFFFFF;
	}

	.time_item.unavailable {
		color: #ccc;
	}

		.time_item.unavailable.select {
			background-color: #a5a5a5 !important;
		}

.redi-restaurant-time-button {
	padding: 2px !important;
	font-size: 18px !important;
	cursor: pointer;
	width: 25%;
}

/* =================================================================
   TEXT & LEGEND
   ================================================================= */

.legend {
	font-family: 'PT Sans Narrow', verdana;
	font-size: 12px;
	line-height: 5px;
	text-align: left;
}

.f_text_box,
.f_text_time {
	font-family: 'PT Sans Narrow', verdana;
	font-size: 16px;
	line-height: 25px;
	text-align: left;
	width: 350px;
	margin: 0 auto;
	padding: 0;
}

.f_text_selection_step2 {
	background-color: #f3f3f3;
	padding: 10px 0;
	max-width: 400px;
	margin: 0 auto;
	min-width: 290px;
}

	.f_text_selection_step2 th,
	.f_text_selection_step2 td {
		font-family: 'PT Sans Narrow', verdana;
		font-size: 16px;
		line-height: 25px;
		text-align: left;
	}

	.f_text_selection_step2 table {
		background: transparent;
		text-align: left;
		margin-left: 35px;
	}

/* =================================================================
   DROPDOWNS
   ================================================================= */

.f_select {
	width: 250px;
	margin: 0 auto;
	font-family: 'PT Sans Narrow', verdana;
}

div.selectBox {
	position: relative;
	display: inline-block;
	cursor: default;
	text-align: left;
	line-height: 30px;
	clear: both;
}

span.selected {
	width: 150px;
	text-indent: 20px;
	border: 1px solid #ccc;
	border-right: none;
	border-radius: 3px 0 0 3px;
	background: #ffffff;
	overflow: hidden;
}

span.selectArrow {
	width: 30px;
	border: 1px solid #6689b4;
	border-radius: 0 3px 3px 0;
	text-align: center;
	font-size: 20px;
	color: #fff;
	background: #6689b4 url(../images/f_arrow_down_white.png) no-repeat center;
}

	span.selectArrow:hover {
		background-image: url(../images/f_arrow_down_hover.png);
	}

span.selectArrow,
span.selected {
	position: relative;
	float: left;
	height: 30px;
	z-index: 1;
}

div.selectOptions {
	position: absolute;
	top: 28px;
	left: 0;
	border: 1px solid #ccc;
	border-radius: 0 0 3px 3px;
	overflow: hidden;
	background: #ffffff;
	padding: 2px;
	display: none;
	color: black;
}

span.selectOption {
	font-family: 'PT Sans Narrow', verdana;
	display: block;
	line-height: 20px;
	padding: 1px;
}

	span.selectOption:hover {
		color: #ffffff;
		background: #6689b4;
	}

span.selectOption_category {
	color: #6689b4;
	display: block;
	width: 80%;
	line-height: 20px;
	padding: 10px;
}

span.selectOption_fully {
	color: #cccccc;
	display: block;
	width: 80%;
	line-height: 20px;
	padding: 5px 10%;
}

.more_persons .selected {
	width: auto;
	border: none;
}

.more_persons .selectOptions {
	text-align: right;
	top: 32px;
	left: -20px;
	z-index: 10;
	max-height: 300px;
	display: block;
	overflow-y: auto;
	width: 50px;
}

/* =================================================================
   FORM INPUTS
   ================================================================= */

.f_select2 {
	width: 100%;
	margin: 0 auto;
	font-family: 'PT Sans Narrow', verdana;
	text-align: left;
	max-width: 400px;
	min-width: 290px;
	height: 30px;
}

	.f_select2 label {
		display: inline;
		font-size: 18px;
		font-family: "PT Sans Narrow", verdana;
		text-transform: none;
		font-weight: normal;
		color: #888 !important;
	}

div.f_input_box {
	clear: both;
	color: #888;
	width: 100%;
	min-width: 290px;
	max-width: 400px;
	position: relative;
	margin-top: 10px;
}

/* Input field icons */
span.selectArrow2,
span.selectArrow3,
span.selectArrow4,
span.selectArrow5,
span.selectArrow6,
span.selectArrow7 {
	position: absolute;
	float: left;
	height: 31px;
	left: 0;
	z-index: 10;
	width: 50px;
	border: 1px solid #ccc;
	border-radius: 3px 0 0 3px;
	text-align: center;
	background-color: #f3f3f3;
	background-repeat: no-repeat;
	background-position: center;
}

span.selectArrow2 {
	background-image: url(../images/f_name.png);
}

	span.selectArrow2:hover {
		background-image: url(../images/f_name_hover.png);
	}

span.selectArrow3 {
	background-image: url(../images/f_phone.png);
}

	span.selectArrow3:hover {
		background-image: url(../images/f_phone_hover.png);
	}

span.selectArrow4 {
	background-image: url(../images/f_mail.png);
}

	span.selectArrow4:hover {
		background-image: url(../images/f_mail_hover.png);
	}

span.selectArrow5 {
	background-image: url(../images/f_comment.png);
	background-position: center 10px;
}

	span.selectArrow5:hover {
		background-image: url(../images/f_comment_hover.png);
	}

span.selectArrow6 {
	background-image: url(../images/f_custom_field.png);
}

	span.selectArrow6:hover {
		background-image: url(../images/f_custom_field_hover.png);
	}

span.selectArrow7 {
	background-image: url(../images/f_check.png);
}

	span.selectArrow7:hover {
		background-image: url(../images/f_check_hover.png);
	}

div.selectBox7 {
	position: relative;
	display: inline-block;
	cursor: default;
	text-align: left;
	line-height: 30px;
	clear: both;
	color: #888;
}

.selected2 {
	position: relative;
	float: left;
	height: 28px;
	z-index: 10;
	width: 300px;
	text-indent: 20px;
	border: 1px solid #ccc;
	border-left: none;
	border-radius: 0 3px 3px 0;
	background: #ffffff;
	overflow: hidden;
}

/* Text inputs */
.text_field {
	background: #ffffff;
	border-radius: 0 3px 3px 0;
	border: 1px solid #ccc;
	border-left: none;
	color: rgb(142, 142, 142);
	float: left;
	font-family: "PT Sans Narrow", verdana;
	font-size: 16px;
	height: 31px;
	overflow: hidden;
	padding-left: 55px !important;
	width: 69%;
	box-shadow: none !important;
	margin: auto 0;
	position: absolute;
	left: 0;
	min-width: 290px;
	max-width: 400px;
	z-index: 0;
	font-size: 18px;
	padding: 0;
}

	.text_field:focus {
		border-color: #e3ae30;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(220, 164, 30, 0.7);
		outline: none;
	}

	.text_field.form_validation_error {
		border-color: #fa9090;
		border-radius: 3px;
	}

/* Textarea */
textarea {
	resize: none;
}

.textarea_field {
	width: 300px;
	font-family: 'PT Sans Narrow', verdana;
	font-size: 16px;
	padding-left: 55px !important;
	background: #ffffff;
	overflow: hidden;
	position: relative;
	float: left;
	height: 150px;
	padding: 0;
	border-radius: 0 3px 3px 0;
	color: rgb(142, 142, 142);
	border: 1px solid #bbb;
}

	.textarea_field:focus {
		border-color: #e3ae30;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(220, 164, 30, 0.7);
		outline: none;
	}

.checkbox_field {
	line-height: 32px;
	color: rgb(142, 142, 142);
	font-size: 16px;
	font-family: "PT Sans Narrow", verdana;
	margin-left: 55px;
}

.required {
	border-top: 2px solid #fa9999 !important;
}

.ng-dirty.ng-invalid {
	border-color: #fa9090;
}

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

.f_btn {
	background-color: #6689b4;
	height: 30px;
	font-family: 'PT Sans Narrow', verdana;
	font-size: 16px;
	color: #FFF;
	text-align: center;
	padding-top: 17px;
	font-weight: 700;
	box-sizing: initial;
	width: 40%;
	float: right;
}

	.f_btn:hover {
		color: #a5e3ff;
	}

.nav_buttons {
	max-width: 400px;
	margin: 0 auto;
}

.f_btn_step {
	background-color: #6689b4;
	height: 30px;
	font-family: 'PT Sans Narrow', verdana;
	font-size: 16px;
	color: #FFF;
	text-align: center;
	padding: 17px 0 30px 0;
	margin-right: 0;
	font-weight: 700;
	line-height: 13px;
	float: right;
	width: 40%;
	border: 0;
}

	.f_btn_step:hover {
		color: #a5e3ff;
	}

	.f_btn_step.back {
		float: left;
		width: 30%;
	}

	.next_button[disabled="disabled"],
	.f_btn_step[disabled="disabled"],
	.redi-restaurant-time-button[disabled="disabled"],
	.redi-restaurant-button[disabled="disabled"] {
		opacity: 0.4;
		filter: alpha(opacity=40); /* For IE8 and earlier */
	}

#buttons_first_step,
#redi-booking-buttons {
	height: 40px;
	max-width: 400px;
	margin: 0 auto;
}

	#redi-booking-buttons table {
		width: 100%;
		text-align: center;
	}

		#redi-booking-buttons table tr td {
			margin: 0;
			padding: 0;
		}

/* =================================================================
   VALIDATION & ERRORS
   ================================================================= */

.validation_error {
	font-family: 'PT Sans Narrow', verdana;
	font-size: 12px;
	line-height: 5px;
	text-align: left;
	color: #fa9090;
	display: inline-block;
	max-width: 400px;
	margin: 0 auto;
}

.f_error_box {
	text-align: left;
	margin: 0 auto;
	background-color: #F3F3F3;
	height: 50px;
	width: 410px;
	border: 1px solid #FA9999;
	font-family: 'PT Sans Narrow', verdana;
	font-size: 16px;
}

.f_error_field {
	margin: 0 auto;
	height: 28px;
	width: 20px;
	position: absolute;
	background: url(../images/f_error.png) no-repeat center;
	top: 0;
	z-index: 30;
	right: 0;
}

.redi-booking-alert-error {
	color: #fa9090;
	text-align: center;
	font-size: .8em;
	padding: 5px;
}

#step1errors,
#step2errors {
	padding: 5px;
}

#step1errors {
	line-height: 1.3em;
}

#step1load img {
	padding: 7px !important;
}

.img-error {
	border: none;
	padding: 0;
	box-shadow: none;
	float: left;
}

#cancel-errors-div {
	margin: 5px 50px;
}

#cancel-errors {
	text-align: left;
	margin: 2px 25px;
}

/* =================================================================
   STATUS ICONS
   ================================================================= */

.f_check_field {
	background: url("../images/f_check_field.png") no-repeat center;
	height: 20px;
	left: 409px;
	margin: 0 auto;
	position: absolute;
	top: 5px;
	width: 20px;
}

.f_check {
	background: url(../images/f_check_field.png) no-repeat center;
	position: relative;
	width: 9px;
	height: 16px;
	top: 3px;
	z-index: 20;
	display: inline-block;
	margin-left: 10px;
}

#f_check_step2 {
	left: 295px;
}

/* =================================================================
   STEP 3 - FINAL CONFIRMATION
   ================================================================= */

#f_tab_box,
#f_tab_box_step3 {
	background-color: #ffffff;
	margin: 0 auto;
	box-shadow: 3px 3px 3px 3px rgb(229, 229, 229);
	line-height: 15px;
	position: relative;
	border-top: 3px solid #6689b4;
	text-align: center;
}

#f_tab_box_step3 {
	height: 300px;
	width: 450px;
}

.f_final_title {
	font-family: 'PT Sans Narrow', verdana;
	font-size: 20px;
	font-weight: 700;
	color: #6689b4;
	text-align: center;
	padding-bottom: 10px;
}

.f_final_text {
	font-family: 'PT Sans Narrow', verdana;
	font-size: 20px;
	font-weight: 100;
	line-height: 25px;
	color: #666666;
	text-align: center;
	padding: 10px;
}

.reservation-number {
	color: darkgreen;
	font-weight: 800;
}

/* =================================================================
   STORE & EMPLOYEE SELECTION
   ================================================================= */

.f_store_data .stores {
	padding: 15px;
	margin: 5px;
	border: 2px solid #ddd;
	border-radius: 8px;
	cursor: pointer;
	background: white;
	transition: all 0.3s ease;
	min-height: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

	.f_store_data .stores:hover {
		border-color: #6689b4;
		background: #f5f8ff;
	}

	.f_store_data .stores.select {
		border-color: #6689b4;
		background: #6689b4;
		color: white;
	}

.store-name {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 5px;
}

.store-address {
	font-size: 12px;
	opacity: 0.8;
}

.f_employee_data .employees {
	padding: 15px;
	margin: 5px;
	border: 2px solid #ddd;
	border-radius: 8px;
	cursor: pointer;
	background: white;
	transition: all 0.3s ease;
	min-height: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

	.f_employee_data .employees:hover {
		border-color: #6689b4;
		background: #f5f8ff;
	}

	.f_employee_data .employees.select {
		border-color: #6689b4;
		background: #6689b4;
		color: white;
	}

/*.employee-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #6689b4;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 8px;
}*/

.employees.select .employee-avatar {
	background: white;
	color: #6689b4;
}

.employee-name {
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 3px;
}

.employee-role {
	font-size: 12px;
	opacity: 0.8;
}

/* =================================================================
   MISCELLANEOUS
   ================================================================= */

#step2busy {
	line-height: 100%;
	padding: 5px;
}

	#step2busy span {
		margin: 1px;
		line-height: 1.3em;
	}

		#step2busy span img {
			width: 20px;
			height: 22px;
			vertical-align: middle;
		}

#large_groups_message {
	padding: 5px;
	line-height: 1.3em;
}

.date img {
	padding: 0;
	display: inline;
}

#step2 {
	min-width: 290px;
}

#cancel-booking {
	position: absolute;
	left: -22px;
	top: -32px;
}

.persons,
.more_persons,
.message_for_large_group,
.more_date_select,
.date {
	max-width: 12px;
}

	.date.unavailable {
		color: #ccc;
	}

/* =================================================================
   MODERN BOOKING INTERFACE
   ================================================================= */

.booking-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 24px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	background: #f8fafc;
	min-height: 100vh;
}

/* Progress Steps */
.progress-section {
	background: white;
	border-radius: 16px;
	padding: 32px;
	margin-bottom: 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	display: none;
}

.progress-header {
	text-align: center;
	margin-bottom: 32px;
}

	.progress-header h2 {
		color: #1e293b;
		margin-bottom: 8px;
		font-size: 28px;
		font-weight: 600;
	}

	.progress-header p {
		color: #64748b;
		font-size: 16px;
	}

.progress-steps {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

	.progress-steps::before {
		content: '';
		position: absolute;
		top: 20px;
		left: 40px;
		right: 40px;
		height: 2px;
		background: #e2e8f0;
		z-index: 1;
	}

.step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	z-index: 2;
	flex: 1;
}

.step-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e2e8f0;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	margin-bottom: 8px;
	transition: all 0.3s ease;
}

.step.active .step-circle {
	background: #3b82f6;
	color: white;
}

.step.completed .step-circle {
	background: #10b981;
	color: white;
}

.step span {
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
	max-width: 80px;
}

.step.active span {
	color: #3b82f6;
	font-weight: 600;
}

/* Section Cards */
.section-card {
	background: white;
	border-radius: 16px;
	padding: 32px;
	margin-bottom: 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-header {
	text-align: center;
	margin-bottom: 32px;
}

	.section-header h3 {
		color: #1e293b;
		margin-bottom: 8px;
		font-size: 24px;
		font-weight: 600;
	}

	.section-header p {
		color: #64748b;
		font-size: 16px;
	}

/* Selection Grid */
.selection-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.selection-item {
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 16px;
}

	.selection-item:hover {
		border-color: #3b82f6;
		background: #eff6ff;
		transform: translateY(-2px);
	}

	.selection-item.selected {
		border-color: #3b82f6;
		background: #3b82f6;
		color: white;
	}

.item-icon {
	font-size: 32px;
	min-width: 48px;
	text-align: center;
}

.booking-container .employee-avatar {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: #3b82f6;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 20px;
	min-width: 90px;
	overflow: hidden;
}

.employee-avatar span {
	display: block;
}

.item-content h4 {
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 18px;
}

.item-content p {
	color: #64748b;
	font-size: 14px;
}

.selection-item.selected .item-content p {
	color: rgba(255, 255, 255, 0.8);
}

/* Summary Cards */
.summary-card {
	background: #f0f9ff;
	border: 1px solid #0ea5e9;
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 24px;
}

.summary-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.summary-label {
	font-size: 12px;
	color: #0ea5e9;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.change-btn {
	background: none;
	border: none;
	color: #0ea5e9;
	font-size: 14px;
	cursor: pointer;
	font-weight: 500;
	margin-left: auto;
}

.summary-content {
	color: #1e293b;
	font-size: 16px;
}

/* Service List */
.service-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.service-item {
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

	.service-item:hover {
		border-color: #3b82f6;
		background: #eff6ff;
	}

	.service-item.selected {
		border-color: #3b82f6;
		background: #eff6ff;
	}

.service-info {
	flex: 1;
}

	.service-info h4 {
		margin-bottom: 4px;
		font-weight: 600;
		color: #1e293b;
	}

.service-price {
	color: #059669;
	font-weight: 600;
	font-size: 16px;
}

.service-checkbox {
	color: #3b82f6;
	margin-left: 16px;
}

/* Date Grid */
.date-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 12px;
}

.date-item {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px 8px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	min-height: 90px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

	.date-item:hover {
		border-color: #3b82f6;
		background: #eff6ff;
		transform: translateY(-2px);
	}

	.date-item.selected {
		border-color: #3b82f6;
		background: #3b82f6;
		color: white;
	}

	.date-item.unavailable {
		background: #f1f5f9;
		color: #94a3b8;
		cursor: not-allowed;
	}

		.date-item.unavailable:hover {
			transform: none;
			border-color: #e2e8f0;
			background: #f1f5f9;
		}

.date-month {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.date-day {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 2px;
}

.date-weekday {
	font-size: 11px;
	opacity: 0.8;
}

.more-dates {
	background: #f8fafc;
	border-style: dashed;
}

.date-more {
	font-size: 24px;
	font-weight: 700;
	color: #64748b;
}

.date-text {
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
}

/* Time Grid */
.time-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}

.time-item {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px 12px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 500;
	font-size: 16px;
}

	.time-item:hover {
		border-color: #3b82f6;
		background: #eff6ff;
		transform: translateY(-2px);
	}

	.time-item.selected {
		border-color: #3b82f6;
		background: #3b82f6;
		color: white;
	}

	.time-item.unavailable {
		background: #f1f5f9;
		color: #94a3b8;
		cursor: not-allowed;
	}

		.time-item.unavailable:hover {
			transform: none;
			border-color: #e2e8f0;
			background: #f1f5f9;
		}

/* Alerts */
.alert {
	padding: 16px 20px;
	border-radius: 12px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 500;
}

.alert-error {
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca;
}

.alert-info {
	background: #eff6ff;
	color: #2563eb;
	border: 1px solid #bfdbfe;
}

/* Navigation */
.navigation-section {
	text-align: center;
	padding-top: 32px;
}

.btn {
	padding: 16px 32px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-primary {
	background: #3b82f6;
	color: white;
}

	.btn-primary:hover:not(:disabled) {
		background: #2563eb;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
	}

.btn-large {
	padding: 20px 40px;
	font-size: 18px;
}

.btn:disabled {
	background: #e2e8f0;
	color: #94a3b8;
	cursor: not-allowed;
}

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

@media (max-width: 768px) {
	.booking-container {
		padding: 16px;
	}

	.progress-steps {
		flex-wrap: wrap;
		gap: 16px;
	}

	.step {
		flex: 0 0 calc(50% - 8px);
		margin-bottom: 16px;
	}

	.selection-grid {
		grid-template-columns: 1fr;
	}

	.date-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.time-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


.store-info .summary-details {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.store-name {
	font-weight: 700;
	font-size: 18px;
}

.summary-item .summary-details.full-width {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.summary-item .summary-label strong {
	color: #1e293b;
}