/* BASE STYLING (Mobile/Tablet Default) */
.vv-quiz-container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	border-radius: 5px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.vv-quiz-container h2,
.vv-quiz-container p {
	text-align: center;
}

/* Mobile Stacked Layout (The default) */
.vv-select-row {
	display: block;
}

.vv-select-col {
	margin-bottom: 15px;
	/* This ensures dropdowns render correctly */
	position: relative;
}

/* Button Row Container */
.vv-button-row {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	flex-wrap: wrap;
}

/* Submit Button Style */
.vv-quiz-container .vv-cta-button {
	flex: 1;
	min-width: 150px;
	padding: 12px 20px;
	/* Colors are injected by PHP variables in the view file */
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s ease;
}

/* Disabled Button State */
.vv-quiz-container .vv-cta-button:disabled {
	background-color: #cccccc !important;
	color: #666666 !important;
	cursor: not-allowed;
}

/* Clear Button Style */
.vv-quiz-container .vv-clear-button {
	flex: 1;
	min-width: 150px;
	padding: 12px 20px;
	/* Colors are injected by PHP variables in the view file */
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s ease;
}

/* Required Field Asterisk */
.vv-quiz-container label.vv-required:after {
	content: " *";
	color: #d9534f;
	font-weight: bold;
}

/* This is your original <select> style, which we are replicating */
.vv-quiz-container select {
	width: 100%;
	padding: 10px;
	margin-top: 5px;
	box-sizing: border-box;
}

.vv-quiz-container select.vv-field-error {
	border-color: #d9534f;
	box-shadow: 0 0 5px rgba(217, 83, 79, 0.5);
}

.vv-field-error-message {
	color: #d8000c;
	font-size: 12px;
	font-weight: bold;
	padding-top: 5px;
	display: none;
}

/* --- DESKTOP STYLING --- */
@media (min-width: 600px) {
	.vv-button-row {
		justify-content: center;
	}

	.vv-quiz-container .vv-cta-button,
	.vv-quiz-container .vv-clear-button {
		flex: 0 1 auto;
		min-width: 200px;
	}
}

@media (min-width: 768px) {
	.vv-quiz-container .vv-select-row {
		display: flex !important;
		gap: 20px;
		align-items: flex-start;
		margin-bottom: 20px;
	}

	.vv-quiz-container .vv-select-col {
		flex: 1 1 0;
		min-width: 0;
		margin-bottom: 0;
	}
}

/*
 * --- TOM-SELECT STYLING OVERRIDES (v10 - Final Stand) ---
 */

/* 1. Hide the original <select> */
#vv-recommender-form .ts-wrapper + select {
	display: none !important;
	visibility: hidden !important;
}

/* 2. The main control box */
#vv-recommender-form .ts-control {
	/* Replicate .vv-quiz-container select LAYOUT */
	width: 100%;
	padding: 10px;
	margin-top: 5px;
	box-sizing: border-box;
	min-height: 42px; /* Maintain height from original rule */

	/* --- "PRETTY" STYLES (FORCED) --- */
	border: 1px solid #d0d0d0 !important;
	border-radius: 4px !important;
	background: #fff !important;
	box-shadow: none !important;
	transition: border-color 0.2s, box-shadow 0.2s;
}

/* 3. The "pretty" focus state */
#vv-recommender-form .ts-wrapper.focus .ts-control {
	border-color: #80a0ff !important;
	box-shadow: 0 0 0 3px rgba(50, 100, 255, 0.2) !important;
}

#vv-recommender-form .ts-dropdown {
	/* --- FIX: ADD MAX-HEIGHT AND SCROLLABILITY --- */
	max-height: 250px !important;
	overflow-y: auto !important;
	/* --- END FIX --- */

	border-radius: 4px;
	border: 1px solid #d0d0d0;
	margin-top: 4px;
	background: rgb(255, 255, 255, 0.75);
}

/* ADD THIS NEW RULE - Target the dropdown content specifically */
#vv-recommender-form .ts-dropdown .ts-dropdown-content {
	max-height: 250px !important;
	overflow-y: auto !important;
}

/* Ensure options are visible */
#vv-recommender-form .ts-dropdown .option {
	display: block;
	padding: 8px 12px;
}

/* 5. The highlighted option */
#vv-recommender-form .ts-dropdown .option.active {
	background-color: #e21e51; /* Your theme's red color */
	color: #fff;
}

/* 6. The ERROR STATE */
#vv-recommender-form .ts-control.vv-field-error {
	/* Replicate .vv-quiz-container select.vv-field-error */
	border-color: #d9534f !important;
	box-shadow: 0 0 5px rgba(217, 83, 79, 0.5) !important;
}