/* ==========================================================================
   Hyundai Vehicle Configurator — Frontend Styles v1.1
   v1.1: mobile accordion toggle (.hss-config-toggle / .hss-config-body /
         .is-open), collapsed below the 767px breakpoint.
   ========================================================================== */

.hss-config, .hss-config * {
	box-sizing: border-box;
}

.hss-config {
	width: 100%;
	margin: 0 auto;
	font-family: 'Hyundai – Body', sans-serif;
	background: #faf9fe;
    border: 1px solid #d0d5dd;
	border-radius: 0px;
	padding: 38px 28px;
	box-shadow: 0 2px 12px rgba(0, 44, 95, 0.08);
}

.hss-config-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.hss-config-title {
	margin: 0 !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	color: #001839 !important;
}

.hss-config-clear {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background-color: transparent !important;
	border: none;
	color: #6c757d !important;
	font-size: 16px !important;
	cursor: pointer !important;
	padding: 4px 8px;
}

.hss-config-clear:hover {
	color: #00AAD2 !important;
	background-color: transparent !important;
}

.hss-config-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr) auto;
	gap: 12px;
	align-items: end;
}

.hss-config-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.hss-config-field label {
	font-size: 16px;
	font-weight: 400;
	color: #475467;
	text-transform: capitalize;
	letter-spacing: 0.02em;
}

.hss-config-field select {
	appearance: none;
	width: 100%;
	padding: 10px 32px 10px 12px;
	border: 1px solid #F4F3F8;
	/*border-radius: 8px;*/
	background: #F4F3F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475467' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	font-size: 16px;
	color: #1A1B1F;
	cursor: pointer;
}

.hss-config-field select:focus {
	outline: none;
	border-color: #00AAD2;
	box-shadow: 0 0 0 3px rgba(0, 170, 210, 0.15);
}

.hss-config-field select:disabled {
	color: #98a2b3;
	cursor: default;
}

.hss-config-submit {
	background: #002C5F !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 0px !important;
	padding: 11px 20px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition: background 0.15s ease !important;
	font-family: 'Hyundai – Body', sans-serif !important;
}

.hss-config-submit:hover {
	background: #00AAD2 !important;
}

.hss-config-submit:focus {
	background: #00AAD2 !important;
}

/* ── Accordion toggle (mobile only — see media query below) ───────────── */
.hss-config-toggle {
	display: none !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: space-between !important;
	background: transparent !important;
	border: none !important;
	padding: 18px 20px !important;
	font-size: 15px !important; 
	font-weight: 600 !important;
	color: #00AAD2 !important;
	cursor: pointer !important;
}

.hss-config-toggle-icon {
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.hss-config.is-open .hss-config-toggle-icon {
	transform: rotate(180deg);
}

/* ── Responsive: stack on narrow viewports ───────────────────────────── */
@media (max-width: 860px) {
	.hss-config-row {
		grid-template-columns: 1fr 1fr;
	}
	.hss-config-submit {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.hss-config-row {
		grid-template-columns: 1fr;
	}
}

/* ── Collapse into an accordion on mobile ──────────────────────────────
   Above this breakpoint the toggle stays hidden and .hss-config-body is
   always visible (the is-open class has no effect on desktop). */
@media (max-width: 767px) {
	.hss-config {
		padding: 0;
		overflow: hidden;
	}

	.hss-config-toggle {
		display: flex !important;
	}

	.hss-config-body {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		padding: 0 20px;
		transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
	}

	.hss-config.is-open .hss-config-body {
		max-height: 900px;
		opacity: 1;
		padding: 4px 20px 22px;
	}
}