/* Result cards compact styling */
.result-compact-card{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#resultSection{min-height:0}
.tab-btn{min-height:48px;min-width:120px}
/* Desktop two-column layout */
/* Mobile/Tablet: single column, map below inputs */
.desktop-layout-grid{display:block}
.desktop-inputs-col{margin-bottom:1.5rem}
.desktop-map-col{display:block;margin-top:1rem}
/* Desktop (1024px+): flexbox layout, map dominates */
@media(min-width:1024px){
    .wide-main{max-width:96vw!important;width:96vw;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
    .wide-glass{padding:1.5rem}
    .desktop-layout-grid{display:flex;flex-direction:row;align-items:stretch;gap:1.25rem;direction:ltr}
    .desktop-inputs-col{flex:0 0 440px;width:440px;margin-bottom:0}
    .desktop-map-col{flex:1 1 0%;margin-top:0;min-width:0}
    .desktop-map-col #mapContainer{height:100%;min-height:600px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}
    .desktop-map-col #map{height:100%!important;min-height:600px}
}
/* Large desktop (1280px+) */
@media(min-width:1280px){
    .wide-main{max-width:97vw!important;width:97vw;padding-left:1.5rem;padding-right:1.5rem}
    .wide-glass{padding:1.75rem}
    .desktop-layout-grid{gap:1.5rem}
    .desktop-inputs-col{flex:0 0 480px;width:480px}
    .desktop-map-col #mapContainer{min-height:650px}
    .desktop-map-col #map{min-height:650px}
}
/* XL desktop (1536px+) */
@media(min-width:1536px){
    .wide-main{max-width:98vw!important;width:98vw;padding-left:1.5rem;padding-right:1.5rem}
    .wide-glass{padding:2rem}
    .desktop-layout-grid{gap:2rem}
    .desktop-inputs-col{flex:0 0 520px;width:520px}
    .desktop-map-col #mapContainer{min-height:700px}
    .desktop-map-col #map{min-height:700px}
}
/* Ultra-wide (1920px+): cap max-width to prevent text stretch */
@media(min-width:1920px){
    .wide-main{max-width:min(98vw,2200px)!important;width:min(98vw,2200px);padding-left:2rem;padding-right:2rem}
    .wide-glass{padding:2.5rem}
    .desktop-layout-grid{gap:2.5rem}
    .desktop-inputs-col{flex:0 0 560px;width:560px}
    .desktop-map-col #mapContainer{min-height:750px}
    .desktop-map-col #map{min-height:750px}
}
/* 4K+ (2560px+) */
@media(min-width:2560px){
    .wide-main{max-width:2400px!important;width:2400px}
    .desktop-inputs-col{flex:0 0 600px;width:600px}
    .desktop-map-col #mapContainer{min-height:800px}
    .desktop-map-col #map{min-height:800px}
}
/* Mobile: compact form controls */
@media(max-width:767px){
    main.px-4{padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem}
    .glass.p-6{padding:1rem}
    main h1{font-size:1.5rem!important;margin-bottom:0.5rem!important}
    main h1+p{font-size:0.85rem!important;margin-bottom:1.5rem!important}
    .space-y-8>*+*{margin-top:1rem!important}
    label.block.font-semibold{font-size:0.8rem;margin-bottom:0.25rem}
    #startCity,#endCity,.stop-point input{padding:0.5rem 0.75rem;font-size:0.9rem}
    .flex.gap-3 button.px-4{padding-left:0.5rem;padding-right:0.5rem}
    .flex.gap-3 button.p-4 .material-icons-outlined{font-size:20px}
    #initialAddStop{padding-top:0.35rem!important;padding-bottom:0.35rem!important;font-size:0.8rem;border-width:1px}
    #initialAddStop .material-icons-outlined{font-size:16px}
    .route-tab-button,.unit-tab-button,.calc-tab-button{padding-top:0.4rem!important;padding-bottom:0.4rem!important;font-size:0.8rem}
    .route-tab-button .material-icons-outlined{font-size:16px}
    .mb-6,.mb-8{margin-bottom:0.75rem!important}
    #fuelEfficiency,#fuelPrice,#evEfficiency,#evPrice,#currencySelector{padding:0.5rem 0.75rem;font-size:0.9rem}
    .absolute.right-4.top-4{right:0.5rem;top:0.5rem;font-size:0.75rem}
    #currencySelector{font-size:0.85rem!important}
    #calculateBtn{padding-top:0.6rem!important;padding-bottom:0.6rem!important;font-size:0.95rem!important;border-width:2px!important;border-radius:0.75rem!important}
    #calculateBtn .material-icons-outlined{font-size:1.1rem}
    #shareTripBtn{padding:0.4rem 0.75rem!important;font-size:0.8rem!important}
    #shareTripBtn .material-icons-outlined{font-size:1rem}
}