/*
 * Denver Configuratore — stile visuale allineato al Figma
 * (node 38330:11483 "Box", file fbrz4aLEauqa5vq0pVXEXr).
 *
 * Plugin autonomo: non passa dalla pipeline SCSS/Vite del tema, quindi i
 * colori/font Denver sono valori letterali (stessi hex di src/scss/partials/_variables.scss).
 * Se quei token cambiano, aggiornare anche qui.
 */

:root {
	--dc-accent: #008ecf;       /* $denver-accent */
	--dc-accent-dark: #00668e;  /* $denver-accent-dark */
	--dc-white: #ffffff;        /* $denver-white */
	--dc-off-white: #f1f1f1;    /* $denver-off-white */
	--dc-light-grey: #dbdbdb;   /* $denver-light-grey */
	--dc-bg-grey: #8a8a8a;      /* $denver-bg-grey */
	--dc-off-black: #5c5c5c;    /* $denver-off-black */
	--dc-black: #000000;        /* $denver-black */
	--dc-font-body: "barlow", Arial, Helvetica, sans-serif;
	--dc-font-display: "hyperspace-race-variable", Arial, Helvetica, sans-serif;
	--dc-edge-gutter: 40px;
}

.wrapper-configuratore {
	max-width: 1400px;
	margin: 0 auto;
	font-family: var(--dc-font-body);
	background-color: var(--dc-white);
	padding-top: 40px;
}

/* ------------------------------------------------------------------ */
/* Colonne domanda / risposte                                          */
/* ------------------------------------------------------------------ */

.dc-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.dc-column-question {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-left: 40px;
}

.dc-eyebrow {
	margin: 0;
	font-family: var(--dc-font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--dc-bg-grey);
	text-transform: uppercase;
}

.dc-question {
	margin: 0;
	font-family: var(--dc-font-display);
	font-weight: 400;
	font-size: 31px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--dc-off-black);
}

.dc-column-answers {
	flex: 1 1 320px;
	display: flex;
	gap: 40px;
	padding: 0 40px 40px 0;
}

.dc-divider {
	flex: 0 0 1px;
	width: 1px;
	background-color: rgba(0, 0, 0, 0.5);
}

.dc-answers-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.dc-step-count {
	margin: 0;
	text-align: right;
	font-family: var(--dc-font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--dc-bg-grey);
}

/* ------------------------------------------------------------------ */
/* Opzioni (checkbox radio-like)                                       */
/* ------------------------------------------------------------------ */

.dc-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dc-option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
	font-family: var(--dc-font-body);
}

.dc-option__checkbox {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--dc-off-white);
	border: 1px solid var(--dc-light-grey);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dc-option__checkbox::before {
	content: "";
	width: 8px;
	height: 8px;
	background-color: var(--dc-white);
	transition: background-color 0.15s ease;
}

.dc-option__label {
	font-weight: 700;
	font-size: 19px;
	line-height: 1.4;
	color: var(--dc-bg-grey);
	transition: color 0.15s ease;
}

.dc-option:hover .dc-option__checkbox {
	border-color: var(--dc-accent);
}

.dc-option.is-selected .dc-option__checkbox {
	background-color: var(--dc-accent);
	border-color: var(--dc-accent);
}

.dc-option.is-selected .dc-option__checkbox::before {
	background-color: var(--dc-white);
}

.dc-option.is-selected .dc-option__label {
	color: var(--dc-off-black);
}

/* ------------------------------------------------------------------ */
/* Navigazione (Back / Next)                                           */
/* ------------------------------------------------------------------ */

.dc-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border: 1px solid var(--dc-accent);
	border-radius: 0;
	background: transparent;
	color: var(--dc-accent);
	font-family: var(--dc-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dc-btn:hover:not(:disabled) {
	background-color: var(--dc-accent);
	color: var(--dc-white);
}

.dc-btn:disabled {
	border-color: var(--dc-light-grey);
	color: var(--dc-light-grey);
	cursor: not-allowed;
}

.dc-btn-next {
	background-color: var(--dc-accent);
	color: var(--dc-white);
}

.dc-btn-next:hover:not(:disabled) {
	background-color: var(--dc-accent-dark);
	border-color: var(--dc-accent-dark);
}

.dc-btn-next:disabled {
	background-color: var(--dc-off-white);
	border-color: var(--dc-light-grey);
	color: var(--dc-light-grey);
}

/* ------------------------------------------------------------------ */
/* Risultati (invariato nella struttura, colori allineati)              */
/* ------------------------------------------------------------------ */

.dc-results h3 {
	font-family: var(--dc-font-display);
	color: var(--dc-off-black);
}

.dc-results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	margin: 20px 0;
}

.dc-product-card {
	display: block;
	border: 1px solid var(--dc-light-grey);
	border-radius: 6px;
	padding: 14px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease;
}

.dc-product-card:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dc-product-card img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 10px;
}

.dc-product-card h4 {
	margin: 0 0 6px;
	font-size: 1.05em;
	font-family: var(--dc-font-body);
}

.dc-product-card p {
	margin: 0;
	font-size: 0.9em;
	color: var(--dc-bg-grey);
}

.dc-loading {
	color: var(--dc-bg-grey);
	font-style: italic;
}

.dc-btn-restart {
	margin-top: 10px;
}

/* ------------------------------------------------------------------ */
/* Responsive — il frame Figma e' desktop (1400px), sotto 768px le due  */
/* colonne si impilano.                                                 */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
	.wrapper-configuratore {
		box-sizing: border-box;
		padding-inline: var(--dc-edge-gutter);
	}

	.dc-columns {
		flex-direction: column;
		gap: 24px;
	}

	.dc-column-question,
	.dc-column-answers {
		flex: 0 1 auto;
		min-width: 0;
		padding: 0;
		width: 100%;
	}

	.dc-column-question {
		gap: 24px;
	}

	.dc-column-answers {
		gap: 24px;
		padding-bottom: 24px;
	}

	.dc-divider {
		display: none;
	}

	.dc-question {
		font-size: 24px;
	}

	.dc-answers-content {
		gap: 24px;
		min-width: 0;
	}

	.dc-nav {
		justify-content: space-between;
		width: 100%;
	}

	.dc-nav .dc-btn {
		flex: 1 1 0;
		min-width: 0;
	}

	.dc-results-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}