.gradient-bg {
    background: linear-gradient(135deg, #e67e22, #f1c40f 33%, #e74c3c 66%, #8e44ad);
    color: #0b0909;
}

/* Apply green to all buttons by default */
button, .calculate-button, .currency-selector, .unit-tab-button, .calc-tab-button {
    background-color: #4fe38c;
    color: #000000;
}

/* Active tab buttons - keep green */
.unit-tab-button.active, .calc-tab-button.active {
    background-color: #29bd67;
    color: #000000;
}

/* Specific override for Miles and EV buttons - white background with dark text */
.unit-tab-button.miles, .unit-tab-button.ev, .calc-tab-button.miles, .calc-tab-button.ev {
    background-color: #000000;
    color: #2c3e50; /* Dark blue-gray for visibility */
}

/* Hover effects for regular buttons */
.calculate-button:hover, .currency-selector:hover, .unit-tab-button:hover:not(.miles):not(.ev), .calc-tab-button:hover:not(.miles):not(.ev) {
    background-color: #219653; /* Darker green (Tailwind green-700) */
    color: #632424;
}

#map {
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    border: 2px solid #ecf0f1;
}

.slider {
    appearance: none;
    width: 48px;
    height: 24px;
    background: #bdc3c7;
    outline: none;
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
}

.slider:checked {
    background: #8e44ad;
}

.slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    top: 2px;
    background: #4fe38c;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.slider:checked::before {
    transform: translateX(24px);
}

#result {
    text-align: center;
    font-weight: 600;
    color: #2c3e50;
}

.faq-section {
    margin-top: 2.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.faq-item {
    margin-bottom: 0.75rem;
}

.faq-question {
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease;
}

.faq-question:hover {
    color: #8e44ad;
    transform: translateX(5px);
}

.faq-answer {
    padding-top: 0.75rem;
    color: #7f8c8d;
}

.faq-answer strong {
    font-weight: 700;
    color: #2c3e50;
}

body.gradient-bg {
    background: linear-gradient(135deg, #e67d22, #f1c40f 33%, #e73c3c 66%, #a344ad);
    min-height: 100vh;
}