/* --------------------------------------------- */
/* ~~~~~~~~~~~~~~~ CSS Document ~~~~~~~~~~~~~~~~*/
/* ------------------------------------------- */
/* ~~~~~~~~~~~~~ Coded by  Vepster ~~~~~~~~~~ */
/* ----------------------------------------- */
/* ~~~~~~~~~~~~~~~~~~HARKU ~~~~~~~~~~~~~~~~~*/
/* --------------------------------------- */
:root {
	/* primary colors */
	--vp_green: #43B565;
	--vp_blue: #2F97BA;
	--vp_orange: #F48636;
	--vp_light_orange: #FBC992;
	--vp_light_bg: #FAFCFD;
	--vp_neutral: #FEFEFD;
	--vp_font_dark: #1d2530;
	--vp_link_blue: #48a8c9;
	--vp_font_gray: #525252;
	--vp_progress: #efefef;
	--vp_background: #F6F8F9;
	--vp_ul_gray: #cbcbcb;
	--vp-btn-green: #90d795;
}
body, html {
	background-color: var(--vp_background);
}
#booking {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#booking .title, #booking #progress, #booking #progress-ball,
#booking #content {
	width: 840px;
}
#booking .title {
	margin-top: 26px;
}
#booking .title h1 {
	font-size: 27px;
}
#booking .title span {
	font-weight: 500;
	color: var(--vp_font_gray);
	font-size: 14px;
}
#progress div:first-child {
	height: 8px;
	border-radius: 4px;
	background-color: var(--vp_progress);
}
#progress div:last-child {
	position: relative;
	top: -8px;
	width: 25%;
	height: 8px;
	border-radius: 4px;
	background-color: var(--vp_blue);
}
#progress-ball .ball div:first-child {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 36px;
	width: 36px;
	border-radius: 18px;
	font-size: 16px;
	font-weight: 500;
	background-color: var(--vp_progress);
}
#progress-ball .ball-blue div:first-child {
	background-color: var(--vp_blue);
	color: var(--vp_neutral);
}
#progress-ball .ball-green div:first-child {
	background-color: var(--vp_green);
	color: var(--vp_neutral);
}
#progress-ball .ball-green svg {
	width: 16px;
	height: 16px;
}
#progress-ball .ball div:last-child {
	margin-top: 8px;
	font-size: 14px;
	color: var(--vp_font_gray);
}
#content {
	margin-top: 36px;
	box-sizing: border-box;
	padding: 24px;
	background-color: var(--vp_neutral);
	border: 1px solid rgb(0 0 0 / 11%);
	border-radius: 12px;
}
#content h2 {
	margin-top: 0px;
	margin-bottom: 8px;
	font-size: 20px;
}
#content .content-info {
	font-weight: 500;
	color: var(--vp_font_gray);
	font-size: 14px;
}
#content #button, #content #button-back {
	padding: 14px;
	font-weight: 500;
	background-color: var(--vp_background);
	border: 1px solid rgb(0 0 0 / 11%);
	border-radius: 12px;
	text-align: center;
}
#content #button:hover, #content #button-next:hover,
#content #button-next-2:hover, #content #button-back:hover {
	transition: .3s;
	cursor: pointer;
	background-color: var(--vp_orange);
	color: var(--vp_neutral);
}
#content #button-next, #content #button-next-2 {
	padding: 14px;
	font-weight: 500;
	background-color: var(--vp_light_orange);
	border: 1px solid rgb(0 0 0 / 11%);
	border-radius: 12px;
	text-align: center;
}
#content .booking-btns a {
	width: 100%;
}
#content .booking-btns {
	gap: 12px;
}



#client-pick {
	margin: 24px 0px 44px 0px;
}
/* vepster date module */
#vp-date-months {
	z-index: -999;
	display: none;
	font-size: 1px;
	color: #fff;
	position: absolute;
	top: -999px;
}
.vp-dates {
	max-width: 1300px;
	caret-color: transparent;
	border: 1px solid rgb(0 0 0 / 11%);
	border-radius: 12px;
}
.vp-dates .vp-date-days {
	display: flex;
	font-size: 12px;
	width: 100%;
	padding-left: 8px;
	padding-right: 8px;
	box-sizing: border-box;
	color: #d5d5d5;
}
.vp-date-dates {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding-left: 7px;
	padding-right: 6px;
	font-size: 12px;
	margin: 22px 0px;
}
.vp-date-days div {
	width: 100%;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	padding: 8px;
}
.vp-date-dates div {
	width: 90px;
	text-align: center;
	padding: 10px;
	font-size: 17px;
	height: 30px;
	border-radius: 12px;
	border-radius: 12px;
}
.vp-date-dates div:not(.vp-date-blocked):hover {
	transition: .3s;
	cursor: pointer;
	background-color: var(--vp_light_orange);
}

.vp-date-dates section {
	display: flex;
}
.vp-date-dates .v_CalDate {
	font-weight: 700;
}
.vp-date-dates section span {
	margin-bottom: 2px;
	height: 4px;
	width: 4px;
	border-radius: 2px;
	box-sizing: border-box;
	background-color: var(--vp_blue);
	margin-right: 4px;
}
.v-date-slots {
	margin-top: 4px;
}
.vp-date-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 68px;
	text-align: center;
}
.vp-date-prev-btn {  }
.vp-date-next-btn {  }
.vp-date-prev-btn, .vp-date-next-btn {
	height: 50px;
	width: 76px;
	border-radius: 12px;
	margin: 8px;
	border: 1px solid rgb(0 0 0 / 11%);
	display: flex;
	justify-content: center;
	align-items: center;
}
.vp-date-prev-btn:hover, .vp-date-next-btn:hover {
	transition: .3s;
	cursor: pointer;
	background-color: var(--vp_orange);
	color: var(--vp_neutral);
}
.vp-date-active:hover {
	cursor: default!important;
}
.vp-date-active {
	background-color: rgb(251 201 146 / 39%)!important;
}


.vp-date-blocked {
	font-weight: 700;
	color: #e38888!important;
}

.vp-date-prev, .vp-date-next {
	color: rgb(0 29 43 / 25%);
}
.vp-date-header-title {
	font-weight: 500;
}
#time, #field {
	margin-top: 30px;
}
#time, #time .time-slots {
	width: 100%;
}
#time .time-slots {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 12px;
}
#time .time-pick {
	width: 49%;
}
#time h3, #field h3 {
	font-size: 16px;
	display: flex;
	align-items: center;
}
#time h3 svg, #field h3 svg {
	width: 16px;
	height: 16px;
	margin-right: 8px;
}
#time .time-slots button {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--vp_background);
	border: 1px solid rgb(0 0 0 / 11%);
	font-weight: 700;
	border-radius: 12px;
	padding: 24px;
	width: 100%;
	transition: background 0.3s ease, color 0.3s ease;
}
#time .time-slots button:hover {
	cursor: pointer;
}
#time .time-slots button svg {
	width: 16px;
	height: 16px;
	margin-bottom: 8px;
}
#time .time-slots .active {
	background-color: var(--vp_blue);
	color: var(--vp_neutral);
}
#field {
	margin-bottom: 36px;
}
#field .field-pick div:not(:last-child) {
	margin-bottom: 12px;
}
#field .field-select {
	box-sizing: border-box;
	background-color: var(--vp_background);
	border: 1px solid rgb(0 0 0 / 11%);
	padding: 12px 24px;
	width: 100%;
	border-radius: 12px;
	transition: background 0.3s ease, color 0.3s ease;
}
#field .field-select .field-info h4 {
	margin: 8px 0px;
	font-size: 16px;
}
#field .field-select .field-info p {
	font-size: 14px;
	margin: 8px 0px;
	color: var(--vp_font_gray);
}
#field .field-select .field-info svg {
	color: var(--vp_font_gray);
	width: 14px;
	height: 14px;
	margin-right: 8px;
}
#field .field-select .field-selected {
	display: none;
	box-sizing: border-box;
	border-radius: 12px;
	background-color: var(--vp_green);
	color: var(--vp_neutral);
	font-size: 12px;
	padding: 4px 14px;
	height: fit-content;
	margin-top: 8px;
}
#field .field-select .field-selected svg {
	height: 12px;
	width: 12px;
	color: var(--vp_neutral);
	margin-right: 8px;
}
#field .field-select:hover {
	cursor: pointer;
}
#field .field-pick .field-active {
	background-color: rgb(47 151 186 / 26%);
	border: 1px solid var(--vp_blue);
}
#package {
	margin-top: 30px;
	display: flex;
	gap: 12px;
}
#package .pack-pick {
	box-sizing: border-box;
	background-color: var(--vp_background);
	border: 1px solid rgb(0 0 0 / 11%);
	border-radius: 12px;
	padding: 24px;
	width: 100%;
	transition: background 0.3s ease, color 0.3s ease;
}
#package .pack-pick .pack-icon svg {
	color: var(--vp_blue);
}
#package .pack-pick .pack-title h3 {
	font-size: 16px;
	margin: 8px 0px;
}
#package .pack-pick .pack-price {
	font-size: 24px;
	font-weight: 700;
	color: var(--vp_blue);
}
#package .pack-pick .pack-list {
	padding-left: 18px;
	font-size: 14px;
	color: var(--vp_font_gray);
}
#package .pack-pick .pack-list li::marker {
	color: var(--vp_ul_gray);
}
#package .pack-pick .pack-list li, #package .pack-pick .pack-include li {
	margin: 6px 0px;
}
#package .pack-pick .pack-include ul {
	list-style: none;
	padding: 0px;
	font-size: 14px;
	color: var(--vp_font_gray);
}
#package .pack-pick .pack-include li::before {
	 content: "✔";
	 color: var(--vp_green);
	 margin-right: 0.5em;
}
#package .pack-pick hr, #view-package hr {
	box-sizing: border-box;
	height: 1px;
	border: 1px solid #e3e3e3;
}
#package .pack-include h3 {
	margin: 8px 0px 4px 0px;
	font-size: 14px;
}
#package .pack-icon .pack-selected {
	display: none;
	box-sizing: border-box;
	border-radius: 12px;
	background-color: var(--vp_green);
	color: var(--vp_neutral);
	font-size: 12px;
	padding: 4px 14px;
	height: fit-content;
}
#package .pack-icon .pack-selected svg {
	margin-top: 3px;
	height: 12px;
	width: 12px;
	color: var(--vp_neutral);
	margin-right: 8px;
}
#package .pack-pick:hover {
	cursor: pointer;
}
#package .field-active {
	background-color: rgb(47 151 186 / 26%);
	border: 1px solid var(--vp_blue);
}
#extras {
	margin: 30px 0px;
}
#extras h3 {
	font-size: 14px;
	font-weight: 500;
}
#extras h3 svg {
	width: 14px;
	height: 14px;
	margin-right: 8px;
}
#extras .extra-pick {
	box-sizing: border-box;
	background-color: var(--vp_background);
	border: 1px solid rgb(0 0 0 / 11%);
	border-radius: 12px;
	padding: 12px 24px;
	width: 100%;
	transition: background 0.3s ease, color 0.3s ease;
}
#extras .extra-info h4 {
	margin-top: 0px;
	margin-bottom: 8px;
	font-weight: 700;
	font-size: 14px;
}
#extras .extra-info p {
	font-size: 14px;
	color: var(--vp_font_gray);
	margin: 6px 0px;
}
#extras .extra-item .circle {
	width: 14px;
	height: 14px;
	border-radius: 7px;
	background-color: var(--vp_neutral);
	border: 1px solid rgb(0 0 0 / 11%);
	margin-right: 8px;
	margin-top: 2px;
}
#extras .extra-pick .extra-item-price {
	font-weight: 700;
	font-size: 18px;
	color: var(--vp_blue);
	text-align: right;
}
#client-info {
	margin-top: 30px;
}
#client-info div label {
	font-size: 16px;
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	font-weight: 500;
}
#client-info div label svg {
	width: 16px;
	height: 16px;
	margin-right: 8px;
}
#client-info div input, #client-info div textarea {
	box-sizing: border-box;
	border-radius: 12px;
	border: 1px solid rgb(0 0 0 / 11%);
	background-color: var(--vp_background);
	font-size: 16px;
	padding: 12px 24px;
}
#client-info div textarea {
	height: 100px;
	resize: none;
	outline: none;
}
#client-info div input:focus, #client-info div textarea:focus {
	transition: .3s;
	border-color: var(--vp_blue);
}
#data-overview {
	margin-top: 30px;
}
#data-overview .view-time, #data-overview #view-package {
	box-sizing: border-box;
	background-color: var(--vp_background);
	border: 1px solid rgb(0 0 0 / 11%);
	border-radius: 12px;
	padding: 12px 24px;
	width: 100%;
}
#data-overview .view-time h3 {
	margin: 12px 0px;
	font-size: 16px;
	font-weight: 500;
}
#data-overview .view-data h4 {
	margin: 0px;
	font-size: 16px;
	font-weight: 500;
}
#data-overview .view-time p {
	margin: 8px 0px 16px 0px;
	font-size: 14px;
	color: var(--vp_font_gray);
}
#data-overview .view-icon svg, #view-package .view-order svg {
	margin-right: 12px;
	color: var(--vp_blue);
}
#view-package .view-order h3 {
	margin: 0px 0px 22px 0px;
	font-weight: 500;
	font-size: 16px;
}
#view-package .view-data p span, #data-overview .view-data p span {
	margin: 0px 6px;
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background-color: var(--vp_ul_gray);
}
#view-package .view-data p {
	margin: 4px 0px 16px 0px;
	font-size: 14px;
	color: var(--vp_font_gray);
}
#view-package .view-price {
	font-size: 16px;
	font-weight: 500;
}
#view-package .view-total div {
	font-size: 22px;
	font-weight: 500;
}
#view-package .view-total div:last-child {
	color: var(--vp_blue);
}

#view-package input {
	outline: none;
	border-radius: 12px;
	border: 1px solid rgb(0 0 0 / 11%);
	box-sizing: border-box;
	padding: 10px;
	text-align: right;
}

#package .pack-pick .pack-add-player,
#extras .extra-pick .add-extra-item {
	display: flex;
	height: 29px;
}
#extras .extra-pick .add-extra-item {
	margin-top: 6px;
}
#package .pack-pick .pack-add-player button,
#extras .extra-pick .add-extra-item button {
	padding: 4px 20px;
	color: var(--vp_font_dark);
	font-weight: 500;
	font-size: 18px;
	box-sizing: border-box;
}
#package .pack-pick .pack-add-player button:first-child,
#extras .extra-pick .add-extra-item button:first-child {
	display: flex;
	align-items: center;
	border-bottom-left-radius: 12px;
	border-top-left-radius: 12px;
	background-color: var(--vp_background);
	border-left: 1px solid rgb(0 0 0 / 11%);
	border-top: 1px solid rgb(0 0 0 / 11%);;
	border-bottom: 1px solid rgb(0 0 0 / 11%);
}
#package .pack-pick .pack-add-player button:last-child,
#extras .extra-pick .add-extra-item button:last-child {
	border-bottom-right-radius: 12px;
	border-top-right-radius: 12px;
	background-color: var(--vp_light_orange);
}
#package .pack-pick .pack-add-player button:hover,
#extras .extra-pick .add-extra-item button:hover {
	transition: background 0.3s ease, color 0.3s ease;
	cursor: pointer;
	color: var(--vp_neutral);
}
#package .pack-pick .pack-add-player button:first-child:hover,
#extras .extra-pick .add-extra-item button:first-child:hover {
	background-color: #f35151;
}
#package .pack-pick .pack-add-player button:last-child:hover,
#extras .extra-pick .add-extra-item button:last-child:hover {
	background-color: var(--vp_orange);
}
#extras .extra-pick:hover {
	cursor: pointer;
}
#extras .extra-active {
	background-color: rgb(47 151 186 / 26%);
	border: 1px solid var(--vp_blue);
}
#extras .extra-active-over {
	background-color: rgb(223 14 14 / 33%);
	border: 1px solid var(--vp_blue);
}
.extra-over {
    text-align: right;
    margin-bottom: 4px;
    font-size: 12px;
    margin-right: 10px;
    color: #c15957;
}

.toggle-container {
  display: flex;
  flex-direction: row-reverse;

}
.toggle {
  display: inline-flex;
  align-items: center;
  flex-direction: column-reverse;
  cursor: pointer;
  gap: 8px;
}
.toggle input {
  display: none;
}
.slider {
  position: relative;
  width: 44px;
  height: 22px;
  background: var(--vp_background);
  border: 1px solid rgb(0 0 0 / 11%);
  border-radius: 22px;
  transition: background 0.3s;
}
.slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 1px;
  top: 1px;
  background: var(--vp_background);
  border: 1px solid rgb(0 0 0 / 11%);
  border-radius: 50%;
  transition: transform 0.3s;
}
.toggle input:checked + .slider {
  background: var(--vp-btn-green);
}
.toggle input:checked + .slider::before {
  transform: translateX(22px);
}
.toggle-label {
  font-size: 14px;
  color: #333;
  user-select: none;
}
.accept-terms {
	text-align: center;
	font-size: 12px;
	margin-top: 16px;
}
#mob-nav {
	display: none;
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 52px;
}
#mob-nav a {
	width: 50%;
	background-color: #e1e1e1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#mob-nav #mob-back, #mob-nav #mob-home {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}
@media(max-width:900px){
	@font-face {
		font-family:"Segoe UI";
		src: url('Segoe UI.ttf') format('truetype');
	}
	#booking {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
	#booking .title, #booking #progress, #booking #progress-ball, #booking #content {
		width: 100%;
	}
}
@media(max-width:880px){
		#mob-nav {
		display: flex;
	}
	.harku-footer {
		margin-bottom: 52px;
	}
	#content h2 {
		text-align: center;
	}
	#content .content-info {
		display: flex;
		justify-content: center;
		text-align: center;
	}
	#content {
		padding: 24px 0px 24px 0px;
		border: none;
		background-color: unset;
	}
	#client-pick {
		background-color: var(--vp_neutral);
	}
	.vp-date-dates section {
		flex-wrap: wrap;
	}
	#client-pick .vp-date-dates {
		flex-wrap: wrap; 
    justify-content: space-between;
	}
	#client-pick .vp-date-dates div {
		flex: 0 0 calc((100% - 150px) / 7);
	}
}
@media(max-width:650px){
	#time .time-pick {
		width: 48%;
	}
	#package {
		flex-wrap: wrap;
	}
	#package .pack-pick {
		text-align: center;
	}
	#package .pack-pick .pack-add-player {
		justify-content: center;
	}
	#package .pack-pick .pack-add-player button {
		padding: 4px 40px;
	}
	#package .pack-pick .pack-list {
		display: flex;
		justify-content: center;
	}
	.pack-icon {
		display: block!important;
	}
	#package .pack-icon .pack-selected {
		justify-content: center;
	}
}