/* Sell To Liz - brand surface styles for WPForms and shared UI.
   Tokens mirror the active design system: Midnight & Gold. */

:root {
	--stl-bg: #000000;
	--stl-surface: #202020;
	--stl-surface-alt: #181818;
	--stl-ink: #FFFFFF;
	--stl-muted: #969696;
	--stl-accent: #FFC000;
	--stl-accent-hover: #917300;
	--stl-on-accent: #151109;
	--stl-border: #2A2A2A;
	--stl-border-strong: #3A3A3A;
	--stl-error: #EF4444;
}

/* ---------- WPForms: modern markup variables ---------- */

.wpforms-container.stl-form,
.wpforms-container .stl-form,
div.wpforms-container-full {
	--wpforms-field-border-radius: 10px;
	--wpforms-field-background-color: #202020;
	--wpforms-field-border-color: #2A2A2A;
	--wpforms-field-text-color: #FFFFFF;
	--wpforms-label-color: #FFFFFF;
	--wpforms-label-sublabel-color: #969696;
	--wpforms-label-error-color: #EF4444;
	--wpforms-button-border-radius: 10px;
	--wpforms-button-background-color: #FFC000;
	--wpforms-button-text-color: #151109;
	--wpforms-page-break-color: #FFC000;
	--wpforms-field-size-input-height: 50px;
	--wpforms-field-size-input-spacing: 16px;
	--wpforms-field-size-font-size: 15px;
	--wpforms-field-size-line-height: 22px;
	--wpforms-field-size-padding-h: 16px;
	--wpforms-field-size-checkbox-size: 18px;
	--wpforms-field-size-sublabel-spacing: 6px;
	--wpforms-field-size-icon-size: 1;
	--wpforms-label-size-font-size: 14px;
	--wpforms-label-size-line-height: 20px;
	--wpforms-label-size-sublabel-font-size: 13px;
	--wpforms-label-size-sublabel-line-height: 18px;
	--wpforms-button-size-font-size: 16px;
	--wpforms-button-size-height: 52px;
	--wpforms-button-size-padding-h: 32px;
	--wpforms-button-size-margin-top: 8px;
	font-family: 'DM Sans', sans-serif;
}

div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form input[type=tel],
div.wpforms-container-full .wpforms-form input[type=number],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
	background-color: #202020;
	border: 1px solid #2A2A2A;
	color: #FFFFFF;
	border-radius: 10px;
	font-family: 'DM Sans', sans-serif;
}

div.wpforms-container-full .wpforms-form input::placeholder,
div.wpforms-container-full .wpforms-form textarea::placeholder {
	color: #7D7D7D;
	opacity: 1;
}

div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
	border-color: #FFC000;
	box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.28);
	outline: none;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
	color: #FFFFFF;
	font-family: 'General Sans', 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
	margin-bottom: 8px;
}

div.wpforms-container-full .wpforms-form .wpforms-field-description,
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
	color: #969696;
	font-size: 13px;
}

div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: #FFC000;
}

div.wpforms-container-full .wpforms-form .wpforms-field {
	padding: 0 0 24px 0;
}

/* Radio groups render as selectable chips, matching the design's step picker. */

div.wpforms-container-full .wpforms-form .wpforms-field-radio ul,
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

div.wpforms-container-full .wpforms-form .wpforms-field-radio ul li,
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul li {
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}

div.wpforms-container-full .wpforms-form .wpforms-field-radio ul li label,
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul li label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #202020;
	border: 1px solid #2A2A2A;
	border-radius: 6px;
	padding: 9px 14px;
	color: #FFFFFF;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

div.wpforms-container-full .wpforms-form .wpforms-field-radio ul li label:hover,
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul li label:hover {
	border-color: #3A3A3A;
	background: #252525;
}

div.wpforms-container-full .wpforms-form .wpforms-field-radio input[type=radio],
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox input[type=checkbox] {
	accent-color: #FFC000;
	margin: 0;
}

div.wpforms-container-full .wpforms-form .wpforms-field-radio input[type=radio]:checked + label,
div.wpforms-container-full .wpforms-form .wpforms-field-radio li:has(input:checked) label,
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li:has(input:checked) label {
	border-color: #FFC000;
	background: rgba(255, 192, 0, 0.1);
}

/* Submit button */

div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-submit {
	background-color: #FFC000;
	color: #151109;
	border: none;
	border-radius: 10px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	padding: 15px 32px;
	width: 100%;
	transition: background-color 0.15s ease, color 0.15s ease;
}

div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form .wpforms-submit:hover {
	background-color: #917300;
	color: #FFFFFF;
}

/* Validation + confirmation */

div.wpforms-container-full .wpforms-form label.wpforms-error,
div.wpforms-container-full .wpforms-form em.wpforms-error {
	color: #EF4444;
	font-size: 13px;
}

div.wpforms-container-full .wpforms-form input.wpforms-error,
div.wpforms-container-full .wpforms-form textarea.wpforms-error,
div.wpforms-container-full .wpforms-form select.wpforms-error {
	border-color: #EF4444;
}

.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	background: #202020;
	border: 1px solid #FFC000;
	border-radius: 14px;
	color: #FFFFFF;
	padding: 24px;
}

.wpforms-confirmation-container-full p {
	color: #FFFFFF;
}

/* Two-up field rows on desktop, stacked on mobile */

div.wpforms-container-full .wpforms-form .wpforms-one-half {
	width: calc(50% - 10px);
	float: left;
	margin-left: 20px;
}

div.wpforms-container-full .wpforms-form .wpforms-first {
	margin-left: 0;
	clear: left;
}

@media (max-width: 767px) {
	div.wpforms-container-full .wpforms-form .wpforms-one-half {
		width: 100%;
		float: none;
		margin-left: 0;
	}
}

/* ---------- Shared page furniture ---------- */

.stl-mono {
	font-family: 'JetBrains Mono', monospace;
}

/* Astra strips nothing here; this only guarantees the dark ground behind
   Elementor containers on templates that fall back to the theme wrapper. */

body.stl-dark,
body.stl-dark .site,
body.stl-dark #page {
	background-color: #000000;
}

/* ---------- TranslatePress language switcher in the Xpro header ---------- */

/* TranslatePress 3.x exposes the switcher through CSS variables, so the brand
   is applied by overriding those rather than fighting its class names. */

.stl-lang-switch .trp-shortcode-switcher__wrapper{
	--bg:#202020 !important;
	--bg-hover:#252525 !important;
	--text:#FFFFFF !important;
	--text-hover:#FFC000 !important;
	--border:1px solid #2A2A2A !important;
	--border-width:1px !important;
	--border-color:#2A2A2A !important;
	--border-radius:10px !important;
	--flag-radius:3px !important;
	--flag-size:16px !important;
	--font-size:13px !important;
	--transition-duration:.18s !important;
	font-family:'DM Sans',sans-serif;
}

.stl-lang-switch .elementor-shortcode{line-height:1;}
.stl-lang-switch .trp-language-item-name{font-family:'DM Sans',sans-serif;font-weight:500;}
.stl-lang-switch .trp-shortcode-switcher:hover{border-color:#FFC000;}
.stl-lang-switch .trp-switcher-dropdown-list{background:#0B0B0B;border:1px solid #2A2A2A;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.6);overflow:hidden;}
.stl-lang-switch .trp-switcher-dropdown-list .trp-language-item{color:#969696;}
.stl-lang-switch .trp-switcher-dropdown-list .trp-language-item:hover{color:#FFC000;background:#202020;}

@media (max-width:767px){
	.stl-lang-switch .trp-shortcode-switcher__wrapper{--font-size:12px !important;--flag-size:14px !important;}
	.stl-lang-switch .trp-language-item-name{display:none;}
}