/* Heat Pump Calculator Styles */

.calculator-hero {
    background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, 0));
    min-height: calc(100vh - 80px);
}

/* Input styling */
.form-range {
    height: 0.5rem;
}

.form-range::-webkit-slider-thumb {
    background: var(--bs-primary);
}

/* Card hover effect */
.calculator-hero .card {
    transition: box-shadow 0.2s ease;
}

.calculator-hero .card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* Help icons */
.help-icon {
    cursor: help;
    font-size: 0.9rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.help-icon:hover {
    opacity: 1 !important;
    transform: scale(1.1);
}

/* Popover styling */
.popover {
    max-width: 320px;
}

.popover-header {
    font-weight: 600;
}

.popover-body {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Heating system colors */
.color-heatpump {
    color: #28a745;
}

.color-gas {
    color: #0d6efd;
}

.color-oil {
    color: #fd7e14;
}

.color-pellet {
    color: #8B4513;
}

.color-district {
    color: #6f42c1;
}

.bg-heatpump {
    background-color: #28a745;
}

.bg-gas {
    background-color: #0d6efd;
}

.bg-oil {
    background-color: #fd7e14;
}

.bg-pellet {
    background-color: #8B4513;
}

.bg-district {
    background-color: #6f42c1;
}

/* Result cards */
.card.border-success {
    border-width: 2px !important;
}

.card.border-info {
    border-width: 2px !important;
}

/* Collapsible header */
.card-header[data-bs-toggle="collapse"] .fa-chevron-down {
    transition: transform 0.3s ease;
}

.card-header[data-bs-toggle="collapse"].collapsed .fa-chevron-down,
.card-header[data-bs-toggle="collapse"][aria-expanded="false"] .fa-chevron-down {
    transform: rotate(-90deg);
}

/* ApexCharts customization */
.apexcharts-tooltip {
    background: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.apexcharts-tooltip-title {
    background: var(--bs-body-secondary-bg) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .calculator-hero {
        padding-top: 1rem;
    }

    .calculator-hero .display-5 {
        font-size: 1.75rem;
    }

    #chart-annual-costs {
        height: 250px !important;
    }

    #chart-projection {
        height: 250px !important;
    }
}

/* Print styles */
@media print {
    .calculator-hero {
        background: white !important;
    }

    nav, footer, .btn, .collapse:not(.show),
    .card-header[data-bs-toggle="collapse"],
    [data-aos] {
        display: none !important;
    }

    .card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
    }

    .col-lg-5, .col-lg-7 {
        width: 100% !important;
        max-width: 100% !important;
    }

    #chart-annual-costs,
    #chart-projection {
        height: 200px !important;
    }

    .calculator-hero .container {
        max-width: 100% !important;
    }
}

/* Animations */
@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
}

.result-highlight {
    animation: pulse-green 2s ease-in-out;
}

/* Dark mode support */
[data-bs-theme="dark"] .calculator-hero {
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0));
}

[data-bs-theme="dark"] .apexcharts-text {
    fill: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .apexcharts-legend-text {
    color: var(--bs-body-color) !important;
}

/* Insight cards */
.insight-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.insight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}

/* Comparison table */
.comparison-table th {
    font-weight: 500;
    font-size: 0.875rem;
}

.comparison-table td {
    vertical-align: middle;
}

/* Star ratings */
.comparison-table td span {
    letter-spacing: -1px;
    font-size: 0.9rem;
}

/* FAQ Accordion */
#faqAccordion .accordion-button {
    font-weight: 500;
}

#faqAccordion .accordion-button:not(.collapsed) {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

#faqAccordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

/* Responsive hero */
@media (max-width: 767.98px) {
    .calculator-hero .display-4 {
        font-size: 1.75rem;
    }

    .insight-card .fs-2 {
        font-size: 1.5rem !important;
    }

    .comparison-table {
        font-size: 0.8rem;
    }
}

/* CTA Section gradient */
.cta-gradient {
    background: linear-gradient(135deg, #002a3a 0%, #004560 50%, #003347 100%) !important;
}

/* Print - hide new sections */
@media print {
    .insight-card,
    #faqAccordion,
    .cta-gradient {
        display: none !important;
    }
}

/* ============================================
   Energieausweis Visual Scale
   ============================================ */

.energy-scale-container {
    position: relative;
}

.energy-scale {
    display: flex;
    gap: 2px;
    border-radius: 6px;
    overflow: hidden;
    height: 44px;
}

.energy-bar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

/* Energieausweis colors - official German scale */
.energy-bar[data-class="Aplus"] {
    background: linear-gradient(135deg, #00a651 0%, #00c853 100%);
}

.energy-bar[data-class="A"] {
    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
}

.energy-bar[data-class="B"] {
    background: linear-gradient(135deg, #8bc34a 0%, #9ccc65 100%);
}

.energy-bar[data-class="C"] {
    background: linear-gradient(135deg, #cddc39 0%, #d4e157 100%);
}

.energy-bar[data-class="D"] {
    background: linear-gradient(135deg, #ffeb3b 0%, #ffee58 100%);
}

.energy-bar[data-class="E"] {
    background: linear-gradient(135deg, #ffc107 0%, #ffca28 100%);
}

.energy-bar[data-class="F"] {
    background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
}

.energy-bar[data-class="G"] {
    background: linear-gradient(135deg, #ff5722 0%, #ff7043 100%);
}

.energy-bar[data-class="H"] {
    background: linear-gradient(135deg, #d32f2f 0%, #e53935 100%);
}

.energy-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    user-select: none;
}

/* Dark text for yellow classes */
.energy-bar[data-class="C"] .energy-label,
.energy-bar[data-class="D"] .energy-label {
    color: #333;
    text-shadow: none;
}

/* Hover effect */
.energy-bar:hover {
    transform: scaleY(1.1);
    filter: brightness(1.1);
    z-index: 1;
}

/* Active/selected state */
.energy-bar.active {
    transform: scaleY(1.15);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.energy-bar.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid currentColor;
}

/* Arrow color matching the bar */
.energy-bar[data-class="Aplus"].active::after {
    border-top-color: #00a651;
}

.energy-bar[data-class="A"].active::after {
    border-top-color: #4caf50;
}

.energy-bar[data-class="B"].active::after {
    border-top-color: #8bc34a;
}

.energy-bar[data-class="C"].active::after {
    border-top-color: #cddc39;
}

.energy-bar[data-class="D"].active::after {
    border-top-color: #ffeb3b;
}

.energy-bar[data-class="E"].active::after {
    border-top-color: #ffc107;
}

.energy-bar[data-class="F"].active::after {
    border-top-color: #ff9800;
}

.energy-bar[data-class="G"].active::after {
    border-top-color: #ff5722;
}

.energy-bar[data-class="H"].active::after {
    border-top-color: #d32f2f;
}

.energy-scale-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding: 0 4px;
}

/* Responsive */
@media (max-width: 575.98px) {
    .energy-scale {
        height: 38px;
    }

    .energy-label {
        font-size: 0.75rem;
    }

    .energy-bar.active::after {
        bottom: -6px;
        border-left-width: 6px;
        border-right-width: 6px;
        border-top-width: 6px;
    }
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .energy-bar.active {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
}