/*
 * Forms — Fluent Forms field + submit appearance.
 *
 * Only the visual treatment for fields and the submit button (color,
 * spacing, borders, typography) — no layout. Fluent Forms' core + default
 * skin still handle structure/columns. Scoped to `.frm-fluent-form` with
 * an extra descendant/compound class so these rules out-specify the skin's
 * `.ff-default .ff-el-form-control` / `.ff-default .ff_btn_style` (0,2,0).
 *
 * Ported from the former services.css `.service-form__body` block.
 * Non-tokenised literals (flag for later promotion): field background
 * #e9e9e9, field border #c3c3c3, field text #424242, focus background
 * #fff, submit hover #a91f3f.
 */

/* --- Fields -------------------------------------------------- */
.frm-fluent-form .ff-el-input--content .ff-el-form-control {
	padding: 12px 17px;
	border: 1px solid #c3c3c3;
	border-radius: var(--radius-sm);
	background-color: #e9e9e9;
	color: #424242;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	transition: border-color 180ms ease, background-color 180ms ease;
}

.frm-fluent-form .ff-el-input--content textarea.ff-el-form-control {
	min-height: 144px;
	padding-top: 14px;
	resize: vertical;
}

.frm-fluent-form .ff-el-input--content .ff-el-form-control:focus {
	border-color: var(--color-ink);
	background-color: #fff;
	outline: none;
}

.frm-fluent-form .ff-el-input--content .ff-el-form-control::placeholder {
	color: #424242;
	opacity: 1;
}

/* --- Submit (POŠALJI) ---------------------------------------- */
.frm-fluent-form .ff-btn.ff-btn-submit {
	min-width: 210px;
	height: 63px;
	padding: 0 40px;
	border: 0;
	border-radius: var(--radius-sm);
	background-color: var(--color-brand-red);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.frm-fluent-form .ff-btn.ff-btn-submit:hover,
.frm-fluent-form .ff-btn.ff-btn-submit:focus {
	background-color: #a91f3f;
}

/* --- Radio buttons (white core, red ring) -------------------- */
/* Echoes the .agp-timeline__item::before marker (white centre, red ring).
 * Fluent Forms core renders radios as full-width "button" pills — it hides
 * the native input (opacity:0, absolute) and styles the <span> as the control.
 * We undo that: reveal the real input as a circular control and reset the span
 * to plain text. Scoped to [type="radio"] so the GDPR checkbox is untouched.
 * `!important` is required only where FF core itself uses it (span border). */
.frm-fluent-form .ff-el-form-check label.ff-el-form-check-label {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	cursor: pointer;
}

.frm-fluent-form .ff-el-form-check input.ff-el-form-check-input[type="radio"] {
	position: static;
	top: 0;
	z-index: auto;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0 10px 0 0;
	padding: 0;
	border: 1px solid #c3c3c3;
	border-radius: 50%;
	background-color: #fff;
	opacity: 1;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 160ms ease, background 160ms ease;
}

.frm-fluent-form .ff-el-form-check input.ff-el-form-check-input[type="radio"]:hover {
	border-color: var(--color-brand-red);
}

.frm-fluent-form .ff-el-form-check input.ff-el-form-check-input[type="radio"]:checked {
	border-color: var(--color-brand-red);
	background-image: radial-gradient(circle, #fff 0 5px, var(--color-brand-red) 5px);
}

.frm-fluent-form .ff-el-form-check input.ff-el-form-check-input[type="radio"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(187, 37, 72, 0.15);
}

.frm-fluent-form .ff-el-form-check label.ff-el-form-check-label > span {
	display: inline;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
}