/**
 * STEP 4 MOBILE LAYOUT - Riorganizzazione Configurazione/Preventivo
 * Versione: 1.0.0
 *
 * Trasforma il layout desktop (sidebar destra + content sinistra)
 * in layout mobile verticale ottimizzato
 */

/* ===================================
   LAYOUT MOBILE - Stack Verticalegit a
   =================================== */

@media (max-width: 991px) {
    /* Layout a due colonne diventa verticale */
    .results-two-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem;
    }

    .results-main-content {
        width: 100% !important;
        order: 2; /* Contenuto principale dopo la sidebar */
    }

    .results-sidebar {
        width: 100% !important;
        order: 1 !important; /* Sidebar in alto su mobile */
        position: relative !important;
        top: auto !important;
        margin-bottom: 1rem;
    }

    /* Sidebar sticky su mobile diventa card normale */
    .results-sidebar .sidebar-summary-enhanced {
        position: relative !important;
        top: auto !important;
        max-width: 100%;
    }
}

/* ===================================
   HERO CARD - Mobile Ottimizzato
   =================================== */

@media (max-width: 768px) {
    .savings-hero-card {
        margin-bottom: 1rem !important;
    }

    .savings-hero-card .container-fluid {
        padding: 0 !important;
    }

    /* Stack verticale su mobile */
    .savings-hero-card .row {
        flex-direction: column !important;
        gap: 1rem;
    }

    .savings-hero-card .col-lg-4 {
        width: 100% !important;
        padding: 0 1rem !important;
    }

    /* Risparmio annuale - Ridotto padding */
    .hero-main-value {
        padding: 1rem !important;
        text-align: center;
    }

    .hero-primary-value {
        font-size: 2rem !important; /* Più piccolo su mobile */
    }

    .hero-label {
        font-size: 0.9rem !important;
    }

    .hero-subtitle {
        font-size: 0.8rem !important;
    }

    /* Metriche secondarie - Stack verticale */
    .hero-metrics-horizontal {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .metric-horizontal {
        justify-content: flex-start !important;
        padding: 0.5rem !important;
    }

    .metric-value {
        font-size: 1.25rem !important;
    }

    /* Dati ubicazione - Compatto */
    .hero-location-data {
        padding: 1rem !important;
    }

    .location-stats {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .stat-compact {
        font-size: 0.9rem !important;
    }

    /* Action section - Compatta */
    .hero-action-section {
        padding: 1rem !important;
        text-align: center;
    }

    .action-title {
        font-size: 1.1rem !important;
    }

    .action-subtitle {
        font-size: 0.85rem !important;
    }

    .action-stats {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem !important;
        margin: 1rem 0 !important;
    }

    .action-stat {
        flex: 0 0 auto !important;
    }

    .action-stat-value {
        font-size: 1.1rem !important;
    }

    .btn-action-primary {
        width: 100% !important;
        padding: 0.875rem !important;
        font-size: 0.95rem !important;
    }

    /* Social proof - Scroll orizzontale */
    .social-proof-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .social-proof-bar .d-flex {
        flex-wrap: nowrap !important;
        padding: 0.75rem 1rem !important;
    }

    .proof-item {
        flex-shrink: 0 !important;
        white-space: nowrap;
    }

    .proof-number {
        font-size: 1.1rem !important;
    }

    .proof-label {
        font-size: 0.7rem !important;
    }

    .proof-divider {
        margin: 0 0.5rem !important;
    }
}

/* ===================================
   DATI TETTO - Mobile
   =================================== */

@media (max-width: 768px) {
    .roof-data-fullwidth {
        margin-bottom: 1rem !important;
    }

    .roof-data-fullwidth .card-header {
        padding: 0.75rem !important;
    }

    .roof-data-fullwidth h5 {
        font-size: 0.95rem !important;
    }

    .roof-data-fullwidth .badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    .roof-data-fullwidth .row.g-4 {
        gap: 0.75rem !important;
    }

    .roof-data-fullwidth .col-md-3 {
        padding: 0 !important;
    }

    .roof-data-fullwidth .text-center.p-3 {
        padding: 0.75rem !important;
    }

    .roof-data-fullwidth .h4 {
        font-size: 1.25rem !important;
    }

    .roof-data-fullwidth small {
        font-size: 0.75rem !important;
    }
}

/* ===================================
   CONTROLLI SOLAR - Mobile
   =================================== */

@media (max-width: 768px) {
    .solar-controls-card {
        margin-bottom: 1rem !important;
    }

    .solar-controls-card .p-2 {
        padding: 0.75rem !important;
    }

    /* Pulsanti modalità - Stack su schermi piccoli */
    .solar-controls-card .row.g-1 {
        gap: 0.5rem !important;
    }

    .solar-mode-btn {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
    }

    /* Timeline slider - Compatto */
    .timeline-container {
        padding: 0.5rem !important;
    }

    .range-labels {
        font-size: 0.65rem !important;
    }

    /* Pulsante animazione */
    .play-animation-btn {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }
}

/* ===================================
   MAPPA - Mobile
   =================================== */

@media (max-width: 768px) {
    .panel-map-container {
        margin-bottom: 1rem !important;
    }

    #panel-overlay-map {
        height: 300px !important; /* Ridotto da 450px */
        border-radius: 12px !important;
    }

    .map-overlay-info {
        margin: 0.5rem !important;
    }

    .map-overlay-info .p-3 {
        padding: 0.75rem !important;
    }

    .map-overlay-info .h4 {
        font-size: 1.25rem !important;
    }

    .map-overlay-info small {
        font-size: 0.75rem !important;
    }

    /* Indicatore heatmap */
    .position-absolute.top-0.end-0 .badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
        margin: 0.5rem !important;
    }
}

/* ===================================
   CONFIGURAZIONI PANNELLI - Mobile
   =================================== */

@media (max-width: 768px) {
    .panel-configs {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .panel-configs h5 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Slider configurazione */
    .config-slider-wrapper {
        padding: 0.75rem !important;
    }

    .config-details {
        font-size: 0.85rem !important;
    }

    /* Labels slider */
    .slider-labels {
        font-size: 0.75rem !important;
    }
}

/* ===================================
   OPZIONI AGGIUNTIVE - Mobile
   =================================== */

@media (max-width: 768px) {
    .solar-options-card {
        margin-bottom: 1rem !important;
    }

    .solar-options-card .card-header {
        padding: 0.75rem !important;
    }

    .solar-options-card h6 {
        font-size: 0.9rem !important;
    }

    .solar-options-card .p-3 {
        padding: 0.75rem !important;
    }

    /* Option cards - Compatte */
    .option-card {
        padding: 0.875rem !important;
        margin-bottom: 0.75rem !important;
    }

    .option-card h6 {
        font-size: 0.9rem !important;
    }

    .option-card p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    .option-card i.fas {
        font-size: 1.1rem !important;
    }

    /* Toggle switches - Più grandi per touch */
    .form-check-input {
        width: 3rem !important;
        height: 1.5rem !important;
    }

    /* Dettagli opzione */
    .option-card .text-success,
    .option-card .text-primary,
    .option-card .text-info,
    .option-card .text-warning {
        font-size: 0.85rem !important;
    }
}

/* ===================================
   ANALISI ENERGETICA - Mobile
   =================================== */

@media (max-width: 768px) {
    .energy-analysis-modern {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .analysis-header {
        padding: 0.75rem !important;
        flex-wrap: wrap !important;
    }

    .analysis-header .d-flex.align-items-center.gap-3 {
        gap: 0.75rem !important;
    }

    .analysis-header h5 {
        font-size: 0.95rem !important;
    }

    .analysis-header p {
        font-size: 0.75rem !important;
    }

    .analysis-header .d-flex.align-items-center.justify-content-center {
        width: 36px !important;
        height: 36px !important;
    }

    #energy-analysis-preview {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.8rem !important;
    }

    /* Contenuto analisi */
    .analysis-content {
        padding: 1rem !important;
    }

    /* Campo consumo */
    .analysis-content .input-group .form-control {
        font-size: 1rem !important;
        padding: 0.625rem 0.875rem !important;
    }

    .analysis-content .input-group-text {
        font-size: 0.8rem !important;
    }

    /* Griglia metriche - 1 colonna su mobile */
    .analysis-content > .mb-4[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .metric-card-modern {
        padding: 0.875rem !important;
    }

    .metric-card-modern .d-flex {
        width: 36px !important;
        height: 36px !important;
    }

    .metric-card-modern > div[style*="font-size: 0.8rem"] {
        font-size: 0.75rem !important;
    }

    .metric-card-modern .metric-value {
        font-size: 1.35rem !important;
    }

    /* Metriche secondarie - 2 colonne */
    .analysis-content .row.g-3 {
        gap: 0.5rem !important;
    }

    .analysis-content .col-md-3 {
        padding: 0 !important;
    }

    .analysis-content .col-md-3 > div {
        padding: 0.625rem !important;
    }

    .analysis-content .col-md-3 .text-success,
    .analysis-content .col-md-3 .text-primary {
        font-size: 0.95rem !important;
    }

    /* Impatto ambientale */
    .analysis-content > div > div[style*="linear-gradient"] {
        padding: 0.875rem !important;
        flex-direction: column !important;
        text-align: center;
        gap: 0.75rem !important;
    }

    #trees-visualization {
        justify-content: center !important;
    }

    #trees-visualization i {
        font-size: 1.5rem !important;
    }
}

/* ===================================
   SIDEBAR RIEPILOGO - Mobile (Ora in alto)
   =================================== */

@media (max-width: 991px) {
    .results-sidebar {
        /* Già gestito sopra - sidebar diventa order: 1 */
    }

    .sidebar-summary-enhanced {
        border-radius: 12px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    }

    .summary-header {
        padding: 1rem !important;
    }

    .summary-header h6 {
        font-size: 1rem !important;
    }

    .summary-content {
        padding: 1rem !important;
    }

    /* Indirizzo confermato */
    .summary-address-section {
        margin-bottom: 1rem !important;
    }

    .summary-address-section .p-3 {
        padding: 0.875rem !important;
    }

    .summary-address-section .fw-medium {
        font-size: 0.9rem !important;
    }

    .summary-address-section .small {
        font-size: 0.75rem !important;
    }

    /* Hero risparmio sidebar */
    .savings-hero-sidebar {
        margin-bottom: 1rem !important;
    }

    .sidebar-savings-card .p-3 {
        padding: 1rem !important;
    }

    .savings-amount-hero {
        font-size: 2rem !important; /* Grande anche su mobile */
    }

    .savings-subtitle {
        font-size: 0.8rem !important;
    }

    .savings-total-25 small {
        font-size: 0.75rem !important;
    }

    .savings-total-25 .fw-bold {
        font-size: 1.1rem !important;
    }

    /* Mini stat cards */
    .mini-stat-card {
        padding: 0.75rem !important;
    }

    .mini-stat-card .stat-value {
        font-size: 1.1rem !important;
    }

    .mini-stat-card .stat-label {
        font-size: 0.75rem !important;
    }

    /* Efficiency indicator */
    .efficiency-indicator {
        font-size: 0.85rem !important;
    }

    /* Riepilogo costi */
    .cost-summary-card {
        margin-bottom: 1rem !important;
    }

    .cost-breakdown .cost-item {
        padding: 0.625rem 0 !important;
        font-size: 0.85rem !important;
    }

    .cost-breakdown .cost-label {
        font-size: 0.85rem !important;
    }

    .cost-breakdown .cost-value {
        font-size: 0.95rem !important;
    }

    /* CTA button sidebar */
    .cta-button {
        width: 100% !important;
        padding: 0.875rem !important;
        font-size: 0.95rem !important;
    }
}

/* ===================================
   STICKY BAR - Mobile (Gestito da optimized-sticky-bar-mobile.css)
   =================================== */

@media (max-width: 768px) {
    /* Padding extra per sticky bar verticale */
    body.has-sticky-bar.calculator-step-4 {
        padding-bottom: 200px !important; /* Aumentato per layout verticale */
    }
}

/* ===================================
   PERFORMANCE MOBILE
   =================================== */

@media (max-width: 768px) {
    /* Riduci animazioni per performance */
    * {
        transition-duration: 0.2s !important;
    }

    /* Disabilita alcune animazioni complesse */
    @keyframes pulse,
    @keyframes badgePulse,
    @keyframes floatIcon {
        from, to { transform: none; }
    }

    /* Lazy loading immagini */
    img {
        content-visibility: auto;
    }

    /* Ottimizza rendering */
    .panel-map-container,
    .solar-controls-card,
    .energy-analysis-modern {
        contain: layout style paint;
    }
}

/* ===================================
   EXTRA SMALL DEVICES (iPhone SE)
   =================================== */

@media (max-width: 375px) {
    /* Font size ridotto ulteriormente */
    .hero-primary-value {
        font-size: 1.75rem !important;
    }

    .savings-amount-hero {
        font-size: 1.75rem !important;
    }

    .metric-value {
        font-size: 1.1rem !important;
    }

    /* Padding ridotto */
    .hero-main-value,
    .sidebar-savings-card .p-3,
    .analysis-content,
    .solar-options-card .p-3 {
        padding: 0.75rem !important;
    }

    /* Mappa ancora più piccola */
    #panel-overlay-map {
        height: 250px !important;
    }

    /* Bottoni più compatti */
    .btn-action-primary,
    .cta-button {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }
}

/* ===================================
   LANDSCAPE MODE
   =================================== */

@media (max-width: 768px) and (orientation: landscape) {
    /* Mappa più piccola in landscape */
    #panel-overlay-map {
        height: 200px !important;
    }

    /* Padding ridotto per ottimizzare spazio */
    .savings-hero-card .col-lg-4,
    .sidebar-savings-card .p-3,
    .analysis-content {
        padding: 0.5rem !important;
    }

    /* Hero values più piccoli */
    .hero-primary-value,
    .savings-amount-hero {
        font-size: 1.5rem !important;
    }
}

/* ===================================
   UTILITÀ
   =================================== */

@media (max-width: 768px) {
    /* Nascondi elementi non essenziali */
    .d-mobile-none {
        display: none !important;
    }

    /* Testo centrato su mobile */
    .text-mobile-center {
        text-align: center !important;
    }

    /* Margini aggiustati */
    .mb-mobile-2 {
        margin-bottom: 0.5rem !important;
    }

    .mb-mobile-3 {
        margin-bottom: 1rem !important;
    }

    /* Padding aggiustati */
    .p-mobile-2 {
        padding: 0.5rem !important;
    }

    .p-mobile-3 {
        padding: 1rem !important;
    }
}
/**
 * STEP 4 MOBILE FIXES - Correzioni Complete per Mobile
 * Versione: 2.0.0
 * Data: 2024
 *
 * PROBLEMI RISOLTI:
 * - Pulsanti toggle Irraggiamento/Mensile affiancati correttamente
 * - Layout ottimizzato per tutti i dispositivi mobile
 * - Mappa interattiva migliorata per touch
 * - Configurazioni più accessibili
 */

/* ===================================
   FIX CRITICO: PULSANTI TOGGLE
   Problema: I pulsanti appaiono uno sotto l'altro
   Soluzione: Forza layout affiancato con flexbox
   =================================== */

@media (max-width: 768px) {
    /* Fix container per pulsanti toggle */
    .solar-controls-card .row.g-1 {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
        margin: 0 !important;
    }

    /* Fix colonne Bootstrap per pulsanti */
    .solar-controls-card .row.g-1 > .col-6 {
        flex: 1 1 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding: 0 0.125rem !important;
    }

    /* Ottimizza i pulsanti stessi */
    .solar-mode-btn {
        font-size: 0.7rem !important;
        padding: 0.5rem 0.25rem !important;
        min-height: 36px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }

    /* Icone più piccole per risparmiare spazio */
    .solar-mode-btn i {
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
    }

    /* Testo responsive */
    .solar-mode-btn span {
        display: inline-block !important;
        line-height: 1.2 !important;
    }

    /* Su schermi molto piccoli mostra solo icone */
    @media (max-width: 360px) {
        .solar-mode-btn span.d-inline.d-sm-none {
            display: none !important;
        }

        .solar-mode-btn {
            padding: 0.5rem !important;
        }

        .solar-mode-btn i {
            font-size: 0.9rem !important;
            margin: 0 !important;
        }
    }
}

/* ===================================
   LAYOUT GENERALE STEP 4 - MIGLIORAMENTI
   =================================== */

@media (max-width: 768px) {
    /* Container principale più spazioso */
    #analysis-results-content,
    .step-4-content {
        padding: 0.5rem !important;
    }

    /* Cards con spacing ottimizzato */
    .solar-controls-card,
    .panel-configs,
    .solar-options-card,
    .energy-analysis-modern {
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* Headers delle card più compatti */
    .card-header,
    .form-header,
    .analysis-header {
        padding: 0.75rem !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    }

    /* Contenuto card ottimizzato */
    .card-body,
    .p-3 {
        padding: 0.75rem !important;
    }
}

/* ===================================
   MAPPA INTERATTIVA - OTTIMIZZAZIONI MOBILE
   =================================== */

@media (max-width: 768px) {
    /* Container mappa ottimizzato */
    .panel-map-container {
        margin-bottom: 1rem !important;
        position: relative !important;
    }

    /* Mappa con altezza ottimale per mobile */
    #panel-overlay-map {
        height: 320px !important;
        width: 100% !important;
        border-radius: 12px !important;
        position: relative !important;
        touch-action: pan-x pan-y !important; /* Migliora gesture su mobile */
    }

    /* Info overlay più leggibili */
    .map-overlay-info {
        position: absolute !important;
        bottom: 0.5rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        margin: 0 !important;
    }

    .map-overlay-info .bg-white {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        padding: 0.625rem !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    .map-overlay-info .h4 {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }

    .map-overlay-info small {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
    }

    /* Badge heatmap più visibile */
    .position-absolute.top-0.end-0 .badge {
        font-size: 0.7rem !important;
        padding: 0.375rem 0.625rem !important;
        margin: 0.75rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }

    /* Controlli mappa per touch */
    .leaflet-control-zoom {
        margin: 10px !important;
    }

    .leaflet-control-zoom a {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 20px !important;
    }
}

/* ===================================
   TIMELINE SLIDER - OTTIMIZZAZIONI
   =================================== */

@media (max-width: 768px) {
    /* Container timeline più accessibile */
    .timeline-container {
        background: #f8f9fa !important;
        border-radius: 8px !important;
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Header timeline */
    .timeline-container .d-flex {
        margin-bottom: 0.5rem !important;
    }

    .timeline-container small {
        font-size: 0.75rem !important;
    }

    /* Slider ottimizzato per touch */
    #solar-month-slider-card {
        width: 100% !important;
        height: 6px !important;
        border-radius: 3px !important;
        background: linear-gradient(90deg, #e9ecef 0%, #dee2e6 100%) !important;
        cursor: pointer !important;
    }

    /* Thumb più grande per touch */
    #solar-month-slider-card::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
        border: 3px solid white !important;
    }

    #solar-month-slider-card::-moz-range-thumb {
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
        border: 3px solid white !important;
    }

    /* Labels mesi più leggibili */
    .range-labels {
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        color: #6c757d !important;
        margin-top: 0.5rem !important;
        padding: 0 0.25rem !important;
    }
}

/* ===================================
   CONFIGURAZIONI PANNELLI - MOBILE
   =================================== */

@media (max-width: 768px) {
    .panel-configs {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    .panel-configs h5 {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    /* Configurazioni in griglia verticale */
    .config-slider-wrapper {
        background: white !important;
        border-radius: 10px !important;
        padding: 0.875rem !important;
        margin-bottom: 0.75rem !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    }

    .config-details {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    .config-value {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #1e3a8a !important;
    }
}

/* ===================================
   OPZIONI AGGIUNTIVE - CARDS OTTIMIZZATE
   =================================== */

@media (max-width: 768px) {
    .solar-options-card {
        background: white !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }

    /* Header opzioni compatto */
    .solar-options-card > .d-flex {
        padding: 0.75rem !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    }

    /* Option cards touch-friendly */
    .option-card {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 10px !important;
        background: white !important;
        border: 2px solid #e9ecef !important;
        transition: all 0.2s ease !important;
        position: relative !important;
    }

    .option-card:active {
        transform: scale(0.98) !important;
        border-color: #3b82f6 !important;
    }

    /* Toggle switches più grandi per mobile */
    .form-check-input {
        width: 3.5rem !important;
        height: 1.75rem !important;
        cursor: pointer !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .form-check-input:checked {
        background-color: #3b82f6 !important;
        border-color: #3b82f6 !important;
    }

    /* Testi option cards */
    .option-card h6 {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
    }

    .option-card p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        color: #6c757d !important;
        margin-bottom: 0 !important;
    }

    .option-card .text-success,
    .option-card .text-primary {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
    }
}

/* ===================================
   STICKY BAR INTEGRAZIONE
   =================================== */

@media (max-width: 768px) {
    /* Spazio extra quando sticky bar è visibile */
    body.has-sticky-bar.calculator-step-4 {
        padding-bottom: 200px !important;
    }

    /* Smooth scroll per navigazione */
    html {
        scroll-behavior: smooth !important;
    }
}

/* ===================================
   PERFORMANCE OTTIMIZZAZIONI
   =================================== */

@media (max-width: 768px) {
    /* Riduci complessità animazioni */
    * {
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }

    /* GPU acceleration per elementi pesanti */
    #panel-overlay-map,
    .sticky-summary-bar {
        transform: translateZ(0) !important;
        will-change: transform !important;
    }

    /* Ottimizza rendering cards */
    .solar-controls-card,
    .panel-configs,
    .solar-options-card {
        contain: layout style !important;
    }
}

/* ===================================
   IPHONE NOTCH SAFE AREAS
   =================================== */

@media (max-width: 768px) {
    .sticky-summary-bar {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }

    #analysis-results-content {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
    }
}

/* ===================================
   EXTRA SMALL DEVICES (< 375px)
   =================================== */

@media (max-width: 375px) {
    /* Pulsanti ancora più compatti */
    .solar-mode-btn {
        font-size: 0.65rem !important;
        padding: 0.4rem 0.2rem !important;
        min-height: 32px !important;
    }

    /* Mappa più piccola */
    #panel-overlay-map {
        height: 280px !important;
    }

    /* Font sizes ridotti */
    .panel-configs h5,
    .solar-options-card h6 {
        font-size: 0.9rem !important;
    }

    .option-card p {
        font-size: 0.75rem !important;
    }

    /* Form controls più compatti */
    .form-check-input {
        width: 3rem !important;
        height: 1.5rem !important;
    }
}

/* ===================================
   LANDSCAPE ORIENTATION
   =================================== */

@media (max-width: 812px) and (orientation: landscape) {
    /* Mappa più bassa in landscape */
    #panel-overlay-map {
        height: 220px !important;
    }

    /* Padding ridotto */
    .solar-controls-card,
    .panel-configs,
    .solar-options-card {
        padding: 0.5rem !important;
    }

    /* Headers più compatti */
    .card-header,
    .analysis-header {
        padding: 0.5rem !important;
    }

    /* Font più piccoli */
    .solar-mode-btn {
        font-size: 0.65rem !important;
        padding: 0.375rem 0.25rem !important;
    }
}

/* ===================================
   UTILITÀ E HELPER CLASSES
   =================================== */

@media (max-width: 768px) {
    /* Nascondi elementi non essenziali */
    .d-mobile-none {
        display: none !important;
    }

    /* Mostra solo su mobile */
    .d-mobile-only {
        display: block !important;
    }

    /* Text utilities */
    .text-mobile-center {
        text-align: center !important;
    }

    .text-mobile-small {
        font-size: 0.85rem !important;
    }

    /* Spacing utilities */
    .mt-mobile-2 {
        margin-top: 0.5rem !important;
    }

    .mb-mobile-2 {
        margin-bottom: 0.5rem !important;
    }

    .p-mobile-2 {
        padding: 0.5rem !important;
    }
}

/* ===================================
   ANIMAZIONI TOUCH FEEDBACK
   =================================== */

@media (max-width: 768px) {
    /* Feedback visivo per elementi interattivi */
    .btn:active,
    .option-card:active,
    .form-check-input:active,
    .solar-mode-btn:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }

    /* Ripple effect per buttons */
    .solar-mode-btn {
        position: relative !important;
        overflow: hidden !important;
    }

    .solar-mode-btn::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 0 !important;
        height: 0 !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.5) !important;
        transform: translate(-50%, -50%) !important;
        transition: width 0.3s, height 0.3s !important;
    }

    .solar-mode-btn:active::after {
        width: 100px !important;
        height: 100px !important;
    }
}

/* ===================================
   SCROLL BEHAVIOR
   =================================== */

@media (max-width: 768px) {
    /* Smooth scrolling per anchor links */
    html {
        scroll-padding-top: 80px !important; /* Account for fixed header */
    }

    /* Scroll snap per sezioni principali */
    .step-4-content {
        scroll-snap-type: y proximity !important;
    }

    .savings-hero-card,
    .solar-controls-card,
    .panel-map-container,
    .panel-configs,
    .solar-options-card {
        scroll-snap-align: start !important;
        scroll-margin-top: 1rem !important;
    }
}

/* ===================================
   DARK MODE SUPPORT (Opzionale)
   =================================== */

@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .solar-controls-card,
    .panel-configs,
    .solar-options-card {
        background: #1a1a1a !important;
        border-color: #333 !important;
    }

    .option-card {
        background: #2a2a2a !important;
        border-color: #444 !important;
    }

    .timeline-container {
        background: #2a2a2a !important;
    }

    .map-overlay-info .bg-white {
        background: rgba(26, 26, 26, 0.95) !important;
        color: white !important;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    .sticky-summary-bar,
    .btn-action-primary,
    .play-animation-btn {
        display: none !important;
    }

    #panel-overlay-map {
        height: 400px !important;
        page-break-inside: avoid !important;
    }
}/**
 * STEP 4 MOBILE REDESIGN
 * Complete redesign of Step 4 (form/options) for mobile
 * Inspired by Step 3 (roof selection) clean design
 * Version: 1.0.0
 */

/* =============================================
   APPLY ONLY TO MOBILE - STEP 4 ONLY
   ============================================= */
@media (max-width: 768px) {

    /* =============================================
       RESET ALL PADDINGS AND MARGINS
       ============================================= */
    .step-4-content,
    .step-4-content *,
    .step-4-active .preventivatore-container,
    .step-4-active .preventivatore-card {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Remove all container constraints */
    .step-4-content .container,
    .step-4-content .container-fluid {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Remove row gaps */
    .step-4-content .row {
        margin: 0 !important;
        gap: 0 !important;
    }

    /* Remove column padding */
    .step-4-content [class*="col-"] {
        padding: 0 !important;
    }

    /* =============================================
       HERO CARD - FULL WIDTH REDESIGN
       ============================================= */
    .step-4-content .savings-hero-card {
        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 1.5rem 1rem !important;
        box-shadow: none !important;
        border: none !important;
    }

    .step-4-content .hero-card-inner,
    .step-4-content .hero-background-horizontal {
        background: transparent !important;
        padding: 0 !important;
    }

    /* Stack columns vertically on mobile */
    .step-4-content .savings-hero-card .row {
        flex-direction: column !important;
    }

    .step-4-content .savings-hero-card [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0.75rem 0 !important;
    }

    /* Hero text styling */
    .step-4-content .hero-label,
    .step-4-content .hero-subtitle,
    .step-4-content .metric-label {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.875rem !important;
    }

    .step-4-content .hero-primary-value,
    .step-4-content .metric-value {
        color: white !important;
        font-weight: 700 !important;
    }

    .step-4-content .hero-primary-value {
        font-size: 2rem !important;
    }

    /* =============================================
       OPTION CARDS - CLEAN FULL WIDTH
       ============================================= */
    .step-4-content .option-card {
        border-radius: 0 !important;
        margin: 0 0 1px 0 !important;
        padding: 1.25rem 1rem !important;
        background: white !important;
        border: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        box-shadow: none !important;
    }

    .step-4-content .option-card:first-of-type {
        border-top: 1px solid #e5e7eb !important;
    }

    .step-4-content .option-card:last-of-type {
        border-bottom: none !important;
    }

    /* Option card hover effect */
    .step-4-content .option-card:active {
        background: #f9fafb !important;
    }

    /* =============================================
       SECTION HEADERS - CLEAN DESIGN
       ============================================= */
    .step-4-content .section-header,
    .step-4-content .d-flex.align-items-center.mb-3 {
        padding: 1rem !important;
        background: #f8fafc !important;
        margin: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    .step-4-content .section-title,
    .step-4-content h6 {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }

    /* =============================================
       FORM ELEMENTS - CONSISTENT SPACING
       ============================================= */
    .step-4-content input,
    .step-4-content select,
    .step-4-content textarea,
    .step-4-content button:not(.form-check-input) {
        padding: 0.75rem 1rem !important;
        border-radius: 8px !important;
    }

    .step-4-content .btn {
        margin: 1rem !important;
        width: calc(100% - 2rem) !important;
    }

    /* =============================================
       SUMMARY SECTIONS - CLEAN CARDS
       ============================================= */
    .step-4-content .summary-card,
    .step-4-content .financing-card {
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 1.25rem 1rem !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    /* =============================================
       PANEL MAP CONTAINER - FULL WIDTH
       ============================================= */
    .step-4-content .panel-map-container {
        margin: 0 !important;
        padding: 0 !important;
    }

    .step-4-content #panel-overlay-map {
        border-radius: 0 !important;
        width: 100% !important;
    }

    /* =============================================
       SOLAR CONFIGURATOR - CLEAN LAYOUT
       ============================================= */
    .step-4-content .solar-configurator-full {
        padding: 0 !important;
        margin: 0 !important;
    }

    .step-4-content #analysis-results-section,
    .step-4-content #analysis-results-content {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* =============================================
       DIVIDERS - CLEAN SEPARATION
       ============================================= */
    .step-4-content .mb-4,
    .step-4-content .mb-3 {
        margin-bottom: 0 !important;
    }

    /* Add spacing only where needed */
    .step-4-content .savings-hero-card {
        margin-bottom: 0 !important;
    }

    /* =============================================
       CHARTS AND GRAPHS - RESPONSIVE
       ============================================= */
    .step-4-content canvas,
    .step-4-content .chart-container {
        padding: 1rem !important;
    }

    /* =============================================
       ACCORDIONS - CLEAN DESIGN
       ============================================= */
    .step-4-content .accordion-item {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .step-4-content .accordion-button {
        padding: 1rem !important;
    }

    /* =============================================
       BADGES AND TAGS - PROPER SPACING
       ============================================= */
    .step-4-content .badge {
        margin: 0.25rem !important;
    }

    /* =============================================
       RESTORE NECESSARY INTERNAL PADDING
       ============================================= */
    .step-4-content .d-flex,
    .step-4-content .flex {
        gap: 0.75rem !important;
    }

    .step-4-content p {
        padding: 0 !important;
        margin: 0.5rem 0 !important;
    }

    .step-4-content small {
        padding: 0 !important;
    }

    /* Icons - restore spacing */
    .step-4-content i {
        margin-right: 0.5rem !important;
    }

    /* =============================================
       TYPOGRAPHY - MOBILE OPTIMIZED
       ============================================= */
    .step-4-content h1 { font-size: 1.75rem !important; }
    .step-4-content h2 { font-size: 1.5rem !important; }
    .step-4-content h3 { font-size: 1.25rem !important; }
    .step-4-content h4 { font-size: 1.1rem !important; }
    .step-4-content h5 { font-size: 1rem !important; }
    .step-4-content h6 { font-size: 0.95rem !important; }

    /* =============================================
       DARK MODE SUPPORT
       ============================================= */
    @media (prefers-color-scheme: dark) {
        .step-4-content .option-card {
            background: #1f2937 !important;
            border-color: #374151 !important;
        }

        .step-4-content .section-header {
            background: #111827 !important;
            border-color: #374151 !important;
        }

        .step-4-content .option-title,
        .step-4-content .section-title {
            color: #f9fafb !important;
        }
    }
}

/* =============================================
   TABLET SPECIFIC ADJUSTMENTS
   ============================================= */
@media (min-width: 769px) and (max-width: 1024px) {
    .step-4-content .option-card {
        padding: 1.5rem !important;
    }

    .step-4-content .savings-hero-card {
        padding: 2rem 1.5rem !important;
    }
}
/* ========================================
   STEP 4 MOBILE - COMPLETE REDESIGN
   Max width: 576px
   Professional, clean, modern design
   IMPORTANT: This overrides all previous mobile styles
   ======================================== */

/* CRITICAL: Hide mobile sticky bar on desktop */
@media (min-width: 577px) {
    .s4m-sticky-bar,
    .step4-mobile-container {
        display: none !important;
    }
}

@media (max-width: 576px) {

    /* ===== CRITICAL: HIDE DESKTOP LAYOUT ===== */
    .savings-hero-card,
    .solar-configurator-full,
    .hero-card-inner,
    .hero-background-horizontal,
    .hero-grid-sections,
    .solar-panels-showcase,
    .roof-data-fullwidth,
    .energy-analysis-fullwidth,
    .financial-summary-card,
    .panel-config-selector,
    .config-options-grid {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* RESET parent container to prevent interference */
    .step-4-content {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        background: transparent !important;
    }

    #analysis-results-section,
    #analysis-results-content {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        background: transparent !important;
    }

    /* RESET: Override any conflicting styles from other CSS files */
    .step-4-content .step4-mobile-container,
    .step4-mobile-container {
        display: block !important;
        box-sizing: border-box !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        color: #1F2937 !important;
    }

    .step4-mobile-container * {
        box-sizing: border-box !important;
    }

    /* Container */
    .step4-mobile-container {
        background: #FFFFFF !important;
        padding: 16px !important;
        padding-bottom: 120px !important; /* Space for sticky bar */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ========================================
       HERO CARD
       ======================================== */

    .s4m-hero-card {
        background: linear-gradient(135deg, #F0F9FF 0%, #DBEAFE 100%);
        border: 1px solid #BFDBFE;
        border-radius: 16px;
        padding: 24px 20px;
        margin-bottom: 20px;
        text-align: center;
    }

    .s4m-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: 20px;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 500;
        color: #3B82F6;
        margin-bottom: 16px;
    }

    .s4m-hero-icon {
        width: 16px;
        height: 16px;
        stroke-width: 2.5;
    }

    .s4m-hero-amount {
        font-size: 48px;
        font-weight: 800;
        color: #10B981;
        line-height: 1;
        margin-bottom: 20px;
        letter-spacing: -0.02em;
    }

    .s4m-hero-metrics {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }

    .s4m-metric {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 13px;
        color: #6B7280;
    }

    .s4m-metric-icon {
        width: 16px;
        height: 16px;
        stroke-width: 2;
        color: #9CA3AF;
        flex-shrink: 0;
    }

    .s4m-metric strong {
        color: #1F2937;
        font-weight: 600;
    }

    .s4m-hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #3B82F6;
        color: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 12px 24px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        min-height: 48px;
    }

    .s4m-hero-cta:active {
        transform: scale(0.98);
        background: #2563EB;
    }

    .s4m-hero-cta svg {
        width: 18px;
        height: 18px;
        stroke-width: 2.5;
    }

    /* ========================================
       ADDRESS BAR
       ======================================== */

    .s4m-address-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 20px;
        font-size: 13px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .s4m-address-bar::-webkit-scrollbar {
        display: none;
    }

    .s4m-address-icon {
        width: 16px;
        height: 16px;
        color: #3B82F6;
        flex-shrink: 0;
    }

    .s4m-address-text {
        color: #1F2937;
        font-weight: 500;
        white-space: nowrap;
    }

    .s4m-address-divider {
        color: #CBD5E1;
        font-weight: 300;
    }

    .s4m-address-config {
        color: #6B7280;
        white-space: nowrap;
    }

    /* ========================================
       MAP SECTION
       ======================================== */

    .s4m-map-section {
        margin-bottom: 20px;
    }

    .s4m-map-container {
        position: relative;
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-right: -16px;
        height: 300px;
        background: #E5E7EB;
        overflow: hidden;
    }

    .s4m-map {
        width: 100%;
        height: 100%;
    }

    .s4m-map-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 20px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 600;
        color: #1F2937;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .s4m-map-badge svg {
        width: 16px;
        height: 16px;
        color: #3B82F6;
    }

    .s4m-map-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 12px;
    }

    .s4m-map-control {
        display: flex;
        align-items: center;
        gap: 6px;
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        color: #6B7280;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
        min-height: 40px;
    }

    .s4m-map-control.active {
        background: #3B82F6;
        border-color: #3B82F6;
        color: #FFFFFF;
    }

    .s4m-map-control svg {
        width: 14px;
        height: 14px;
    }

    .s4m-month-slider {
        flex: 1;
        position: relative;
        min-width: 0;
    }

    #s4m-month-range {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: #E2E8F0;
        outline: none;
        appearance: none;
        cursor: pointer;
    }

    #s4m-month-range::-webkit-slider-thumb {
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #3B82F6;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    #s4m-month-range::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #3B82F6;
        cursor: pointer;
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .s4m-month-label {
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        font-weight: 600;
        color: #3B82F6;
        white-space: nowrap;
        pointer-events: none;
    }

    /* ========================================
       COLLAPSIBLE SECTIONS
       ======================================== */

    .s4m-collapsible {
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
        border-radius: 12px;
        margin-bottom: 16px;
        overflow: hidden;
    }

    .s4m-collapsible-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        cursor: pointer;
        user-select: none;
        list-style: none;
        min-height: 56px;
    }

    .s4m-collapsible-header::-webkit-details-marker {
        display: none;
    }

    .s4m-collapsible-title {
        font-size: 15px;
        font-weight: 600;
        color: #1F2937;
    }

    .s4m-collapsible-icon {
        width: 20px;
        height: 20px;
        color: #6B7280;
        transition: transform 0.2s ease;
        stroke-width: 2.5;
    }

    .s4m-collapsible[open] .s4m-collapsible-icon {
        transform: rotate(180deg);
    }

    .s4m-collapsible-content {
        padding: 0 16px 16px 16px;
    }

    /* ========================================
       DATA GRID (ROOF DETAILS)
       ======================================== */

    .s4m-data-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .s4m-data-item {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        padding: 12px;
    }

    .s4m-data-label {
        font-size: 11px;
        font-weight: 500;
        color: #6B7280;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .s4m-data-value {
        font-size: 16px;
        font-weight: 700;
        color: #1F2937;
    }

    /* ========================================
       CONFIGURATION SECTION
       ======================================== */

    .s4m-config-section {
        margin-bottom: 24px;
        scroll-margin-top: 20px;
    }

    .s4m-section-title {
        font-size: 18px;
        font-weight: 700;
        color: #1F2937;
        margin: 0 0 20px 0;
        letter-spacing: -0.01em;
    }

    .s4m-power-slider {
        position: relative;
        margin-bottom: 20px;
    }

    .s4m-slider-labels {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        font-weight: 500;
        color: #6B7280;
        margin-bottom: 8px;
    }

    #s4m-power-range {
        position: relative;
        width: 100%;
        height: 8px;
        border-radius: 4px;
        background: transparent;
        outline: none;
        appearance: none;
        cursor: pointer;
        z-index: 2;
    }

    #s4m-power-range::-webkit-slider-thumb {
        appearance: none;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #FFFFFF;
        border: 3px solid #3B82F6;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        transition: transform 0.1s ease;
    }

    #s4m-power-range::-webkit-slider-thumb:active {
        transform: scale(1.1);
    }

    #s4m-power-range::-moz-range-thumb {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #FFFFFF;
        border: 3px solid #3B82F6;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }

    .s4m-slider-track {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        height: 8px;
        background: #E2E8F0;
        border-radius: 4px;
        overflow: hidden;
        pointer-events: none;
        z-index: 1;
    }

    .s4m-slider-fill {
        height: 100%;
        background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
        border-radius: 4px;
        transition: width 0.2s ease;
        width: 50%;
    }

    .s4m-config-card {
        background: #FFFFFF;
        border: 2px solid #3B82F6;
        border-radius: 12px;
        padding: 16px;
    }

    .s4m-config-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .s4m-config-power {
        font-size: 28px;
        font-weight: 800;
        color: #1F2937;
        letter-spacing: -0.02em;
    }

    .s4m-config-badge {
        background: #DBEAFE;
        color: #1E40AF;
        border-radius: 6px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .s4m-config-details {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .s4m-config-detail {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: #1F2937;
    }

    .s4m-config-detail svg {
        width: 18px;
        height: 18px;
        color: #6B7280;
        flex-shrink: 0;
    }

    /* ========================================
       OPTIONS SECTION
       ======================================== */

    .s4m-options-section {
        margin-bottom: 24px;
    }

    .s4m-option-card {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        transition: all 0.2s ease;
    }

    .s4m-option-card:active {
        transform: scale(0.99);
    }

    .s4m-option-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .s4m-option-info {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
    }

    .s4m-option-icon {
        font-size: 24px;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .s4m-option-title {
        font-size: 15px;
        font-weight: 600;
        color: #1F2937;
        margin-bottom: 2px;
    }

    .s4m-option-desc {
        font-size: 12px;
        color: #6B7280;
    }

    /* Custom Toggle Switch */
    .s4m-toggle {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 28px;
        flex-shrink: 0;
        cursor: pointer;
    }

    .s4m-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .s4m-toggle-slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #E2E8F0;
        border-radius: 28px;
        transition: all 0.3s ease;
    }

    .s4m-toggle-slider::before {
        content: "";
        position: absolute;
        height: 22px;
        width: 22px;
        left: 3px;
        bottom: 3px;
        background: #FFFFFF;
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .s4m-toggle input:checked + .s4m-toggle-slider {
        background: #10B981;
    }

    .s4m-toggle input:checked + .s4m-toggle-slider::before {
        transform: translateX(20px);
    }

    .s4m-toggle input:focus + .s4m-toggle-slider {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

    /* ========================================
       ENERGY ANALYSIS
       ======================================== */

    .s4m-input-group {
        margin-bottom: 20px;
    }

    .s4m-input-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #1F2937;
        margin-bottom: 8px;
    }

    .s4m-input-wrapper {
        position: relative;
    }

    .s4m-input {
        width: 100%;
        background: #FFFFFF;
        border: 1px solid #D1D5DB;
        border-radius: 10px;
        padding: 12px 14px;
        padding-right: 50px;
        font-size: 15px;
        color: #1F2937;
        transition: all 0.2s ease;
    }

    .s4m-input:focus {
        outline: none;
        border-color: #3B82F6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .s4m-input-suffix {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        font-weight: 500;
        color: #6B7280;
        pointer-events: none;
    }

    .s4m-energy-breakdown {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 20px;
    }

    .s4m-energy-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .s4m-energy-bar {
        height: 8px;
        background: #E2E8F0;
        border-radius: 4px;
        overflow: hidden;
    }

    .s4m-energy-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.3s ease;
    }

    .s4m-energy-fill.s4m-energy-self {
        background: linear-gradient(90deg, #10B981 0%, #059669 100%);
    }

    .s4m-energy-fill.s4m-energy-grid {
        background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
    }

    .s4m-energy-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .s4m-energy-label {
        font-size: 13px;
        font-weight: 500;
        color: #1F2937;
    }

    .s4m-energy-value {
        font-size: 12px;
        font-weight: 600;
        color: #6B7280;
    }

    .s4m-impact-card {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
        border: 1px solid #A7F3D0;
        border-radius: 10px;
        padding: 16px;
    }

    .s4m-impact-icon {
        width: 32px;
        height: 32px;
        color: #10B981;
        flex-shrink: 0;
    }

    .s4m-impact-content {
        flex: 1;
    }

    .s4m-impact-title {
        font-size: 13px;
        font-weight: 600;
        color: #065F46;
        margin-bottom: 4px;
    }

    .s4m-impact-value {
        font-size: 16px;
        font-weight: 700;
        color: #047857;
        margin-bottom: 2px;
    }

    .s4m-impact-desc {
        font-size: 12px;
        color: #059669;
    }

    /* ========================================
       STICKY BOTTOM BAR
       ======================================== */

    .s4m-sticky-spacer {
        height: 100px;
    }

    .s4m-sticky-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #FFFFFF;
        border-top: 1px solid #E2E8F0;
        padding: 12px 16px;
        z-index: 1000;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    }

    .s4m-sticky-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        max-width: 576px;
        margin: 0 auto;
    }

    .s4m-sticky-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Hero Section: Annual Savings */
    .s4m-sticky-hero {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .s4m-sticky-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
        border: 1px solid #A7F3D0;
        border-radius: 6px;
        padding: 4px 8px;
        width: fit-content;
        max-width: 100%;
    }

    .s4m-badge-icon {
        width: 14px;
        height: 14px;
        color: #059669;
        flex-shrink: 0;
        stroke-width: 2.5;
    }

    .s4m-sticky-badge span {
        font-size: 10px;
        font-weight: 600;
        color: #059669;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .s4m-sticky-savings {
        font-size: 28px;
        font-weight: 900;
        color: #10B981;
        letter-spacing: -0.03em;
        line-height: 1;
        text-shadow: 0 1px 2px rgba(16, 185, 129, 0.1);
    }

    /* Secondary Section: Investment */
    .s4m-sticky-secondary {
        display: flex;
        align-items: baseline;
        gap: 6px;
        flex-wrap: wrap;
    }

    .s4m-sticky-label {
        font-size: 11px;
        font-weight: 500;
        color: #6B7280;
        letter-spacing: 0.01em;
    }

    .s4m-sticky-price {
        font-size: 14px;
        font-weight: 700;
        color: #1F2937;
        letter-spacing: -0.01em;
    }

    /* CTA Button */
    .s4m-sticky-cta {
        display: flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        color: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 12px 20px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        min-height: 48px;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        flex-shrink: 0;
    }

    .s4m-sticky-cta:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    }

    .s4m-sticky-cta svg {
        width: 16px;
        height: 16px;
        stroke-width: 2.5;
        flex-shrink: 0;
    }

    /* Responsive adjustments for smaller screens */
    @media (max-width: 360px) {
        .s4m-sticky-content {
            gap: 10px;
        }

        .s4m-sticky-savings {
            font-size: 24px;
        }

        .s4m-sticky-cta {
            padding: 12px 16px;
            font-size: 13px;
        }

        .s4m-sticky-cta span {
            display: none;
        }

        .s4m-sticky-cta svg {
            width: 20px;
            height: 20px;
        }
    }

    /* ========================================
       HIDE DESKTOP LAYOUT ON MOBILE
       ======================================== */

    /* Hide the desktop solar-configurator-full container */
    .step-4-content .solar-configurator-full,
    .solar-configurator-full {
        display: none !important;
    }

    /* Ensure mobile container is visible */
    .step4-mobile-container {
        display: block !important;
    }

    /* ========================================
       ACCESSIBILITY & ANIMATIONS
       ======================================== */

    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Focus visible styles */
    .s4m-hero-cta:focus-visible,
    .s4m-sticky-cta:focus-visible,
    .s4m-map-control:focus-visible,
    .s4m-toggle input:focus-visible + .s4m-toggle-slider {
        outline: 3px solid #3B82F6;
        outline-offset: 2px;
    }

    /* Safe area for notched devices */
    @supports (padding: max(0px)) {
        .s4m-sticky-bar {
            padding-bottom: max(16px, env(safe-area-inset-bottom));
        }
    }

}