/* page styles */

/* home - how it works */
.how-it-works-grid {
	display: grid;
	gap: var(--space-6);
}

.how-it-works-step {
	text-align: center;
	padding: var(--space-6);
}

.step-number {
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-4);
	background-color: var(--color-accent);
	color: var(--color-accent-text);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	border-radius: var(--radius-full);
}

.how-it-works-step h3 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-2);
}

.how-it-works-step p {
	color: var(--color-text-secondary);
}

@media (min-width: 768px) {
	.how-it-works-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* home - categories grid */
.categories-grid {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 480px) {
	.categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.categories-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.categories-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* home - features grid */
.features-grid {
	display: grid;
	gap: var(--space-6);
}

.feature-item {
	text-align: center;
	padding: var(--space-6);
	background-color: var(--color-bg);
	border-radius: var(--radius-xl);
}

.feature-icon {
	font-size: var(--text-4xl);
	margin-bottom: var(--space-4);
}

.feature-item h3 {
	font-size: var(--text-lg);
	margin-bottom: var(--space-2);
}

.feature-item p {
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
}

@media (min-width: 768px) {
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.features-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* categories page */
.category-hero {
	padding: var(--space-20) 0 var(--space-12);
	margin-top: 4.5rem;
	background-color: var(--color-surface);
	text-align: center;
}

.category-section {
	padding: var(--space-12) 0;
	scroll-margin-top: 6.25rem;
}

.category-section:nth-child(even) {
	background-color: var(--color-surface);
}

.category-header {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.category-header-icon {
	font-size: var(--text-3xl);
}

.category-header h2 {
	font-size: var(--text-3xl);
}

.cars-grid {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 768px) {
	.cars-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cars-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* car card */
.car-card {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: all var(--transition-fast);
}

.car-card:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-lg);
	transform: translateY(-0.125rem);
}

.car-card-image {
	width: 100%;
	height: 11.25rem;
	object-fit: cover;
	background-color: var(--color-border-subtle);
}

.car-card-body {
	padding: var(--space-4);
}

.car-card-title {
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: var(--space-1);
}

.car-card-subtitle {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.car-card-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.car-card-stat {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	padding: var(--space-1) var(--space-2);
	background-color: var(--color-accent-light);
	border-radius: var(--radius-md);
}

.car-card-price {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-accent);
}

.car-card-footer {
	padding: var(--space-4);
	border-top: 1px solid var(--color-border);
	display: flex;
	gap: var(--space-2);
}

.car-card-footer .btn {
	flex: 1;
}

/* quiz page */
.quiz-container {
	max-width: 43.75rem;
	margin: 0 auto;
	padding: var(--space-20) var(--space-4);
	margin-top: 4.5rem;
}

.quiz-progress {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}

.quiz-progress-bar {
	flex: 1;
	height: 0.25rem;
	background-color: var(--color-border);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.quiz-progress-fill {
	height: 100%;
	background-color: var(--color-accent);
	transition: width var(--transition-base);
}

.quiz-progress-text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.quiz-question {
	margin-bottom: var(--space-8);
}

.quiz-question h2 {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	margin-bottom: var(--space-2);
}

.quiz-question p {
	color: var(--color-text-secondary);
}

.quiz-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-8);
}

.quiz-option {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	background-color: var(--color-surface);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.quiz-option:hover {
	border-color: var(--color-accent);
	background-color: var(--color-accent-light);
}

.quiz-option.selected {
	border-color: var(--color-accent);
	background-color: var(--color-accent-light);
}

.quiz-option-icon {
	font-size: var(--text-2xl);
}

.quiz-option-text {
	flex: 1;
}

.quiz-option-text strong {
	display: block;
	margin-bottom: var(--space-1);
}

.quiz-option-text span {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.quiz-option-check {
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transition-fast);
}

.quiz-option.selected .quiz-option-check {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: #ffffff;
}

.quiz-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
}

/* quiz results */
.quiz-results {
	text-align: center;
	padding: var(--space-8);
	background-color: var(--color-surface);
	border-radius: var(--radius-2xl);
}

.quiz-results-icon {
	font-size: 4rem;
	margin-bottom: var(--space-4);
}

.quiz-results h2 {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	margin-bottom: var(--space-4);
}

.quiz-results-cars {
	margin-top: var(--space-8);
}

/* database page */
.database-header {
	padding: var(--space-16) 0 var(--space-8);
	margin-top: 4.5rem;
	background-color: var(--color-surface);
}

.database-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-6);
}

.filter-group {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.filter-group label {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-secondary);
}

.filter-select {
	min-width: 9.375rem;
}

.database-results {
	padding: var(--space-8) 0;
}

.database-count {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-6);
}

/* estimator page */
.estimator-page {
	padding: var(--space-20) 0;
	margin-top: 4.5rem;
}

.estimator-grid {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 1024px) {
	.estimator-grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.estimator-form-card {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
	padding: var(--space-8);
}

.estimator-form-title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	margin-bottom: var(--space-6);
}

.estimator-info {
	padding: var(--space-6);
	background-color: var(--color-accent-light);
	border-radius: var(--radius-xl);
}

.estimator-info h3 {
	font-size: var(--text-lg);
	margin-bottom: var(--space-4);
}

.estimator-info ul {
	list-style: disc;
	margin-left: var(--space-5);
	color: var(--color-text-secondary);
}

.estimator-info li {
	margin-bottom: var(--space-2);
}

/* hidden ai result */
.estimator-ai-result {
	display: none;
}

/* contact page */
.contact-page {
	padding: var(--space-20) 0;
	margin-top: 4.5rem;
}

.contact-grid {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 1024px) {
	.contact-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-info {
	padding: var(--space-8);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
}

.contact-info h2 {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	margin-bottom: var(--space-4);
}

.contact-info p {
	color: var(--color-text-secondary);
	margin-bottom: var(--space-6);
}

.contact-methods {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.contact-method {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4);
	background-color: var(--color-bg);
	border-radius: var(--radius-lg);
	transition: all var(--transition-fast);
}

.contact-method:hover {
	background-color: var(--color-accent-light);
}

.contact-method-icon {
	font-size: var(--text-xl);
}

.contact-method-text strong {
	display: block;
	margin-bottom: var(--space-1);
}

.contact-method-text span {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.contact-form-card {
	padding: var(--space-8);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
}

.contact-form-title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	margin-bottom: var(--space-6);
}

/* ai advisor page */
.advisor-page {
	margin-top: 4.5rem;
	min-height: calc(100vh - 4.5rem);
	display: flex;
	flex-direction: column;
}

.advisor-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	max-width: 800px;
	margin: 0 auto;
	width: 100%;
	padding: var(--space-4);
}

.advisor-header {
	text-align: center;
	padding: var(--space-8) 0;
}

.advisor-header h1 {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	margin-bottom: var(--space-2);
}

.advisor-header p {
	color: var(--color-text-secondary);
}

.chat-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
	overflow: hidden;
}

.chat-messages {
	flex: 1;
	padding: var(--space-6);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.chat-message {
	max-width: 80%;
	padding: var(--space-4);
	border-radius: var(--radius-xl);
}

.chat-message.user {
	align-self: flex-end;
	background-color: var(--color-accent);
	color: #ffffff;
}

.chat-message.assistant {
	align-self: flex-start;
	background-color: var(--color-bg);
}

.chat-message.assistant .chat-message-name {
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--color-accent);
	margin-bottom: var(--space-2);
}

.chat-input-container {
	padding: var(--space-4);
	border-top: 1px solid var(--color-border);
	display: flex;
	gap: var(--space-3);
}

.chat-input {
	flex: 1;
}

.chat-send-btn {
	padding: var(--space-3) var(--space-5);
}

/* chat suggestions */
.chat-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: var(--space-4);
	background-color: var(--color-bg);
	border-top: 1px solid var(--color-border);
}

.chat-suggestion {
	padding: var(--space-2) var(--space-4);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.chat-suggestion:hover {
	border-color: var(--color-accent);
	background-color: var(--color-accent-light);
}