/*
 * Interactive Power Calculator - Front Office styles.
 * Every rule is scoped under .ge-ipc-root so nothing here can leak into the theme's
 * own buttons/inputs/selects/cards/grid/typography (§10 of CLAUDE.md).
 */

.ge-ipc-root {
	--ge-ipc-gap: 16px;
	--ge-ipc-radius: 10px;
	--ge-ipc-border: #dcdfe3;
	--ge-ipc-text: #1c1f24;
	--ge-ipc-muted: #6b7280;
	--ge-ipc-primary: #1c8a4c;
	--ge-ipc-primary-contrast: #ffffff;
	--ge-ipc-danger: #c0392b;
	--ge-ipc-bg-subtle: #f6f7f8;
	--ge-ipc-sticky-top: 20px;

	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	font-family: inherit;
	color: var(--ge-ipc-text);
	font-size: 16px;
	line-height: 1.5;
}

.ge-ipc-root *,
.ge-ipc-root *::before,
.ge-ipc-root *::after {
	box-sizing: border-box;
}

.ge-ipc-root [hidden] {
	display: none !important;
}

.ge-ipc-root img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Visible, non-removed focus states everywhere inside the module (§10, §27) */
.ge-ipc-root a:focus-visible,
.ge-ipc-root button:focus-visible,
.ge-ipc-root input:focus-visible,
.ge-ipc-root select:focus-visible,
.ge-ipc-root [tabindex]:focus-visible {
	outline: 3px solid #1c8a4c;
	outline-offset: 2px;
}

/* ---------- Stepper ---------- */

.ge-ipc-stepper {
	display: flex;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	gap: 8px;
}

.ge-ipc-stepper__item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ge-ipc-muted);
	font-size: 0.9rem;
}

.ge-ipc-stepper__item--active {
	color: var(--ge-ipc-text);
	font-weight: 600;
}

.ge-ipc-stepper__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ge-ipc-bg-subtle);
	border: 1px solid var(--ge-ipc-border);
	font-size: 0.85rem;
}

.ge-ipc-stepper__item--active .ge-ipc-stepper__index {
	background: var(--ge-ipc-primary);
	border-color: var(--ge-ipc-primary);
	color: var(--ge-ipc-primary-contrast);
}

/* ---------- Titles / shared ---------- */

.ge-ipc-title {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 16px;
}

.ge-ipc-title--small {
	font-size: 1.1rem;
	margin-bottom: 12px;
}

.ge-ipc-disclaimer {
	color: var(--ge-ipc-muted);
	font-size: 0.85rem;
	margin: 16px 0 0;
}

.ge-ipc-field-error {
	color: var(--ge-ipc-danger);
	font-size: 0.85rem;
	margin: 8px 0 0;
}

.ge-ipc-explainer {
	margin: 16px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--ge-ipc-border);
	border-radius: var(--ge-ipc-radius);
	background: var(--ge-ipc-bg-subtle);
}

.ge-ipc-explainer summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--ge-ipc-text);
}

.ge-ipc-explainer p {
	margin: 10px 0 0;
	color: var(--ge-ipc-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* ---------- Buttons ---------- */

.ge-ipc-actions {
	display: flex;
	gap: 12px;
	margin-top: 24px;
	flex-wrap: wrap;
}

.ge-ipc-btn {
	appearance: none;
	border: 1px solid var(--ge-ipc-border);
	background: #fff;
	color: var(--ge-ipc-text);
	border-radius: var(--ge-ipc-radius);
	padding: 12px 22px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	line-height: 1.2;
}

.ge-ipc-btn:hover {
	background: var(--ge-ipc-bg-subtle);
}

.ge-ipc-btn--primary {
	background: var(--ge-ipc-primary);
	border-color: var(--ge-ipc-primary);
	color: var(--ge-ipc-primary-contrast);
}

.ge-ipc-btn--primary:hover {
	filter: brightness(0.95);
}

.ge-ipc-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- Step 1: group cards ---------- */

.ge-ipc-groups {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ge-ipc-gap);
}

.ge-ipc-group-card {
	position: relative;
	display: block;
	border: 2px solid var(--ge-ipc-border);
	border-radius: var(--ge-ipc-radius);
	cursor: pointer;
	overflow: hidden;
	background: #fff;
}

.ge-ipc-group-card:hover {
	border-color: var(--ge-ipc-primary);
}

.ge-ipc-group-card__input {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 20px;
	height: 20px;
	margin: 0;
}

.ge-ipc-group-card__input:checked ~ .ge-ipc-group-card__body {
	background: var(--ge-ipc-bg-subtle);
}

.ge-ipc-group-card__input:checked {
	outline: none;
}

.ge-ipc-group-card:has(.ge-ipc-group-card__input:checked),
.ge-ipc-group-card--selected {
	border-color: var(--ge-ipc-primary);
	box-shadow: 0 0 0 1px var(--ge-ipc-primary);
}

.ge-ipc-group-card__body {
	display: flex;
	flex-direction: column;
	padding: 16px;
	gap: 8px;
}

.ge-ipc-group-card__image {
	border-radius: calc(var(--ge-ipc-radius) - 2px);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.ge-ipc-group-card__name {
	font-weight: 700;
	font-size: 1.1rem;
}

.ge-ipc-group-card__description {
	color: var(--ge-ipc-muted);
	font-size: 0.9rem;
}

/* ---------- Step 2 layout ---------- */

.ge-ipc-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 24px;
	align-items: start;
}

.ge-ipc-devices-column {
	min-width: 0;
}

.ge-ipc-devices-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.ge-ipc-devices-header .ge-ipc-title {
	margin-bottom: 0;
}

.ge-ipc-reset-btn {
	appearance: none;
	border: 1px solid var(--ge-ipc-border);
	background: #fff;
	color: var(--ge-ipc-muted);
	border-radius: var(--ge-ipc-radius);
	padding: 8px 14px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.ge-ipc-reset-btn:hover {
	border-color: var(--ge-ipc-danger);
	color: var(--ge-ipc-danger);
}

.ge-ipc-devices {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ge-ipc-gap);
}

.ge-ipc-device-card {
	display: grid;
	grid-template-columns: 56px 1fr;
	grid-template-areas:
		"image name"
		"image qty"
		"power power"
		"runtime runtime"
		"presets presets"
		"subtotal subtotal";
	gap: 6px 12px;
	border: 1px solid var(--ge-ipc-border);
	border-radius: var(--ge-ipc-radius);
	padding: 14px;
	background: #fff;
}

.ge-ipc-device-card--active {
	border-color: var(--ge-ipc-primary);
}

.ge-ipc-device-card__image {
	grid-area: image;
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 6px;
	background: var(--ge-ipc-bg-subtle);
}

.ge-ipc-device-card__name {
	grid-area: name;
	font-weight: 600;
	align-self: center;
}

.ge-ipc-device-card__qty {
	grid-area: qty;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ge-ipc-qty-btn {
	appearance: none;
	border: 1px solid var(--ge-ipc-border);
	background: #fff;
	border-radius: 6px;
	width: 36px;
	height: 36px;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.ge-ipc-qty-btn:hover {
	background: var(--ge-ipc-bg-subtle);
}

.ge-ipc-qty-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ge-ipc-qty-input {
	width: 48px;
	height: 36px;
	text-align: center;
	border: 1px solid var(--ge-ipc-border);
	border-radius: 6px;
	font-size: 1rem;
	padding: 0;
}

.ge-ipc-device-card__field {
	grid-area: power;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.85rem;
}

.ge-ipc-device-card__field:nth-of-type(2) {
	grid-area: runtime;
}

.ge-ipc-runtime-presets {
	grid-area: presets;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.ge-ipc-runtime-preset-btn {
	appearance: none;
	border: 1px solid var(--ge-ipc-border);
	background: #fff;
	color: var(--ge-ipc-muted);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 0.75rem;
	cursor: pointer;
}

.ge-ipc-runtime-preset-btn:hover:not(:disabled) {
	border-color: var(--ge-ipc-primary);
	color: var(--ge-ipc-primary);
}

.ge-ipc-runtime-preset-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ge-ipc-device-search {
	margin-bottom: 16px;
}

.ge-ipc-device-search__empty {
	color: var(--ge-ipc-muted);
	font-size: 0.9rem;
	margin: 0 0 16px;
}

.ge-ipc-field-label {
	color: var(--ge-ipc-muted);
}

.ge-ipc-select,
.ge-ipc-input {
	border: 1px solid var(--ge-ipc-border);
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 0.95rem;
	min-height: 40px;
	width: 100%;
	background: #fff;
	color: var(--ge-ipc-text);
}

.ge-ipc-select:disabled,
.ge-ipc-input:disabled {
	background: var(--ge-ipc-bg-subtle);
	color: var(--ge-ipc-muted);
}

.ge-ipc-device-card__subtotal {
	grid-area: subtotal;
	font-size: 0.85rem;
	color: var(--ge-ipc-muted);
	min-height: 1.2em;
}

.ge-ipc-device-card__remove {
	grid-area: subtotal;
	justify-self: end;
	appearance: none;
	border: none;
	background: none;
	color: var(--ge-ipc-danger);
	font-size: 0.85rem;
	cursor: pointer;
	padding: 4px 0;
	text-decoration: underline;
}

/* ---------- Purpose ---------- */

.ge-ipc-purpose {
	border: none;
	padding: 0;
	margin: 24px 0 0;
}

.ge-ipc-purpose__options {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.ge-ipc-purpose-card {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--ge-ipc-border);
	border-radius: var(--ge-ipc-radius);
	padding: 12px;
	cursor: pointer;
	background: #fff;
	font-size: 0.9rem;
}

.ge-ipc-purpose-card:hover {
	border-color: var(--ge-ipc-primary);
}

.ge-ipc-purpose-card:has(input:checked),
.ge-ipc-purpose-card--selected {
	border-color: var(--ge-ipc-primary);
	background: var(--ge-ipc-bg-subtle);
	box-shadow: 0 0 0 1px var(--ge-ipc-primary);
}

.ge-ipc-purpose-card input {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0;
}

/* ---------- Sticky summary ---------- */

.ge-ipc-summary {
	position: sticky;
	top: var(--ge-ipc-sticky-top);
	border: 1px solid var(--ge-ipc-border);
	border-radius: var(--ge-ipc-radius);
	padding: 16px;
	background: var(--ge-ipc-bg-subtle);
	max-height: calc(100vh - var(--ge-ipc-sticky-top) - 16px);
	overflow-y: auto;
}

.ge-ipc-summary__title {
	margin: 0 0 12px;
	font-size: 1.1rem;
}

.ge-ipc-summary__list {
	margin: 0;
}

.ge-ipc-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--ge-ipc-border);
	font-size: 0.9rem;
}

.ge-ipc-summary__row:last-child {
	border-bottom: none;
}

.ge-ipc-summary__row dt {
	color: var(--ge-ipc-muted);
	font-weight: 400;
}

.ge-ipc-summary__row dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.ge-ipc-summary__row--highlight dd {
	color: var(--ge-ipc-primary);
	font-size: 1.05rem;
}

/* ---------- Loader ---------- */

.ge-ipc-loader {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	color: var(--ge-ipc-muted);
	font-size: 0.9rem;
}

/* ---------- Step 3: results ---------- */

.ge-ipc-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 8px;
}

.ge-ipc-result-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--ge-ipc-border);
	border-radius: var(--ge-ipc-radius);
	background: var(--ge-ipc-bg-subtle);
}

.ge-ipc-result-card__label {
	color: var(--ge-ipc-muted);
	font-size: 0.9rem;
}

.ge-ipc-result-card__value {
	font-size: 1.4rem;
	font-weight: 700;
}

.ge-ipc-result-card__hint {
	color: var(--ge-ipc-muted);
	font-size: 0.78rem;
	line-height: 1.3;
}

.ge-ipc-result-card--highlight {
	border-color: var(--ge-ipc-primary);
}

.ge-ipc-result-card--highlight .ge-ipc-result-card__value {
	color: var(--ge-ipc-primary);
}

/* ---------- Step 4: matching products ---------- */

.ge-ipc-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 8px;
}

.ge-ipc-product-card-wrapper {
	border: 1px solid var(--ge-ipc-border);
	border-radius: var(--ge-ipc-radius);
	overflow: hidden;
}

.ge-ipc-no-results {
	margin-top: 8px;
	padding: 20px;
	border: 1px solid var(--ge-ipc-border);
	border-radius: var(--ge-ipc-radius);
	background: var(--ge-ipc-bg-subtle);
}

.ge-ipc-no-results__reassurance {
	color: var(--ge-ipc-muted);
	font-size: 0.9rem;
	margin: 8px 0 0;
}

.ge-ipc-no-results__detail {
	color: var(--ge-ipc-muted);
	font-size: 0.9rem;
	margin: 8px 0 16px;
}

.ge-ipc-loader__spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--ge-ipc-border);
	border-top-color: var(--ge-ipc-primary);
	border-radius: 50%;
	animation: ge-ipc-spin 0.8s linear infinite;
}

@keyframes ge-ipc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Responsive breakpoints - checked at 1440 / 1024 / 768 / 390 / 320 (§27)
   ========================================================================== */

/* Laptop */
@media (max-width: 1024px) {
	.ge-ipc-layout {
		grid-template-columns: 1fr 280px;
	}

	.ge-ipc-purpose__options {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Tablet */
@media (max-width: 768px) {
	.ge-ipc-groups {
		grid-template-columns: repeat(2, 1fr);
	}

	.ge-ipc-layout {
		grid-template-columns: 1fr;
	}

	/* The sticky panel can't safely float beside content in a single column
	   layout without risking covering the site's own navigation (§13/§27),
	   so it becomes a normal block placed above the Back/Next buttons. */
	.ge-ipc-summary {
		position: static;
		max-height: none;
		order: 2;
	}

	.ge-ipc-devices-column {
		display: flex;
		flex-direction: column;
	}

	.ge-ipc-actions {
		order: 3;
	}

	.ge-ipc-devices {
		grid-template-columns: 1fr;
	}
}

/* Mobile */
@media (max-width: 480px) {
	.ge-ipc-root {
		padding: 16px 12px 32px;
		font-size: 15px;
	}

	.ge-ipc-groups {
		grid-template-columns: 1fr;
	}

	.ge-ipc-purpose__options {
		grid-template-columns: 1fr 1fr;
	}

	.ge-ipc-device-card {
		grid-template-columns: 48px 1fr;
	}

	.ge-ipc-stepper__label {
		display: none;
	}

	.ge-ipc-actions {
		flex-direction: column;
	}

	.ge-ipc-actions .ge-ipc-btn {
		width: 100%;
	}
}

/* Small mobile */
@media (max-width: 340px) {
	.ge-ipc-purpose__options {
		grid-template-columns: 1fr;
	}

	.ge-ipc-qty-input {
		width: 40px;
	}
}