/* ============================================================
 * Trinette Konfigurator – frontend styles
 *
 * Visuellt anpassad till Trinettkök-temat (functionalistic
 * premium-vitvara: kallt vitt, borstat stål, skarpa kanter,
 * Inter Tight-typografi). Alla värden ärvs från temats
 * --wp--preset--*-variabler när de finns, med säkra
 * fallbacks så att pluginet även fungerar fristående.
 *
 * Klassnamnen är oförändrade – styling är scopad via
 * .trinette-conf-root så vi inte krockar med temat.
 * ============================================================ */

.trinette-conf-root {
	/* Ytor */
	--tc-bg:           var( --wp--preset--color--white,     #ffffff );
	--tc-surface:      var( --wp--preset--color--white,     #ffffff );
	--tc-surface-soft: var( --wp--preset--color--mist,      #f4f5f7 );
	--tc-surface-alt:  var( --wp--preset--color--off-white, #fafafb );
	--tc-scene-from:   var( --wp--preset--color--white,     #ffffff );
	--tc-scene-to:     var( --wp--preset--color--mist,      #f4f5f7 );

	/* Text */
	--tc-text:    var( --wp--preset--color--ink,    #0a0f14 );
	--tc-text-2:  var( --wp--preset--color--graphite, #2a2f36 );
	--tc-muted:   var( --wp--preset--color--slate,  #6b7280 );
	--tc-dim:     var( --wp--preset--color--chrome, #b1b6bd );

	/* Linjer */
	--tc-line:        #e5e7eb;
	--tc-line-strong: #d1d5db;

	/* Aktiv / accent (matchar temats button: ink → graphite) */
	--tc-accent:     var( --wp--preset--color--ink,      #0a0f14 );
	--tc-accent-hov: var( --wp--preset--color--graphite, #2a2f36 );
	--tc-accent-soft: var( --wp--preset--color--mist,    #f4f5f7 );
	--tc-active-bg:  var( --wp--preset--color--ink,      #0a0f14 );
	--tc-active-fg:  #ffffff;

	/* Status */
	--tc-ok-bg:  #ecf4ef;
	--tc-ok-fg:  #1f5d36;
	--tc-err-bg: #fdf1f2;
	--tc-err-fg: #842029;

	/* Form-tokens */
	--tc-radius-card: 2px;
	--tc-radius-ctrl: 4px;
	--tc-radius-pill: 999px;

	--tc-shadow:    0 1px 2px rgba( 15, 18, 22, 0.04 ), 0 4px 14px rgba( 15, 18, 22, 0.06 );
	--tc-shadow-lg: 0 2px 6px rgba( 15, 18, 22, 0.06 ), 0 12px 30px rgba( 15, 18, 22, 0.08 );

	--tc-transition: 200ms ease;
	--tc-transition-fast: 120ms ease;

	box-sizing: border-box;
	font-family: var( --wp--preset--font-family--sans, 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif );
	color: var( --tc-text );
	background: var( --tc-bg );
	line-height: 1.55;
	letter-spacing: -0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.trinette-conf-root *,
.trinette-conf-root *::before,
.trinette-conf-root *::after {
	box-sizing: inherit;
}

.trinette-conf-loading {
	padding: 48px 24px 32px;
	text-align: center;
	color: var( --tc-muted );
}

.trinette-conf-loading__text {
	margin: 24px 0 0;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --tc-muted );
}

.trinette-conf-skeleton {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.05fr );
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	text-align: left;
}

@media ( max-width: 900px ) {
	.trinette-conf-skeleton { grid-template-columns: 1fr; gap: 20px; }
}

.trinette-conf-skeleton__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.trinette-conf-skeleton__block,
.trinette-conf-skeleton__scene {
	background: linear-gradient( 90deg, var( --tc-surface-soft ) 25%, #eceef1 37%, var( --tc-surface-soft ) 63% );
	background-size: 400% 100%;
	animation: trinette-skeleton-shimmer 1.4s ease infinite;
	border: 1px solid var( --tc-line );
	border-radius: var( --tc-radius-card );
}

.trinette-conf-skeleton__block { height: 88px; }
.trinette-conf-skeleton__block--short { height: 56px; }
.trinette-conf-skeleton__scene { height: 280px; }

@keyframes trinette-skeleton-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

.trinette-conf-error {
	padding: 16px 20px;
	background: var( --tc-surface-soft );
	color: var( --tc-text );
	border: 1px solid var( --tc-line );
	border-left: 3px solid var( --tc-accent );
	border-radius: var( --tc-radius-card );
	font-size: 0.9375rem;
}

/* Layout */
.trinette-conf__layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.05fr );
	gap: 32px;
	align-items: start;
}

@media ( max-width: 900px ) {
	.trinette-conf__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.trinette-conf__left {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.trinette-conf__right {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media ( max-width: 900px ) {
	.trinette-conf__right {
		position: static;
		top: auto;
	}
}

/* Scene (SVG) */
.trinette-conf__scene {
	background: var( --tc-surface-soft );
	border: 1px solid var( --tc-line );
	border-radius: var( --tc-radius-card );
	overflow: hidden;
}

.trinette-conf__scene svg.trinette-svg {
	display: block;
	width: 100%;
	height: auto;
	background: linear-gradient( 180deg, var( --tc-scene-from ) 0%, var( --tc-scene-to ) 100% );
}

/* Specs panel under SVG-scenen */
.trinette-conf__specs {
	background: var( --tc-surface );
	border: 1px solid var( --tc-line );
	border-radius: var( --tc-radius-card );
	padding: 22px 24px;
}

.trinette-conf__specs-title {
	margin: 0 0 18px 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --tc-muted );
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.trinette-conf__specs-title::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background: currentColor;
}

.trinette-spec__grid {
	display: grid;
	/* Max 2 kolumner — ger varje attribut-rad gott om plats så att label
	 * och värde aldrig krockar. På smala viewports stackas till 1 kolumn. */
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0;
	border-top: 1px solid var( --tc-line );
	border-left: 1px solid var( --tc-line );
}

@media ( max-width: 720px ) {
	.trinette-spec__grid {
		grid-template-columns: 1fr;
	}
}

.trinette-spec__group {
	background: var( --tc-surface );
	padding: 16px 18px;
	border-right: 1px solid var( --tc-line );
	border-bottom: 1px solid var( --tc-line );
}

.trinette-spec__title {
	margin: 0 0 10px 0;
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --tc-text );
	letter-spacing: -0.015em;
}

.trinette-spec__rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.trinette-spec__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 32px;
	row-gap: 4px;
	font-size: 0.8125rem;
	line-height: 1.45;
}

.trinette-spec__label {
	color: var( --tc-muted );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.6875rem;
	font-weight: 500;
	flex: 1 1 auto;
	min-width: 0;
	/* Säkerställ att långa labels inte trycker värdet */
	overflow-wrap: break-word;
}

.trinette-spec__value {
	text-align: right;
	color: var( --tc-text );
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
	min-width: max-content;
	white-space: nowrap;
}

.trinette-spec__value strong {
	font-weight: 600;
}

.trinette-spec__sub {
	font-size: 0.6875rem;
	color: var( --tc-muted );
}

/* Sections (numrerade kort) */
.trinette-section {
	background: var( --tc-surface );
	border: 1px solid var( --tc-line );
	border-radius: var( --tc-radius-card );
	padding: 22px 24px;
}

.trinette-section__header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var( --tc-line );
}

.trinette-section__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var( --tc-muted );
	background: transparent;
	border: 1px solid var( --tc-line );
	border-radius: var( --tc-radius-ctrl );
	font-variant-numeric: tabular-nums;
}

.trinette-section__title {
	margin: 0;
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var( --tc-text );
}

/* Option grid */
.trinette-opt-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: 10px;
}

.trinette-opt-grid--two {
	grid-template-columns: 1fr 1fr;
}

.trinette-opt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 14px 16px;
	background: var( --tc-surface );
	border: 1px solid var( --tc-line );
	border-radius: var( --tc-radius-ctrl );
	cursor: pointer;
	transition: border-color var( --tc-transition-fast ), background var( --tc-transition-fast ), color var( --tc-transition-fast );
	font: inherit;
	color: inherit;
	text-align: left;
}

.trinette-opt:hover {
	border-color: var( --tc-accent );
}

.trinette-opt:focus-visible {
	outline: none;
	border-color: var( --tc-accent );
	box-shadow: 0 0 0 3px rgba( 10, 15, 20, 0.10 );
}

.trinette-opt.is-active {
	border-color: var( --tc-active-bg );
	background: var( --tc-active-bg );
	color: var( --tc-active-fg );
}

.trinette-opt__title {
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.trinette-opt__sub {
	font-size: 0.6875rem;
	opacity: 0.78;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 500;
}

/* Feature list (yes/no toggles) */
.trinette-feature-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.trinette-feature {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 4px;
	border-bottom: 1px solid var( --tc-line );
}

.trinette-feature:last-child {
	border-bottom: 0;
}

.trinette-feature__label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var( --tc-text );
	letter-spacing: -0.005em;
}

.trinette-feature__lockval {
	font-size: 0.75rem;
	color: var( --tc-muted );
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 500;
}

.trinette-feature.is-locked .trinette-feature__label {
	color: var( --tc-muted );
}

.trinette-toggle {
	display: inline-flex;
	background: var( --tc-surface-soft );
	border: 1px solid var( --tc-line );
	border-radius: var( --tc-radius-pill );
	padding: 3px;
	gap: 2px;
}

.trinette-toggle__opt {
	background: transparent;
	border: 0;
	padding: 6px 16px;
	border-radius: var( --tc-radius-pill );
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	cursor: pointer;
	color: var( --tc-muted );
	transition: background var( --tc-transition-fast ), color var( --tc-transition-fast );
}

.trinette-toggle__opt:hover:not(.is-active) {
	color: var( --tc-text );
}

.trinette-toggle__opt.is-active {
	background: var( --tc-active-bg );
	color: var( --tc-active-fg );
}

/* Addons */
.trinette-addon-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.trinette-addon {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	background: var( --tc-surface );
	border: 1px solid var( --tc-line );
	border-radius: var( --tc-radius-ctrl );
	cursor: pointer;
	transition: border-color var( --tc-transition-fast ), background var( --tc-transition-fast );
}

.trinette-addon:hover {
	border-color: var( --tc-line-strong );
	background: var( --tc-surface-alt );
}

.trinette-addon.is-active {
	border-color: var( --tc-accent );
	background: var( --tc-surface );
	box-shadow: inset 3px 0 0 var( --tc-accent );
}

.trinette-addon.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.trinette-addon.is-required {
	background: var( --tc-surface-soft );
	border-style: dashed;
}

.trinette-addon input[ type="checkbox" ] {
	width: 16px;
	height: 16px;
	accent-color: var( --tc-accent );
	cursor: inherit;
}

.trinette-addon__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.trinette-addon__title {
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var( --tc-text );
}

.trinette-addon__desc {
	font-size: 0.8125rem;
	color: var( --tc-muted );
	line-height: 1.45;
}

.trinette-addon__badge {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.625rem;
	background: var( --tc-active-bg );
	color: var( --tc-active-fg );
	padding: 3px 8px;
	border-radius: var( --tc-radius-pill );
	width: fit-content;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}

.trinette-addon__price {
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	color: var( --tc-text );
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* Summary */
.trinette-summary {
	background: var( --tc-surface );
	border: 1px solid var( --tc-line );
	border-radius: var( --tc-radius-card );
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.trinette-summary__title {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --tc-muted );
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.trinette-summary__title::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background: currentColor;
}

.trinette-summary__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-size: 0.6875rem;
	color: var( --tc-muted );
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 500;
}

.trinette-summary__lines {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 0;
	border-top: 1px solid var( --tc-line );
	border-bottom: 1px solid var( --tc-line );
}

.trinette-summary__line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.875rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.trinette-summary__line span:first-child {
	color: var( --tc-text-2 );
	flex: 1;
}

.trinette-summary__line span:last-child {
	color: var( --tc-text );
	font-weight: 500;
	white-space: nowrap;
}

.trinette-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding-top: 4px;
	color: var( --tc-muted );
}

.trinette-summary__total-amount {
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var( --tc-text );
	text-transform: none;
	font-variant-numeric: tabular-nums;
}

.trinette-summary__shipping {
	font-size: 0.75rem;
	color: var( --tc-muted );
	letter-spacing: -0.005em;
}

/* CTA – matchar .tk-btn--primary i temat */
.trinette-cta {
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	background: var( --tc-active-bg );
	color: var( --tc-active-fg );
	border: 1px solid var( --tc-active-bg );
	border-radius: var( --tc-radius-ctrl );
	font: inherit;
	font-family: var( --wp--preset--font-family--sans, inherit );
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1;
	cursor: pointer;
	transition: background var( --tc-transition-fast ), border-color var( --tc-transition-fast );
}

.trinette-cta:hover:not(:disabled) {
	background: var( --tc-accent-hov );
	border-color: var( --tc-accent-hov );
}

.trinette-cta:focus-visible {
	outline: 2px solid var( --tc-dim );
	outline-offset: 2px;
}

.trinette-cta:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.trinette-cta.is-loading {
	cursor: progress;
}

/* Status-meddelanden – visuellt synkat med Woo-notiserna i temat */
.trinette-msg {
	padding: 12px 16px;
	border-radius: var( --tc-radius-card );
	font-size: 0.875rem;
	border-left: 3px solid currentColor;
	background: var( --tc-surface-soft );
}

.trinette-msg--ok {
	background: var( --tc-ok-bg );
	color: var( --tc-ok-fg );
}

.trinette-msg--err {
	background: var( --tc-err-bg );
	color: var( --tc-err-fg );
}

.trinette-msg a {
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
}

.trinette-conf-empty {
	padding: 64px 24px;
	text-align: center;
	color: var( --tc-muted );
	font-size: 0.875rem;
}

/* Mobile sticky bottom bar */
.trinette-conf__mobile-bar {
	display: none;
}

@media ( max-width: 900px ) {
	body.is-configurator-page {
		padding-bottom: 84px;
	}

	.trinette-conf__mobile-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 120;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		background: rgba( 255, 255, 255, 0.96 );
		border-top: 1px solid var( --tc-line );
		box-shadow: 0 -4px 20px rgba( 10, 15, 20, 0.08 );
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.trinette-conf__mobile-price {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.trinette-conf__mobile-label {
		font-size: 0.625rem;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: var( --tc-muted );
		font-weight: 600;
	}

	.trinette-conf__mobile-amount {
		font-family: var( --wp--preset--font-family--display, inherit );
		font-size: 1.0625rem;
		font-weight: 600;
		color: var( --tc-text );
		font-variant-numeric: tabular-nums;
	}

	.trinette-conf__mobile-cta {
		flex-shrink: 0;
		min-width: 148px;
	}
}

.trinette-summary__delivery {
	font-size: 0.8125rem;
	color: var( --tc-muted );
	margin: 0 0 12px;
	line-height: 1.45;
}

.trinette-summary__addons-title {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --tc-muted );
	font-weight: 600;
	margin: 12px 0 8px;
}

.trinette-summary__trust {
	font-size: 0.75rem;
	color: var( --tc-muted );
	margin: 10px 0 0;
	line-height: 1.45;
}

/* Mörk variant (för shortcode theme="dark") */
.trinette-conf-theme-dark {
	--tc-bg:           #0a0f14;
	--tc-surface:      #11161c;
	--tc-surface-soft: #181d24;
	--tc-surface-alt:  #14191f;
	--tc-scene-from:   #181d24;
	--tc-scene-to:     #0f141a;

	--tc-text:    #f5f5f5;
	--tc-text-2:  #d6d9de;
	--tc-muted:   #9ca0a8;
	--tc-dim:     #6b7280;

	--tc-line:        #232830;
	--tc-line-strong: #2f353e;

	--tc-accent:     #f5f5f5;
	--tc-accent-hov: #ffffff;
	--tc-accent-soft: #1a1f26;
	--tc-active-bg:  #f5f5f5;
	--tc-active-fg:  #0a0f14;

	--tc-ok-bg:  rgba( 47, 110, 72, 0.18 );
	--tc-ok-fg:  #b9e2c8;
	--tc-err-bg: rgba( 200, 32, 44, 0.16 );
	--tc-err-fg: #f3b3b8;

	--tc-shadow:    0 1px 2px rgba( 0, 0, 0, 0.4 ), 0 8px 24px rgba( 0, 0, 0, 0.35 );
	--tc-shadow-lg: 0 4px 12px rgba( 0, 0, 0, 0.45 ), 0 24px 48px rgba( 0, 0, 0, 0.4 );
}

/* Fokus generellt (knappar/checkboxar inom roten) */
.trinette-conf-root .trinette-toggle__opt:focus-visible,
.trinette-conf-root .trinette-addon:focus-within {
	outline: 2px solid var( --tc-dim );
	outline-offset: 2px;
}

/* Tightare layout när konfiguratorn ligger på temats konfiguratormall */
.is-configurator-page .trinette-conf-root {
	--tc-shadow: none;
}

/* Reduced motion */
@media ( prefers-reduced-motion: reduce ) {
	.trinette-conf-root * {
		transition: none !important;
	}
}