/**
 * Jedi-Robe global WPForms styling.
 *
 * Provides the shared WPForms visual system across the Jedi-Robe dark theme.
 * The selectors intentionally retain the full WPForms selector structure used
 * in the original approved Contact Us stylesheet so plugin/theme rules do not
 * unexpectedly override the component.
 *
 * Page-specific layout and exceptional sizing remain in page stylesheets.
 *
 * @package Jedi_Theme
 * @subpackage Components
 * @since 1.0.0
 */

/* ==========================================================================
   WPForms canvas
   ========================================================================== */

body.jr-dark-commerce div.wpforms-container-full {
	width: 100%;
	padding: 0;
	background: transparent;
}

body.jr-dark-commerce div.wpforms-container-full .wpforms-form {
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--jr-text, #fff);
}

/* ==========================================================================
   WPForms field rhythm
   ========================================================================== */

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field {
	margin: 0;
	padding: 0 0 1rem;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-layout-row {
	gap: 1rem;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-layout-column {
	min-width: 0;
}

/* ==========================================================================
   Labels
   ========================================================================== */

/**
 * Shared WPForms field labels and supporting text.
 *
 * @package Jedi_Theme
 * @subpackage Components
 */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field-label {
	margin: 0 0 0.38rem;
	color: var(--jr-text-soft, #fff);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.35;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field-sublabel,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field-description {
	margin-top: 0.3rem;
	color: var(--jr-text-muted, #98a9c0);
	font-size: 0.68rem;
	line-height: 1.4;
}

/* ==========================================================================
   Input controls
   ========================================================================== */

/**
 * Shared compact dark field treatment.
 *
 * A 3rem minimum height equals 48px at a 16px root font size.
 *
 * @package Jedi_Theme
 * @subpackage Components
 */
/**
 * Preserve WPForms select dropdown artwork while applying the Jedi-Robe
 * dark form background.
 *
 * Use background-color rather than the background shorthand so any existing
 * WPForms/theme background-image used by select controls remains intact.
 */
body.jr-dark-commerce div.wpforms-container-full .wpforms-form input[type="text"],
body.jr-dark-commerce div.wpforms-container-full .wpforms-form input[type="email"],
body.jr-dark-commerce div.wpforms-container-full .wpforms-form input[type="tel"],
body.jr-dark-commerce div.wpforms-container-full .wpforms-form input[type="number"],
body.jr-dark-commerce div.wpforms-container-full .wpforms-form select,
body.jr-dark-commerce div.wpforms-container-full .wpforms-form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 3rem;
	margin: 0;
	padding: 0.75rem 0.85rem;

	border: 1px solid rgba(152, 169, 192, 0.22);
	border-radius: 0;

	outline: 0;

	background-color: rgba(2, 6, 9, 0.84);

	color: #fff;
	caret-color: #fff;

	font: inherit;
	font-size: 1rem;

	box-shadow: none;

	transition:
		border-color 150ms ease,
		box-shadow 150ms ease,
		background-color 150ms ease;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	textarea {
	min-height: 9rem;
	resize: vertical;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	input::placeholder,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	textarea::placeholder {
	color: rgba(255, 255, 255, 0.46);
	opacity: 1;
	font-size: 1rem;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	input[type="text"]:focus,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	input[type="email"]:focus,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	input[type="tel"]:focus,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	input[type="number"]:focus,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	select:focus,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	textarea:focus {
	border-color: rgba(69, 217, 107, 0.62);
	outline: 0;
	background: rgba(3, 8, 12, 0.96);
	color: #fff;
	caret-color: #fff;
	box-shadow: 0 0 0 3px rgba(69, 217, 107, 0.07);
}

/* ==========================================================================
   Checkbox
   ========================================================================== */

/**
 * Shared dark WPForms checkbox treatment.
 *
 * The unchecked state remains neutral. Green is reserved for selected and
 * keyboard-focus states.
 *
 * @package Jedi_Theme
 * @subpackage Components
 */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field-checkbox
	input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	width: 1.05rem;
	height: 1.05rem;
	place-content: center;
	margin: 0.12rem 0.7rem 0 0;
	border: 1px solid rgba(152, 169, 192, 0.58);
	border-radius: 0.1rem;
	background: rgba(2, 6, 9, 0.92);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
	cursor: pointer;
	transition:
		border-color 150ms ease,
		background-color 150ms ease,
		box-shadow 150ms ease;
}

/* Normal check mark. */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field-checkbox
	input[type="checkbox"]::before {
	position: static;
	inset: auto;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--jr-green-light, #45d96b);
	content: "✓";
	font-family: Arial, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	opacity: 0;
	transform: none;
	transition: opacity 120ms ease;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field-checkbox
	input[type="checkbox"]::after {
	display: none;
	content: none;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field-checkbox
	input[type="checkbox"]:checked {
	border-color: var(--jr-green-light, #45d96b);
	background: rgba(3, 10, 7, 0.96);
	box-shadow:
		inset 0 0 0 1px rgba(69, 217, 107, 0.08);
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field-checkbox
	input[type="checkbox"]:checked::before {
	opacity: 1;
	transform: none;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field-checkbox
	input[type="checkbox"]:focus-visible {
	border-color: var(--jr-green-light, #45d96b);
	outline: 0;
	box-shadow:
		0 0 0 3px rgba(69, 217, 107, 0.1),
		inset 0 0 0 1px rgba(69, 217, 107, 0.08);
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field-checkbox
	label,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field-checkbox
	.wpforms-field-label-inline {
	padding: 0;
	color: #cfd6df;
	font-size: 0.9rem;
	line-height: 1.45;
}

@media (hover: hover) and (pointer: fine) {
	body.jr-dark-commerce
		div.wpforms-container-full
		.wpforms-form
		.wpforms-field-checkbox
		input[type="checkbox"]:not(:checked):hover {
		border-color: rgba(207, 214, 223, 0.82);
		background: rgba(7, 12, 17, 0.96);
	}
}

/* ==========================================================================
   WPForms modern dropdown / Choices.js
   ========================================================================== */

/**
 * Shared dark treatment for the WPForms Modern Dropdown.
 *
 * The complete selector chain intentionally mirrors the approved original
 * Contact Us implementation to reliably override WPForms defaults.
 *
 * @package Jedi_Theme
 * @subpackage Components
 */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__inner {
	border: 1px solid rgba(152, 169, 192, 0.22);
	border-radius: 0;
	background-color: rgba(2, 6, 9, 0.84);
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__inner
	.choices__list--single
	.choices__item--selectable {
	margin: 0;
	padding: 0;
	background: transparent;
	color: #fff;
	line-height: 1.35;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__list--single {
	display: flex;
	width: 100%;
	min-height: calc(3rem - 2px);
	align-items: center;
	margin: 0;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices.is-focused
	.choices__inner,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices.is-open
	.choices__inner,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices.is-open
	.choices__list--dropdown {
	border-color: rgba(69, 217, 107, 0.62);
	background-color: rgba(3, 8, 12, 0.96);
	box-shadow: 0 0 0 3px rgba(69, 217, 107, 0.07);
}

/* Dropdown arrow. */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices[data-type*="select-one"]::after,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices[data-type*="select-multiple"]::after {
	border-top: 5px solid var(--jr-text, #fff);
	border-bottom: 5px solid transparent;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices[data-type*="select-one"].is-open::after,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices[data-type*="select-multiple"].is-open::after {
	border-top: 5px solid transparent;
	border-bottom: 5px solid var(--jr-text, #fff);
}

/* Dropdown panel. */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__list--dropdown {
	z-index: 30;
	margin-top: -1px;
	border: 1px solid rgba(152, 169, 192, 0.28);
	border-radius: 0;
	background: #050a10 !important;
	color: #fff;
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.32);
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices.is-open::before {
	background: none;
}

/* Search field. */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices[data-type*="select-one"]
	input.choices__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.65rem 0.85rem;
	border: 0;
	border-bottom: 1px solid rgba(152, 169, 192, 0.22);
	border-radius: 0;
	outline: 0;
	background: rgba(2, 6, 9, 0.96);
	color: #fff;
	caret-color: #fff;
	font-size: 0.88rem;
	box-shadow: none;
}

/* Dropdown options. */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__item--choice {
	padding: 0.65rem 0.85rem;
	background: transparent;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.86rem;
	line-height: 1.35;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__list--dropdown
	.choices__item--choice.is-highlighted {
	background-color: rgba(45, 166, 83, 0.14);
	color: #fff;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__list--dropdown
	.choices__item--choice.is-selected {
	background-color: rgba(45, 166, 83, 0.06);
	color: var(--jr-green-light, #45d96b);
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__list--dropdown
	.choices__item--choice.is-selected.is-highlighted {
	background-color: rgba(45, 166, 83, 0.18);
	color: #fff;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__placeholder {
	color: rgba(255, 255, 255, 0.38);
	opacity: 1;
}

/* ==========================================================================
   Choices.js remove button
   ========================================================================== */

/**
 * Retains the native WPForms two-gradient remove icon with improved contrast.
 *
 * @package Jedi_Theme
 * @subpackage Components
 */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices[data-type*="select-one"]
	.choices__button {
	opacity: 0.8;
	background-image:
		linear-gradient(
			45deg,
			transparent 47%,
			#b9c2cc 47%,
			#b9c2cc 53%,
			transparent 53%
		),
		linear-gradient(
			135deg,
			transparent 47%,
			#b9c2cc 47%,
			#b9c2cc 53%,
			transparent 53%
		);
	background-position: 50% 50%, 50% 50%;
	background-size: 8px 8px, 8px 8px;
	background-repeat: no-repeat;
}

@media (hover: hover) and (pointer: fine) {
	body.jr-dark-commerce
		div.wpforms-container-full
		.wpforms-form
		.wpforms-field.wpforms-field-select-style-modern
		.choices[data-type*="select-one"]
		.choices__button:hover {
		opacity: 1;
	}
}

/* ==========================================================================
   WPForms validation
   ========================================================================== */

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	label.wpforms-error,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	em.wpforms-error {
	margin-top: 0.35rem;
	color: #ff9c9c;
	font-size: 0.7rem;
	line-height: 1.4;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	input.wpforms-error,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	select.wpforms-error,
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	textarea.wpforms-error {
	border-color: rgba(232, 91, 91, 0.72);
}

/* ==========================================================================
   Submit
   ========================================================================== */

/**
 * Shared Jedi-Robe WPForms primary action.
 *
 * Contact Us may add contextual width/text-transform rules in its page CSS.
 *
 * @package Jedi_Theme
 * @subpackage Components
 */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	button[type="submit"] {
	position: relative;
	display: inline-flex;
	min-height: 3rem;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 1.4rem;
	border: 1px solid var(--jr-green-light, #45d96b);
	border-radius: 0;
	background: linear-gradient(
		135deg,
		var(--jr-green-light, #45d96b),
		var(--jr-green, #2da653)
	);
	color: #080a0e;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	box-shadow:
		0 0.55rem 1.3rem rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
	transform: translateY(0);
	transition:
		filter 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
	body.jr-dark-commerce
		div.wpforms-container-full 
		.wpforms-form 
		.wpforms-submit-container
		button[type="submit"]:hover {
		border-color: var(--jr-green-light);
        background: linear-gradient(135deg, var(--jr-green-light), var(--jr-green));
        color: #080a0e;
        filter: brightness(1.06);
        transform: translateY(-0.0625rem);
        box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.17);
	}
}

body.jr-dark-commerce
	div.wpforms-container-full
	button[type="submit"]:focus::after {
	border: none;
}

/* ==========================================================================
   WPForms confirmation
   ========================================================================== */

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-confirmation-container-full,
body.jr-dark-commerce
	div.wpforms-container-full
	div[submit-success]
	> .wpforms-confirmation-container-full {
	margin: 1.4rem 0 0;
	padding: 1rem 1.1rem;
	border: 1px solid rgba(69, 217, 107, 0.32);
	background: rgba(45, 166, 83, 0.07);
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-confirmation-container-full p,
body.jr-dark-commerce
	div.wpforms-container-full
	div[submit-success]
	> .wpforms-confirmation-container-full p {
	color: #fff;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	body.jr-dark-commerce
		div.wpforms-container-full
		.wpforms-form
		input,
	body.jr-dark-commerce
		div.wpforms-container-full
		.wpforms-form
		select,
	body.jr-dark-commerce
		div.wpforms-container-full
		.wpforms-form
		textarea,
	body.jr-dark-commerce
		div.wpforms-container-full
		.wpforms-form
		button[type="submit"] {
		transition: none;
	}

	body.jr-dark-commerce
		div.wpforms-container-full
		.wpforms-form
		button[type="submit"]:hover {
		transform: none;
	}
}

/* ==========================================================================
   Modern dropdown scrollbar
   ========================================================================== */

/**
 * Style the WPForms Choices.js dropdown scrollbar.
 *
 * Uses the muted structural palette rather than the green interaction accent,
 * keeping green reserved for selected, focused and actionable states.
 *
 * @package Jedi_Theme
 * @subpackage Components
 */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__list--dropdown
	> .choices__list {
	scrollbar-width: thin;
	scrollbar-color:
		rgba(152, 169, 192, 0.48)
		rgba(2, 6, 9, 0.9);
}

/* Chrome, Safari and Chromium-based browsers. */
body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__list--dropdown
	> .choices__list::-webkit-scrollbar {
	width: 0.5rem;
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__list--dropdown
	> .choices__list::-webkit-scrollbar-track {
	background: rgba(2, 6, 9, 0.9);
}

body.jr-dark-commerce
	div.wpforms-container-full
	.wpforms-form
	.wpforms-field.wpforms-field-select-style-modern
	.choices
	.choices__list--dropdown
	> .choices__list::-webkit-scrollbar-thumb {
	border: 2px solid rgba(2, 6, 9, 0.9);
	border-radius: 0;
	background: rgba(152, 169, 192, 0.48);
	background-clip: padding-box;
}

@media (hover: hover) and (pointer: fine) {
	body.jr-dark-commerce
		div.wpforms-container-full
		.wpforms-form
		.wpforms-field.wpforms-field-select-style-modern
		.choices
		.choices__list--dropdown
		> .choices__list::-webkit-scrollbar-thumb:hover {
		background: rgba(152, 169, 192, 0.7);
		background-clip: padding-box;
	}
}

/**
 * Request more information — Jedi dark modal.
 *
 * Matches the Contact Us form-panel background.
 * Fields, validation and submit buttons inherit the existing
 * global styles from assets/css/components/wpforms.css.
 *
 * @package Jedi_Theme
 */

/* Match the existing Contact Us form panel. */
body.jr-dark-commerce
dialog.shoptimizer-modal[data-shoptimizermodal-id="callBack"] {
	color-scheme: dark;
	color: var(--jr-text, #fff);
	border: 1px solid rgba(152, 169, 192, 0.34);
	border-radius: 0;
background-color: #050a10;;
	box-shadow:
		0 2rem 5rem rgba(0, 0, 0, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
	scrollbar-color: rgba(152, 169, 192, 0.48) #050a10;
}

body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]::backdrop {
	background: rgba(0, 0, 0, 0.78);
}

/* Remove the original white inner surfaces. */
body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.shoptimizer-modal--container,
body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.shoptimizer-modal--content {
	background: transparent;
	color: var(--jr-text, #fff);
}

/* Product summary. */
body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.callback-product_wrapper {
	background: rgba(2, 6, 9, 0.84);
	border-bottom: 1px solid var(--jr-border, rgba(152, 169, 192, 0.2));
}

body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.callback-product_title,
body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.callback-product_title a,
body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.callback-product_price,
body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.callback-product_price .amount {
	color: var(--jr-text, #fff);
}

/* Form heading and privacy note. */
body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
div.wpforms-container-full .wpforms-title {
	color: var(--jr-text, #fff);
}

body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.textwidget > p {
	color: var(--jr-text-muted, #aeaeae);
}

/* Neutral close control with green keyboard focus. */
body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.shoptimizer-modal--button_close {
	color: var(--jr-text, #fff);
	background: #050a10;
	border: 1px solid rgba(152, 169, 192, 0.34);
	box-shadow: none;
}

body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.shoptimizer-modal--button_close svg {
	stroke: var(--jr-text, #fff);
}

body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.shoptimizer-modal--button_close:hover {
	color: var(--jr-text, #fff);
	background: #151b22;
	border-color: rgba(152, 169, 192, 0.58);
}

body.jr-dark-commerce
dialog[data-shoptimizermodal-id="callBack"]
.shoptimizer-modal--button_close:focus-visible {
	outline: 2px solid var(--jr-green-light, #45d96b);
	outline-offset: 3px;
}

/**
 * CommerceKit waitlist — Jedi dark theme.
 *
 * Matches the Request Info modal surface and provides gold actions.
 * Preserves CommerceKit's native dialog, validation and disabled states.
 *
 * @package Jedi_Theme
 */

/* Dialog surface. */
body.jr-dark-commerce dialog#commercekit-waitlist-popup {
	color-scheme: dark;
	color: var(--jr-text, #fff);
	background: #050a10;
	border: 1px solid rgba(152, 169, 192, 0.34);
	border-radius: 0;
	box-shadow:
		0 2rem 5rem rgba(0, 0, 0, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
	max-width: calc(100vw - 2rem);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	scrollbar-color: rgba(152, 169, 192, 0.48) #050a10;
}

body.jr-dark-commerce dialog#commercekit-waitlist-popup::backdrop {
	background: rgba(0, 0, 0, 0.75);
}

/* Remove the plugin's white inner surfaces. */
body.jr-dark-commerce #commercekit-waitlist-wrap,
body.jr-dark-commerce #commercekit-waitlist-popup .commercekit-waitlist-head,
body.jr-dark-commerce #commercekit-waitlist-popup form.commercekit-waitlist {
	color: var(--jr-text, #fff);
	background: #050a10;
	border: none;
	border-radius: 0;
}

body.jr-dark-commerce #commercekit-waitlist-popup .commercekit-waitlist-head {
	border-bottom: 1px solid rgba(152, 169, 192, 0.22);
}

/* Product details and form copy. */
body.jr-dark-commerce #commercekit-waitlist-title,
body.jr-dark-commerce #commercekit-waitlist-popup .cgkit-product-price,
body.jr-dark-commerce #commercekit-waitlist-popup .cgkit-product-price .amount,
body.jr-dark-commerce #commercekit-waitlist-popup form.commercekit-waitlist p,
body.jr-dark-commerce #commercekit-waitlist-popup .ckwtl-consent-wrap label {
	color: var(--jr-text, #fff);
}

body.jr-dark-commerce #commercekit-waitlist-popup .cgkit-product-info {
	min-width: 0;
}

body.jr-dark-commerce #commercekit-waitlist-title {
	overflow-wrap: anywhere;
}

/* Close control. */
body.jr-dark-commerce #commercekit-waitlist-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body.jr-dark-commerce #commercekit-waitlist-close svg {
	width: 20px;
	height: 20px;
	stroke: var(--jr-text);
}

/* Email field. */
body.jr-dark-commerce #commercekit-waitlist-popup #ckwtl-email {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	color: var(--jr-text, #fff);
	background: #0b121a;
	border: 1px solid rgba(152, 169, 192, 0.4);
	border-radius: 0;
	box-shadow: none;
}

body.jr-dark-commerce #commercekit-waitlist-popup #ckwtl-email::placeholder {
	color: #aab4c0;
	opacity: 1;
}

body.jr-dark-commerce #commercekit-waitlist-popup #ckwtl-email:focus {
	border-color: #d4af37;
	outline: 2px solid #d4af37;
	outline-offset: 2px;
}

/* Consent retains its native required behaviour. */
body.jr-dark-commerce #commercekit-waitlist-popup .ckwtl-consent-wrap {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

body.jr-dark-commerce #commercekit-waitlist-popup #ckwtl-consent {
	flex: 0 0 auto;
	margin: 4px 0 0;
	accent-color: #d4af37;
}

body.jr-dark-commerce #commercekit-waitlist-popup .ckwtl-consent-wrap label {
	margin: 0;
	line-height: 1.5;
}

/* Gold purchase-style actions. */
body.jr-dark-commerce button#cgkit-waitlist-trigger,
body.jr-dark-commerce #commercekit-waitlist-popup button#cgkit-waitlist-submit,
body.jr-dark-commerce .cgkit-mobile-atc-product-simple button.sticky-atc_button,
body.jr-dark-commerce .cgkit-mobile-atc-product-simple button#cgkit-sticky-waitlist-button-2 {
    border: 1px solid var(--jr-green-light);
    border-radius: 0.1875rem;
    background: linear-gradient(135deg, var(--jr-green-light), var(--jr-green));
    color: #07090d;
    font-weight: 750;
    box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.19), 0 0 1rem rgba(45, 166, 83, 0.08);
    transition: filter 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* Gold purchase-style actions. */
body.jr-dark-commerce button#cgkit-waitlist-trigger:hover,
body.jr-dark-commerce #commercekit-waitlist-popup button#cgkit-waitlist-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.24), 0 0 1.35rem rgba(45, 166, 83, 0.14);
}

body.jr-dark-commerce #commercekit-waitlist-popup button#cgkit-waitlist-submit {
	width: 100%;
}

body.jr-dark-commerce #commercekit-waitlist-popup button#cgkit-waitlist-submit:disabled {
	color: #b6bec8;
	background: #28313b;
	border-color: #394451;
	opacity: 1;
	cursor: not-allowed;
}

/* Visible keyboard focus. */
body.jr-dark-commerce button#cgkit-waitlist-trigger:focus-visible,
body.jr-dark-commerce #commercekit-waitlist-popup button:focus-visible,
body.jr-dark-commerce #commercekit-waitlist-popup #ckwtl-consent:focus-visible {
	outline: 2px solid #d4af37;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.jr-dark-commerce button#cgkit-waitlist-trigger,
	body.jr-dark-commerce #commercekit-waitlist-popup button#cgkit-waitlist-submit {
		transition: none;
	}
}

@media (max-width: 992px) {
    body.jr-dark-commerce div.wpforms-container-full .wpforms-form .wpforms-field-label {
		font-size: 0.8rem;
	}

	body.jr-dark-commerce.cta-off-screen #cgkit-mobile-commercekit-sticky-atc {
        background: radial-gradient(circle at 0 0, rgba(45, 166, 83, 0.045), transparent 25rem), radial-gradient(circle at 100% 5%, rgba(111, 203, 255, 0.045), transparent 27rem), linear-gradient(180deg, #05090e 0%, #020609 100%);
    }
}