/* ==========================================================================
   AutoPro Institution - Automotive Specific Styles
   Vehicle cards, galleries, comparison, specs
   ========================================================================== */

/* --- Vehicle Detail Gallery --- */
.vehicle-gallery { position: relative; }
.vehicle-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: var(--radius-full); background: rgba(255,255,255,0.9); border: 1px solid var(--color-gray-200); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; z-index: 5; transition: all var(--transition-fast); }
.vehicle-gallery-nav:hover { background: var(--color-white); box-shadow: var(--shadow-md); }
.vehicle-gallery-nav-prev { left: 1rem; }
.vehicle-gallery-nav-next { right: 1rem; }

/* --- Vehicle Specs Detail Grid --- */
.vehicle-specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); }
.vehicle-specs-grid > div { background: var(--color-gray-50); border-radius: var(--radius-lg); padding: var(--spacing-md); border: 1px solid var(--color-gray-100); }

/* --- Vehicle Detail Sidebar --- */
.vehicle-detail-sidebar { position: sticky; top: calc(var(--header-height) + 1.5rem); }

/* --- Vehicle List View Override --- */
.vehicle-list .vehicle-card { display: grid; grid-template-columns: 280px 1fr auto; border-radius: var(--radius-xl); border: 1px solid var(--color-gray-200); overflow: hidden; }
.vehicle-list .vehicle-card-image { aspect-ratio: 16/10; min-height: 100%; }
.vehicle-list .vehicle-card-body { padding: var(--spacing-xl); }
.vehicle-list .vehicle-card-actions { flex-direction: column; padding: var(--spacing-xl); justify-content: center; border-left: 1px solid var(--color-gray-100); min-width: 180px; }
.vehicle-list .vehicle-card-actions .btn { width: 100%; }

@media (max-width: 1023px) {
    .vehicle-list .vehicle-card { grid-template-columns: 200px 1fr; }
    .vehicle-list .vehicle-card-actions { grid-column: 1 / -1; flex-direction: row; border-left: none; border-top: 1px solid var(--color-gray-100); }
}

@media (max-width: 767px) {
    .vehicle-list .vehicle-card { grid-template-columns: 1fr; }
    .vehicle-list .vehicle-card-image { aspect-ratio: 16/10; min-height: auto; }
    .vehicle-list .vehicle-card-actions { flex-direction: column; }
}

/* --- Compare Button Active --- */
.compare-btn.is-active { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }

/* --- Comparison Table Enhanced --- */
.autopro-comparison-table { background: var(--color-white); border-radius: var(--radius-xl); border: 1px solid var(--color-gray-200); overflow: hidden; }
.autopro-comparison-table table { margin: 0; }
.autopro-comparison-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gray-500); padding: 1rem; }
.autopro-comparison-table thead th:first-child { color: transparent; user-select: none; }
.autopro-comparison-table tbody tr:nth-child(even) { background: var(--color-gray-50); }
.autopro-comparison-table tbody td { padding: 0.875rem 1rem; font-size: 0.875rem; }
.autopro-comparison-table tbody td:first-child { color: var(--color-gray-500); font-weight: 600; }

/* --- Badge Variants --- */
.vehicle-badge { padding: 0.25rem 0.625rem; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.25rem; }
.vehicle-badge-new { background: var(--color-accent); color: var(--color-white); }
.vehicle-badge-guarantee { background: var(--color-success); color: var(--color-white); }
.vehicle-badge-good-price { background: #FEF3C7; color: #92400E; }
.vehicle-badge-electric { background: #D1FAE5; color: #065F46; }
.vehicle-badge-hybrid { background: #DBEAFE; color: #1E40AF; }
.vehicle-badge-premium { background: #F3E8FF; color: #6B21A8; }

/* --- Vehicle Card Hover Effects --- */
.vehicle-card { transition: all var(--transition-base); }
.vehicle-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-2px); }
.vehicle-card .vehicle-card-image { background: var(--color-gray-100); }
.vehicle-card .vehicle-card-image img { object-fit: cover; width: 100%; height: 100%; transition: transform var(--transition-slow); }
.vehicle-card:hover .vehicle-card-image img { transform: scale(1.05); }

/* --- Price Formatting --- */
.vehicle-price-main { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-gray-900); white-space: nowrap; }
.vehicle-price-monthly { font-size: var(--font-size-xs); color: var(--color-gray-500); white-space: nowrap; }

/* --- Equipment List --- */
.equipment-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); list-style: none; padding: 0; }
.equipment-list li { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm); font-size: 0.875rem; border-radius: var(--radius-md); }
.equipment-list li::before { content: '✓'; color: var(--color-success); font-weight: 700; }

/* --- Dealer Card --- */
.dealer-card { display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-lg); background: var(--color-gray-50); border-radius: var(--radius-xl); border: 1px solid var(--color-gray-200); }
.dealer-card-avatar { width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-accent-light); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; color: var(--color-accent); flex-shrink: 0; }

/* --- Finance Calculator --- */
.finance-result { padding: var(--spacing-xl); background: var(--color-gray-50); border-radius: var(--radius-lg); text-align: center; }
.finance-result-amount { font-size: 2.5rem; font-weight: 800; color: var(--color-accent); }
.finance-result-period { font-size: 0.875rem; color: var(--color-gray-500); }

/* --- Search Tabs --- */
.search-tabs { display: flex; gap: var(--spacing-xs); background: var(--color-gray-100); border-radius: var(--radius-lg); padding: 4px; }
.search-tab { padding: 0.5rem 1.25rem; border-radius: var(--radius-md); border: none; background: transparent; color: var(--color-gray-600); font-weight: 600; font-size: var(--font-size-sm); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; }
.search-tab.is-active { background: var(--color-white); color: var(--color-accent); box-shadow: var(--shadow-sm); }
.search-tab:hover:not(.is-active) { color: var(--color-gray-800); }

/* --- Mobile Search --- */
.search-mobile { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; z-index: 2000; overflow-y: auto; display: none; }
.search-mobile.is-open { display: block; }
.search-mobile-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-gray-200); position: sticky; top: 0; background: white; z-index: 5; }
.search-mobile-close { background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--color-gray-600); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); }
.search-mobile-close:hover { background: var(--color-gray-100); }
.search-mobile-body { padding: 1.5rem; }
.search-mobile-field { margin-bottom: 1rem; }
.search-mobile-field label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gray-500); margin-bottom: 0.35rem; }
.search-mobile-field select, .search-mobile-field input { width: 100%; height: 48px; border: 2px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 0 0.75rem; font-size: 0.9rem; background: var(--color-white); }
.search-mobile-field select:focus, .search-mobile-field input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(26,86,219,0.1); }
.search-mobile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.search-mobile-submit { margin-top: 1rem; }