/* Custom Contact Form — public styles
   All colors/fonts/sizes come from CSS variables injected per-instance
   from the admin settings, so the structural rules below never need
   to hardcode a design value. */

/* The background blobs below intentionally bleed well past the wrapper's
   own edges — this clips only the resulting page-level overflow, not the
   blobs themselves, so it never creates a horizontal scrollbar. */
html {
	overflow-x: clip;
}

/* ==========================
   FULL-WIDTH BREAKOUT
   The theme (Betheme) renders this shortcode inside a normal content
   column that's narrower than .ccf-wrapper's max-width — no max-width
   on .ccf-wrapper itself can ever make it wider than that column
   allows. This escapes the column so .ccf-wrapper can actually reach
   its own max-width.
========================== */
.ccf-section {
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	/* horizontal-only — breaking out of the column shouldn't change the
	   vertical spacing the theme already gives this shortcode.
	   60px side gutter to match the Map Contact section. */
	padding: 0 60px !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

/* Match the Map Contact section's gutters at every breakpoint */
@media (min-width: 769px) and (max-width: 1300px) {
	.ccf-section {
		padding: 0 clamp(60px, 6vw, 100px) !important;
	}
}
@media (max-width: 768px) {
	.ccf-section {
		padding: 0 24px !important;
	}
}
@media (max-width: 480px) {
	.ccf-section {
		padding: 0 16px !important;
	}
}

.ccf-wrapper {
	width: 100%;
	/* matches .ccf-card exactly so the blobs positioned relative to this
	   element (see below) line up the same way regardless of whether
	   .ccf-section above needed to break out of a narrower column. */
	max-width: var(--ccf-max-width, 1600px);
	margin: 0 auto;
	position: relative;
	/* no overflow:hidden on desktop — blobs bleed freely in all directions */
	box-sizing: border-box;
}
.ccf-wrapper *,
.ccf-wrapper *::before,
.ccf-wrapper *::after {
	box-sizing: border-box;
}

/* ---------- decorative background blobs ----------
   Large blur radii relative to their own size so each one dissolves into
   a soft ambient tint rather than reading as a sharp, "stuck-on" circle. */
.ccf-blob {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.ccf-blob--pink {
	width: 180px;
	height: 180px;
	top: 70px;
	left: 80%;
	margin-left: -81px;
	background: #B51B5A;
	filter: blur(180px);
}

.ccf-blob--blue-mid {
	width: 200px;
	height: 300px;
	top: 36%;
	left: -137px;
	background: #35B6FF;
	filter: blur(285px);
}

.ccf-blob--blue-br {
	width: 200px;
	height: 250px;
	bottom: -26px;
	right: -70px;
	background: #87D4FF;
	filter: blur(147px);
}

.ccf-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--ccf-max-width, 1600px);
	margin: 0 auto;
	background: var(--ccf-container-bg, #fff);
	border-radius: var(--ccf-container-radius, 40px);
	box-shadow: var(--ccf-container-shadow, 0px 0px 25px 1px rgba(0,0,0,0.05));
	padding: 56px 64px;
}

.ccf-header {
	margin-bottom: 32px;
}

.ccf-heading {
	font-family: 'Syne', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	color: #191919;
	margin: 0 0 18px 0;
}

.ccf-description {
	font-family: 'Google Sans', sans-serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.4;
	color: #778AA9;
	margin: 0;
	/* max-width: 730px; */
}

/* Tabs */
.ccf-tabs-wrap {
	position: relative;
	/* 39% suits a wide desktop card, but on ~1024px-wide devices (iPad Pro,
	   Nest Hub) it left the pill too narrow for both labels — the buttons
	   shrank below their text and the two labels ran into each other. The
	   minimum keeps the pill wide enough for both labels at any width, and
	   never exceeds the card. */
	width: 39%;
	min-width: min(100%, 440px);
	margin: 32px 0 40px 0;
}

.ccf-tabs-wrap.ccf-fade-right::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 70px;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.92));
	pointer-events: none;
	border-radius: 0 160px 160px 0;
	z-index: 2;
}

.ccf-tabs-wrap.ccf-fade-left::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 70px;
	background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.92));
	pointer-events: none;
	border-radius: 160px 0 0 160px;
	z-index: 2;
}

.ccf-tabs {
	width: 100% !important;
	min-height: 73px !important;
	background: var(--ccf-tab-bg, rgba(53,182,255,0.2)) !important;
	border-radius: var(--ccf-tab-radius, 160px) !important;
	padding: 8px !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 10px !important;
	box-sizing: border-box !important;
	border: none !important;
	box-shadow: none !important;
	list-style: none !important;
	margin: 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: none !important;
	-webkit-overflow-scrolling: touch !important;
}

.ccf-tabs::-webkit-scrollbar {
	display: none !important;
}

/* Custom, JS-driven scroll-progress track instead of the native scrollbar
   — native scrollbars can't sit cleanly inside a fully rounded (stadium
   shaped) pill without clipping through the curved ends, and on touch
   devices (iOS Safari in particular) the OS fades/hides them mid-scroll
   no matter how they're styled. This track lives BELOW the pill, is
   plain markup we fully control, and stays visible in every scroll
   state. Hidden by default — only shown once tabs actually become
   scrollable (see the ≤ 991px breakpoint below). */
.ccf-tabs-scrollbar {
	display: none;
}

/* The theme (Betheme) applies its own aggressive button styling to every
   <button>, so every property here has to be forced with !important —
   otherwise its default background/color bleeds through. */
.ccf-tab,
.ccf-tab:link,
.ccf-tab:visited {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	/* Auto height + wrapping label is the belt-and-braces guarantee that the
	   two tabs can NEVER overlap: if a label can't fit its half of the pill
	   it wraps onto a second line (and the pill grows) instead of spilling
	   out of the button and colliding with its neighbour. */
	height: auto !important;
	min-height: 57px !important;
	white-space: normal !important;
	overflow-wrap: break-word !important;
	border-radius: var(--ccf-tab-radius, 160px) !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	-webkit-tap-highlight-color: transparent !important;
	text-decoration: none !important;
	font-family: 'Google Sans', var(--ccf-body-font, sans-serif) !important;
	font-size: var(--ccf-tab-font-size, 20px) !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	letter-spacing: normal !important;
	text-align: center !important;
	color: var(--ccf-tab-text, #191919) !important;
	cursor: pointer !important;
	padding: 8px 16px !important;
	margin: 0 !important;
	transition: background 0.3s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: static !important;
}

.ccf-tab::before,
.ccf-tab::after {
	display: none !important;
	content: none !important;
}

.ccf-tab:hover,
.ccf-tab:focus,
.ccf-tab:focus-visible,
.ccf-tab:active {
	color: var(--ccf-tab-text, #191919) !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

.ccf-tab.ccf-tab-active,
.ccf-tab.ccf-tab-active:hover,
.ccf-tab.ccf-tab-active:focus,
.ccf-tab.ccf-tab-active:focus-visible,
.ccf-tab.ccf-tab-active:active {
	background-color: #FFFFFF40 !important;
	background-image: none !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	color: var(--ccf-tab-text, #191919) !important;
	border: 1px solid white !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: var(--ccf-tab-radius, 160px) !important;
}

/* Form layout */
.ccf-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ccf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.ccf-row-full {
	grid-template-columns: 1fr;
}

.ccf-fields-panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ccf-fields-panel[hidden] {
	display: none;
}

.ccf-field {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ccf-label {
	font-family: var(--ccf-body-font, sans-serif);
	font-weight: 500;
	font-size: var(--ccf-label-size, 16px);
	color: var(--ccf-label-color, #1E1E1E);
}

.ccf-required {
	color: var(--ccf-required-color, #FF4B4B);
	margin-left: 2px;
}

.ccf-input-wrap {
	position: relative;
	display: flex !important;
	align-items: center !important;
	background: var(--ccf-input-bg, #FAFAFA);
	border-radius: var(--ccf-input-radius, 52px);
	height: 58px;
	padding: 0 22px;
	/* space between the leading icon and the field text / placeholder */
	gap: 20px;
}

.ccf-input-wrap.ccf-textarea-wrap {
	border-radius: var(--ccf-textarea-radius, 22px);
	height: auto;
	align-items: flex-start;
	padding: 20px 22px 18px;
}

.ccf-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	color: var(--ccf-icon-color, #1E1E1E);
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	line-height: 0;
}

.ccf-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ccf-icon-text {
	font-family: var(--ccf-body-font, sans-serif);
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
}

.ccf-icon-arrow {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	transition: transform 0.2s ease;
	pointer-events: none;
}

.ccf-input-wrap.ccf-dropdown-active .ccf-icon-arrow {
	transform: translateY(-50%) rotate(180deg);
}

.ccf-input-wrap input[type="text"],
.ccf-input-wrap input[type="email"],
.ccf-input-wrap input[type="tel"],
.ccf-input-wrap select,
.ccf-input-wrap textarea {
	flex: 1 !important;
	height: 100% !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	font-family: var(--ccf-body-font, sans-serif) !important;
	font-weight: 400 !important;
	font-size: var(--ccf-placeholder-size, 14px) !important;
	line-height: 1.4 !important;
	color: var(--ccf-input-text, #1E1E1E) !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

/* Neutralize the browser autofill background. The <input> is transparent and
   the visible background lives on .ccf-input-wrap, but Chrome/Safari paint
   their own autofill background directly on the input. There is no property to
   turn that off, so repaint it with the wrap's own background colour via a
   full-cover inset box-shadow — autofilled fields then look identical to
   normal ones. The long transition keeps the tint from flashing in. */
.ccf-input-wrap input:-webkit-autofill,
.ccf-input-wrap input:-webkit-autofill:hover,
.ccf-input-wrap input:-webkit-autofill:focus,
.ccf-input-wrap input:-webkit-autofill:active,
.ccf-input-wrap textarea:-webkit-autofill,
.ccf-input-wrap select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--ccf-input-bg, #FAFAFA) inset !important;
	        box-shadow: 0 0 0 1000px var(--ccf-input-bg, #FAFAFA) inset !important;
	-webkit-text-fill-color: var(--ccf-input-text, #1E1E1E) !important;
	caret-color: var(--ccf-input-text, #1E1E1E) !important;
	transition: background-color 100000s ease-in-out 0s !important;
}

/* The theme applies its own colored (blue/pink) border or outline to form
   fields on hover/focus — force it back to neutral/invisible on every state. */
.ccf-input-wrap input,
.ccf-input-wrap select,
.ccf-input-wrap textarea,
.ccf-dropdown-trigger,
.ccf-input-wrap input:hover,
.ccf-input-wrap input:focus,
.ccf-input-wrap select:hover,
.ccf-input-wrap select:focus,
.ccf-input-wrap textarea:hover,
.ccf-input-wrap textarea:focus,
.ccf-dropdown-trigger:hover,
.ccf-dropdown-trigger:focus,
.ccf-dropdown-trigger:focus-visible {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background-color: transparent !important;
}

.ccf-input-wrap textarea {
	height: auto !important;
	resize: none;
	min-height: 110px;
	line-height: 1.5 !important;
	padding-top: 2px !important;
}

.ccf-input-wrap select.ccf-select {
	padding-right: 24px;
	cursor: pointer;
}

.ccf-input-wrap input::placeholder,
.ccf-input-wrap textarea::placeholder {
	color: var(--ccf-placeholder-color, #778AA9);
	font-size: var(--ccf-placeholder-size, 14px);
	font-family: var(--ccf-body-font, sans-serif);
	line-height: 1.5;
	opacity: 1;
}

.ccf-input-wrap select:invalid {
	color: var(--ccf-placeholder-color, #778AA9);
}

/* Visually hide the native <select> once it's been swapped for the custom
   dropdown below — it stays in the DOM so its name/value still submits.
   Selector is deliberately more specific than ".ccf-input-wrap select" above
   so its 1px sizing always wins regardless of !important + specificity ties. */
select.ccf-select.ccf-select-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Custom dropdown trigger (replaces the native select's closed state).
   The theme's global button rules (padding, line-height, display) win on
   specificity/!important in some themes, which pushes the label out of
   vertical center — every layout property here must carry !important. */
.ccf-dropdown-trigger {
	flex: 1 !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	background: transparent !important;
	font-family: var(--ccf-body-font, sans-serif) !important;
	font-weight: 400 !important;
	font-size: var(--ccf-placeholder-size, 14px) !important;
	line-height: 1.4 !important;
	text-align: left !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
}

/* Firefox adds an unremovable inner focus border/padding to <button> that
   normal padding:0 can't override, throwing off vertical centering. */
.ccf-dropdown-trigger::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* The theme's default button/link hover color (usually white) bleeds through
   unless every color state here is forced back to our own palette. */
.ccf-dropdown-trigger,
.ccf-dropdown-trigger:hover,
.ccf-dropdown-trigger:focus,
.ccf-dropdown-trigger:focus-visible,
.ccf-dropdown-trigger:active {
	color: var(--ccf-input-text, #1E1E1E) !important;
}

.ccf-dropdown-trigger.ccf-dropdown-placeholder,
.ccf-dropdown-trigger.ccf-dropdown-placeholder:hover,
.ccf-dropdown-trigger.ccf-dropdown-placeholder:focus,
.ccf-dropdown-trigger.ccf-dropdown-placeholder:focus-visible,
.ccf-dropdown-trigger.ccf-dropdown-placeholder:active {
	color: var(--ccf-placeholder-color, #778AA9) !important;
}

.ccf-dropdown-trigger:disabled {
	cursor: not-allowed;
}

.ccf-dropdown-label {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Custom dropdown menu (replaces the native select's popup list) */
.ccf-dropdown-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 16px 40px rgba(17, 24, 39, 0.14);
	padding: 8px;
	margin: 0;
	/* The menu itself no longer scrolls — .ccf-dropdown-list does, so the
	   search box stays pinned at the top instead of scrolling out of view. */
	overflow: hidden;
	z-index: 30;
}

.ccf-dropdown-menu[hidden] {
	display: none;
}

/* The spare-captcha payload. Browsers already hide <script>, but .ccf-field is
   a flex column with a gap — a theme reset that made scripts visible would add
   a phantom row here. */
.ccf-captcha-pool {
	display: none !important;
}

/* Type-to-filter box inside the menu (added for lists of 6+ options). */
.ccf-dropdown-search {
	padding: 2px 2px 8px;
}

/* Three classes + the type selector: has to out-rank
   `.ccf-input-wrap input[type="text"]` above, whose !important padding:0 /
   transparent background would otherwise flatten this box. */
.ccf-input-wrap .ccf-dropdown-menu input.ccf-dropdown-search-input,
.ccf-input-wrap .ccf-dropdown-menu input.ccf-dropdown-search-input:hover,
.ccf-input-wrap .ccf-dropdown-menu input.ccf-dropdown-search-input:focus {
	width: 100% !important;
	height: 38px !important;
	flex: none !important;
	padding: 0 14px !important;
	margin: 0 !important;
	border: 1px solid #E7EAEF !important;
	border-radius: 12px !important;
	background: #FAFAFA !important;
	background-color: #FAFAFA !important;
	font-family: var(--ccf-body-font, sans-serif) !important;
	font-size: var(--ccf-placeholder-size, 14px) !important;
	color: var(--ccf-input-text, #1E1E1E) !important;
	outline: none !important;
	box-shadow: none !important;
}

.ccf-input-wrap .ccf-dropdown-menu input.ccf-dropdown-search-input:focus {
	border-color: #C9D4E0 !important;
}

.ccf-dropdown-list {
	max-height: 210px;
	overflow-y: auto;
}

.ccf-dropdown-empty {
	padding: 13px 18px;
	font-family: var(--ccf-body-font, sans-serif);
	font-size: var(--ccf-placeholder-size, 14px);
	color: var(--ccf-placeholder-color, #778AA9);
}

.ccf-dropdown-empty[hidden],
.ccf-dropdown-option[hidden] {
	display: none;
}

/* ------------------------------------------------------------------------
   Conditional "Please specify" field
   Sits inside the dropdown's own .ccf-field, directly beneath it — no label,
   same pill, same column. It carries no leading icon, so its text is indented
   to where an icon'd field's text starts (22px wrap padding + 24px icon +
   20px gap) and the two line up exactly.
   ------------------------------------------------------------------------ */
.ccf-input-wrap.ccf-other-wrap {
	padding-left: calc(22px + 24px + 20px);
	/* .ccf-field's own 12px gap + this = the breathing room in the design */
	margin-top: 6px;
}

/* ≤480px the wrap's own padding and gap shrink (16px / 14px) — track them so
   the indent keeps matching the field above. */
@media (max-width: 480px) {
	.ccf-input-wrap.ccf-other-wrap {
		padding-left: calc(16px + 24px + 14px);
	}
}

/* .ccf-row is a grid and .ccf-input-wrap is `display: flex !important` —
   both would ignore a plain `hidden` attribute without these. */
.ccf-row[hidden],
.ccf-input-wrap[hidden] {
	display: none !important;
}

.ccf-dropdown-option {
	padding: 13px 18px;
	border-radius: 14px;
	font-family: var(--ccf-body-font, sans-serif);
	font-weight: 400;
	font-size: var(--ccf-placeholder-size, 14px);
	color: var(--ccf-input-text, #1E1E1E);
	cursor: pointer;
	transition: background 0.15s ease;
}

.ccf-dropdown-option:hover,
.ccf-dropdown-option:focus-visible {
	background: #F1F2F4;
}

.ccf-dropdown-option.ccf-dropdown-option-selected {
	background: #EAEBEE;
	font-weight: 600;
}

/* ==========================
   Submit Button
========================== */

.ccf-submit-btn,
.ccf-submit-btn:link,
.ccf-submit-btn:visited {
	position: relative !important;
	overflow: hidden !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;

	width: 348px !important;
	max-width: 100% !important;
	height: 74px !important;
	padding: 0 32px !important;
	margin-top: 8px !important;
	align-self: flex-start !important;

	border: none !important;
	outline: none !important;
	border-radius: 60px !important;

	background: linear-gradient(240.87deg, #EDF8FF 4.57%, #35B6FF 106.19%) !important;

	box-shadow: none !important;

	font-family: "Syne", sans-serif !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-decoration: none !important;

	color: #191919 !important;
	cursor: pointer !important;

	transition: transform .25s ease, filter .25s ease !important;

	-webkit-appearance: none !important;
	appearance: none !important;
}

.ccf-submit-btn span{
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	color: #191919 !important;
}

/* SVG Arrow */

.ccf-submit-btn svg{
	width: 18px !important;
	height: 14px !important;
	min-width: 18px !important;
	min-height: 14px !important;

	display: block !important;
	flex-shrink: 0 !important;

	color: #191919 !important;
	fill: #191919 !important;
}

.ccf-submit-btn svg path{
	fill: #191919 !important;
}

/* Hover */

.ccf-submit-btn:hover,
.ccf-submit-btn:focus,
.ccf-submit-btn:focus-visible,
.ccf-submit-btn:active{
	background: linear-gradient(240.87deg, #EDF8FF 4.57%, #35B6FF 106.19%) !important;
	color: #191919 !important;

	border: none !important;
	outline: none !important;
	box-shadow: none !important;

	transform: translateY(-2px) !important;
	filter: brightness(1.03) !important;
	text-decoration: none !important;
}

.ccf-submit-btn:hover span,
.ccf-submit-btn:focus span,
.ccf-submit-btn:active span{
	color: #191919 !important;
}

.ccf-submit-btn:hover svg path,
.ccf-submit-btn:focus svg path,
.ccf-submit-btn:active svg path{
	fill: #191919 !important;
}

.ccf-submit-btn:disabled{
	opacity:.6 !important;
	cursor:not-allowed !important;
	transform:none !important;
}

/* Click ripple, added dynamically by JS on each click. */
.ccf-submit-btn .ccf-btn-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,0.6);
	transform: scale(0);
	animation: ccf-ripple-anim 0.6s ease-out;
	pointer-events: none;
}

@keyframes ccf-ripple-anim {
	to {
		transform: scale(2.5);
		opacity: 0;
	}
}

.ccf-form-message {
	font-family: var(--ccf-body-font, sans-serif);
	font-size: 15px;
	min-height: 0;
}

.ccf-form-message.ccf-success {
	color: #1AA260;
}

.ccf-form-message.ccf-error {
	color: #E0433C;
}

.ccf-field.ccf-invalid .ccf-input-wrap {
	box-shadow: 0 0 0 2px #E0433C;
}

.ccf-field-error {
	font-family: var(--ccf-body-font, sans-serif);
	font-size: 14px;
	font-weight: 700;
	color: #E0433C;
	margin: 0;
	padding: 0 4px;
}

/* Image captcha (Really Simple Captcha) */
.ccf-captcha-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.ccf-captcha-img {
	display: block;
	width: 110px;
	height: 40px;
	border-radius: var(--ccf-input-radius, 8px);
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	padding: 2px 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ccf-captcha-refresh {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--ccf-icon-color, #1FABDD);
	background: rgba(31, 171, 221, 0.10);
	transition: background 0.2s ease, transform 0.4s ease;
}

.ccf-captcha-refresh:hover {
	background: rgba(31, 171, 221, 0.20);
}

.ccf-captcha-refresh:active svg {
	transform: rotate(-180deg);
}

.ccf-captcha-refresh svg {
	transition: transform 0.4s ease;
}

.ccf-captcha-input {
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Responsive */
@media (max-width: 991px) {
	.ccf-tabs-wrap {
		/* The 39% desktop width was sized for a wide desktop card — at
		   tablet widths it leaves the pill cramped with both tab labels
		   crowded together. Give it the full row like mobile does. */
		width: 100%;
	}
	.ccf-tabs {
		padding: 7px !important;
		gap: 8px !important;
	}
	.ccf-tab {
		/* Both tabs still share the row and stretch to fill it (same as
		   desktop) — at tablet width there's still room for both, so no
		   scrolling/scrollbar is needed here (that only kicks in on
		   mobile — see the 767px breakpoint below). */
		flex: 1 1 0% !important;
		height: auto !important;
		min-height: 52px !important;
		font-size: 17px !important;
		padding: 8px 16px !important;
	}

	/* Large tablet / small laptop — a gentle first step down from the full
	   desktop blobs (~80% scale), still full opacity since there's still
	   plenty of room around the card at this width. */
	.ccf-blob--pink {
		width: 144px;
		height: 144px;
		top: 56px;
		left: 80%;
		margin-left: -65px;
		filter: blur(144px);
	}
	.ccf-blob--blue-mid {
		width: 160px;
		height: 240px;
		top: 36%;
		left: -110px;
		filter: blur(228px);
	}
	.ccf-blob--blue-br {
		width: 160px;
		height: 200px;
		bottom: -21px;
		right: -56px;
		filter: blur(118px);
	}
}

@media (max-width: 900px) {
	.ccf-card {
		padding: 32px 24px;
		border-radius: 24px;
	}
	.ccf-row {
		grid-template-columns: 1fr;
	}
	.ccf-submit-btn {
		width: 100%;
	}

	/* Tablet portrait — blobs pulled fully inside the wrapper's own edges
	   (on narrow viewports the wrapper sits close to the page edge, so a
	   bleeding blob risks a horizontal scrollbar). ~55% scale, and lighter
	   (opacity) so they read as a soft ambient tint rather than a bold
	   sticker at this size. */
	.ccf-wrapper {
		overflow-x: clip;
	}
	.ccf-blob {
		opacity: 0.6;
	}
	.ccf-blob--pink {
		width: 100px;
		height: 100px;
		top: 38px;
		left: 80%;
		margin-left: -45px;
		filter: blur(100px);
	}
	.ccf-blob--blue-mid {
		width: 110px;
		height: 165px;
		top: 36%;
		left: -75px;
		filter: blur(155px);
	}
	.ccf-blob--blue-br {
		width: 110px;
		height: 138px;
		bottom: -14px;
		right: -39px;
		filter: blur(81px);
	}
}

@media (max-width: 767px) {
	.ccf-tabs-wrap {
		width: 100%;
	}
	.ccf-tabs {
		min-height: 60px !important;
		padding: 6px !important;
		gap: 6px !important;
	}
	.ccf-tab {
		/* Both tabs stay side by side and share the row; the label wraps to a
		   second line when it doesn't fit instead of overflowing — so the tab
		   bar never scrolls and no scroll track is ever needed on any device. */
		flex: 1 1 0% !important;
		height: auto !important;
		min-height: 46px !important;
		font-size: 14px !important;
		line-height: 1.15 !important;
		padding: 6px 10px !important;
		white-space: normal !important;
	}
	/* Tabs never scroll now → the custom scroll-progress track stays hidden. */
	.ccf-tabs-scrollbar {
		display: none !important;
	}

	/* Mobile — smaller and lighter again (~42% of desktop, opacity 0.55). */
	.ccf-blob {
		opacity: 0.55;
	}
	.ccf-blob--pink {
		width: 76px;
		height: 76px;
		top: 29px;
		left: 80%;
		margin-left: -34px;
		filter: blur(76px);
	}
	.ccf-blob--blue-mid {
		width: 84px;
		height: 126px;
		top: 36%;
		left: -58px;
		filter: blur(120px);
	}
	.ccf-blob--blue-br {
		width: 84px;
		height: 105px;
		bottom: -11px;
		right: -29px;
		filter: blur(62px);
	}
}

@media (max-width: 480px) {
	.ccf-card {
		padding: 24px 18px;
		border-radius: 18px;
	}
	.ccf-heading {
		font-size: 26px;
	}
	.ccf-description {
		font-size: 14px;
	}
	.ccf-input-wrap {
		height: 52px;
		padding: 0 16px;
		gap: 14px;
	}
	.ccf-input-wrap.ccf-textarea-wrap {
		padding: 16px;
	}
	.ccf-submit-btn {
		height: 58px;
		font-size: 17px;
		gap: 8px;
	}

	/* Small mobile — smallest and lightest tier (~32% of desktop,
	   opacity 0.5) so the blobs stay a subtle background hint even on
	   the smallest phones instead of competing with the compact card. */
	.ccf-blob {
		opacity: 0.5;
	}
	.ccf-blob--pink {
		width: 58px;
		height: 58px;
		top: 22px;
		left: 80%;
		margin-left: -26px;
		filter: blur(58px);
	}
	.ccf-blob--blue-mid {
		width: 64px;
		height: 96px;
		top: 36%;
		left: -44px;
		filter: blur(91px);
	}
	.ccf-blob--blue-br {
		width: 64px;
		height: 80px;
		bottom: -8px;
		right: -22px;
		filter: blur(47px);
	}
}

/* ==========================
   SCROLL-REVEAL — "Field cascade" entrance
   Premium, slow entrance driven by public-script.js: `ccf-reveal` is added
   to .ccf-wrapper ASAP (pre-hidden state), then `ccf-in` is added once the
   form scrolls into view. Heading + enquiry tabs rise first, then each field
   row rises top-to-bottom staggered, submit button last.

   SAFETY: opacity + transform (translateY) ONLY — no filter/blur, so the
   bordered field wraps and their autofill repaint are untouched. Nothing here
   changes layout box sizes, so there is no layout shift, and the transform is
   removed entirely once the cascade settles (JS drops both classes), so it
   never becomes a containing block for the open-dropdown/absolute children.
========================== */

/* Heading + field rows: rise with a subtle scale-settle. */
.ccf-reveal .ccf-header,
.ccf-reveal .ccf-row {
	opacity: 0;
	transform: translateY(30px) scale(0.985);
	transition:
		opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

/* Heading also focuses in from a soft blur (adds `filter` to its transition). */
.ccf-reveal .ccf-header {
	filter: blur(8px);
	transition:
		opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
		filter 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Enquiry tabs: OPACITY-ONLY fade — never transformed or layer-promoted.
   The active tab uses `backdrop-filter: blur()`; animating a transform on this
   ancestor changes the filter's backdrop root and makes the active tab visibly
   shift colour during the entrance. Fading opacity only keeps the active tab's
   colour rock-steady. (No `will-change: transform` here on purpose.) */
.ccf-reveal .ccf-tabs-wrap {
	opacity: 0;
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The submit button carries a base `transition: ... !important` (for its hover
   lift), so its reveal transition must also be !important to win while
   `ccf-reveal` is set. JS removes `ccf-reveal` after the cascade, handing the
   fast hover transition back. Delay folded into the shorthand so !important
   doesn't reset it to 0. */
.ccf-reveal .ccf-submit-btn {
	opacity: 0 !important;
	transform: translateY(30px) scale(0.985) !important;
	transition:
		opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1) 1.02s,
		transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) 1.02s !important;
	will-change: opacity, transform;
}

/* Staggered cascade — heading, then tabs, then rows top-to-bottom.
   nth-child is scoped within each .ccf-fields-panel (rows are its only
   children), so both the General and Project panels cascade identically. */
.ccf-reveal .ccf-header    { transition-delay: 0.05s; }
.ccf-reveal .ccf-tabs-wrap { transition-delay: 0.20s; }
.ccf-reveal .ccf-row:nth-child(1) { transition-delay: 0.34s; }
.ccf-reveal .ccf-row:nth-child(2) { transition-delay: 0.46s; }
.ccf-reveal .ccf-row:nth-child(3) { transition-delay: 0.58s; }
.ccf-reveal .ccf-row:nth-child(4) { transition-delay: 0.70s; }
.ccf-reveal .ccf-row:nth-child(5) { transition-delay: 0.82s; }
.ccf-reveal .ccf-row:nth-child(6) { transition-delay: 0.94s; }

/* Revealed state (source-ordered after the hidden rules so it wins the tie). */
.ccf-in .ccf-header,
.ccf-in .ccf-row {
	opacity: 1;
	transform: none;
}
.ccf-in .ccf-header    { filter: blur(0); }
.ccf-in .ccf-tabs-wrap { opacity: 1; }
.ccf-in .ccf-submit-btn {
	opacity: 1 !important;
	transform: none !important;
}

/* Reduced-motion: belt-and-suspenders. Keep everything visible and static. */
@media (prefers-reduced-motion: reduce) {
	.ccf-reveal .ccf-header,
	.ccf-reveal .ccf-tabs-wrap,
	.ccf-reveal .ccf-row,
	.ccf-reveal .ccf-submit-btn {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}