body {
    background: linear-gradient(135deg, #213c51 0%, #6594b1 100%);
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
}

.card-header {
    border-radius: 0 !important;
    padding: 2rem;
}

.card-title {
    font-weight: 600;
}

.form-label {
    font-weight: 500;
    color: #213c51;
    margin-bottom: 0.5rem;
}

.form-control, .form-select {
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: #6594b1;
    box-shadow: 0 0 0 0.2rem rgba(101, 148, 177, 0.25);
}

.btn-primary {
    background: linear-gradient(135deg, #213c51 0%, #6594b1 100%);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: transform 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 60, 81, 0.4);
}

/* Compare Vehicles button styling */
#toggleComparison {
    border-radius: 25px;
    padding: 0.6rem 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.95) !important;
    color: #213c51 !important;
    backdrop-filter: blur(10px);
}

#toggleComparison:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(255, 255, 255, 0.5);
}

#toggleComparison.btn-warning {
    background: linear-gradient(135deg, #ddaed3 0%, #6594b1 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 15px rgba(221, 174, 211, 0.4);
}

#toggleComparison.btn-warning:hover {
    background: linear-gradient(135deg, #e8c4e0 0%, #7aa8c5 100%) !important;
    box-shadow: 0 6px 25px rgba(221, 174, 211, 0.6);
}

.card.bg-primary, .card.bg-success {
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Ensure all card text is white - but only for colored background cards */
.card.bg-primary, .card.bg-success, .card.bg-info, .card.bg-warning {
    color: #ffffff !important;
}

.card.bg-primary .card-body, .card.bg-primary .card-header,
.card.bg-success .card-body, .card.bg-success .card-header,
.card.bg-info .card-body, .card.bg-info .card-header,
.card.bg-warning .card-body, .card.bg-warning .card-header {
    color: #ffffff !important;
}

.card.bg-primary .card-title, .card.bg-primary h1, .card.bg-primary h2, .card.bg-primary h3, .card.bg-primary h4, .card.bg-primary h5, .card.bg-primary h6,
.card.bg-success .card-title, .card.bg-success h1, .card.bg-success h2, .card.bg-success h3, .card.bg-success h4, .card.bg-success h5, .card.bg-success h6,
.card.bg-info .card-title, .card.bg-info h1, .card.bg-info h2, .card.bg-info h3, .card.bg-info h4, .card.bg-info h5, .card.bg-info h6,
.card.bg-warning .card-title, .card.bg-warning h1, .card.bg-warning h2, .card.bg-warning h3, .card.bg-warning h4, .card.bg-warning h5, .card.bg-warning h6 {
    color: #ffffff !important;
}

.card.bg-primary p, .card.bg-primary span, .card.bg-primary div, .card.bg-primary small,
.card.bg-success p, .card.bg-success span, .card.bg-success div, .card.bg-success small,
.card.bg-info p, .card.bg-info span, .card.bg-info div, .card.bg-info small,
.card.bg-warning p, .card.bg-warning span, .card.bg-warning div, .card.bg-warning small {
    color: #ffffff !important;
}

/* Comparison summary card needs dark text for readability */
.card.bg-light {
    color: #213c51 !important;
}

.card.bg-light .card-title,
.card.bg-light .card-body,
.card.bg-light p,
.card.bg-light span,
.card.bg-light strong {
    color: #213c51 !important;
}

/* Ensure regular cards (white background) have dark text */
.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-light) {
    color: #213c51;
}

.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-light) .card-body,
.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-light) h3,
.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-light) h4,
.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-light) h5 {
    color: #213c51;
}

/* Color Hunt Palette Custom Colors */
.bg-primary {
    background-color: #213c51 !important;
}

.bg-success {
    background-color: #6594b1 !important;
}

.bg-info {
    background-color: #ddaed3 !important;
    color: #ffffff !important;
}

.bg-warning {
    background-color: #6594b1 !important;
    color: #ffffff !important;
}

.border-primary {
    border-color: #213c51 !important;
}

.border-success {
    border-color: #6594b1 !important;
}

.display-4 {
    font-weight: 700;
    margin: 1rem 0;
}

.table {
    border-radius: 8px;
    overflow: hidden;
}

.table thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.alert {
    border-radius: 10px;
    border: none;
}

h3 {
    color: #213c51;
    font-weight: 600;
}

h3 {
    color: #213c51;
    font-weight: 600;
}

/* Override h3 color for colored card headers */
.card-header.bg-primary h3, .card-header.bg-success h3,
.card-header.bg-info h3, .card-header.bg-warning h3 {
    color: #ffffff !important;
}

h4 {
    color: #213c51;
    font-weight: 600;
}

/* Override h4 color for colored card headers */
.card-header.bg-primary h4, .card-header.bg-success h4,
.card-header.bg-info h4, .card-header.bg-warning h4 {
    color: #ffffff !important;
}

h5 {
    color: #213c51;
    font-weight: 600;
}

/* Override h5 color for colored card headers */
.card-header.bg-primary h5, .card-header.bg-success h5,
.card-header.bg-info h5, .card-header.bg-warning h5 {
    color: #ffffff !important;
}

.form-text {
    font-size: 0.85rem;
    color: #6c757d;
}

/* Comparison mode styles */
.card.border-primary, .card.border-success {
    border-width: 2px !important;
}

.card-header.bg-primary, .card-header.bg-success {
    font-weight: 600;
    color: #ffffff !important;
}

.card-header.bg-primary h4, .card-header.bg-primary h5,
.card-header.bg-success h4, .card-header.bg-success h5,
.card-header.bg-info h4, .card-header.bg-info h5,
.card-header.bg-warning h4, .card-header.bg-warning h5 {
    color: #ffffff !important;
}

#comparisonMode .card {
    height: 100%;
}

#comparisonMode .form-control, #comparisonMode .form-select {
    font-size: 0.9rem;
}

#comparisonResultsSection .card {
    margin-bottom: 1rem;
}

#comparisonResultsSection .display-5 {
    font-size: 2rem;
    font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .display-4 {
        font-size: 2rem;
    }
    
    .card-header {
        padding: 1.5rem;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    #comparisonMode .col-md-6 {
        margin-bottom: 1.5rem;
    }
}