/**
 * Consultation Intro widget styles.
 *
 * Figma reference:
 * https://www.figma.com/design/UFbyQSXqjJ3fkYXo3ORgO7/Wellenreiten-2026-Handoff-Ext--Copy-?node-id=70-14107
 *
 * 'Archivo' (Figma's heading font) is not enqueued anywhere else in the
 * theme, so it is loaded as a dependency of this stylesheet (see
 * functions.php); body copy reuses the theme's --font-family stack.
 *
 * .wrci-panel is the outer rounded/tinted "Container" from Figma,
 * holding two stacked sections: .wrci-top (the photo/heading/badges,
 * tinted — inherits the panel's own background) and .wrci-form (the
 * embedded WPForms form, white). The form markup itself comes from
 * WPForms' own `wpforms_display()` (see class-scg-consultation-intro.php)
 * — the rules below only re-skin its standard field/submit classes to
 * match Figma, they don't define any form structure.
 */
.wrci-panel {
	--wrci-heading-font: 'Archivo', var(--font-family, 'Source Sans 3'), Arial, Helvetica, sans-serif;
	--wrci-body-font: var(--font-family, 'Source Sans 3'), Arial, Helvetica, sans-serif;
	--wrci-border: rgba(0, 0, 0, 0.1);
	--wrci-text-primary: #171717;
	--wrci-text-tertiary: #525252;
	--wrci-text-placeholder: #737373;
	--wrci-tint-bg: #ebf5f5;
	--wrci-brand: #0f4c81;
	--wrci-radius: 16px;

	display: flex;
	flex-direction: column;
	background: var(--wrci-tint-bg);
	border: 1px solid var(--wrci-border);
	border-radius: var(--wrci-radius);
	overflow: hidden;
}

.wrci-top {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	padding: 40px;
}

.wrci-photo {
	flex: 0 0 177px;
	width: 177px;
	height: 175px;
	border-radius: 100px;
	border: 2px solid #ffffff;
	overflow: hidden;
}

.wrci-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wrci-content {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wrci-title {
	margin: 0;
	font: 700 36px/44px var(--wrci-heading-font);
	letter-spacing: -0.02em;
	color: var(--wrci-text-primary);
}

.wrci-intro {
	margin: 0;
	font: 400 18px/28px var(--wrci-body-font);
	color: var(--wrci-text-tertiary);
}

.wrci-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

.wrci-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 30px;
	background: #ffffff;
	border: 1px solid var(--wrci-border);
	border-radius: 16px;
	padding: 2px 12px 2px 8px;
}

.wrci-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 14px;
	color: var(--wrci-text-tertiary);
}

/* Elementor renders these as inline <svg>, which fills the 20px badge
   box by default instead of sitting as a smaller 14px glyph inside it. */
.wrci-badge__icon svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.wrci-badge__text {
	font: 600 16px/24px var(--wrci-body-font);
	color: var(--wrci-text-tertiary);
	white-space: nowrap;
}

/* Figma "Formular": white background, full width, its own padding —
   separate from .wrci-top's tinted background above it. */
.wrci-form {
	width: 100%;
	background: #ffffff;
	padding: 40px 48px;
	box-sizing: border-box;
}

.wrci-form .wpforms-container {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Figma fields have no visible border-radius/label styling beyond the
   input itself — WPForms keeps its own label markup (and whatever
   visibility the form's own field settings choose), this just brings
   the label's type in line with the rest of the panel's body copy. */
.wrci-form .wpforms-field-label {
	font: 600 14px/20px var(--wrci-body-font);
	color: var(--wrci-text-primary);
}

/* Figma "Input": white bg, 1px #d4d4d4 border, 8px radius, shadow-xs,
   14px/10px padding, 16px/24px Source Sans 3 text — applied broadly
   across every WPForms field type's actual form control rather than
   assuming a specific field set, since the editor picks which WPForms
   form (and which fields it has) via the "Formular" control. */
.wrci-form .wpforms-field input[type='text'],
.wrci-form .wpforms-field input[type='email'],
.wrci-form .wpforms-field input[type='tel'],
.wrci-form .wpforms-field input[type='number'],
.wrci-form .wpforms-field input[type='date'],
.wrci-form .wpforms-field input[type='url'],
.wrci-form .wpforms-field select,
.wrci-form .wpforms-field textarea {
	width: 100%;
	background: #ffffff;
	border: 1px solid #d4d4d4;
	border-radius: 8px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	padding: 10px 14px;
	font: 400 16px/24px var(--wrci-body-font);
	color: var(--wrci-text-primary);
	box-sizing: border-box;
}

.wrci-form .wpforms-field input::placeholder,
.wrci-form .wpforms-field textarea::placeholder {
	color: var(--wrci-text-placeholder);
}

/* Figma "Buttons/Button": brand-blue background, 56px height, white
   bold text, centered (420px wide on desktop, full-width below that). */
.wrci-form .wpforms-submit-container {
	display: flex;
	justify-content: center;
	width: 100%;
}

.wrci-form .wpforms-submit {
	width: 100%;
	max-width: 420px;
	height: 56px;
	background: var(--wrci-brand);
	border: 0;
	border-radius: 8px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	padding: 12px 18px;
	font: 700 18px/28px var(--wrci-body-font);
	color: #ffffff;
	cursor: pointer;
}

@media (max-width: 640px) {
	.wrci-top {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 24px;
	}

	.wrci-title {
		font-size: 28px;
		line-height: 34px;
	}

	.wrci-badges {
		justify-content: center;
	}

	.wrci-form {
		padding: 24px;
	}
}