/*
 * Design System - AELITA
 * components/contact-cta.css - shared "contact CTA" band (feedback buttons).
 *
 * The .formbutton buttons inside #feedback-call (forms.php and its variants)
 * open the lead forms. Redesigned as an inline action band: one primary (red)
 * and the rest secondary (outline), with icons. The band sits in the normal
 * page flow.
 *
 * The form open/close lives in js/design-system/contact-cta.js. Scope:
 * .feedbackbuttons (band) and #feedback-call .formbutton (buttons). Submit
 * buttons (.formbutton-send) are untouched.
 *
 * Consumes tokens.css only. Loaded globally (see inc/enqueue.php).
 */

/* -------------------------------------------------------------------- */
/* Band                                                                 */
/* -------------------------------------------------------------------- */
/* Higher specificity so it wins over the legacy `.feedbackbuttons` and
 * `.home .buttons_bottom` rules in main.css (which load later). */
div.feedbackbuttons.buttons_bottom {
	background-color: var(--bg-muted);
	border-top: 0;
	/* Stop the browser from auto-adjusting scroll when a form grows. */
	overflow-anchor: none;
}

#feedback-call {
	padding-block: var(--space-5);
}

/* -------------------------------------------------------------------- */
/* Buttons                                                              */
/* -------------------------------------------------------------------- */
#feedback-call .formbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	min-height: 52px;
	margin: var(--space-2) 0;
	padding: var(--space-3) var(--space-5);
	border: var(--border-w) solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: var(--fs-body); /* 16px */
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	text-transform: none;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		color var(--dur-press) var(--ease-out),
		background-color var(--dur-press) var(--ease-out),
		border-color var(--dur-press) var(--ease-out),
		transform var(--dur-press) var(--ease-out);
}

/* Icon (masked, inherits the button colour). */
#feedback-call .formbutton::before {
	content: "";
	flex: 0 0 auto;
	width: var(--space-5);  /* 20px */
	height: var(--space-5);
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

#feedback-call .formbutton.formbutton-gray::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8 8 0 0 1-8 8H8l-5 3 1.5-5A8 8 0 1 1 21 11.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8 8 0 0 1-8 8H8l-5 3 1.5-5A8 8 0 1 1 21 11.5z'/%3E%3C/svg%3E");
}

#feedback-call .formbutton.formbutton-black::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

#feedback-call .formbutton.formbutton-red::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 3.5v3M16 3.5v3M9 14l2 2 4-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 3.5v3M16 3.5v3M9 14l2 2 4-4'/%3E%3C/svg%3E");
}

#feedback-call .formbutton.formbutton-orange::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M12 9.4V3.2M9.7 13.4 4.2 16.7M14.3 13.4l5.5 3.3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M12 9.4V3.2M9.7 13.4 4.2 16.7M14.3 13.4l5.5 3.3'/%3E%3C/svg%3E");
}

/* Legacy sticker palette for the action buttons (as before the redesign). */
#feedback-call .formbutton.formbutton-gray {
	background-color: #8c98ad;
	border-color: #8c98ad;
	color: #ffffff;
}

#feedback-call .formbutton.formbutton-red {
	background-color: #ef233b;
	border-color: #ef233b;
	color: #ffffff;
}

#feedback-call .formbutton.formbutton-black {
	background-color: #1f2030;
	border-color: #1f2030;
	color: #ffffff;
}

#feedback-call .formbutton.formbutton-orange {
	background-color: #f3911f;
	border-color: #f3911f;
	color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
	#feedback-call .formbutton.formbutton-gray:hover {
		background-color: #848d9e;
		border-color: #848d9e;
		color: #ffffff;
	}

	#feedback-call .formbutton.formbutton-red:hover {
		background-color: #d82439;
		border-color: #d82439;
		color: #ffffff;
	}

	#feedback-call .formbutton.formbutton-black:hover {
		background-color: #191a27;
		border-color: #191a27;
		color: #ffffff;
	}

	#feedback-call .formbutton.formbutton-orange:hover {
		background-color: #e07f10;
		border-color: #e07f10;
		color: #ffffff;
	}
}

#feedback-call .formbutton:active {
	transform: scale(0.98);
}

#feedback-call .formbutton:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Forms: smooth expand / collapse (height driven by JS).               */
/* -------------------------------------------------------------------- */
.feedbackbuttons .feedback-form {
	--cta-form-pad: var(--space-5);
	display: block;
	height: auto;
	max-height: 0;
	margin-block: 0;
	padding-block: 0;
	overflow: hidden;
	transition:
		max-height 420ms var(--ease-out),
		padding-block 420ms var(--ease-out);
}

/* max-height is set in JS to the form's real height (no overshoot). */
.feedbackbuttons .feedback-form.is-open {
	padding-block: var(--cta-form-pad);
}

@media (prefers-reduced-motion: reduce) {
	#feedback-call .formbutton {
		transition-duration: 0.01ms;
	}

	#feedback-call .formbutton:active {
		transform: none;
	}

	.feedbackbuttons .feedback-form {
		transition-duration: 0.01ms;
	}
}