/**
 * WebinarIgnition – SC Custom mode form styles.
 * Loaded instead of main-template.css / webinar-modern.css on gb_sc_custom pages.
 * All typography is inherited from the active theme; only layout + colours come
 * from this file so the form looks consistent on any theme or page builder.
 *
 * Scoped inside .wi-sc-form-wrap which is injected by webinarignition_shortcode()
 * whenever _wi_page_mode = gb_sc_custom.
 *
 * Visual target: padded column on surface colour (no outer card border/shadow — builder owns chrome).
 * comfortable width) while staying on builder (Thrive/Elementor) canvases — colours from FSE vars.
 * Evergreen (custom-dates.php) reuses .eventDate but must not use the live row flex layout.
 *
 * Submit button fill/text: Site Editor CTA (--wi-fse-cta-fill / --wi-fse-cta-text) when lp_optin_btn_color
 * is empty or not effective; else inline --wi-btn-bg from campaign. Arrow ::after + motion unchanged.
 */

/* ─── Container ─────────────────────────────────────────────────── */
.wi-sc-form-wrap {
	/* Colour tokens synced with the active FSE theme's Site Editor → Styles palette.
	 * Precedence (first defined wins):
	 *   1. --wi-fse-cta-fill / --wi-fse-cta-text  → injected by get_compact_color_vars_css()
	 *      from the cached Site Editor palette (auto-updates when user edits Styles).
	 *   2. --wp--preset--color--primary / --wp--preset--color--contrast → theme.json tokens.
	 *   3. --wp--preset--color--base → theme background / base for text contrast.
	 *   4. Hardcoded hex as last resort so the button is still readable on themes
	 *      without theme.json.
	 */
	--wi-btn-bg:       var(--wi-fse-cta-fill,
	                   var(--wp--preset--color--primary,
	                   var(--wp--preset--color--contrast, #5DA423)));
	--wi-btn-color:    var(--wi-fse-cta-text,
	                   var(--wp--preset--color--base, #ffffff));
	--wi-btn-bg-hover: color-mix(in srgb, var(--wi-btn-bg) 85%, #000);
	--wi-input-border: color-mix(in srgb, currentColor 18%, transparent);
	--wi-input-radius: 8px;
	/* Spacious input padding matches webinar-modern.css typography scale without pulling in the full stack. */
	--wi-input-padding: 0.85em 1em;

	/* Card shell: padding + radius only — no outer border/shadow/outline (SC custom: page builder supplies chrome).
	 * background-clip:padding-box keeps the surface colour flush with the radius (no hairline from parent colour bleed).
	 * Outer margins are 0 on purpose: the builder column / Thrive lightbox already controls vertical spacing.
	 * Admins who want a gap add it in the page builder (block spacing, column padding, etc.). */
	color:            var(--wi-fse-neutral-text, var(--wp--preset--color--foreground, inherit));
	background-color: var(--wi-fse-surface-bg, var(--wp--preset--color--background, #fff));
	background-clip:  padding-box;
	border-radius:    clamp(14px, 2vw, 22px);
	padding:          clamp(1.35rem, 3.2vw, 2.1rem);
	box-shadow:       none !important;
	border:           0 !important;
	outline:          0 !important;

	max-width:  min(100%, 560px);
	margin:     0 auto;
	width:      100%;
	box-sizing: border-box;
}

/* background_color="transparent" on [wi_webinar_block]: outer card must not use FSE surface fill */
.wi-sc-form-wrap.wi-sc-form-wrap--bg-transparent {
	background-color: transparent;
	box-shadow:       none;
	border:           none;
}

/*
 * Flat mode: gb_sc_custom + Thrive lightbox/symbol. WI does NOT own outer chrome — host column does.
 * Inside the wrap the rail still matches webinar-modern's .wi-sc-hosted 26rem (kept by its own rules
 * since those are NOT body-scoped). What webinar-modern's body.wi-wb-registration-landing path adds
 * on native GB reg pages but NOT on Thrive/Elementor is the horizontal inset on .eventDate (so it
 * matches .optinFormArea's global padding:0 1rem 1rem 1rem). Two clean options:
 *   1) Give .eventDate the same 1rem inset  → selects/labels start 16px inside 26rem rail.
 *   2) Strip .optinFormArea padding in flat → everything flush to 26rem rail edges.
 * We pick (2): cleaner with builder columns whose own padding already provides visual breathing room.
 */
.wi-sc-form-wrap.wi-sc-form-wrap--flat {
	padding:          0;
	background-color: transparent;
	background-image: none;
	border-radius:    0;
	box-shadow:       none !important;
	max-width:        none;
	width:            100%;
	margin:           0;
	min-width:        0;
	box-sizing:       border-box;
}

/* Flush inner alignment: .optinFormArea.optin-form-area has webinar-modern padding 0 1rem 1rem 1rem
 * (global, not body-scoped). On builder/lightbox pages the .eventDate sibling does NOT get a matching
 * horizontal inset (body.wi-wb-registration-landing selectors don't apply), so the date block looks
 * edge-to-edge while the form fields sit 1rem inset. Remove the horizontal inset so both siblings
 * share the same 26rem rail edges. */
.wi-sc-form-wrap--flat .optinFormArea.optin-form-area {
	padding-left:  0 !important;
	padding-right: 0 !important;
}

/* Match inner form width exactly to the date block: .eventDate:not(.wi-live-dates-wrap) is block-level;
 * the live row already stretches to 100%. Evergreen select + form inputs then share identical L/R edges. */
.wi-sc-form-wrap--flat .eventDate {
	width:      100%;
	max-width:  100%;
	box-sizing: border-box;
}

/*
 * Custom dates: .eventDate.evergreen-Registration often sits inside .wi-sc-form-wrap (not a direct child
 * of .wi-sc-hosted), so webinar-modern’s `> .eventDate` padding rules never apply — theme / other rules
 * can still add 1rem horizontal padding while .optinFormArea stays flush → “Select date” looks narrower.
 */
.wi-sc-hosted .wi-sc-form-wrap--flat .eventDate.evergreen-Registration,
.wi-sc-hosted .wi-sc-form-wrap--flat .eventDate.evergreen-Registration.hola {
	padding-left:  0 !important;
	padding-right: 0 !important;
}

/* Live date row on builder/lightbox pages: webinar-modern.css adds 1rem L/R padding via the
 * unscoped `.wi-sc-hosted .eventDate.wi-live-dates-wrap` selector. That leaves extra space before
 * the calendar icon and after the headline copy vs. the form fields below. In flat mode the row
 * should use the same full rail as the form, but icon + date/time stay together as one left-aligned
 * content group (not split to opposite edges). */
.wi-sc-form-wrap--flat .eventDate.wi-live-dates-wrap {
	padding-left:    0 !important;
	padding-right:   0 !important;
	justify-content: flex-start;
}

.wi-sc-form-wrap--flat .eventDate.wi-live-dates-wrap .dateInfo,
.wi-sc-form-wrap--flat .eventDate.wi-live-dates-wrap .dateInfo.wi_date_time_wrap {
	flex:       0 1 auto;
	min-width:  0;
	text-align: left;
}

/* Stack form sections like native GB: one column, labels + controls share left edge */
.wi-sc-form-wrap .wi-optin-form {
	display:        flex;
	flex-direction: column;
	align-items:    stretch;
	width:          100%;
}

/* Field label rhythm — same for .wi_input_field and Thrive-style .wiFormGroup (Timezone, etc.) */
.wi-sc-form-wrap .wi-optin-form .wi_input_field label,
.wi-sc-form-wrap .wi-optin-form label.wi-label,
.wi-sc-form-wrap .wi-optin-form .wiFormGroup label {
	font-weight:   600;
	font-size:     1rem;
	line-height:   1.35;
	margin:        0 0 0.4em;
	padding:       0;
	display:       block;
	width:         100%;
	box-sizing:    border-box;
	text-align:    left;
}

.wi-sc-form-wrap .wi-optin-form label.wi-label > span[aria-hidden="true"] {
	margin-left: 0.12em;
}

/* Timezone / other grouped controls: match vertical rhythm of First Name / Email rows */
.wi-sc-form-wrap .wi-optin-form .wiFormGroup,
.wi-sc-form-wrap .wi-optin-form .wiFormGroup-lg {
	display:        flex;
	flex-direction: column;
	align-items:    stretch;
	width:          100%;
	margin:         0 0 0.85em;
	box-sizing:     border-box;
}

.wi-sc-form-wrap .optinFormArea.optin-form-area {
	box-sizing:  border-box;
	width:         100%;
	max-width:     none !important;
	margin-left:   0 !important;
	margin-right:  0 !important;
	border:        none !important;
	box-shadow:    none !important;
}

/* Legacy hairlines: main.css .autoSep uses border-top between date/time rows. */
.wi-sc-form-wrap .autoSep,
.wi-sc-form-wrap .autoSep.autoSep-d {
	border:        none !important;
	border-top:    none !important;
	border-bottom: none !important;
	background:    transparent !important;
	height:        0;
	min-height:    0;
	margin:        0.25em 0;
	padding:       0;
	overflow:      hidden;
}

.wi-sc-form-wrap hr {
	border:     none !important;
	height:     0;
	margin:     0.35em 0;
	padding:    0;
	opacity:    0;
}

/* ─── Event date block ───────────────────────────────────────────── */
.wi-sc-form-wrap .wi-event-date-block {
	margin-bottom: 1em;
	font-size: inherit;
}

/* ─── Required marker (single rule — was duplicated with conflicting margins) ─── */
.wi-sc-form-wrap .wi-optin-form p.wi-required-text,
.wi-sc-form-wrap .wi-required-text {
	display:      block;
	width:        100%;
	box-sizing:   border-box;
	margin:       0 0 1rem;
	padding:      0;
	text-align:   left;
	font-size:    0.875rem;
	font-weight:  500;
	line-height:  1.45;
	opacity:      0.88;
	word-spacing: 0.06em;
}

/* ─── Input fields ───────────────────────────────────────────────── */
.wi-sc-form-wrap .wi-optin-form .wi_input_field {
	display: flex;
	flex-direction: column;
	margin-bottom: 0.75em;
}

.wi-sc-form-wrap .wi-optin-form input[type="text"],
.wi-sc-form-wrap .wi-optin-form input[type="email"],
.wi-sc-form-wrap .wi-optin-form input[type="tel"],
.wi-sc-form-wrap .wi-optin-form select {
	font-family:   inherit;
	font-size:     1rem;
	color:         var(--wi-fse-neutral-text, var(--wp--preset--color--foreground, inherit));
	background:    var(--wp--preset--color--base, #fff);
	border:        1px solid var(--wi-input-border);
	border-radius: var(--wi-input-radius);
	padding:       var(--wi-input-padding);
	width:         100%;
	box-sizing:    border-box;
	line-height:   1.5;
	margin:        0;
}

/* Long timezone <select>: Thrive/Elementor often set fixed line-height/height — clip selected label text */
.wi-sc-form-wrap .wi-optin-form select,
.wi-sc-form-wrap .wi-optin-form select.wi_webinar_timezone,
.wi-sc-form-wrap .wi-optin-form select.inputField,
.wi-sc-form-wrap .wi-optin-form select.webinar_timezone_a {
	min-height:      2.85em;
	height:          auto !important;
	line-height:     1.45;
	padding-top:     max(0.55em, 10px);
	padding-bottom:  max(0.55em, 10px);
	vertical-align:  middle;
	-webkit-appearance: menulist;
	appearance:      menulist;
}

/* Host wrapper: admin FABs are position:absolute — parent overflow:hidden clips them (Thrive lightbox/columns) */
.wi-sc-hosted {
	overflow: visible !important;
}

.thrv_wrapper .wi-sc-hosted,
.tve_p_lb_content .wi-sc-hosted,
.tve_p_lb_inner .wi-sc-hosted,
.tve_shortcode_rendered .wi-sc-hosted {
	overflow: visible !important;
}

.wi-sc-hosted .wi-sc-design-stack {
	z-index: 1000002;
}

/*
 * Shortcode stack (gb_sc_custom): replicate hosted column flex so inner blocks stretch; when
 * webinar-modern is also loaded, pairing rules below (.wi-sc-form-wrap--flat) still fix Thrive
 * pages without body.wi-wb-registration-landing.
 */
.wi-sc-form-wrap .wi-sc-hosted {
	display:        flex;
	flex-direction: column;
	align-items:    stretch;
	width:          100%;
	max-width:      100%;
	min-width:      0;
	box-sizing:     border-box;
	border:         none !important;
	box-shadow:     none !important;
}

.wi-sc-form-wrap .wi-sc-hosted:has(.wi-sc-design-stack) > div:nth-child(2) {
	display:        flex;
	flex-direction: column;
	align-items:    stretch;
	width:          100%;
	min-width:      0;
	box-sizing:     border-box;
	border:         none !important;
	box-shadow:     none !important;
}

.wi-sc-form-wrap form.wi-optin-form {
	max-width:   none !important;
	width:         100% !important;
	margin-left:   0 !important;
	margin-right:  0 !important;
	box-sizing:    border-box;
}

.wi-sc-form-wrap .eventDate.evergreen-Registration,
.wi-sc-form-wrap .eventDate.evergreen-Registration.hola {
	display:         flex;
	flex-direction:  column;
	align-items:     stretch;
	justify-content: flex-start;
	width:           100%;
	max-width:       100%;
	box-sizing:      border-box;
	border:          none !important;
	box-shadow:      none !important;
}

.wi-sc-form-wrap .eventDate.evergreen-Registration .wiFormGroup,
.wi-sc-form-wrap .eventDate.evergreen-Registration .wiFormGroup-lg {
	width:         100% !important;
	max-width:     100% !important;
	min-width:     0 !important;
	align-self:    stretch !important;
	margin-left:   0 !important;
	margin-right:  0 !important;
	padding-left:  0 !important;
	padding-right: 0 !important;
	box-sizing:    border-box;
	text-align:    left;
}

.wi-sc-form-wrap .wi-optin-form input[type="text"]:focus,
.wi-sc-form-wrap .wi-optin-form input[type="email"]:focus,
.wi-sc-form-wrap .wi-optin-form input[type="tel"]:focus {
	outline: 2px solid var(--wi-fse-cta-fill, var(--wi-btn-bg, #5DA423));
	outline-offset: 1px;
}

/* intl-tel-input wrapper */
.wi-sc-form-wrap .iti {
	width: 100%;
}

/* ─── Submit button ──────────────────────────────────────────────── */
.wi-sc-form-wrap .wi-optin-form .wi-optin-submit,
.wi-sc-form-wrap .wi-optin-form button#optinBTN {
	position:         relative;
	font-family:      inherit;
	font-size:        1.15rem;
	font-weight:      600;
	letter-spacing:   0.01em;
	/* FSE CTA first (GB parity); campaign --wi-btn-bg only when injected from PHP */
	background-color: var(--wi-fse-cta-fill, var(--wi-btn-bg, #5DA423));
	color:            var(--wi-fse-cta-text, var(--wi-btn-color, #ffffff));
	border:           none;
	border-radius:    var(--wi-input-radius);
	padding:          1em 4.35rem 1em 1.5rem; /* extra right padding makes room for ::after arrow graphic */
	cursor:           pointer;
	width:            100%;
	box-sizing:       border-box;
	display:          block;
	text-align:       center;
	transition:       background-color 0.15s ease;
	margin-top:       0.75em;
	overflow:         hidden;
}

/* Button arrow chevrons — inline SVG mask painted in the button's ink color. The legacy arrows2.png is <11% alpha (invisible on bright CTAs); mask+color renders solid chevrons on any CTA hue. */
.wi-sc-form-wrap .wi-optin-form button#optinBTN.addedArrow::after,
.wi-sc-form-wrap .wi-optin-form .wi-optin-submit.addedArrow::after {
	content:                '';
	position:               absolute;
	top:                    0;
	right:                  0;
	width:                  4rem;
	height:                 100%;
	background-color:       var(--wi-fse-cta-text, var(--wi-btn-color, #111));
	-webkit-mask-image:     url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' fill='none' stroke='black' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'><path opacity='0.3' d='M8 12 L18 20 L8 28'/><path opacity='0.55' d='M22 12 L32 20 L22 28'/><path opacity='0.8' d='M36 12 L46 20 L36 28'/><path opacity='1' d='M50 12 L60 20 L50 28'/></svg>");
	        mask-image:     url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' fill='none' stroke='black' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'><path opacity='0.3' d='M8 12 L18 20 L8 28'/><path opacity='0.55' d='M22 12 L32 20 L22 28'/><path opacity='0.8' d='M36 12 L46 20 L36 28'/><path opacity='1' d='M50 12 L60 20 L50 28'/></svg>");
	-webkit-mask-repeat:    no-repeat;
	        mask-repeat:    no-repeat;
	-webkit-mask-position:  center;
	        mask-position:  center;
	-webkit-mask-size:      auto 60%;
	        mask-size:      auto 60%;
	pointer-events:         none;
	transition:             transform 0.2s ease, opacity 0.2s ease;
}

.wi-sc-form-wrap .wi-optin-form .wi-optin-submit:hover,
.wi-sc-form-wrap .wi-optin-form button#optinBTN:hover {
	/* Do not use var(--wi-fse-cta-fill) alone here — it matched default and killed hover. Darken resolved fill. */
	background-color: color-mix(
		in srgb,
		var(--wi-fse-cta-fill, var(--wi-btn-bg, #5DA423)) 82%,
		#000000
	);
	color:            var(--wi-fse-cta-text, var(--wi-btn-color, #ffffff));
	opacity:          1;
}

.wi-sc-form-wrap .wi-optin-form button#optinBTN.addedArrow:hover::after,
.wi-sc-form-wrap .wi-optin-form .wi-optin-submit.addedArrow:hover::after {
	transform: translateX(3px) scale(1.05);
}

/* ─── Live webinar: row with calendar icon + headline (live-dates.php only) ───
 * live-dates.php injects inline border-top/border-bottom on .wi-live-dates-wrap
 * for the classic LP look (two hairlines around the date row). On gb_sc_custom those
 * hairlines look like visual noise — kill them with !important to beat the inline style. */
.wi-sc-form-wrap .eventDate.wi-live-dates-wrap {
	display:       flex;
	align-items:   center;
	gap:           14px;
	padding:       0.5em 0;
	margin:        0.75em 0 1em;
	border:        none !important;
	border-top:    0 !important;
	border-bottom: 0 !important;
	box-shadow:    none !important;
	/* Full row width: Thrive columns can shrink-wrap the icon+text row vs a full-width form SC below. */
	width:         100%;
	max-width:     100%;
	box-sizing:    border-box;
	min-width:     0;
}

.wi-sc-form-wrap .eventDate.fixed-type,
.wi-sc-form-wrap .eventDate.delayed-dates {
	display:       flex;
	align-items:   center;
	gap:           14px;
	padding:       0.5em 0;
	margin:        0.75em 0 1em;
	border:        none !important;
	border-top:    0 !important;
	border-bottom: 0 !important;
	box-shadow:    none !important;
}

/* Evergreen / fixed / delayed: .eventDate without .wi-live-dates-wrap — block stack, not icon row */
.wi-sc-form-wrap .eventDate:not(.wi-live-dates-wrap) {
	display: block;
	margin:  0 0 1rem;
	padding: 0;
}

/* Evergreen auto schedule: Select date + Best time? (custom-dates.php) */
.wi-sc-form-wrap .eventDate.evergreen-Registration .wiFormGroup {
	margin-bottom: 0.85em;
}

/*
 * Evergreen date/time label: themes and page builders often set text-align:center on <label> or the
 * nearest block wrapper (Thrive column headings, GB heading alignment). Force left with !important
 * and bump specificity (:where(body)) so Thrive's .thrv_wrapper text-align:center cannot win.
 * Applied on the wrapper AND the label so the intrinsic block-level label alignment is reset too.
 */
.wi-sc-form-wrap .eventDate.evergreen-Registration,
.wi-sc-form-wrap .eventDate.evergreen-Registration .wiFormGroup,
.wi-sc-form-wrap .eventDate.evergreen-Registration .wiFormGroup-lg,
.wi-sc-form-wrap #webinarTime,
.wi-sc-form-wrap #webinarTime .wiFormGroup {
	text-align: left !important;
}

:where(body) .wi-sc-form-wrap .eventDate.evergreen-Registration .wiFormGroup label.wi-label,
:where(body) .wi-sc-form-wrap .eventDate.evergreen-Registration .wiFormGroup-lg label.wi-label,
:where(body) .wi-sc-form-wrap .eventDate.evergreen-Registration label.wi-label,
:where(body) .wi-sc-form-wrap #webinarTime label.wi-label {
	display:       block !important;
	width:         100% !important;
	box-sizing:    border-box !important;
	font-weight:   600;
	font-size:     1rem;
	line-height:   1.3;
	margin:        0 0 0.35em !important;
	padding-left:  0 !important;
	padding-right: 0 !important;
	text-align:    left !important;
	color:         var(--wi-fse-neutral-text, var(--wp--preset--color--foreground, inherit));
}

.wi-sc-form-wrap .eventDate.evergreen-Registration label.wi-label .autoSubTitle {
	display:     block;
	font-weight: 500;
	font-size:   0.92em;
	margin-top:  0.25em;
	opacity:     0.88;
	text-align:  left !important;
}

.wi-sc-form-wrap .eventDate.evergreen-Registration select.wiFormControl,
.wi-sc-form-wrap .eventDate.evergreen-Registration select.webinar_start_date,
.wi-sc-form-wrap #webinarTime select.wiFormControl {
	font-family:   inherit;
	font-size:     1rem;
	color:         var(--wi-fse-neutral-text, var(--wp--preset--color--foreground, inherit));
	background:    var(--wp--preset--color--base, #fff);
	border:        1px solid var(--wi-input-border);
	border-radius: var(--wi-input-radius);
	padding:       var(--wi-input-padding) !important;
	width:         100% !important;
	max-width:     100% !important;
	min-width:     0 !important;
	box-sizing:    border-box !important;
	display:       block !important;
	line-height:   1.5;
	margin:        0 !important;
	min-height:    2.85em;
	height:        auto !important;
	vertical-align: middle;
	-webkit-appearance: menulist;
	appearance:    menulist;
}

/*
 * Match input paddings 1:1 so Instant Access select visually equals First Name / Email width.
 * (Some themes bump select padding with a ruleset of higher specificity.)
 */
.wi-sc-form-wrap .eventDate.evergreen-Registration select.wiFormControl,
.wi-sc-form-wrap #webinarTime select.wiFormControl {
	padding-top:    max(0.55em, 10px) !important;
	padding-bottom: max(0.55em, 10px) !important;
}

.wi-sc-form-wrap .eventDate.wi-live-dates-wrap .dateIcon,
.wi-sc-form-wrap .wi-live-dates-wrap .dateIcon {
	box-sizing:          border-box;
	flex:                0 0 auto;
	width:               72px;
	height:              72px;
	min-width:           72px;
	min-height:          72px;
	background-image:    url(../images/datebgnew.png);
	background-repeat:   no-repeat;
	background-position: center center;
	background-size:     contain;
}

.wi-sc-form-wrap .eventDate.wi-live-dates-wrap .dateInfo,
.wi-sc-form-wrap .wi-live-dates-wrap .dateInfo {
	flex:      1 1 auto;
	min-width: 0;
}

.wi-sc-form-wrap .eventDate.wi-live-dates-wrap .dateHeadline,
.wi-sc-form-wrap .wi-live-dates-wrap .dateHeadline {
	font-size:   1.12rem;
	font-weight: 600;
	line-height: 1.2;
	/* Nearer to native GB marketing pages: heading serif stack; still inherits colour from wrap */
	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.wi-sc-form-wrap .eventDate.wi-live-dates-wrap .dateSubHeadline,
.wi-sc-form-wrap .wi-live-dates-wrap .dateSubHeadline {
	font-size:   1rem;
	line-height: 1.3;
	font-family: inherit;
	opacity:     0.85;
}

.wi-sc-form-wrap .wi-optin-form .wi-optin-submit:disabled,
.wi-sc-form-wrap .wi-optin-form button#optinBTN:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* image-button variant */
.wi-sc-form-wrap .wi-optin-form .optinBTNimg {
	display: block;
	margin: 0 auto;
}

/* ─── Error / validation messages ───────────────────────────────── */
.wi-sc-form-wrap .wi-error-message,
.wi-sc-form-wrap .wi-form-error {
	color:       #c00000;
	font-size:   0.82em;
	margin-top:  0.25em;
	display:     none;
}

.wi-sc-form-wrap .wi-error-message.visible,
.wi-sc-form-wrap .wi-form-error.visible {
	display: block;
}

.wi-sc-form-wrap .warning-text-container {
	padding: 0.5em;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: var(--wi-input-radius);
	margin-bottom: 0.75em;
}

/* ─── Spam / privacy note ────────────────────────────────────────── */
.wi-sc-form-wrap .spam.wiSpamMessage {
	font-size:   0.78em;
	margin-top:  0.6em;
	text-align:  center;
	opacity:     0.7;
}

/* ─── GDPR consent row ───────────────────────────────────────────── */
.wi-sc-form-wrap .wi-gdpr-row {
	display:      flex;
	align-items:  flex-start;
	gap:          0.5em;
	font-size:    0.85em;
	margin-bottom: 0.75em;
}

.wi-sc-form-wrap .wi-gdpr-row input[type="checkbox"] {
	width:  auto;
	flex:   0 0 auto;
	margin-top: 0.2em;
}

/* ─── Admin Hint box ─────────────────────────────────────────────── */
.wi-sc-admin-hint {
	box-sizing:  border-box;
	position:    relative;
	z-index:     999999; /* stay above Thrive / Elementor canvas overlays when logged in */
	padding:     12px 16px;
	margin:      0 52px 1em 0; /* right margin keeps box clear of WI's 3 floating admin icons */
	background:  #f0f6fc;
	border:      1px solid #b6d4fe;
	border-left: 4px solid #0d6efd;
	border-radius: 4px;
	font-size:   13px;
	line-height: 1.5;
	color:       #1e3a5f;
}

.wi-sc-admin-hint strong {
	display:     block;
	margin-bottom: 4px;
}

.wi-sc-admin-hint a {
	color:           #0d6efd;
	font-weight:     600;
	text-decoration: underline;
}

.wi-sc-admin-hint .wi-sc-hint-actions {
	display:     flex;
	flex-wrap:   wrap;
	gap:         8px;
	margin-top:  8px;
}

.wi-sc-admin-hint .wi-sc-hint-btn {
	display:         inline-block;
	padding:         5px 12px;
	border:          1px solid #0d6efd;
	border-radius:   3px;
	background:      #0d6efd;
	color:           #ffffff;
	font-size:       12px;
	font-weight:     600;
	cursor:          pointer;
	text-decoration: none;
	white-space:     nowrap;
}

.wi-sc-admin-hint .wi-sc-hint-btn.secondary {
	background: #ffffff;
	color:      #0d6efd;
}

.wi-sc-admin-hint .wi-sc-hint-btn:hover {
	opacity: 0.85;
}

.wi-sc-admin-hint .wi-sc-hint-msg {
	font-size:  12px;
	margin-top: 6px;
	color:      #555;
}