.headerbox-search-form {
	--search-icon: var(--gray-100);
	--background-mobile: #333f48;
	--background-desktop: #006e94;
	display: flex;
	align-items: center;
	padding: 0 20px;
	gap: var(--space-2);
}

.headerbox-search-form span {
	font-family: var(--font-display);
	font-size: var(--text-xl);
}

.headerbox-search-form form {
	display: flex;
	background-color: var(--background-mobile);
	border-radius: 4px;
	height: 39px;
	flex-grow: 1;
	padding: 6px 0;
}

.headerbox-search-form input[type="search"] {
	width: 100%;
	height: 100%;
	margin: 0;
	font-size: 0.7837rem;
	text-indent: var(--space-1);
	font-family: var(--font-display);
	background-color: transparent;
	color: #FFF;
	text-indent: var(--space-4);
}

.headerbox-search-form input[type="search"]::placeholder {
	font-size: var(--text-base);
	color: currentColor; 
	font-size: 0.7837rem;
}

.headerbox-search-form button {
	position: relative;
	font-size: var(--text-md);
	width: 40px;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
	background-color: transparent;
}

.headerbox-search-form button::before {
	content: "";
    position: absolute;
    left: 0;
    top: 0px;
    width: 1px;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 10%, rgb(0 0 0 / 0%) 0%);
    background-position: right;
    background-size: 1px 6px;
    background-repeat: repeat-y;
}

.headerbox-search-form button::after {
	content: "";
    position: absolute;
    left: 0;
	top: -3px;
    width: 1px;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 10%, rgb(0 0 0 / 0%) 0%);
    background-position: right;
    background-size: 1px 6px;
    background-repeat: repeat-y;
}

.headerbox-search-form button:hover {
	background-color: transparent;
}

.search-cont .search-button {
	display: none;
	background: transparent;
	color: var(--search-icon);
}

@media screen and (min-width: 64em) {
	.search-cont .search-button {
		width: 44px;
		height: 30px;
		padding: 0;
		margin: 0;
		background-color: var(--teal);
		border-radius: var(--rounded-full);
		font-size: 12px;
	}

	@media (hover : hover) {
		.search-cont .search-button {
			transition: background-color 350ms ease-in-out;	
		}
	
		.search-cont .search-button:hover {
			background-color: var(--dark-red);
		}
	}
	

	.search-cont .search-button .close {
		display: none;
	}

	.search-cont.active .search-button .open {
		display: none;
	}

	.search-cont.active .search-button .close {
		display: block;
	}

	.search-cont .headerbox-search-form {
		opacity: 0;
		pointer-events: none;
		position: absolute;
		gap: var(--space-6);
		left: 0;
		top: 136px;
		width: 100%;
		height: 285px;
		z-index: 25;
		transition: opacity 200ms ease-in-out;
		background-image: url(../svg/bg-search.svg);
		background-size: cover;
		background-position: bottom;
		padding: 65px 200px 80px calc(300px + (576 - 300) * ((100vw - 1025px) / (1440 - 1025)));
	}

	.search-cont .headerbox-search-form::after {
		content: url(../svg/surfer-standing.svg);
		position: absolute;
		width: 105px;
		left: 19%;
		top: 30px;
	}
	
	.search-cont .headerbox-search-form span {
		font-size: calc(40px + (50 - 40) * ((100vw - 1025px) / (1440 - 1025)));
	}

	.headerbox-search-form form {
		display: flex;
		background-color: var(--background-desktop);
		height: 77px;
		padding: 10px 0;
		flex-grow: 0;
	}

	.headerbox-search-form input[type="search"] {
		font-size: var(--text-2xl);
		text-indent: var(--space-8);
		width: 422px;
	}
	.headerbox-search-form input[type="search"]:focus {
		outline:rgba(255 255 255 / 30%) dashed 1px;
	}

	.headerbox-search-form input[type="search"]::placeholder {
		font-size: var(--text-2xl);
	}

	.search-cont.active .headerbox-search-form {
		opacity: 1;
		pointer-events: all;
	}

	.headerbox-search-form button {
		position: relative;
		width: 82px;
		font-size: 28px;
		height: 100%;
		padding: 0;
		margin: 0;
	}
	.headerbox-search-form button::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0px;
		width: 2px;
		height: 100%;
		background-image: linear-gradient(to bottom, #FFF 10%, rgb(0 0 0 / 0%) 0%);
		background-position: right;
		background-size: 1px 6px;
		background-repeat: repeat-y;
	}

	.search-cont .search-button {
		display: block;
	}
}

@media screen and (min-width: 1440px) {
	.search-cont .headerbox-search-form {
		padding: 65px 200px 80px 39%;
		height: auto;
		min-height: calc(280px + (350 - 280) * ((100vw - 1440px) / (2000 - 1440)));
	}
	.search-cont .headerbox-search-form span {
		font-size: 50px;
	}
	.search-cont .headerbox-search-form::after {
		top: calc(30px + (60 - 30) * ((100vw - 1440px) / (2000 - 1440)));
	}
}

@media screen and (min-width: 2000px) {
	.search-cont .headerbox-search-form {
		min-height: 350px;
	}
	.search-cont .headerbox-search-form::after {
		top: 60px;
	}
}