/**
 * Front-end styling for the ALLOut subscriptions form.
 *
 * Target: the ACFE form whose template wraps the three radio rows in
 * `<ul class="radio-options-subform">`. All selectors are scoped under
 * either `.acfe-form` or `.radio-options-subform` so the rules cannot
 * bleed into other ACFE forms on the site.
 *
 * Layout: each subscription is a soft card with the question on top
 * and a pill-style toggle (Opt-in / Opt-out) underneath. The selected
 * pill is filled with the ALLOut brand red. Touch-friendly hit areas,
 * keyboard focus rings, scales cleanly on mobile.
 *
 * Specificity / theme override notes:
 *  - BeTheme's `.button.button-primary` rules are aggressive and can
 *    win against simple `.acfe-form input[type="submit"]` selectors.
 *    The submit-button rules below double-anchor (`.acf-form` AND
 *    `.acfe-form`) and use `!important` ONLY on the visual properties
 *    that absolutely must win (background, colour, border, padding).
 *  - The rest of the rules use plain specificity — sufficient against
 *    ACFE's own minimal CSS without a hammer.
 *
 * @package AOCNE
 * @author  ALLOut Security
 * @since   2.1.5
 */

/* ---------- Brand variables ---------- */

:root {
	--aocne-accent:        #dc2626;
	--aocne-accent-hover:  #b91c1c;
	--aocne-accent-shadow: rgba(220, 38, 38, 0.30);
	--aocne-text:          #1d2327;
	--aocne-text-muted:    #4b5563;
	--aocne-surface:       #ffffff;
	--aocne-surface-soft:  #f4f6f8;
	--aocne-border:        #e1e5ea;
	--aocne-border-strong: #c7ced6;
	--aocne-success-bg:    #ecf7f0;
	--aocne-success-bd:    #b8e0c4;
	--aocne-success-bar:   #0a7f4f;
	--aocne-success-text:  #0a4d2f;
}

/* ---------- Layout shell ---------- */

.acfe-form .radio-options-subform {
	list-style: none;
	margin: 1.25rem 0 0 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.acfe-form .radio-options-subform > li {
	background: var(--aocne-surface);
	border: 1px solid var(--aocne-border);
	border-radius: 10px;
	padding: 1rem 1.15rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	list-style: none;
}

.acfe-form .radio-options-subform > li::before {
	content: none;
}

.acfe-form .radio-options-subform > li:hover {
	border-color: var(--aocne-border-strong);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* ---------- Field wrappers ---------- */

.acfe-form .radio-options-subform .acf-field {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.acfe-form .radio-options-subform .acf-field > .acf-label {
	margin: 0 0 0.65rem 0;
}

.acfe-form .radio-options-subform .acf-field > .acf-label label {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--aocne-text);
	margin: 0;
}

/* ---------- Pill toggle (radio list) ---------- */

.acfe-form .radio-options-subform .acf-radio-list {
	list-style: none;
	margin: 0;
	padding: 4px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	background: var(--aocne-surface-soft);
	border-radius: 999px;
}

.acfe-form .radio-options-subform .acf-radio-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.acfe-form .radio-options-subform .acf-radio-list li::before {
	content: none;
}

.acfe-form .radio-options-subform .acf-radio-list label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 92px;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--aocne-text-muted);
	cursor: pointer;
	user-select: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
	border: 1px solid transparent;
	background: transparent;
}

.acfe-form .radio-options-subform .acf-radio-list label:hover {
	color: var(--aocne-text);
	background: #e9edf2;
}

.acfe-form .radio-options-subform .acf-radio-list label.selected {
	background: var(--aocne-accent);
	color: #ffffff;
	box-shadow: 0 1px 2px var(--aocne-accent-shadow);
}

.acfe-form .radio-options-subform .acf-radio-list label.selected:hover {
	background: var(--aocne-accent-hover);
}

/* Hide the native radio bullet — the pill IS the indicator. */
.acfe-form .radio-options-subform .acf-radio-list label input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Keyboard focus ring on the label when the hidden input gains focus. */
.acfe-form .radio-options-subform .acf-radio-list label:focus-within {
	outline: 2px solid var(--aocne-accent);
	outline-offset: 2px;
}

/* ---------- Intro paragraph ---------- */

/* ---------- Submit button ----------
 * BeTheme's `.button.button-primary` is high-specificity. We anchor on
 * BOTH `.acf-form` AND `.acfe-form` and use !important on the few visual
 * properties that absolutely must win. Hover/focus/active stay non-!important
 * so a site admin can still override them per-page if they want to.
 */

.acfe-form.acf-form .acf-form-submit {
	margin-top: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.acfe-form.acf-form .acf-form-submit input[type="submit"],
.acfe-form.acf-form .acf-form-submit input.button-primary {
	background: var(--aocne-accent) !important;
	border: 1px solid var(--aocne-accent-hover) !important;
	color: #ffffff !important;
	padding: 0.65rem 1.5rem !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		transform 0.05s ease,
		box-shadow 0.15s ease;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
	text-shadow: none !important;
	height: auto !important;
	line-height: 1.2 !important;
	text-transform: none !important;
}

.acfe-form.acf-form .acf-form-submit input[type="submit"]:hover {
	background: var(--aocne-accent-hover) !important;
	box-shadow: 0 2px 6px var(--aocne-accent-shadow);
}

.acfe-form.acf-form .acf-form-submit input[type="submit"]:active {
	transform: translateY(1px);
}

.acfe-form.acf-form .acf-form-submit input[type="submit"]:focus {
	outline: 2px solid var(--aocne-accent);
	outline-offset: 2px;
}

/* ---------- Success banner ---------- */

#message.updated {
	background: var(--aocne-success-bg) !important;
	border: 1px solid var(--aocne-success-bd) !important;
	border-left: 4px solid var(--aocne-success-bar) !important;
	border-radius: 8px !important;
	padding: 0.85rem 1rem !important;
	margin: 0 0 1rem 0 !important;
	color: var(--aocne-success-text) !important;
	display: inline-block;
	min-width: 280px;
}

#message.updated p {
	margin: 0;
	font-weight: 500;
	color: var(--aocne-success-text);
}

/* ---------- Spinner alignment ---------- */

.acfe-form .acf-form-submit .acf-spinner {
	margin: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {

	.acfe-form .radio-options-subform > li {
		padding: 0.85rem 0.95rem;
	}

	.acfe-form .radio-options-subform .acf-radio-list {
		display: flex;
		width: 100%;
	}

	.acfe-form .radio-options-subform .acf-radio-list li {
		flex: 1 1 0;
	}

	.acfe-form .radio-options-subform .acf-radio-list label {
		width: 100%;
		min-width: 0;
	}

	.acfe-form.acf-form .acf-form-submit input[type="submit"] {
		width: 100%;
	}
}

/* ---------- Reduced-motion respect ---------- */

@media (prefers-reduced-motion: reduce) {

	.acfe-form .radio-options-subform > li,
	.acfe-form .radio-options-subform .acf-radio-list label,
	.acfe-form.acf-form .acf-form-submit input[type="submit"] {
		transition: none;
	}
}