/**
 * Icon Radio field — frontend styles.
 *
 * Colours and spacing use GF's Orbital CSS variables so the field inherits
 * whatever theme is configured in Gravity Forms.
 *
 * SPECIFICITY NOTE — selectors that control card layout use the three-class
 * chain ".ginput_container_icon_radio .gfield_icon_radio .<element>" to reach
 * specificity (0,3,0). GF's framework styles target ".gform-field-label" with
 * (0,2,0) via ":where()" and load after this stylesheet, so a two-class
 * selector ties and loses. The third class wins unconditionally.
 */

/* ── Layout ────────────────────────────────────────────────────────────────── */

.ginput_container_icon_radio .gfield_icon_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ── Card (each choice) ────────────────────────────────────────────────────── */

.ginput_container_icon_radio .gfield_icon_radio .gchoice {
	position: relative;
	flex: 1 1 0;
	min-width: 8rem;
	max-width: 16rem;
}

/* Visually-hidden native radio — kept in the DOM for keyboard + AT access */
.ginput_container_icon_radio .gfield_icon_radio .gfield-choice-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

/*
 * Card label — three-class specificity so flex-direction: column and
 * align-items: center beat GF's framework rule which sets display via
 * --gf-local-display (defaulting to a horizontal row flex).
 */
.ginput_container_icon_radio .gfield_icon_radio .hy-gf-icon-radio__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: var(--gf-ctrl-padding-y, 1rem) var(--gf-ctrl-padding-x, 1.25rem);
	border: var(--gf-ctrl-border-width, 1px) var(--gf-ctrl-border-style, solid) var(--gf-ctrl-border-color, #b3b9c2);
	border-radius: var(--gf-ctrl-radius, 4px);
	background-color: var(--gf-ctrl-bg-color, #fff);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	height: 100%;
	box-sizing: border-box;
}

/* ── Hover ─────────────────────────────────────────────────────────────────── */

.ginput_container_icon_radio .gfield_icon_radio .gchoice:hover .hy-gf-icon-radio__label {
	border-color: var(--gf-ctrl-border-color-hover, var(--gf-color-primary, #204ce5));
	background-color: var(--gf-ctrl-bg-color-hover, #f5f5f5);
}

/* ── Selected state (:has is well-supported; input and label are siblings) ─── */

.ginput_container_icon_radio .gfield_icon_radio .gchoice:has(.gfield-choice-input:checked) .hy-gf-icon-radio__label {
	border-width: 2px;
	border-color: var(--gf-color-primary, #204ce5);
	background-color: color-mix(in srgb, var(--gf-color-primary, #204ce5) 30%, transparent);
}

.ginput_container_icon_radio .gfield_icon_radio .gchoice:has(.gfield-choice-input:checked) .hy-gf-icon-radio__icon {
	color: var(--gf-color-primary, #204ce5);
}

/* ── Focus ring (keyboard navigation) ─────────────────────────────────────── */

.ginput_container_icon_radio .gfield_icon_radio .gchoice:has(.gfield-choice-input:focus-visible) .hy-gf-icon-radio__label {
	outline: 2px solid var(--gf-ctrl-border-color-focus, var(--gf-color-primary, #204ce5));
	outline-offset: 2px;
}

/* ── Icon ──────────────────────────────────────────────────────────────────── */

.ginput_container_icon_radio .gfield_icon_radio .hy-gf-icon-radio__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var(--gf-ctrl-color, #333);
	transition: color 0.15s ease;
}

.ginput_container_icon_radio .gfield_icon_radio .hy-gf-icon-radio__icon svg {
	width: 100%;
	height: 100%;
}

/* ── Label text ────────────────────────────────────────────────────────────── */

.ginput_container_icon_radio .gfield_icon_radio .hy-gf-icon-radio__text {
	font-family: var(--gf-ctrl-font-family, inherit);
	font-size: var(--gf-ctrl-font-size, 1rem);
	font-weight: 700;
	color: var(--gf-ctrl-color, #333);
	line-height: 1.3;
	text-align: center;
}