/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/*
 * ATR Dynamic Forms – Block-friendly baseline styles
 * Scoped to .atr-dynamic-form to avoid clashing with theme styles.
 */

.atr-dynamic-form-wrapper {
	margin: 1.5rem 0;
}

.atr-dynamic-form {
	max-width: var(--wp--style--global--content-size, 720px);
	width: 100%;
}

.atr-dynamic-form h2,
.atr-dynamic-form h3,
.atr-dynamic-form h4 {
	margin-block: 0 1rem;
}

.atr-dynamic-form .form-group {
	margin-block: 0 1rem;
}

.atr-dynamic-form label {
	display: inline-block;
	margin-bottom: 0.375rem;
	font-weight: 600;
}

.atr-dynamic-form input[type="text"],
.atr-dynamic-form input[type="email"],
.atr-dynamic-form input[type="tel"],
.atr-dynamic-form select,
.atr-dynamic-form textarea {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--atrdf-border, rgba(0,0,0,.2));
	border-radius: 6px;
	background: var(--atrdf-field-bg, #fff);
	color: inherit;
	line-height: 1.4;
}

.atr-dynamic-form textarea {
	min-height: 120px;
	resize: vertical;
}

.atr-dynamic-form input[type="radio"],
.atr-dynamic-form input[type="checkbox"] {
	margin-right: 0.5rem;
}

.atr-dynamic-form input[type="radio"] + label,
.atr-dynamic-form input[type="checkbox"] + label {
	font-weight: 500;
}

.atr-dynamic-form input[type="text"]:focus,
.atr-dynamic-form input[type="email"]:focus,
.atr-dynamic-form input[type="tel"]:focus,
.atr-dynamic-form select:focus,
.atr-dynamic-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary, #3858e9);
	outlines: none;
	border-color: var(--wp--preset--color--primary, #3858e9);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--wp--preset--color--primary, #3858e9) 25%, transparent);
}

.atr-dynamic-form input[type="submit"],
.atr-dynamic-form button[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: 6px;
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--primary, #3858e9);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.atr-dynamic-form input[type="submit"]:hover,
.atr-dynamic-form button[type="submit"]:hover {
	filter: brightness(0.95);
}

.atr-dynamic-form input[type="submit"]:focus-visible,
.atr-dynamic-form button[type="submit"]:focus-visible {
	outline: 2px solid color-mix(in oklab, var(--wp--preset--color--primary, #3858e9) 60%, transparent);
	outline-offset: 2px;
}

/* Radio/checkbox groups with inline options */
.atr-dynamic-form .form-group.inline-options input[type="radio"],
.atr-dynamic-form .form-group.inline-options input[type="checkbox"] {
	margin-right: 0.35rem;
}
.atr-dynamic-form .form-group.inline-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: center;
}

/* Small helper text (if used) */
.atr-dynamic-form .help {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.875rem;
	opacity: 0.8;
}