/* ============================
	SITE STYLESHEET
	THE HOLIDAY HOME - GOING FORWARD 2025 AND BEYOND ©
============================ */


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

/* STRUCTUUR */
.section--nav {
	background-color: rgba(255, 255, 255, 0.95);
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}

/* CENTRERING BINNEN CONTAINER-FLUID */
.nav--inner {
	margin: 0 auto;
	width: 100%;
}

/* LOGO */
.nav--brand img {
	height: 50px;
}

/* MENU STRUCTUUR */
.nav--menu {
	align-items: center;
	display: flex;
	gap: 2rem;
}

/* MENU LINKS */
.nav--menu--link {
	color: #000000;
	display: inline-block;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0;
	padding: 0.25rem 0 !important;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: var(--transition-default);
}

/* HOVER EFFECT – PRECIES ONDER TEKST */
.nav--menu--link::after {
	background-color: #00C3FF;
	bottom: 0;
	content: '';
	height: 2px;
	left: 0;
	right: 0;
	opacity: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: all 0.3s ease;
}

.nav--menu--link:hover::after {
	opacity: 1;
	transform: scaleX(1);
}

.nav--menu--link:hover {
	color: #00C3FF;
	text-decoration: none;
}

.nav--menu--language img {
	height: 24px;
}



/* ============================
	HERO
============================ */

/* STRUCTUUR & AFSTANDEN */
.section--hero {
	padding-bottom: 3rem;
	padding-left: 0;
	padding-right: 0;
	padding-top: 7rem;
}

/* HEADER */
.hero--header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--margin-element);
}

.hero--header--title {
	color: #000;
	font-size: 2.5rem;
	margin: 0;
}

/* GALLERY WRAPPERS */
.hero--gallery--outer {
	background-color: #F6F6F6;
	border-radius: 2rem;
	padding: 0.5rem;
}

.hero--gallery--inner {
	background-color: #FFFFFF;
	border-radius: 1.5rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
	padding: 0.5rem;
}

/* GALLERY ZELF */
.hero--gallery {
	border-radius: 1rem;
	box-shadow: var(--box-shadow);
	display: flex;
	flex-wrap: nowrap;
	gap: 0.25rem;
	height: 660px;
	overflow: hidden;
}

.hero--gallery--left,
.hero--gallery--right {
	flex: 1;
	height: 100%;
}

.hero--gallery--left img,
.hero--gallery--right img {
	display: block;
	object-fit: cover;
}

.hero--gallery--left img {
	height: 100%;
	width: 100%;
}

.hero--gallery--right {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.hero--gallery--right img {
	height: calc(50% - 0.125rem);
	width: calc(50% - 0.125rem);
}


/* ============================
	INTRO
============================ */

/* STRUCTUUR & AFSTANDEN */
.section--intro {
	padding-bottom: 4rem;
	padding-top: 3rem;
}

.section--intro.next--page {
	padding-bottom: 4rem;
	padding-top: 10rem;
}

/* TITEL */
.intro--title {
	color: #000000;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 2.25rem;
	font-weight: 900;
	line-height: var(--line-height-heading);
	margin-bottom: 1rem;
}


.section--intro h1.intro--h1 {
	color: #000;
	font-size: 3rem;
	margin: 0;
}

.section--intro h2.intro--h2 {
	color: #000000;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 2.25rem;
	font-weight: 900;
	line-height: var(--line-height-heading);
	margin-bottom: 1rem;
}

.section--intro p.intro--text {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: var(--line-height);
	margin-top: 1rem;
	margin-bottom: 0;
}

/* LABELS */
.intro--labels {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.intro--label {
	background-color: #F6F6F6;
	border-radius: 2rem;
	color: #000000;
	display: flex;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	height: 44px;
	justify-content: center;
	padding: 0 1.25rem;
	text-align: center;
}

.intro--label span {
	align-self: center;
	display: block;
	line-height: 1;
	margin-bottom: 0.2rem;
}

/* INTRO PARAGRAAF */
.intro--details-wrapper {
	background-color: #FFFFFF;
	border-radius: 1.5rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
	padding: 1.5rem;
}

.intro--text {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: var(--line-height);
	margin-top: 1rem;
	margin-bottom: 0;
}

/* INTRO - DETAILS */
.intro--details-list {
	list-style: none;
	margin: 0;
	padding: 0 1rem;
}

.intro--details-item {
	align-items: center;
	border-bottom: 1.5px solid #F4F4F4;
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
}

.intro--details-item:last-child {
	border-bottom: none;
}

.intro--details-icon,
.intro--details-avatar {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.intro--details-icon i {
	font-size: 1.5rem;
	color: #000000;
}

.intro--details-avatar img {
	width: 42px;
	height: 42px;
	object-fit: cover;
	border-radius: 50%;
}

.intro--details-content {
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.125rem;
	color: #000000;
}

.intro--details-content strong {
	display: block;
	font-weight: 700;
}

.intro--details-content span.small {
	color: #888;
	display: flex;
	font-size: .95rem;
	font-weight: 400;
	line-height: 1.4;
}



/* ============================
	PARAGRAAF ALINEA
============================ */

.section--paragraph h2.paragraph--h2 {
	color: #000000;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 2.25rem;
	font-weight: 900;
	line-height: var(--line-height-heading);
	margin-bottom: 1rem;
}

.section--paragraph p.paragraph--text {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: var(--line-height);
	margin-top: 1rem;
	margin-bottom: 0;
}




/* ============================
	FACILITEITEN
============================ */

/* STRUCTUUR */
.section--facilities {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* TITEL EN TEKST */
.facilities--title {
	color: #000000;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 2rem;
	font-weight: 900;
	margin-bottom: 0;
}

.section--facilities p {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: var(--line-height);
}

/* LIST */
.facilities--list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.facilities--item {
	align-items: center;
	border-bottom: 1.5px solid #E2E2E2;
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
}

.facilities--item:last-child {
	border-bottom: none;
}

.facilities--icon {
	color: #000000;
	flex-shrink: 0;
	font-size: 1.25rem;
	width: 1.5rem;
	text-align: center;
}

.facilities--text {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
}

/* ITEM UITGESCHAKELD */
.facilities--no .facilities--icon,
.facilities--no .facilities--text {
	color: #B0B0B0;
}

/* DIVIDER */
.facilities--divider {
	align-items: center;
	background-color: #F6F6F6;
	border-radius: 2rem;
	display: flex;
	justify-content: center;
	padding: 0 1.5rem;
	height: 46px;
	text-align: center;
}

.facilities--divider span {
	align-self: center;
	display: block;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.15rem;
}


/* ============================
	MORE INFORMATION SECTION
============================ */

.section--info {
	padding-top: 1rem;
	padding-bottom: 3rem;
}

/* BUBBLES */
.info--bubble {
	background-color: #FFFFFF;
	border-radius: 1.5rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem;
}

.info--bubble--title {
	color: #000000;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 1rem;
}

.info--bubble p {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 0;
}


/* ============================
	LOCATION
============================ */

.section--location {
	padding-bottom: 3rem;
	padding-top: 4rem;
}

.location--title {
	color: #000000;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 0.25rem;
}

.location--description {
	color: #555;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	margin-bottom: 1.5rem;
}

/* LOCATION MAP WRAPPERS */
.location--map--outer {
	background-color: #F6F6F6;
	border-radius: 2rem;
	padding: 0.5rem;
}

.location--map--inner {
	background-color: #FFFFFF;
	border-radius: 1.5rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
	padding: 0.5rem;
}

/* GOOGLE MAP */
#map {
	width: 100%;
	height: 500px;
	border-radius: 1rem;
	overflow: hidden;
}

.location--address p {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 0;
}


/* ============================
	FAQ
============================ */

.section--faq {
	padding: 4rem 0 2rem 0;
}

.section--faq--title {
	color: #000000;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 0;
}

.faq--item {
	border-bottom: 1.5px solid #EEEEEE;
	cursor: pointer;
	padding: 1.5rem 0;
}

.faq--question h3 {
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 1.35rem;
	margin: 0;
	color: #000000;
}

.faq--icon {
	font-size: 1.5rem;
	color: #AAAAAA;
	transition: all 0.3s ease;
}

.faq--item.open .faq--icon {
	transform: rotate(180deg);
	color: #000000;
}

/* CONTAINER (voor spacing rondom en visibility toggle) */
.faq--answer {
	display: none;
	margin-top: 1rem;
}

/* INHOUD (voor typografie en ruimte binnenin) */
.faq--answer p {
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.6;
	color: #000000;
	margin-bottom: 0;
	padding-right: 2.5rem;
}

.faq--item.open .faq--answer {
	display: block;
}

.faq--item:last-child {
	border-bottom: none;
}


/* ============================
	REVIEWS
============================ */

.section--reviews {
	background-color: #EFEFEF;
	padding: 2rem 0 1rem 0;
}

.section--reviews--title {
	color: #000000;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 0;
	text-align: center;
}

.review--bubble {
	background-color: #FFFFFF;
	border-radius: 1.5rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	padding: 2rem;
	text-align: center;
	transition: all 0.3s ease;
	opacity: 1;
}

.review--head {
	margin-bottom: 0.5rem;
}

.review--icon {
	color: #00C3FF;
	display: block;
	font-size: 1.75rem;
	margin-bottom: 0.5rem;
}

.review--author {
	display: block;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
}

.review--body {
	display: flex;
	flex-grow: 1;
	align-items: flex-start;
}

.review--body p {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.125rem;
	line-height: 1.5;
	margin-bottom: 1.25rem;
}

.review--footer p {
	color: #888888;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	margin-bottom: 0;
}



/* ============================
	FORM SECTION (Contact & Reservering)
============================ */

.section--form {
	background-color: #ffffff;
	padding-top: 5rem;
	padding-bottom: 2rem;
}

.section--form.booking--page {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.form--outer {
	background-color: #F6F6F6;
	border-radius: 2rem;
	padding: 0.5rem;
}

.form--inner {
	background-color: #FFFFFF;
	border-radius: 1.5rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.form--content {
	padding: 2rem;
}

.section--form .paragraph--h2 {
	color: #000000;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1;
	margin-bottom: .85rem;
	margin-top: 0;
}

.section--form .paragraph--text {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: var(--line-height);
	margin-bottom: 1.5rem;
}

.section--form .form-control {
	border: 1.5px solid #E2E2E2;
	border-radius: 0.5rem;
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	padding: 0.75rem 1rem;
	background-color: #ffffff;
}

.section--form .form-control::placeholder {
	color: #888888;
}

.section--form .form-control:focus {
	border-color: #00C3FF;
	outline: none;
	box-shadow: 0 0 0 0.15rem rgba(0, 195, 255, 0.25);
}

.section--form label {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	display: inline-block;
}

.section--form .btn--form,
.section--form .button--submit {
	background-color: #00C3FF;
	border: 2px solid #00C3FF;
	border-radius: 2rem;
	color: #000000;
	font-size: 1.25rem;
	font-weight: 600;
	padding: 0.5rem 1.25rem;
	transition: all 0.3s ease;
	font-family: 'Eina 01', Arial, sans-serif;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	text-decoration: none;
}

.section--form .btn--form:hover,
.section--form .button--submit:hover {
	background-color: #000000;
	color: #FFFFFF;
	border-color: #000000;
}

.section--form .button--submit span {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.15rem;
}

.section--form .terms--text p {
	color: #777777;
	font-size: 0.95rem;
	line-height: 1.4;
	margin: 0;
}

.section--form .form-check {
	display: flex;
	align-items: center;
	margin-bottom: 0.75rem;
}

.section--form .form-check-input {
	margin-top: 0 !important;
}

.section--form .form-check-label {
	color: #000000;
	font-size: 1rem;
	font-family: 'Eina 01', Arial, sans-serif;
	font-weight: 400;
	margin-bottom: 0;
	margin-left: 1rem;
}

.section--form label small {
	font-family: "Eina 01", Arial, sans-serif;
	font-size: .9rem;
	font-weight: 400;
}

.form--select--wrapper {
	position: relative;
	width: 100%;
}

.form--select--wrapper select.form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1.5px solid #E2E2E2;
	border-radius: 0.5rem;
	color: var(--color-black);
	font-family: "Eina 01", Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	padding: 0.75rem 1rem;
	padding-right: 2.5rem;
	background-color: #FFF;
	background-image: none;
	cursor: pointer;
}

.form--select--wrapper select.form-control:focus {
	background-color: #FFF;
	border-color: #00C3FF;
	box-shadow: 0 0 0 0.15rem rgba(0, 195, 255, 0.25);
	outline: none;
}

.form--select--wrapper::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #333;
	pointer-events: none;
}




/* ============================
	DATEPICKER
============================ */

.section--datepicker {
	background-color: #ffffff;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.datepicker--summary-wrapper {
	background-color: #ffffff;
	border-radius: 1.5rem;
	border: 2px solid #EEE !important;
	/*box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);*/
	padding: 1.5rem;
}

.datepicker--summary-list {
	list-style: none;
	margin: 0;
	padding: 0 1rem;
}

.datepicker--summary-item {
	align-items: center;
	border-bottom: 1.5px solid #F4F4F4;
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
}

.datepicker--summary-item:last-child {
	border-bottom: none;
}

.datepicker--summary-icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.datepicker--summary-icon i {
	font-size: 1.5rem;
	color: #000000;
}

.datepicker--summary-content {
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.125rem;
	color: #000000;
}

.datepicker--summary-content strong {
	display: block;
	font-weight: 700;
}

.datepicker--summary-content span.small {
	color: #888;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
	display: flex;
}


/* datepicker custom styles */
.dp__menu {
	background-color: #FFF !important;
	border: 2px solid #EEE !important;
	border-radius: 2rem !important;
	/*box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);*/
	padding: 0.5rem !important;
}

.dp__today {
	border: 1.5px solid #00C3FF !important;
}

.dp__date_hover:hover {
	background: #00C3FF !important;
	color: #FFF !important;
}

.dp__range_end,
.dp__range_start,
.dp__active_date {
	background: #00C3FF !important;
	color: #FFF !important;
}

.dp--year-select,
.dp__month_year_select {
	font-weight: bold !important;
}




/* ============================
	BOOK FLOATING BUTTON
============================ */

.book--button--wrapper {
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 1000;
}

.button--floating {
	background: linear-gradient(45deg, #00C3FF, #8BE68C, #FFF55C);
	border: none;
	border-radius: 2rem;
	color: #000000;
	cursor: pointer;
	display: inline-block;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	padding: 0.7rem 1.45rem;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s ease;
	animation: pulse-animation 2.5s infinite;
}

.button--floating span {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-bottom: 0.175rem;
}

.button--floating:hover {
	background: #000;
	color: #FFF;
	text-decoration: none;
}

@keyframes pulse-animation {
	0% {
		box-shadow: 0 0 0 0px rgba(7, 226, 234, 0.7);
	}

	50% {
		box-shadow: 0 0 0 18px rgba(255, 255, 255, 0);
	}

	100% {
		box-shadow: 0 0 0 0px rgba(255, 255, 255, 0);
	}
}




/* ============================
	FOOTER
============================ */

.section--footer {
	background-color: #EFEFEF;
	padding: 3rem 0 2rem 0;
}

/* Footer base */
.footer--base p {
	color: #888;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 0.95rem;
	margin-top: 1rem;
	text-align: center;
}

/* Footer logo */
.footer--logo img {
	height: 150px;
}

/* Footer layout voor menu & legal */
.footer--menu,
.footer--legal {
	list-style: none;
	padding-left: 0;
	text-align: center;
}

.footer--menu li,
.footer--legal li {
	display: inline-block;
	margin: 0 0.75rem;
}

/* Bovenste menu links – FinalSix stijl */
.footer--menu--link {
	color: #000000;
	display: inline-block;
	font-family: 'FinalSix', Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0;
	padding: 0.25rem 0 !important;
	position: relative;
	text-decoration: none;
	transition: all 0.3s ease;
}

.footer--menu--link::after {
	background-color: #00C3FF;
	bottom: 0;
	content: '';
	height: 2px;
	left: 0;
	right: 0;
	opacity: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: all 0.3s ease;
}

.footer--menu--link:hover::after {
	opacity: 1;
	transform: scaleX(1);
}

.footer--menu--link:hover {
	color: #00C3FF;
	text-decoration: none;
}

/* Onderste juridische links – Eina stijl */
.footer--legal a {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
	transition: all 0.3s ease;
}

.footer--legal a:hover {
	color: #00C3FF;
	text-decoration: none;
}








/* ============================
	END SITE CSS
============================ */