/* Finder Styles */
.df-form { display: block; margin-bottom: 16px; }

/* Hero */
.df-hero { text-align: center; padding: 28px 16px; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; }
.df-hero-title { margin: 0 0 6px; font-size: 28px; font-weight: 800; color: #ffffff; }
.df-hero-sub { margin: 0 0 16px; color: #d1d5db; font-size: 14px; }
.df-hero-actions { justify-content: center; display: flex; }

/* Ensure hero start button is centered */
.df-hero-actions { display: flex; justify-content: center; align-items: center; }
#df-start { margin-left: auto; margin-right: auto; display: inline-block; }

.df-steps .df-step-title { margin: 14px 0; font-size: 18px; font-weight: 700; color: #ffffff; }

.df-field { margin-bottom: 18px; }
.df-label { display: block; font-weight: 700; margin-bottom: 8px; color: #ffffff; }

.df-options-tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.df-options-single { grid-template-columns: repeat(3, minmax(0,1fr)); }

.df-option { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 10px; text-align: center; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }

/* Text-first tiles */
.df-option .df-option-title { display: block; font-weight: 700; color: #111; }
.df-option .df-option-help { display: block; color: #666; font-size: 12px; margin-top: 4px; min-height: 16px; }

.df-option:hover { box-shadow: 0 10px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
/* Selected state glow */
.df-option.active { border-style: solid; border-color: #c3423f; box-shadow: 0 0 0 4px rgba(195,66,63,.35), 0 12px 28px rgba(195,66,63,.25); transform: translateY(-2px) scale(1.02); }
.df-option:focus-visible { outline: none; border-style: solid; border-color: #c3423f; box-shadow: 0 0 0 4px rgba(195,66,63,.5), 0 8px 20px rgba(195,66,63,.25); }

.df-option.df-any { background: #f3f4f6; }

/* Any row (compact, no image) */
.df-options-tiles .df-option.df-any .df-option-img { display: none; }
.df-option.df-any { padding: 10px; background: #f3f4f6; border-style: solid; }
.df-option.df-any .df-option-title { font-weight: 600; font-size: 13px; }
.df-option.df-any .df-option-svg { display: none; min-height: 0; margin-bottom: 0; }
.df-option.df-any .df-option-help { min-height: 0; }

/* Place the Any button on its own row when there are < 4 tiles */
.df-any-row { margin-top: 8px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }

.df-step-actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 8px; }

/* Buttons - modern pill style */
.df-prev, .df-next, .df-submit, #df-start, .df-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 18px;
	border-radius: 9999px;
	font-weight: 700;
	letter-spacing: .2px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}

/* Primary (Next/Submit/Start) */
.df-next, .df-submit, #df-start, .df-btn {
	background: #c3423f;
	color: #ffffff;
}
.df-next:hover, .df-submit:hover, #df-start:hover, .df-btn:hover {
	background: #a93a37;
	box-shadow: 0 4px 14px rgba(195,66,63,.3);
}

/* Secondary (Back) */
.df-prev {
	background: transparent;
	color: #e5e7eb;
	border-color: #6b7280;
}
.df-prev:hover {
	background: #2a2a2a;
	border-color: #9ca3af;
}

/* Arrows */
.df-prev::before { content: "\2190"; margin-right: 8px; }
.df-next::after { content: "\2192"; margin-left: 8px; }

/* Disabled */
.df-prev[disabled], .df-next[disabled], .df-submit[disabled], #df-start[disabled] {
	opacity: .6;
	cursor: not-allowed;
	box-shadow: none;
}

.df-results { min-height: 40px; margin-top: 16px; }

.df-loading { padding: 12px; animation: df-pulse 1s infinite ease-in-out; color: #ffffff; }
@keyframes df-pulse { 0%{opacity:.4} 50%{opacity:1} 100%{opacity:.4} }

/* Compact product grid and readable text */
.df-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
@media (max-width: 1280px) { .df-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1024px) { .df-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .df-grid { grid-template-columns: 1fr; } }

.df-card.df-card-compact { background: #ffffff; color: #222; border: 1px solid #e6e6e6; border-radius: 8px; padding: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.df-card.df-card-compact .df-image img { border-radius: 6px; }
.df-card.df-card-compact .df-title { font-size: 14px; margin: 6px 0 4px; line-height: 1.25; }
.df-card.df-card-compact .df-actions .df-btn { padding: 5px 10px; font-size: 12px; color: #ffffff !important; text-decoration: none; }

.df-attrs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.df-chip { background: #f3f4f6; color: #111; border: 1px solid #e5e7eb; border-radius: 9999px; padding: 2px 8px; font-size: 12px; line-height: 18px; }

/* Ensure product images display full size proportionally */
.df-image img { width: 100%; height: auto; object-fit: contain; }

.df-title { font-size: 16px; margin: 10px 0 6px; color: #111; }
.df-title a { text-decoration: none; color: inherit; }
.df-price { font-weight: 700; margin-bottom: 10px; color: #111; }
.df-empty { padding: 12px; background: #fafafa; border: 1px dashed #ddd; border-radius: 6px; color: #111; }

/* Progress */
.df-progress { display: none; justify-content: center; align-items: center; gap: 12px; margin-bottom: 12px; }
#df-progress-text { color: #ffffff; font-weight: 700; }
.df-progress-bar { position: relative; width: 220px; height: 6px; background: #2a2a2a; border-radius: 9999px; overflow: hidden; }
.df-progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: #c3423f; transition: width .25s ease; }

/* Show progress on steps > 0 */
.df-step[data-step]:not([hidden]) ~ .df-progress { display: flex; }

/* SVG container - complete overhaul for responsive, centered, non-overlapping display */
.df-option .df-option-svg {
	/* Fixed aspect-ratio container that scales responsively */
	width: 100%;
	max-width: 80px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 12px;
	/* Flexbox centering */
	display: flex;
	align-items: center;
	justify-content: center;
	/* Prevent any overflow */
	overflow: hidden;
	/* Add subtle padding for breathing room */
	padding: 8px;
}

.df-option .df-option-svg svg {
	/* SVG fills container while maintaining aspect ratio */
	width: 100%;
	height: 100%;
	/* Ensure proper scaling behavior */
	display: block;
	/* Prevent any dimension overrides */
	max-width: 100%;
	max-height: 100%;
}

/* Responsive sizing - reduce container size on smaller screens */
@media (max-width: 768px) {
	.df-option .df-option-svg {
		max-width: 64px;
		margin-bottom: 10px;
		padding: 6px;
	}
}

@media (max-width: 640px) {
	.df-option .df-option-svg {
		max-width: 52px;
		margin-bottom: 8px;
		padding: 5px;
	}
}

@media (max-width: 480px) {
	.df-option .df-option-svg {
		max-width: 44px;
		margin-bottom: 6px;
		padding: 4px;
	}
}

/* Quiz wrapper background and shadow */
.df-form.df-steps { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; box-shadow: none; padding: 16px; }

/* Ensure card text colors are dark regardless of theme */
.df-card .df-title, .df-card .df-title a { color: #111 !important; }
.df-card .df-price { color: #111 !important; }

/* Stronger product title and colored discount price */
.df-card .df-title { font-weight: 800; }
.df-card .df-title a { font-weight: inherit; }
.df-card .df-price { display: block; }
.df-card .df-price del { color: #6b7280; margin-right: 6px; }
.df-card .df-price ins { color: #c3423f; text-decoration: none; font-weight: 800; }