/* ===== HERO SECTION ===== */
.contact-hero{
	overflow: hidden;
	position: relative;
	border-bottom: var(--primary-border);
}

.contact-hero h1{
  margin: var(--small-bottom-spng) 0;
}

.contact-hero p:last-of-type{
  width: clamp(10rem, 45%, 45rem);
  line-height: var(--text-lh-spng)
}

.global__glow {
	position: absolute;
	width: 1200px;
	height: 900px;
	background: radial-gradient(
		ellipse at center,
		rgba(30, 79, 255, 0.075),
		transparent 70%
	);
	filter: blur(50px);
	pointer-events: none;
	right: -450px;
	top: -450px;
	z-index: 0;
}

/* ===== Contact Sections ===== */
.contact-form__content p{
	line-height: var(--text-lh-spng) !important;
}

/* --- Contact Info ---*/
.contact-info{
	display: flex;
	flex-direction: row;
	background: var(--secondary-color);
	border: var(--tertiary-border);
}

.contact-info__item{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--list-gap);
	padding: clamp(1.25rem, 1.75vw, 2rem);;
	flex: 1;
}

.contact-info__item:nth-child(2){
	border-left: var(--tertiary-border);
	border-right: var(--tertiary-border);
}

.contact-info__item p{
	text-transform: uppercase;
	font-weight: 700;
	font-size: var(--badge-fontsize_small);
	margin-bottom: .2rem;
} 

.contact-info__item a,
.contact-info__item span{
	color: var(--primary-text-color);
	font-size: var(--paragraph-fontsize);
	font-weight: 700;
	text-decoration: none;
}

.contact-info svg{
  background: var(--primary-accent-color-trps);
  border: 1px solid rgba(30, 79, 255, 0.4);
  border-radius: var(--main-br);
  color: var(--primary-accent-color);
  height: clamp(2.75rem, 3vw, 4rem);
  width: fit-content;
  padding: clamp(.45rem, .55vw, 1rem);
}

/* --- Contact Section --- */
.contact-form{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3.75vw, 4rem);
	padding-top: 0 !important;
}

/* --- Contact Form Left Side --- */
/* Intro Content */
.contact-form__content p{
	margin-bottom: var(--mid-bottom-spng);
}

/* Content Form */
.contact-form__form{
	position: relative;
}

.contact-form__row{
	display: flex;
	flex-direction: row;
	gap: clamp(1rem, 1.5vw, 2rem);
	margin-bottom: var(--small-bottom-spng);
	color: var(--secondary-text-color);
}

.contact-form__group input,
.contact-form__group select,
.contact-form__group textarea{
	background: var(--secondary-color);
	border: var(--tertiary-border);
	color: var(--secondary-text-color);
	padding: clamp(.75rem, 1vw, 1.25rem) clamp(1.75rem, 2vw, 2.5rem);
	border-radius: var(--main-br);
  transition: var(--transition__mid);
}

.contact-form__group input:focus,
.contact-form__group select:focus,
.contact-form__group textarea:focus {
  outline: none;
  border: var(--primary-border);
	filter: brightness(125%);
}

.contact-form__group input:hover,
.contact-form__group select:hover,
.contact-form__group textarea:hover {
	filter: brightness(125%);
}

.contact-form__group textarea{
	margin-bottom: var(--small-bottom-spng);
}

.contact-form__row input::placeholder{
	color: var(--secondary-text-color);
}

.contact-form__group{
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
	color: var(--secondary-text-color);
}

.contact-form__group label{
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--badge-fontsize_small);
}

.contact-form__group::placeholder,
.contact-form__group textarea::placeholder{
	color: var(--secondary-text-color);
}

/* --- Form Customs --- */
.contact-form__group textarea{
  resize: vertical;
}

/* Checkbox */
.privacy-check input[type="checkbox"]{
	margin-right: var(--list-gap);
	margin-top: 0.2rem;
}

.privacy-check label{
	display: flex;
	flex-direction: row;
	align-items: start;
	margin: var(--small-bottom-spng) 0;
	color: var(--secondary-text-color);
	font-size: var(--badge-fontsize_small);
}

.privacy-check label a{
	text-decoration: none;
	color: var(--primary-accent-color);
}

/* Button */
.contact-form__form button{
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	gap: var(--list-gap-small);
	width: 100%;
	font-size: var(--container-SubText);
	background-color: var(--primary-accent-color);
	color: var(--primary-text-color);
	border: none;
	margin-bottom: var(--mid-bottom-spng);
}

.contact-form__form button svg{
	height: clamp(1rem, 1.5vw, 2rem);
}

/* --- Contact Form Info Right Side --- */
.contact-form__info{
	padding: var(--card-padding_small);
	border: var(--tertiary-border);
	background: var(--secondary-color);
	border-radius: var(--main-br);
	margin-bottom: var(--mid-bottom-spng);
}

.contact-form__info-item{
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: var(--tertiary-border);
	padding-bottom: var(--small-bottom-spng);
	gap: var(--list-gap);
	margin-top: var(--small-bottom-spng);
}

.contact-form__info-item:last-of-type{
	border-bottom: none;
}

.contact-form__info-item svg{
  background: var(--primary-accent-color-trps);
  border: 1px solid rgba(30, 79, 255, 0.4);
  border-radius: var(--main-br);
  color: var(--primary-accent-color);
  height: clamp(2.75rem, 2.75vw, 4rem);
  width: fit-content;
  padding: clamp(.45rem, .6vw, 1rem);
}

.contact-form__info-content p{
	color: var(--secondary-text-color);
	font-weight: 600;
	margin-bottom: .25rem;
	text-transform: uppercase;
	font-size: var(--badge-fontsize_small);
}

.contact-form__info-content a,
.contact-form__info-content span{
	color: var(--primary-text-color);
	font-weight: 600;
	font-size: var(--badge-fontsize);
	text-decoration: none;
	transition: var(--transition__mid);
}

.contact-form__info-content a:hover{
	color: var(--primary-accent-color);
}

/* --- Openingstijden Right Side --- */
.contact-form__openingstijden{
	padding: var(--card-padding_small);
	background: var(--secondary-color);
	border: var(--tertiary-border);
	border-radius: var(--main-br);
}

.contact-form__openingstijden-table{
	width: 100%;
}

.contact-form__openingstijden-row{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.contact-form__openingstijden-row{
	border-bottom: var(--tertiary-border);
	padding: var(--small-bottom-spng);
}

.contact-form__openingstijden-row:last-of-type{
	border: none;
}

.contact-form__openingstijden-row td:first-of-type{
	color: var(--secondary-text-color);
	font-size: var(--container-fontsize);
}

.contact-form__openingstijden-row td:last-of-type{
	color: var(--primary-text-color);
	font-size: var(--container-fontsize);
	font-weight: 800;
}

.contact-form__openingstijden-row.gesloten td:last-child {
	color: red;
}


.contact-form__openingstijden-row.vandaag{
	background: var(--primary-accent-color-trps);
	height: 100%;
	border-radius: var(--main-br);
	position: relative;
}

.contact-form__openingstijden-row.vandaag td:first-child:after{
	content: "Vandaag";
	color: var(--primary-accent-color);
	font-size: var(--container-fontsize);
	font-weight: 700;
	text-transform: lowercase;
	border: var(--secondary-border);
	border-radius: var(--main-br);
	padding: .2rem .5rem;
	margin-left: .5rem;
}

/*
|--------------------------------------------------------------------------
| Google Maps
|--------------------------------------------------------------------------
*/
.contact-form__map {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid #202033;
  background: #11111d;
}

.contact-form__map::before{
  content: '';
  position: absolute;
	width: 100%;
	height: 1px;
	border-radius: 99px;
	background: #232328;
  transform: translateY(calc(var(--small-bottom-spng) * -1));
}

.contact-form__map-content {
  width: 100%;
  height: calc(100% - 48px);
}

.contact-form__map-iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/
.contact-form__map-footer {
  position: absolute;
  z-index: 2;

  left: 0;
  right: 0;
  bottom: 0;

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

  padding: 15px 22px;

  background: #0e0e18;
  border-top: 1px solid #202033;
}

/*
|--------------------------------------------------------------------------
| Locatie
|--------------------------------------------------------------------------
*/
.contact-form__map-location {
  display: flex;
  align-items: center;
  gap: 9px;

  color: #858597;
  font-size: 13px;
}

.contact-form__map-location svg {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: var(--primary-accent-color);
  stroke-width: 1.8;
}

/*
|--------------------------------------------------------------------------
| Google Maps link
|--------------------------------------------------------------------------
*/

.contact-form__map-link {
  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--primary-accent-color);

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

  text-decoration: none;
  transition: var(--transition__mid);
}

.contact-form__map-link:hover{
  filter: brightness(75%);
}

/*
|--------------------------------------------------------------------------
| Google logo
|--------------------------------------------------------------------------
*/
.contact-form__map-google {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

/* ----- Global Hovers ----- */
/* Blue */
.contact-form__form button{
  transition: var(--transition__mid);
}

/* Hover Blue */
.contact-form__form button:hover{
  transform: translateY(-2px);
  background: var(--primary-accent-color-1);
}

/* ----- Media Query ----- */
/* Ipad */
@media (min-width: 768px) and (max-width: 1024px) {
	.contact-form{
		display: flex;
		flex-direction: column;
	}
	
	.contact-form__form button::before{
		width: 0;
		height: 0;
	}
}

/* Phone */
@media (max-width: 767px) {
	.contact-hero p{
		width: 100% !important;
	}
	.contact-info{
		flex-direction: column;
	}

	.contact-form__map-footer{
		display: flex;
		flex-direction: column;
		gap: .5rem;
	}

	.contact-info__item:nth-child(2){
		border-top: var(--tertiary-border);
		border-bottom: var(--tertiary-border);
		border-left: none;
		border-right: none;
	}

	.contact-form{
		display: flex;
		flex-direction: column;
	}

	.contact-form__row{
		flex-direction: column;
	}

	.contact-form__form button::before{
		width: 0;
		height: 0;
	}
}