/* ==========================================================================
   RESPONSIVE STYLING (MOBILE-FIRST MEDIA QUERIES)
   ========================================================================== */

/* Small Devices (Landscape Phones, 576px and up) */
@media (min-width: 576px) {
    .main-heading {
        font-size: 2.25rem;
    }
}

/* Medium Devices (Tablets, 768px and up) */
@media (min-width: 768px) {
    .main-heading {
        font-size: 2.5rem;
    }
    
    .glass-card {
        padding: var(--space-4);
    }
}

/* Large Devices (Desktops, 992px and up) */
@media (min-width: 992px) {
    .main-heading {
        font-size: 2.75rem;
    }
}

/* Extra Large Devices (Large Desktops, 1200px and up) */
@media (min-width: 1200px) {
    .calculator-wrapper {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }
}

/* Mobile-Specific Overrides (Max-width queries for clean downscaling) */
@media (max-width: 991.98px) {
    .calculator-wrapper {
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }
    
    .header-section {
        margin-bottom: var(--space-4) !important;
    }

    .glass-card {
        padding: var(--space-3);
        border-radius: var(--radius-md);
    }
}

@media (max-width: 575.98px) {
    .main-heading {
        font-size: 1.85rem;
        letter-spacing: -0.5px;
    }
    
    .sub-heading {
        font-size: 0.95rem;
        padding-left: var(--space-1);
        padding-right: var(--space-1);
    }

    .card-title-styled {
        font-size: 1.25rem;
    }

    .form-control-custom {
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    .radio-label-custom {
        padding: 10px 14px;
        font-size: 0.875rem;
    }

    /* Result highlight cards */
    .result-highlight-card {
        padding: var(--space-2);
    }
    
    .result-value {
        font-size: 2rem;
    }
    
    .result-unit {
        font-size: 0.9rem;
    }

    .savings-sub-card {
        padding: 12px;
    }

    .savings-value-wrapper {
        font-size: 1.25rem;
    }

    .eco-card {
        padding: 12px;
    }

    .eco-value-wrapper {
        font-size: 1.25rem;
    }
}

/* Fixes for height-constrained screens or specific UI components */
@media (max-height: 700px) {
    .glow-blob {
        filter: blur(80px);
    }
}