/* FORM HTML TAGS */
FORM {margin:0;padding:0;}
INPUT, TEXTAREA, SELECT {margin:0;border:0;box-sizing:border-box;resize:none;}
BUTTON {margin:0;padding:0;background:none;border:0;cursor:pointer;}
INPUT[type=text]:focus, INPUT[type=tel]:focus, TEXTAREA:focus, SELECT:focus {outline:none;}
LABEL {display:block;margin:0;}

/* FORM MASTER */
FORM.master {font-size:1.5rem;}
FORM.master .message_row {margin-bottom:2rem;}

FORM.master INPUT[type=text], FORM.master INPUT[type=tel], FORM.master TEXTAREA, FORM.master SELECT {
	font:300 1.4rem Stem;
	
	width:100%;
	background:var(--base-6);
	padding:1rem 1.2rem;
	
	/*box-shadow:inset 0 0 .5rem 0 var(--base-3);*/
	border:1px solid transparent;
	border-radius:var(--border-smoothing-input);
	transition:all .2s ease-in-out;
	}
FORM.master INPUT::placeholder {color:var(--base-2);opacity:1;}

FORM.master .phone_container {display:flex;gap:.2rem;}
FORM.master SELECT.phone_code {flex-shrink:0;width:18rem;background-color:#ddd;border-radius:var(--border-smoothing-input) 0 0 var(--border-smoothing-input);}
FORM.master INPUT.phone_number {border-radius:0 var(--border-smoothing-input) var(--border-smoothing-input) 0;}

FORM.master .comment {font-size:1.1em;padding:1rem;background:var(--crimson);border-radius:var(--border-smoothing);}
FORM.master .message_result {font-size:1.2em;margin-bottom:2rem;color:var(--lightgreen);text-align:center;}

FORM.master LABEL.error {color:var(--pink);font-size:.9em;padding:.5rem 0 0 1rem;}/* jQuery validation error text */

FORM.master SELECT {
	background-image:url(/images/arrows/select_down_black.svg);
	background-repeat:no-repeat;
	background-position:top 50% right 1rem;
	background-size:1rem;
	appearance:none;-moz-appearance:none;-webkit-appearance:none;
	}
FORM.master OPTION {font-weight:300;background:#fff;}

/* jQuery validation error */
FORM.master INPUT[type=text].error, FORM.master INPUT[type=tel].error, FORM.master TEXTAREA.error, FORM.master SELECT.error {
	border:1px solid var(--crimson);
	}

FORM.master INPUT[type=text]:focus, FORM.master INPUT[type=tel]:focus, FORM.master TEXTAREA:focus, FORM.master SELECT:focus {
	/*box-shadow:none;*/
	box-shadow:0 0 0 2px var(--blue-1);
	}

FORM.master BUTTON {
	width:fit-content;
	padding:1rem 2rem;
	color:#fff;background:var(--blue-2);
	font:300 1.1em Stem;
	text-decoration:none;
	border-radius:var(--border-smoothing-button);
	transition:all .2s ease-in-out;
	}
FORM.master BUTTON:hover {background:var(--base-1);}

/* FORM FILTER */
FORM.filter {
	display:flex;gap:1rem;
	font-size:1.5rem;
    overflow-x:auto;
    scroll-behavior:smooth;
	scrollbar-width:none;
	}

FORM.filter INPUT[type=text], FORM.filter TEXTAREA, FORM.filter SELECT {
	font:300 1.5rem Stem;
	
	width:100%;
	color:var(--base-6);
	background:var(--base-2);
	padding:.7rem 1.1rem;
	
	border-radius:var(--border-smoothing-input);
	transition:all .2s ease-in-out;
	}
FORM.filter INPUT::placeholder {color:var(--base-6);opacity:1;}

FORM.filter LABEL {display:block;margin-bottom:.5rem;}
FORM.filter LABEL SPAN {display:block;margin-bottom:.5rem;color:var(--base-3);font-size:.9em;}

FORM.filter SELECT {
	background-image:url(/images/arrows/select_down_white.svg);
	background-repeat:no-repeat;
	background-position:top 50% right 1rem;
	background-size:1rem;
	appearance:none;-moz-appearance:none;-webkit-appearance:none;
	}
FORM.filter OPTION {font-weight:300;background:;}

FORM.filter INPUT[type=text]:focus, FORM.filter TEXTAREA:focus, FORM.filter SELECT:focus {
	box-shadow:none;
	}

FORM.filter BUTTON {
	width:fit-content;
	padding:.8rem 1.2rem;
	font:300 1.1em Stem;
	text-decoration:none;
	border-radius:var(--border-smoothing-button);
	transition:all .2s ease-in-out;
	}

FORM.filter .filter_apply {color:#fff;background:var(--blue-2);}
FORM.filter .filter_apply:hover {background:var(--base-1);}
FORM.filter .filter_clear {color:var(--base-1);background:var(--base-5);}
FORM.filter .filter_clear:hover {background:var(--base-6);}

/* FORM MODAL */
.modal_overlay {
    position:fixed;z-index:150;
    top:0;left:0;right:0;bottom:0;
    padding:3rem 1rem;
    overflow:auto;
    text-align:center;
    background-color:#0008;
	}
.modal_overlay::after {
    content:'';
    display:inline-block;
    vertical-align:middle;
    width:0;
    height:100%;
	}
.modal_overlay::-webkit-scrollbar {width:.5rem;height:.5rem;}
.modal_overlay::-webkit-scrollbar-track {background:transparent;}
.modal_overlay::-webkit-scrollbar-thumb {background-color:var(--base-3);border-radius:0rem;}

.modal_wrapper {
	position:relative;
	display:inline-block;
    vertical-align:middle;
	width:50rem;
	padding:2rem;
	background:var(--base-3);
	font-size:1.7rem;
    text-align:left;
	border:.2rem solid var(--blue-1);
	border-radius:var(--border-smoothing-modal);
	box-shadow:0 0 2rem 3rem #0001;
	}

.modal_close {
	position:absolute;
	top:2rem;right:2rem;
	display:grid;place-content:center;
	width:3rem;height:3rem;
	background:var(--base-1);
	border-radius:50%;
	cursor:pointer;
	transition:background .2s ease-in-out;
	}
.modal_close IMG {width:1.2rem;height:1.2rem;}
.modal_close:hover {background:var(--crimson);}

FORM.modal {display:flex;flex-direction:column;gap:2rem;}
FORM.modal .modal_header {width:calc(100% - 5rem);font:normal 1.4em Stem;color:var(--blue-1);}
FORM.modal .modal_result {font-size:1.2em;color:var(--lightgreen);text-align:center;}
FORM.modal .modal_row {display:flex;flex-direction:column;gap:.5rem;}

FORM.modal INPUT[type=text], FORM.modal INPUT[type=tel], FORM.modal TEXTAREA, FORM.modal SELECT {
	font:300 1.6rem Stem;
	
	width:100%;
	background:var(--base-6);
	padding:1rem;

	border:1px solid transparent;
	border-radius:var(--border-smoothing-input);
	transition:all .2s ease-in-out;
	}
FORM.modal INPUT::placeholder {color:var(--base-2);opacity:1;}

FORM.modal .phone_container {display:flex;gap:.2rem;}
FORM.modal SELECT.phone_code {flex-shrink:0;width:19.5rem;background-color:#ddd;border-radius:var(--border-smoothing-input) 0 0 var(--border-smoothing-input);}
FORM.modal INPUT.phone_number {border-radius:0 var(--border-smoothing-input) var(--border-smoothing-input) 0;}

FORM.modal DIV SPAN {color:var(--blue-1);font-size:.9em;}
FORM.modal LABEL.error {color:var(--pink);font-size:.9em;padding:.5rem 0 0 1rem;}/* jQuery validation error */

FORM.modal SELECT {
	background-image:url(/images/arrows/select_down_black.svg);
	background-repeat:no-repeat;
	background-position:top 50% right 1rem;
	background-size:1rem;

	appearance:none;-moz-appearance:none;-webkit-appearance:none;
	}
FORM.modal OPTION {font-weight:300;}

/* jQuery validation error */
FORM.modal INPUT[type=text].error, FORM.modal INPUT[type=tel].error, FORM.modal TEXTAREA.error, FORM.modal SELECT.error {
	border:1px solid var(--crimson);
	}

FORM.modal INPUT[type=text]:focus, FORM.modal INPUT[type=tel]:focus, FORM.modal TEXTAREA:focus, FORM.modal SELECT:focus {
	/*border:1px solid var(--blue-1);*/
	box-shadow:0 0 0 2px var(--blue-1);
	}

FORM.modal BUTTON {
	width:fit-content;
	padding:1rem 2rem;
	color:#fff;background:var(--blue-2);
	font:300 1.1em Stem;
	text-decoration:none;
	border-radius:var(--border-smoothing-button);
	transition:all .2s ease-in-out;
	}
FORM.modal BUTTON:hover {background:var(--base-1);}

@media (max-width:750px) {
.modal_wrapper {width:45rem;}
}

@media (max-width:500px) {
.modal_overlay {padding:0;}
.modal_overlay::after {display:none;}
.modal_wrapper {width:100%;min-height:100dvh;/*padding:1rem;*/border-radius:0;}
}

@media (max-width:400px) {
.modal_wrapper {padding:1rem}
.modal_close {top:1rem;right:1rem;}
}