/**
 * ACSS v4 Design for SureForms — Frontend Overrides
 *
 * Uses ACSS v4 form framework variables (--f-form-*, --f-field-*).
 * The inline styles from StyleOutput.php handle variable mappings;
 * this file targets specific selectors for deeper integration.
 */

/* Form container */
.srfm-form-container {
	font-family: inherit;
}

/* Input fields */
.srfm-form-container input[type="text"],
.srfm-form-container input[type="email"],
.srfm-form-container input[type="url"],
.srfm-form-container input[type="tel"],
.srfm-form-container input[type="number"],
.srfm-form-container input[type="date"],
.srfm-form-container input[type="password"],
.srfm-form-container textarea,
.srfm-form-container select {
	font-family: inherit;
	font-size: var(--srfm-input-font-size, var(--f-form-font-size, 1rem));
	color: var(--srfm-color-input-text, var(--f-form-color-base-contrast, #1c1e26));
	background-color: var(--srfm-color-input-background, var(--f-field-color-background, #ffffff));
	border-color: var(--srfm-color-input-border, var(--border-color-light, #d1d5db));
	border-width: var(--srfm-input-border-width, var(--border-width, 1px));
	border-radius: var(--srfm-input-border-radius, var(--radius, 6px));
	padding: var(--srfm-input-padding, 0.625rem);
	transition: border-color 0.15s ease, background-color 0.15s ease, outline-color 0.15s ease;
}

/* Hover state */
.srfm-form-container input[type="text"]:hover,
.srfm-form-container input[type="email"]:hover,
.srfm-form-container input[type="url"]:hover,
.srfm-form-container input[type="tel"]:hover,
.srfm-form-container input[type="number"]:hover,
.srfm-form-container input[type="date"]:hover,
.srfm-form-container input[type="password"]:hover,
.srfm-form-container textarea:hover,
.srfm-form-container select:hover {
	border-color: var(--srfm-color-input-border-hover, var(--border-color, #9ca3af));
	background-color: var(--srfm-color-input-background-hover, var(--f-field-color-background, #ffffff));
}

/* Active state */
.srfm-form-container input[type="text"]:active,
.srfm-form-container input[type="email"]:active,
.srfm-form-container input[type="url"]:active,
.srfm-form-container input[type="tel"]:active,
.srfm-form-container input[type="number"]:active,
.srfm-form-container input[type="date"]:active,
.srfm-form-container input[type="password"]:active,
.srfm-form-container textarea:active,
.srfm-form-container select:active {
	border-color: var(--srfm-color-input-border-focus, var(--primary, #ea580c));
}

/* Focus state */
.srfm-form-container input:focus,
.srfm-form-container textarea:focus,
.srfm-form-container select:focus {
	border-color: var(--srfm-color-input-border-focus, var(--primary, #ea580c));
	outline-color: var(--srfm-color-input-border-focus, var(--primary, #ea580c));
}

/* Placeholder */
.srfm-form-container input::placeholder,
.srfm-form-container .srfm-input-common::placeholder,
.srfm-form-container textarea::placeholder {
	color: var(--srfm-color-input-placeholder, var(--neutral, #9ca3af)) !important;
	font-size: var(--srfm-placeholder-font-size, var(--f-form-font-size, 1rem));
	font-weight: var(--srfm-placeholder-font-weight, 400);
	font-style: var(--srfm-placeholder-font-style, normal);
}

/* Labels */
.srfm-form-container label,
.srfm-form-container .srfm-block-label {
	font-size: var(--srfm-label-font-size, var(--text-s, 0.875rem));
	font-weight: var(--srfm-label-font-weight, 500);
	color: var(--srfm-color-input-label, var(--f-form-color-base-contrast, #1c1e26));
}

/* Description / help text */
.srfm-form-container .srfm-description,
.srfm-form-container .srfm-help-text {
	font-size: var(--srfm-description-font-size, var(--text-xs, 0.75rem));
	color: var(--srfm-color-input-description, var(--f-form-color-base-contrast, #6b7280));
}

/* Buttons — skip if an ACSS preset class is already applied */
.srfm-form-container .srfm-submit-button:not([class*="-btn"]),
.srfm-form-container .srfm-submit-btn:not([class*="-btn"]),
.srfm-form-container #srfm-submit-btn:not([class*="-btn"]),
.srfm-form-container button[type="submit"]:not([class*="-btn"]) {
	font-family: inherit;
	font-size: var(--srfm-btn-font-size, var(--text-m, 1rem));
	font-weight: var(--srfm-btn-font-weight, 700);
	line-height: var(--srfm-btn-line-height, var(--text-line-height, 1.5));
	letter-spacing: var(--srfm-btn-letter-spacing, var(--text-letter-spacing, normal));
	text-transform: var(--srfm-btn-text-transform, none);
	color: var(--srfm-btn-primary-color, var(--btn-text-color, #ffffff));
	background-color: var(--srfm-btn-primary-bg, var(--btn-background, #ea580c));
	border-color: var(--srfm-btn-border-color, var(--btn-border-color, transparent));
	border-width: var(--srfm-btn-border-width, var(--btn-border-width, 0));
	border-style: var(--srfm-btn-border-style, var(--btn-border-style, solid));
	border-radius: var(--srfm-btn-border-radius, var(--btn-border-radius, 6px));
	padding-block: var(--btn-padding-block, var(--srfm-btn-padding-block, 0.75rem));
	padding-inline: var(--btn-padding-inline, var(--srfm-btn-padding-inline, 1.5rem));
	min-inline-size: var(--btn-min-width, var(--srfm-btn-min-width, auto));
	inline-size: fit-content;
	text-align: center;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.srfm-form-container .srfm-submit-button:not([class*="-btn"]):hover,
.srfm-form-container .srfm-submit-btn:not([class*="-btn"]):hover,
.srfm-form-container #srfm-submit-btn:not([class*="-btn"]):hover,
.srfm-form-container button[type="submit"]:not([class*="-btn"]):hover {
	color: var(--srfm-btn-primary-color-hover, var(--btn-text-color-hover, #ffffff));
	background-color: var(--srfm-btn-primary-bg-hover, var(--btn-background-hover, #c2410c));
	border-color: var(--srfm-btn-border-color-hover, var(--btn-border-color-hover, transparent));
}

.srfm-form-container .srfm-submit-button:not([class*="-btn"]):focus-visible,
.srfm-form-container .srfm-submit-btn:not([class*="-btn"]):focus-visible,
.srfm-form-container #srfm-submit-btn:not([class*="-btn"]):focus-visible,
.srfm-form-container button[type="submit"]:not([class*="-btn"]):focus-visible {
	outline: 2px solid var(--srfm-btn-primary-bg, var(--btn-background, #ea580c));
	outline-offset: 2px;
}

/* Error messages */
.srfm-form-container .srfm-error-message,
.srfm-form-container .srfm-error-content {
	color: var(--srfm-color-error, var(--danger, #dc2626));
}

/* Success messages */
.srfm-form-container .srfm-success-message {
	color: var(--srfm-color-success, #16a34a);
}

/*
 * ---- Dropdown menus ----
 * SureForms consumes dropdown styling via its own native CSS variables
 * (--srfm-dropdown-*, --srfm-expandable-menu-*).
 * These are set as variable declarations by StyleOutput.php — no
 * class-based selectors needed here.
 */

/* ---- Multi-choice ----
 * SureForms' custom-stylings selector has specificity (0,7,1) so we use
 * !important on color/background properties to guarantee our variables win.
 */

/* Option wrapper — default state */
.srfm-form-container .srfm-multi-choice-block .srfm-multi-choice-single .srfm-block-content-wrap {
	padding: var(--srfm-input-field-padding, 0.625rem);
	font-size: var(--srfm-input-field-font-size, var(--f-form-font-size, 1rem));
	font-weight: var(--srfm-input-field-font-weight, 400);
	line-height: var(--srfm-input-field-line-height, 1.5);
	border-radius: var(--srfm-input-field-border-radius, var(--radius, 6px));
	min-height: var(--srfm-input-height, auto);
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
	color: var(--srfm-multi-choice-text, var(--srfm-color-input-text, #1c1e26)) !important;
	border-color: var(--srfm-multi-choice-border, var(--srfm-color-input-border, #d1d5db)) !important;
	background-color: var(--srfm-multi-choice-bg, var(--srfm-color-input-background, #ffffff)) !important;
}

/* Hover state */
.srfm-form-container .srfm-multi-choice-block .srfm-multi-choice-single:hover .srfm-block-content-wrap {
	border-color: var(--srfm-multi-choice-border-hover, var(--srfm-color-input-border-hover, #9ca3af)) !important;
	background-color: var(--srfm-multi-choice-bg-hover, var(--srfm-color-input-background-hover, #f9fafb)) !important;
}

/* Checked / selected state — must beat SureForms' (0,7,1) rule */
.srfm-form-container .srfm-multi-choice-block .srfm-multi-choice-single input:checked + .srfm-block-content-wrap {
	background-color: var(--srfm-multi-choice-bg-selected, var(--srfm-color-input-selected, rgba(234,88,12,0.07))) !important;
	border-color: var(--srfm-multi-choice-border-selected, var(--srfm-color-input-border-focus, #ea580c)) !important;
	color: var(--srfm-multi-choice-text-selected, var(--srfm-color-input-text, #1c1e26)) !important;
	box-shadow: none !important;
}

/* Multi-choice icon color — default state (falls back to text color)
 * fill is intentionally omitted — the SVGs use fill="none" natively (stroke-only icons) */
.srfm-form-container .srfm-multi-choice-block .srfm-multi-choice-single .srfm-block-content-wrap svg path,
.srfm-form-container .srfm-multi-choice-block .srfm-multi-choice-single .srfm-block-content-wrap svg circle {
	fill: none !important;
	stroke: var(--srfm-multi-choice-icon, var(--srfm-multi-choice-text, currentColor)) !important;
}

/* Multi-choice icon color — selected state (falls back to selected text color) */
.srfm-form-container .srfm-multi-choice-block .srfm-multi-choice-single input:checked + .srfm-block-content-wrap svg path,
.srfm-form-container .srfm-multi-choice-block .srfm-multi-choice-single input:checked + .srfm-block-content-wrap svg circle {
	fill: none !important;
	stroke: var(--srfm-multi-choice-icon-selected, var(--srfm-multi-choice-text-selected, currentColor)) !important;
}

/* ---- Nav buttons (prev / next) + Submit button ACSS class overrides ----
 * Selectors use the direct SureForms wrapper + ACSS class for (0,3,0) + !important.
 * Values match ACSS v4 button class conventions exactly:
 *   font-size: var(--text-s), font-weight: 500, radius: var(--radius-s),
 *   border: 3px solid var(--{color}-semi-light), inline-size: fit-content.
 */

.srfm-page-break-buttons {
	overflow: visible !important;
}

/* Shared base for all nav button ACSS overrides.
 * z-index: 0 is required: secondary-btn uses backdrop-filter which creates a
 * CSS stacking context. Without an explicit z-index that context paints above
 * elements later in DOM order (including open dropdown lists). Setting z-index: 0
 * makes nav buttons lose to any dropdown list with a positive z-index. */
.srfm-page-break-buttons .srfm-nxt-btn[class*="-btn"],
.srfm-page-break-buttons .srfm-pre-btn[class*="-btn"] {
	display:          flex !important;
	align-items:      center !important;
	justify-content:  center !important;
	text-align:       center !important;
	flex-direction:   column !important;
	font-size:        var(--text-s, 1rem) !important;
	font-weight:      500 !important;
	border-radius:    var(--radius-s, var(--radius, 6px)) !important;
	padding-block:    var(--btn-padding-block, 0.75rem) !important;
	padding-inline:   var(--btn-padding-inline, 1.5rem) !important;
	padding-top:      var(--btn-padding-block, 0.75rem) !important;
	padding-bottom:   var(--btn-padding-block, 0.75rem) !important;
	padding-left:     var(--btn-padding-inline, 1.5rem) !important;
	padding-right:    var(--btn-padding-inline, 1.5rem) !important;
	min-inline-size:  150px !important;
	inline-size:      fit-content !important;
	height:           auto !important;
	min-height:       unset !important;
	position:         relative !important;
	z-index:          0 !important;
	overflow:         visible !important;
	text-decoration:  none !important;
	transition:       background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* Raise the stacking context at the step-page level (.srfm-page-break), which is
 * a direct sibling of .srfm-page-break-buttons in the DOM. The Back button
 * (backdrop-filter: creates stacking context at z-index: 0) lives inside
 * .srfm-page-break-buttons. All previous targets (.srfm-dropdown-common-wrap,
 * .ts-wrapper etc.) are nested too deep — their z-index compares within
 * .srfm-page-break, not against .srfm-page-break-buttons. Raising .srfm-page-break
 * itself to z-index: 10 puts the entire step content above the button row. */
.srfm-form-container .srfm-page-break {
	position: relative !important;
	z-index: 10 !important;
}

/* Shared base for all submit button ACSS overrides.
 * width / inline-size is intentionally NOT forced here — SureForms sets
 * width: 100% as an inline style to fill the button's flex/grid cell.
 * We preserve that so inline input+button layouts stay intact.
 * align-self: stretch ensures the button matches the input height in those
 * inline layouts where both share a flex/grid row. */
.srfm-form-container .srfm-submit-button[class*="-btn"],
.srfm-form-container #srfm-submit-btn[class*="-btn"] {
	display:          flex !important;
	align-items:      center !important;
	justify-content:  center !important;
	text-align:       center !important;
	flex-direction:   column !important;
	align-self:       stretch !important;
	font-size:        var(--text-s, 1rem) !important;
	font-weight:      500 !important;
	border-radius:    var(--radius-s, var(--radius, 6px)) !important;
	padding-block:    var(--btn-padding-block, 0.75rem) !important;
	padding-inline:   var(--btn-padding-inline, 1.5rem) !important;
	position:         relative !important;
	overflow:         visible !important;
	text-decoration:  none !important;
	transition:       background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* ---- accent-btn ---- */
.srfm-page-break-buttons .srfm-nxt-btn.accent-btn,
.srfm-page-break-buttons .srfm-pre-btn.accent-btn,
.srfm-form-container .srfm-submit-button.accent-btn,
.srfm-form-container #srfm-submit-btn.accent-btn {
	background:  var(--accent) !important;
	color:       var(--black, #000) !important;
	border:      3px solid var(--accent-semi-light, var(--accent)) !important;
}
.srfm-page-break-buttons .srfm-nxt-btn.accent-btn:hover,
.srfm-page-break-buttons .srfm-pre-btn.accent-btn:hover,
.srfm-form-container .srfm-submit-button.accent-btn:hover,
.srfm-form-container #srfm-submit-btn.accent-btn:hover {
	background:  var(--accent) !important;
	color:       var(--black, #000) !important;
}

/* ---- primary-btn ---- */
.srfm-page-break-buttons .srfm-nxt-btn.primary-btn,
.srfm-page-break-buttons .srfm-pre-btn.primary-btn,
.srfm-form-container .srfm-submit-button.primary-btn,
.srfm-form-container #srfm-submit-btn.primary-btn {
	background:  var(--primary) !important;
	color:       var(--white, #fff) !important;
	border:      3px solid var(--primary-semi-light, var(--primary)) !important;
}
.srfm-page-break-buttons .srfm-nxt-btn.primary-btn:hover,
.srfm-page-break-buttons .srfm-pre-btn.primary-btn:hover,
.srfm-form-container .srfm-submit-button.primary-btn:hover,
.srfm-form-container #srfm-submit-btn.primary-btn:hover {
	background:  var(--primary) !important;
	color:       var(--white, #fff) !important;
}

/* ---- secondary-btn ---- */
.srfm-page-break-buttons .srfm-nxt-btn.secondary-btn,
.srfm-page-break-buttons .srfm-pre-btn.secondary-btn,
.srfm-form-container .srfm-submit-button.secondary-btn,
.srfm-form-container #srfm-submit-btn.secondary-btn {
	background:       var(--secondary-btn-bg, #ffffff26) !important;
	color:            var(--white, #fff) !important;
	border:           3px solid color-mix(in oklch, var(--neutral-dark, #374151) 60%, transparent) !important;
	backdrop-filter:  blur(2.5px) !important;
}
.srfm-page-break-buttons .srfm-nxt-btn.secondary-btn:hover,
.srfm-page-break-buttons .srfm-pre-btn.secondary-btn:hover,
.srfm-form-container .srfm-submit-button.secondary-btn:hover,
.srfm-form-container #srfm-submit-btn.secondary-btn:hover {
	background:       color-mix(in oklch, var(--neutral-dark, #374151) 80%, transparent) !important;
	border-color:     color-mix(in oklch, var(--neutral-dark, #374151) 80%, transparent) !important;
	color:            var(--white, #fff) !important;
}

/* ---- tertiary-btn ---- */
.srfm-page-break-buttons .srfm-nxt-btn.tertiary-btn,
.srfm-page-break-buttons .srfm-pre-btn.tertiary-btn,
.srfm-form-container .srfm-submit-button.tertiary-btn,
.srfm-form-container #srfm-submit-btn.tertiary-btn {
	background:  var(--tertiary) !important;
	color:       var(--white, #fff) !important;
	border:      3px solid var(--tertiary-semi-light, var(--tertiary)) !important;
}
.srfm-page-break-buttons .srfm-nxt-btn.tertiary-btn:hover,
.srfm-page-break-buttons .srfm-pre-btn.tertiary-btn:hover,
.srfm-form-container .srfm-submit-button.tertiary-btn:hover,
.srfm-form-container #srfm-submit-btn.tertiary-btn:hover {
	background:  var(--tertiary-dark) !important;
	border-color: var(--tertiary-dark, var(--tertiary)) !important;
}

/* ---- neutral-btn ---- */
.srfm-page-break-buttons .srfm-nxt-btn.neutral-btn,
.srfm-page-break-buttons .srfm-pre-btn.neutral-btn,
.srfm-form-container .srfm-submit-button.neutral-btn,
.srfm-form-container #srfm-submit-btn.neutral-btn {
	background:  var(--neutral) !important;
	color:       var(--neutral-ultra-dark, var(--dark, #111)) !important;
	border:      3px solid var(--neutral-semi-light, var(--neutral)) !important;
}
.srfm-page-break-buttons .srfm-nxt-btn.neutral-btn:hover,
.srfm-page-break-buttons .srfm-pre-btn.neutral-btn:hover,
.srfm-form-container .srfm-submit-button.neutral-btn:hover,
.srfm-form-container #srfm-submit-btn.neutral-btn:hover {
	background:  var(--neutral-dark) !important;
	border-color: var(--neutral-dark, var(--neutral)) !important;
}

/* Field spacing */
.srfm-form-container .srfm-block-wrap + .srfm-block-wrap,
.srfm-form-container .srfm-field-wrap + .srfm-field-wrap {
	margin-top: var(--srfm-field-spacing, var(--content-gap, 1rem));
}