/* Shared popup look for Custom Forms Manager modals (Careers — Open Roles, Contact — Contact Cards).
 * Wrap the modals in .cew-cfm-skin; colours come from --cew-skin-* variables. */
.cew-cfm-skin{
	--cew-skin-bg:#FAFBF8;
	--cew-skin-backdrop:rgba(0,0,0,.22);
	--cew-skin-btn:#023820;
	--cew-skin-btn-color:#FFFFFF;
	--cew-skin-w:600px;
	font-family:"PP Neue Montreal",Arial,sans-serif;
}
.cew-cfm-skin *,.cew-cfm-skin *::before,.cew-cfm-skin *::after{box-sizing:border-box}
.cew-cfm-skin .cfm-modal{align-items:center;padding:24px 16px}
.cew-cfm-skin .cfm-modal-backdrop{background:var(--cew-skin-backdrop)}
.cew-cfm-skin .cfm-modal-dialog{
	width:min(var(--cew-skin-w),100%)!important;
	max-height:calc(100vh - 48px);
	padding:24px;
	background:var(--cew-skin-bg);
	box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.cew-cfm-skin .cfm-modal-close{top:10px;right:10px;color:#4B4B4B}
.cew-cfm-skin .cfm-form-title{margin:0 36px 16px;color:#000;font-family:inherit;font-size:24px;font-weight:400;line-height:1.2;text-align:center}
.cew-cfm-skin .cfm-form-grid{gap:6px 8px}
.cew-cfm-skin .cfm-field{gap:8px}
.cew-cfm-skin .cfm-field > label{color:#000;font-family:inherit;font-size:14px;font-weight:400;line-height:20px}
.cew-cfm-skin .cfm-required{display:none}
.cew-cfm-skin .cfm-field input:not([type="checkbox"]):not([type="file"]),
.cew-cfm-skin .cfm-field select,
.cew-cfm-skin .cfm-field textarea{
	height:40px;
	min-height:40px;
	padding:0 16px;
	border:1px solid #E8E8E8;
	border-radius:0;
	background-color:#fff;
	color:#111;
	font-family:inherit;
	font-size:14px;
	line-height:20px;
	box-shadow:none;
}
.cew-cfm-skin .cfm-field textarea{height:116px;min-height:116px;padding:10px 16px;resize:vertical}
.cew-cfm-skin .cfm-field input::placeholder,
.cew-cfm-skin .cfm-field textarea::placeholder{color:#727272;opacity:1}
.cew-cfm-skin .cfm-field select{
	-webkit-appearance:none;
	appearance:none;
	padding-right:36px;
	color:#727272;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234B4B4B' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 14px center;
	background-size:12px 12px;
	cursor:pointer;
}
.cew-cfm-skin .cfm-field select:valid{color:#111}
.cew-cfm-skin .cfm-field input:focus,
.cew-cfm-skin .cfm-field select:focus,
.cew-cfm-skin .cfm-field textarea:focus{border-color:var(--cew-skin-btn);outline:none}
/* phone: +20 ⌄ inside the field */
.cew-cfm-skin .cfm-phone{height:40px;min-height:40px;border:1px solid #E8E8E8;background:#fff}
.cew-cfm-skin .cfm-phone:focus-within{border-color:var(--cew-skin-btn)}
.cew-cfm-skin .cfm-field .cfm-phone select.cfm-phone-code{
	height:38px!important;
	padding:0 20px 0 12px;
	color:#111;
	background-position:right 6px center;
	background-size:9px 9px;
}
.cew-cfm-skin .cfm-field .cfm-phone input{height:38px!important;padding-left:6px}
/* upload */
.cew-cfm-skin .cfm-file-control{
	position:relative;
	gap:10px;
	height:40px;
	min-height:40px;
	padding:0 12px;
	border:1px solid #E8E8E8;
	background:#fff;
}
.cew-cfm-skin .cfm-file-control::before{
	content:"";
	flex:none;
	width:16px;
	height:16px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 10.5V2.5M5 5.5l3-3 3 3M2.5 10v3h11v-3' fill='none' stroke='%234B4B4B' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.cew-cfm-skin .cfm-file-text{color:#727272;font-size:14px}
/* buttons */
.cew-cfm-skin .cfm-submit-button{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:48px;
	margin-top:16px;
	border:0;
	border-radius:0;
	background:var(--cew-skin-btn);
	color:var(--cew-skin-btn-color);
	font-family:inherit;
	font-size:14px;
	font-weight:400;
	transition:filter .2s ease;
}
.cew-cfm-skin .cfm-submit-button:hover{filter:brightness(1.25)}
.cew-cfm-skin .cfm-back-button{font-family:inherit;color:#4B4B4B}
.cew-cfm-skin .cfm-form-response{min-height:0;margin:0}
.cew-cfm-skin .cfm-form-response:not(:empty){margin-top:12px;font-size:13px}

@media(max-width:620px){
	.cew-cfm-skin .cfm-modal{align-items:flex-start}
	.cew-cfm-skin .cfm-modal-dialog{padding:20px 16px}
	.cew-cfm-skin .cfm-form-title{font-size:20px}
}