/**
 * Jedi-Robe reusable instruction-step component.
 *
 * Provides the shared sci-fi presentation for numbered instructional cards.
 * Page stylesheets may adjust dimensions and spacing but should not redefine
 * card surfaces, borders, colours or interaction states.
 *
 * @package Jedi_Theme
 * @subpackage Components
 */


/* ==========================================================================
   Instruction card
   ========================================================================== */

body.jr-dark-commerce .step-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	height: 100%;

	padding: 2rem;

	border: 1px solid rgba(111, 203, 255, 0.22);
	border-radius: 0.375rem;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.035),
			transparent 42%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.055),
			transparent 15rem
		),
		rgba(10, 17, 27, 0.46);

	color: var(--jr-text);

	box-shadow:
		0 1.25rem 2.75rem rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);

	transform: translateY(0);

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


/* ==========================================================================
   Illuminated status rail
   ========================================================================== */

/**
 * Reuse the short green diagnostic rail used by the shared dark card system.
 */
body.jr-dark-commerce .step-card::before {
	position: absolute;
	top: 0;
	left: 0;

	width: clamp(3.5rem, 30%, 8rem);
	height: 1px;

	background:
		linear-gradient(
			90deg,
			var(--jr-green-light),
			rgba(45, 166, 83, 0)
		);

	box-shadow:
		0 0 1rem rgba(45, 166, 83, 0.18);

	content: "";

	opacity: 0.72;

	transition:
		width 220ms ease,
		opacity 220ms ease;

	pointer-events: none;
}


/* ==========================================================================
   Step header
   ========================================================================== */

body.jr-dark-commerce .step-header {
	display: flex;

	align-items: center;

	gap: 1.25rem;

	margin:
		0
		0
		1.25rem;

	padding: 0;
}


/* ==========================================================================
   Step number
   ========================================================================== */

/**
 * Treat the number as an interface marker rather than a filled decorative
 * badge. This follows the circular icon treatment used by jr-info-box.
 */
body.jr-dark-commerce .step-number {
	display: grid;

	width: 3.5rem;
	height: 3.5rem;

	flex: 0 0 3.5rem;

	place-items: center;

	margin: 0;
	padding: 0;

	border: 1px solid transparent;
	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#141c28,
			#090d14
		) padding-box,
		linear-gradient(
			145deg,
			rgba(69, 217, 107, 0.72),
			rgba(45, 166, 83, 0.18) 58%,
			rgba(111, 203, 255, 0.16)
		) border-box;

	color: var(--jr-green-light);

	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;

	box-shadow:
		0 0.75rem 1.5rem rgba(0, 0, 0, 0.25),
		0 0 1rem rgba(45, 166, 83, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);

	transform: translateY(0);

	transition:
		color 220ms ease,
		box-shadow 220ms ease,
		transform 220ms ease;
}


/* ==========================================================================
   Step title
   ========================================================================== */

body.jr-dark-commerce .step-title {
	margin: 0;

	color: var(--jr-text);

	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.3;

	text-wrap: balance;
}


/* ==========================================================================
   Step content
   ========================================================================== */

body.jr-dark-commerce .step-content {
	margin: 0;

	color: var(--jr-text);

	font-size: 1rem;
	line-height: 1.7;

	text-wrap: pretty;
}


/* ==========================================================================
   Completed state
   ========================================================================== */

/**
 * Preserve support for the existing completed class while adapting it to the
 * dark Jedi-Robe interface.
 */
body.jr-dark-commerce .step-card.completed {
	border-color: rgba(69, 217, 107, 0.46);

	background:
		linear-gradient(
			135deg,
			rgba(69, 217, 107, 0.065),
			transparent 44%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.045),
			transparent 15rem
		),
		rgba(10, 17, 27, 0.52);
}


body.jr-dark-commerce .step-card.completed::before {
	width: 62%;

	opacity: 1;
}


body.jr-dark-commerce
	.step-card.completed
	.step-number {
	border-color: transparent;

	background:
		linear-gradient(
			145deg,
			rgba(69, 217, 107, 0.16),
			rgba(45, 166, 83, 0.07)
		) padding-box,
		linear-gradient(
			145deg,
			var(--jr-green-light),
			rgba(45, 166, 83, 0.35)
		) border-box;

	color: var(--jr-green-bright);
}


/* ==========================================================================
   Hover interaction
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

	body.jr-dark-commerce .step-card:hover {
		border-color: rgba(45, 166, 83, 0.48);

		background:
			linear-gradient(
				135deg,
				rgba(111, 203, 255, 0.065),
				transparent 40%
			),
			rgba(11, 19, 30, 0.68);

		box-shadow:
			0 1.75rem 3.5rem rgba(0, 0, 0, 0.34),
			0 0 1.5rem rgba(45, 166, 83, 0.07),
			inset 0 1px 0 rgba(255, 255, 255, 0.04);

		transform: translateY(-0.25rem);
	}


	body.jr-dark-commerce .step-card:hover::before {
		width: 62%;

		opacity: 1;
	}


	body.jr-dark-commerce
		.step-card:hover
		.step-number {
		color: var(--jr-green-bright);

		box-shadow:
			0 1rem 1.8rem rgba(0, 0, 0, 0.3),
			0 0 1.25rem rgba(45, 166, 83, 0.13),
			inset 0 1px 0 rgba(255, 255, 255, 0.055);

		transform: translateY(-0.125rem);
	}
}


/* ==========================================================================
   Step check
   ========================================================================== */

body.jr-dark-commerce .step-check {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;

	display: none;

	width: 2rem;
	height: 2rem;

	align-items: center;
	justify-content: center;

	border: 1px solid rgba(69, 217, 107, 0.58);
	border-radius: 50%;

	background: rgba(45, 166, 83, 0.14);

	color: var(--jr-green-bright);

	font-size: 1.125rem;

	box-shadow:
		0 0 1rem rgba(45, 166, 83, 0.1);
}


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

@media (prefers-reduced-motion: reduce) {

	body.jr-dark-commerce .step-card,
	body.jr-dark-commerce .step-card::before,
	body.jr-dark-commerce .step-number {
		transition: none;
	}


	body.jr-dark-commerce .step-card:hover,
	body.jr-dark-commerce
		.step-card:hover
		.step-number {
		transform: none;
	}
}


/* ==========================================================================
   Care list
   ========================================================================== */

.care-list {
	list-style: none;

	padding: 0;
}


.care-list li {
	position: relative;

	padding:
		12px
		0
		12px
		32px;

	border-bottom: 1px solid #e8ecef;

	line-height: 1.6;
}


.care-list li:last-child {
	border-bottom: none;
}


.care-list li::before {
	position: absolute;
	left: 0;

	color: var(--primary);

	content: "→";

	font-size: 1.2rem;
	font-weight: 700;
}


/* ==========================================================================
   Help buttons
   ========================================================================== */

.help-buttons {
	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	gap: 1rem;

	margin-top: 2rem;
}

/**
 * Responsive measurement cards on the How to Measure page.
 *
 * Scoped to the dedicated how-to-measure-cards container so shared step
 * cards and information boxes elsewhere retain their existing styling.
 * Each track needs 15rem and at least 40% of the container, allowing at
 * most two columns. Narrow containers fall back to a single column.
 *
 * @package Jedi_Theme
 * @subpackage Instruction_Steps
 */
body.jr-dark-commerce .elementor-element.how-to-measure-cards {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, max(15rem, 40%)), 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 0.75rem;
    align-items: stretch;
}

body.jr-dark-commerce
.how-to-measure-cards > .elementor-element.elementor-widget {
    --container-widget-width: 100%;
    --container-widget-flex-grow: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    grid-column: auto;
    grid-row: auto;
}

body.jr-dark-commerce .how-to-measure-cards .step-card {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: 1.5rem;
}

body.jr-dark-commerce .how-to-measure-cards .step-header {
    gap: 0.9rem;
    margin-bottom: 0.85rem;
}

body.jr-dark-commerce .how-to-measure-cards .step-number {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    font-size: 1.15rem;
}

body.jr-dark-commerce .how-to-measure-cards .step-title {
    min-width: 0;
    font-size: 1.15rem;
    line-height: 1.3;
}

body.jr-dark-commerce .how-to-measure-cards .step-content {
    font-size: 1rem;
    line-height: 1.6;
}