/* FORM
======================================================= */

/* ERROR TEXT */
form span.red.text {position:absolute;bottom:calc(var(--ss)*-18vw); color:var(--Golden-Hour); font:var(--footers)}

/* FIELDS */
form .segment{margin-bottom:calc(var(--ss)*38vw);}
form .segment > .field{margin-bottom:calc(var(--ss)*23vw); position:relative; width:100%;}
form .segment:last-child,
form .segment > .field:last-child{margin-bottom: 0;}

form input[type="text"], form input[type="text"]:focus, form input[type="text"]:hover, form .error input[type="text"],
form input[type="tel"], form input[type="tel"]:focus, form input[type="tel"]:hover, form .error input[type="tel"],
form textarea, form .selection.dropdown{padding:calc(var(--ss)*11vw) calc(var(--ss)*15vw); border:var(--border); box-shadow:none; border-radius:0; background: transparent; margin-bottom:0; font:var(--p2); height:calc(var(--ss)*45vw); min-height:fit-content; display:flex; align-items: center; line-height:1; color:var(--Rich-Steel); width:100%; text-align: left;}

form textarea{height:calc(var(--ss)*75vw);}

form .mainfield > label{width:100%;font:var(--p2); font-weight: 400; margin-bottom:calc(var(--ss)*23vw);}

#required-text p{font:var(--footers);}

@media(max-width:768px){
}

@media(min-width:769px){
    form .segment{margin-bottom:calc(var(--ss)*50vw);}
	form .segment > .field.w-50{width:calc(var(--ss)*333vw)}
    form .segment > .field.w-50[data-uid="96"]{margin-bottom: 0;}
	
	form > div{max-width:calc(var(--ss)*850vw); margin:0 auto;}
	form > .segment{gap: 0 calc(var(--ss)*19vw); max-width:calc(var(--ss)*687vw); margin-left:auto; margin-right:auto;}
	
	form .field.w-50 input[type="text"], form .field.w-50 input[type="text"]:focus, form .field.w-50 input[type="text"]:hover, form .error .field.w-50 input[type="text"],
	form .field.w-50 input[type="tel"], form .field.w-50 input[type="tel"]:focus, form .field.w-50 input[type="tel"]:hover, form .error .field.w-50 input[type="tel"],
	form .field.w-50 textarea, form .field.w-50 .selection.dropdown{width:calc(var(--ss)*333vw)}
}

@media(min-width:1441px){
    /* ERROR TEXT */
	form span.red.text {bottom:calc(-18/16*1rem);}
	
	/* FIELDS */
    form .segment{margin-bottom:calc(50/16*1rem);}
	form .segment > .field{margin-bottom:calc(23/16*1rem);}
	
	form input[type="text"], form input[type="text"]:focus, form input[type="text"]:hover, form .error input[type="text"],
	form input[type="tel"], form input[type="tel"]:focus, form input[type="tel"]:hover, form .error input[type="tel"],
	form textarea, form .selection.dropdown{padding:calc(11/16*1rem) calc(15/16*1rem); height:calc(45/16*1rem);}
	
	form .segment > .field.w-50{width:calc(333/16*1rem)}
	
	form > div{max-width:calc(850/16*1rem);}
	form > .segment{gap: 0 calc(19/16*1rem); max-width:calc(687/16*1rem);}
	
	form .field.w-50 input[type="text"], form .field.w-50 input[type="text"]:focus, form .field.w-50 input[type="text"]:hover, form .error .field.w-50 input[type="text"],
	form .field.w-50 input[type="tel"], form .field.w-50 input[type="tel"]:focus, form .field.w-50 input[type="tel"]:hover, form .error .field.w-50 input[type="tel"],
	form .field.w-50 textarea, form .field.w-50 .selection.dropdown{width:calc(333/16*1rem)}
	
	form textarea{height:calc(75/16*1rem);}
	
	form .mainfield > label{margin-bottom:calc(23/16*1rem);}
}


/* SELECT
======================================================= */
form div[data-vtype="select"]{z-index:1000;}
form .selection.dropdown{position:relative; cursor:pointer;}
.dropdown > select { display: none; }
form .default.dropdown:not(.button) > .text, form .dropdown:not(.button) > .default.text{font:var(--p2);}

form .selection.dropdown .menu{outline: 0; margin: 0; max-height:calc(var(--ss)*467vw); box-shadow: 0 2px 3px 0 rgba(34,36,38,.15); background:var(--Morning-Haze); border-radius:0; border:var(--border); width:100%;overflow-x: hidden; overflow-y: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-overflow-scrolling: touch;transition: opacity .1s ease;left: 0;cursor: auto; position: absolute;  top:100%;padding:0;font:var(--p2); text-shadow: none; text-align: left; z-index: 1000; }

form .field .dropdown .menu > .item{font:var(--p2); color:var(--Rich-Steel); padding:0 calc(var(--ss)*15vw); z-index: 11; will-change: transform,opacity; margin:0 auto;height:calc(var(--ss)*45vw); display:flex;align-items: center; justify-content: flex-start; border-radius:0; transition:all 0.3s;border:calc(var(--ss)*1vw) solid var(--cream); width:100%; cursor:pointer;}
form .field .dropdown .menu > .item:not(:last-child){border-bottom:var(--border)}

form .field .dropdown .menu > .item.active{background-color:var(--Golden-Hour);}
form .field .dropdown .menu > .item:focus,
form .field .dropdown .menu > .item:hover{background-color:rgba(242, 150, 115, 0.5)}

form .selection.dropdown > .dropdown.icon{width:calc(var(--ss)*13vw); height:calc(var(--ss)*13vw); top:50%; right:calc(var(--ss)*15vw); transform:translateY(-50%); transition: transform 0.3s; background:url('/templates/tai-afon/images/shared/drop-down-arrow.svg') center / contain no-repeat; margin: 0; padding:0; opacity:1;cursor: pointer;position: absolute;z-index: 3;}
form .selection.dropdown.active > .dropdown.icon{transform:translateY(-50%) scaleY(-1);}
form .selection.dropdown > .dropdown.icon::before {display: none;}

@media(max-width:768px){
}

@media(min-width:769px){
}

@media(min-width:1441px){
	form .selection.dropdown .menu{max-height:calc(467/16*1rem); }

	form .field .dropdown .menu > .item{padding:0 calc(15/16*1rem); height:calc(45/16*1rem)}

	form .selection.dropdown > .dropdown.icon{width:calc(13/16*1rem); height:calc(13/16*1rem); right:calc(15/16*1rem);}

}


/* CHECKBOX
======================================================= */
form .chckbox{width:100%;}
form .chckbox label{display:flex;padding-left:calc(var(--ss)*45vw); font:var(--footers); margin-bottom:0; align-items:flex-start; padding-top:0; height:fit-content;}

form .chckbox label:before{position: absolute; left:0; top:0; content:''; height:calc(var(--ss)*20vw); width:calc(var(--ss)*20vw); color:var(--Rich-Steel); background:transparent; border:var(--border); z-index:1; transition:border 0.3s; display: flex; justify-content: center; align-items: center; cursor:pointer; border-radius:calc(var(--ss)*2vw)}

form .chckbox.checked label:before{ content: "✓";}

form .chckbox:after,
form .chckbox label:after{display:none;}

form .field.error .chckbox label::before{background:transparent;}
form .chckbox label a{text-decoration: underline;}

@media(max-width:768px){
    form .chckbox label{max-width:calc(var(--ss)*281vw)}
}

@media(min-width:769px){ }

@media(min-width:1441px){
	form .chckbox label{padding-left:calc(45/16*1rem);}

	form .chckbox label:before{height:calc(20/16*1rem); width:calc(20/16*1rem); border-radius:calc(2/16*1rem)}
}



/* RADIO
======================================================= */

form .radio label{ font:var(--p2); line-height: 1; padding-left:calc(var(--ss)*50vw); height:calc(var(--ss)*28vw); display:flex; align-items: center; position:relative; cursor:pointer;}
form .radio label:before{position: absolute; left:0; top:0; content:''; height:calc(var(--ss)*26vw); width:calc(var(--ss)*26vw); border-radius:0;  background:transparent; border:var(--border); z-index:1; transition:all 0.3s; cursor:pointer; }
form .radio.checked label:before{background:var(--Golden-Hour);}

@media(max-width:768px){
    form div[data-vtype="radios"] .field:not(:last-child){margin-bottom:calc(var(--ss)*14vw);}
}

@media(min-width:769px){
    form .mainfield[data-vtype="radios"] > .field{width:calc(var(--ss)*333vw)}
	
}

@media(min-width:1441px){
     form .mainfield[data-vtype="radios"] > .field{width:calc(333/16*1rem)}
    
    form .radio label{padding-left:calc(50/16*1rem); height:calc(28/16*1rem);}
    form .radio label:before{height:calc(26/16*1rem); width:calc(26/16*1rem); }
}


/* CHECKBOXES (BTN GROUP) 
======================================================= */
form div.btn-group .checkboxes label{padding: 0 calc(var(--ss)*12vw); background:transparent; color:var(--Rich-Steel); border:var(--border); font:var(--p2); transition: all 0.3s; height:calc(var(--ss)*35vw); display:flex; justify-content: center; align-items: center; border-radius:0; cursor:pointer; width:calc(var(--ss)*70vw)}
form div.btn-group .checkboxes.checked label{color:var(--Morning-Haze); background: var(--Rich-Steel)}

@media(max-width:768px){
}

@media(min-width:769px){
    form div.btn-group .checkboxes label{width:calc(var(--ss)*157vw)}
}

@media(min-width:1441px){
	form div.btn-group .checkboxes label{padding: 0 calc(12/16*1rem); height:calc(35/16*1rem); width:calc(157/16*1rem)}
}

/* BUTTON
======================================================= */
button[type="submit"]{margin-top:calc(var(--ss)*21vw); width:100%;}
.contact-form-block button[type="submit"]{margin-top:0;}

@media(max-width:768px){
}

@media(min-width:769px){
	button[type="submit"]{margin-top:calc(var(--ss)*50vw); width:calc(var(--ss)*333vw); margin-right:auto; margin-left:auto;}
    .contact-form-block button[type="submit"]{margin-left:0;}
}

@media(min-width:1441px){
	button[type="submit"]{margin-top:calc(50/16*1rem); width:calc(333/16*1rem);}
}




/*
PLACEHOLDERS :-(
========================================================== */

input::-webkit-input-placeholder { opacity:1; color:inherit !important; font:inherit;}
input::-moz-placeholder { opacity:1; color:inherit !important; font:inherit; padding:inherit; border-radius:inherit;}
input:-ms-input-placeholder { opacity:1; color:inherit !important; font:inherit; padding:inherit; border-radius:inherit;}
input:-moz-placeholder { opacity:1; color:inherit !important; font:inherit; padding:inherit; border-radius:inherit;}

textarea::-webkit-input-placeholder { opacity:1; font:inherit; color:inherit !important; padding:0;}
textarea::-moz-placeholder { opacity:1; font:inherit; color:inherit !important; padding:0; border-radius:inherit;}
textarea:-ms-input-placeholder { opacity:1; font:inherit; color:inherit !important; padding:0; border-radius:inherit;}
textarea:-moz-placeholder { opacity:1; font:inherit; color:inherit !important; padding:0; border-radius:inherit;}