@charset "utf-8";
/* ==========================================================================
   CONTACT FORM - nikicassar.com
   Loaded by contact-us.php only, after core.css and mobile.css,
   so nothing here affects any other page or form on the site.
   ========================================================================== */

form.contactform {
	max-width:560px;
	margin:10px 0px 40px 0px;
	padding:28px 30px 26px 30px;
	background:#FAF7FC;
	border:1px solid #E4D8EC;
	border-radius:12px;
	box-sizing:border-box;
}

form.contactform .cf-row {
	margin:0px 0px 18px 0px;
}

form.contactform label {
	display:block;
	margin:0px 0px 6px 0px;
	color:#333333;
	font-size:12pt;
	font-weight:600;
	line-height:1.3;
}

form.contactform .cf-req {
	color:#843FA1;
}


/* ---------- Fields ---------- */

form.contactform input[type="text"],
form.contactform input[type="email"],
form.contactform input[type="tel"],
form.contactform select,
form.contactform textarea {
	display:block;
	width:100%;
	box-sizing:border-box;
	margin:0px;
	padding:10px 12px;
	background-color:#FFFFFF;
	border:1px solid #CDBFD8;
	border-radius:6px;
	color:#333333;
	font-size:12pt;
	line-height:1.4;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	transition:border-color .15s ease, box-shadow .15s ease;
}

form.contactform input:focus,
form.contactform select:focus,
form.contactform textarea:focus {
	border-color:#843FA1;
	box-shadow:0 0 0 3px rgba(132,63,161,0.15);
	outline:none;
}

form.contactform select {
	padding-right:34px;
	cursor:pointer;
	/* small purple arrow */
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23843FA1' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:12px 8px;
}

form.contactform textarea {
	min-height:170px;
	resize:vertical;
}

form.contactform ::placeholder {
	color:#9A9A9A;
	opacity:1;
}


/* ---------- Mobile No: country code + number on one line ---------- */

form.contactform .cf-phone {
	display:flex;
	gap:10px;
}

form.contactform .cf-phone select {
	flex:0 0 40%;
	width:40%;
	text-overflow:ellipsis;
}

form.contactform .cf-phone input {
	flex:1 1 auto;
	min-width:0;
}


/* ---------- reCAPTCHA + Send button ---------- */

form.contactform .captchawrap {
	padding:4px 0px 0px 0px;
	margin:0px 0px 20px 0px;
}

form.contactform .cf-submit {
	display:inline-block;
	padding:12px 38px;
	background:#8B52A4;
	border:0;
	border-radius:8px;
	color:#FFFFFF;
	font-size:13pt;
	font-weight:600;
	cursor:pointer;
	transition:background .15s ease;
}

form.contactform .cf-submit:hover,
form.contactform .cf-submit:focus {
	background:#6F3C87;
}

form.contactform .cf-submit:focus {
	box-shadow:0 0 0 3px rgba(132,63,161,0.25);
	outline:none;
}


/* ---------- Validation messages (Parsley) ---------- */

form.contactform input.parsley-error,
form.contactform select.parsley-error,
form.contactform textarea.parsley-error {
	border-color:#B94A48;
	background-color:#FDF5F5;
}

form.contactform .parsley-errors-list {
	margin:6px 0px 0px 0px;
	padding:0px;
	list-style:none;
}

form.contactform .parsley-errors-list li {
	margin:0px;
	padding:0px;
	color:#B94A48;
	font-size:11pt;
	line-height:1.3;
}


/* ---------- Phones ---------- */

@media only screen and (max-width: 698px) {

	form.contactform {
		max-width:none;
		padding:20px 16px 20px 16px;
	}

	form.contactform .cf-phone select {
		flex-basis:46%;
		width:46%;
	}

}