/* Custom Product Quiz – frontend */
.cpq-quiz {
	max-width: 1114px;
	margin: 0 auto;
	color: #F7F4F3;
	font-family: "Garet", sans-serif;
	position: relative;
}

/* progress bar */
.cpq-progress {
	width: 100%;
	margin: 0 0 40px;
}
.cpq-progress-svg {
	display: block;
	width: 100%;
	height: 2px;
}

/* question title */
.cpq-question-title,
.cpq-question-title .cpq-q-text {
	font-family: "Garet", sans-serif;
	font-weight: 300;
	font-size: 35px;
	line-height: 1;
	letter-spacing: -0.05em;
	color: #f7f4f3;
}
.cpq-question-title {
	margin: 0 0 32px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.cpq-question-desc {
	font-family: "Garet", sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(247,244,243,0.65);
	margin: -16px 0 24px 44px;
}
.cpq-q-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(247, 244, 243, 0.8);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(4px);
	font-size: 14px;
	font-weight: 300;
	color: rgba(247, 244, 243, 0.7);
	flex: 0 0 auto;
}

/* input */
.cpq-quiz .cpq-input-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.cpq-quiz input.cpq-input,
.cpq-quiz input[type="text"].cpq-input,
.cpq-quiz input[type="email"].cpq-input {
	-webkit-backdrop-filter: blur(10px) !important;
	backdrop-filter: blur(10px) !important;
	box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25) !important;
	background: rgba(255, 255, 255, 0.1) !important;
	background-color: rgba(255, 255, 255, 0.1) !important;
	border-radius: 10px !important;
	padding: 12px !important;
	font-family: "Garet", sans-serif !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 1.225 !important;
	letter-spacing: -0.03em !important;
	text-transform: uppercase !important;
	color: rgba(247, 244, 243, 0.9) !important;
	border: 1px solid rgba(255,255,255,0.15) !important;
	width: 100% !important;
	box-sizing: border-box !important;
	outline: none !important;
}
.cpq-quiz input.cpq-input::placeholder { color: rgba(247, 244, 243, 0.6) !important; }
.cpq-quiz input.cpq-input:focus { border-color: rgba(255,255,255,0.35) !important; }

/* buttons */
.cpq-btn-primary {
	display: block;
	width: 100%;
	max-width: 720px;
	margin: 14px auto 0;
	padding: 16px;
	background: #fff;
	color: #111;
	border: none;
	border-radius: 12px;
	font-family: "Garet", sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.05em;
	cursor: pointer;
	text-transform: uppercase;
}
.cpq-btn-secondary {
	display: block;
	width: 100%;
	max-width: 720px;
	margin: 8px auto 0;
	padding: 14px;
	background: transparent;
	color: rgba(247, 244, 243, 0.7);
	border: 1px solid rgba(247,244,243,0.25);
	border-radius: 12px;
	font-family: "Garet", sans-serif;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.05em;
	cursor: pointer;
	text-transform: uppercase;
}

/* option buttons (single) */
.cpq-options { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.cpq-option {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px;
	backdrop-filter: blur(10px);
	box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.08);
	color: #f7f4f3;
	font-family: "Garet", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.225;
	text-transform: uppercase;
	cursor: pointer;
	text-align: left;
}
.cpq-option .cpq-opt-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(247, 244, 243, 0.5);
	color: rgba(247, 244, 243, 0.7);
	font-size: 14px;
	flex: 0 0 auto;
}
.cpq-option:hover .cpq-opt-letter,
.cpq-option:focus-visible .cpq-opt-letter {
	background: #801C2A;
	color: #F7F4F3;
	border-color: #801C2A;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cpq-option { transition: border-color 0.18s ease, background 0.18s ease; }
.cpq-option:hover { border-color: rgba(128, 28, 42, 0.6); }
.cpq-option.is-active { border-color: #801C2A; background: rgba(128,28,42,0.18); }
.cpq-option.is-active .cpq-opt-letter { background: #801C2A; color: #F7F4F3; border-color: #801C2A; }

/* image cards */
.cpq-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.cpq-card {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cpq-card-image {
	background: #fff;
	border-radius: 14px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cpq-card-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cpq-card-label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: rgba(0,0,0,0.6);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	color: #f7f4f3;
	font-size: 14px;
	line-height: 1.2;
}
.cpq-check {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	border: 1px solid rgba(255,255,255,0.4);
	background: transparent;
	flex: 0 0 auto;
	position: relative;
}
.cpq-card.is-active .cpq-check {
	background: #b3263b;
	border-color: #b3263b;
}
.cpq-card.is-active .cpq-check::after {
	content: '';
	position: absolute;
	left: 5px; top: 1px;
	width: 5px; height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* results */
.cpq-results-header {
	text-align: center;
	margin: 0 auto 32px;
	max-width: 720px;
}
.cpq-results-title {
	font-family: "Garet", sans-serif;
	font-weight: 300;
	font-size: 42px;
	line-height: 1;
	letter-spacing: -0.05em;
	color: #f7f4f3;
	margin: 0 0 12px;
}
.cpq-results-sub {
	font-family: "Garet", sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.4;
	color: rgba(247,244,243,0.7);
	margin: 0;
}
@media (max-width: 720px) {
	.cpq-results-title { font-size: 28px; }
}

.cpq-results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	margin-top: 24px;
}
.cpq-result-card {
	background: rgba(255,255,255,0.05);
	border-radius: 12px;
	padding: 12px;
	color: #f7f4f3;
}
.cpq-result-img { width: 100%; height: auto; border-radius: 8px; }
.cpq-result-title { color: #f7f4f3; text-decoration: none; display: block; margin-top: 10px; font-size: 16px; }
.cpq-result-price { margin-top: 6px; opacity: 0.85; }
.cpq-result-link {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 14px;
	background: #fff;
	color: #111;
	border-radius: 8px;
	text-decoration: none;
	font-size: 14px;
	text-transform: uppercase;
}

/* mobile */
@media (max-width: 720px) {
	.cpq-question-title { font-size: 22px; }
	.cpq-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.cpq-cards { grid-template-columns: 1fr; }
}