.map-page-header{background:linear-gradient(135deg,var(--ono-yellow)0%,#ffd740 100%);text-align:center;z-index:100;margin-bottom:0;padding:4rem 0 3rem;position:relative;overflow:visible;box-shadow:0 8px 25px #ffcd004d}.map-page-header:before{content:"";opacity:.6;z-index:-1;background-image:radial-gradient(#0000000a 1px,#0000 1px);background-size:30px 30px;position:absolute;inset:0}.map-page-header .page-title{text-transform:uppercase;letter-spacing:-1px;z-index:2;color:#000;margin-bottom:1rem;font-size:3.5rem;font-weight:900;position:relative}.map-page-header .page-subtitle{z-index:2;color:#333;max-width:600px;margin:0 auto 2rem;font-size:1.2rem;font-weight:500;position:relative}.map-page-header .hero-badge{background:var(--ono-red);color:#fff;text-transform:uppercase;letter-spacing:1.5px;z-index:2;border-radius:50px;margin-bottom:1.5rem;padding:.5rem 1.2rem;font-size:.85rem;font-weight:800;display:inline-block;position:relative;box-shadow:0 4px 15px #c8102e66}.map-controls{z-index:200;justify-content:center;align-items:center;gap:1rem;max-width:900px;margin:2rem auto 0;display:flex;position:relative}.control-btn{color:#000;cursor:pointer;white-space:nowrap;z-index:200;background:#fff;border:2px solid #0000001a;border-radius:12px;align-items:center;gap:.5rem;padding:.8rem 1.5rem;font-size:.95rem;font-weight:700;transition:all .2s;display:flex;position:relative}.control-btn:hover{background:var(--ono-red);color:#fff;border-color:var(--ono-red);transform:translateY(-2px);box-shadow:0 4px 12px #ad29314d}.control-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.control-btn i{font-size:1rem}.control-btn .chevron{margin-left:.3rem;font-size:.8rem}.find-nearest{background:var(--ono-red);color:#fff;border-color:var(--ono-red)}.find-nearest:hover:not(:disabled){background:#8b1f26;border-color:#8b1f26}.filter-badge{background:var(--ono-red);color:#fff;border-radius:10px;margin-left:.3rem;padding:.2rem .5rem;font-size:.75rem;font-weight:800}.station-counter{color:#333;border:2px solid var(--ono-yellow);background:#fffffff2;border-radius:50px;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.7rem 1.2rem;font-size:.9rem;font-weight:600;display:inline-flex;box-shadow:0 4px 12px #00000026}.station-counter i{color:#22c55e;font-size:1rem}.station-counter strong{color:var(--ono-red);font-weight:800}.city-search-wrapper{z-index:300;flex:1;max-width:400px;position:relative}.city-search{z-index:300;width:100%;position:relative}.search-icon{color:#666;z-index:301;pointer-events:none;font-size:.95rem;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.city-search-input{z-index:300;background:#fff;border:2px solid #0000001a;border-radius:12px;width:100%;padding:.8rem 2.8rem;font-size:.95rem;font-weight:500;transition:all .2s;position:relative}.city-search-input:focus{border-color:var(--ono-yellow);outline:none;box-shadow:0 0 0 3px #f7d60033}.city-search-input::placeholder{color:#999}.clear-btn{color:#999;cursor:pointer;z-index:301;background:0 0;border:none;padding:.3rem;font-size:.9rem;transition:color .2s;position:absolute;top:50%;right:.8rem;transform:translateY(-50%)}.clear-btn:hover{color:var(--ono-red)}.city-dropdown{z-index:10000;background:#fff;border:2px solid #0000001a;border-radius:12px;max-height:450px;animation:.2s dropdownSlideIn;position:absolute;top:calc(100% + .5rem);left:0;right:0;overflow-y:auto;box-shadow:0 12px 35px #0003}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.city-dropdown::-webkit-scrollbar{width:8px}.city-dropdown::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0 12px 12px 0}.city-dropdown::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}.city-dropdown::-webkit-scrollbar-thumb:hover{background:var(--ono-red)}.city-item{cursor:pointer;border-bottom:1px solid #f5f5f5;padding:.7rem 1rem;transition:all .15s;position:relative}.city-item:last-child{border-bottom:none}.city-item:hover{border-left:3px solid var(--ono-yellow);background:linear-gradient(90deg,#fafafa 0%,#f5f5f5 100%);padding-left:calc(1rem - 3px)}.city-item:hover .city-icon{color:var(--ono-red);transform:scale(1.1)}.city-item.selected{border-left:3px solid var(--ono-red);background:linear-gradient(90deg,#fff9e6 0%,#fff4d4 100%);padding-left:calc(1rem - 3px)}.city-item.selected .city-icon{color:var(--ono-red)}.city-item.loading{color:#666;cursor:default;justify-content:flex-start;align-items:center;gap:.8rem;padding-top:1rem;padding-bottom:1rem;padding-left:1rem;display:flex}.city-item.loading:hover{background:#fff;border-left:none;padding-left:1rem}.city-info{text-align:left;align-items:flex-start;gap:.8rem;display:flex}.city-icon{color:#999;flex-shrink:0;margin-top:.15rem;font-size:.95rem;transition:all .2s}.city-details{text-align:left;flex-direction:column;flex:1;gap:.2rem;display:flex}.city-name{color:#000;letter-spacing:-.01em;font-size:.9rem;font-weight:700;line-height:1.3}.city-meta{color:#888;font-size:.75rem;font-weight:400;line-height:1.3}.nearest-station{color:#666;font-size:.75rem;font-weight:600;line-height:1.3}.nearest-station strong{color:var(--ono-red);font-weight:800}.filters-panel{border:3px solid var(--ono-yellow);z-index:100;background:#fff;border-radius:20px;padding:2rem;position:relative;box-shadow:0 8px 30px #00000026}.clear-filters-btn-inline{width:100%;color:var(--ono-red);border:2px solid var(--ono-red);cursor:pointer;background:#fee;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.8rem 1.2rem;font-size:.9rem;font-weight:700;transition:all .2s;display:flex}.clear-filters-btn-inline:hover{background:var(--ono-red);color:#fff;transform:scale(1.02);box-shadow:0 4px 12px #ad29314d}.clear-filters-btn-inline i{font-size:1rem}.filters-content{grid-template-columns:1fr 1fr;gap:2.5rem;display:grid}.filter-group{position:relative}.filter-group h4{text-transform:uppercase;letter-spacing:1px;color:var(--ono-red);border-bottom:3px solid var(--ono-yellow);align-items:center;gap:.5rem;margin:0 0 1.2rem;padding-bottom:.8rem;font-size:1.1rem;font-weight:900;display:flex}.filter-group h4:before{font-family:"Font Awesome 5 Free";font-size:1.2rem;font-weight:900}.filter-group:first-child h4:before{content:""}.filter-group:last-child h4:before{content:""}.filter-options{grid-template-columns:1fr 1fr;gap:.8rem;display:grid}.filter-options label{cursor:pointer;background:#f8f8f8;border:2px solid #0000;border-radius:10px;align-items:center;gap:.7rem;padding:.7rem 1rem;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.filter-options label:hover{border-color:var(--ono-yellow);background:#fff;transform:translate(3px)}.filter-options input[type=checkbox]{cursor:pointer;width:20px;height:20px;accent-color:var(--ono-red);flex-shrink:0}.filter-options input[type=checkbox]:checked+span{color:var(--ono-red)}.map-section{z-index:1;background:0 0;padding:2rem 0 4rem;position:relative}.map-wrapper{max-width:1400px;margin:0 auto;padding:0 2rem}.map-container{border:3px solid var(--ono-yellow);background:#fff;border-radius:16px;width:100%;height:70vh;min-height:500px;position:relative;overflow:hidden;box-shadow:0 10px 30px #0000001a}.map-placeholder{background:#f5f5f5;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.map-loading{text-align:center;color:#666}.map-loading i{color:var(--ono-yellow);margin-bottom:20px;font-size:4rem;display:block}.map-loading p{margin:0;font-size:1.2rem;font-weight:600}.leaflet-popup-content-wrapper{border:1px solid #e5e5e5!important;border-radius:12px!important;padding:0!important;overflow:hidden!important;box-shadow:0 8px 25px #0003!important}.leaflet-popup-content{margin:0!important;font-size:.75rem!important;line-height:1.4!important}.leaflet-popup-tip{box-shadow:none!important;background:#fff!important;border:none!important}.leaflet-popup-close-button{color:#fff!important;text-align:center!important;background:#0003!important;border-radius:4px!important;width:auto!important;height:auto!important;padding:.5rem!important;font-size:1rem!important;font-weight:700!important;line-height:1!important;transition:all .2s!important;top:.5rem!important;right:.5rem!important}.leaflet-popup-close-button:hover{background:#0006!important;transform:scale(1.1)!important}.station-info{background:#fff;border:1px solid #e5e5e5;border-radius:12px;width:20rem;min-width:20rem;font-family:inherit;overflow:hidden;box-shadow:0 8px 25px #0003}.station-info.closed{opacity:.85}.station-info.closed .info-header{background:#757575!important}.station-info.closed .info-header:after{background:linear-gradient(90deg,#9e9e9e 0%,#0000 100%)!important}.station-info.closed .info-item i,.station-info.closed .info-section h4 i{color:#757575!important}.station-info.closed .fuel-tag{opacity:.7;background:#9e9e9e!important}.station-info.closed .service-tag{opacity:.7;color:#424242!important;background:#bdbdbd!important}.station-info.closed .info-btn.navigate{pointer-events:none;opacity:.6;color:#fff!important;background:#9e9e9e!important}.station-info.closed .info-btn.call,.station-info.closed .info-btn.email{pointer-events:none;opacity:.6;background:#757575!important}.info-header{background:var(--ono-red);color:#fff;padding:1rem;position:relative}.info-header:after{content:"";background:linear-gradient(90deg,var(--ono-yellow)0%,transparent 100%);height:3px;position:absolute;bottom:0;left:0;right:0}.info-header h3{letter-spacing:-.025em;margin:0 0 .5rem;font-size:1rem;font-weight:700;line-height:1.3}.status-online,.status-offline{opacity:.9;align-items:center;gap:.5rem;font-size:.75rem;font-weight:500;display:flex}.status-online i{color:#22c55e;font-size:.5rem}.status-offline i{color:#f44;font-size:.5rem}.info-content{padding:1rem}.info-section{margin-bottom:1rem}.info-section:last-child{margin-bottom:0}.info-item{align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:.75rem;display:flex}.info-item.address{color:#666;margin-top:.25rem;padding-left:1.25rem;font-size:.75rem}.info-item i{color:var(--ono-red);text-align:center;flex-shrink:0;width:.875rem}.info-section h4{color:#333;text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:.75rem;font-weight:700;display:flex}.info-section h4 i{color:var(--ono-red);font-size:.875rem}.fuel-list,.service-list{flex-wrap:wrap;gap:.25rem;display:flex}.fuel-tag,.service-tag{white-space:nowrap;border-radius:4px;padding:.25rem .5rem;font-size:.625rem;font-weight:600;line-height:1.2}.fuel-tag{background:var(--ono-red);color:#fff}.service-tag{background:var(--ono-yellow);color:#000}.info-actions{background:#fafafa;border-top:1px solid #e5e5e5;gap:.5rem;padding:1rem;display:flex}.info-btn{cursor:pointer;text-transform:uppercase;letter-spacing:.025em;border:none;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.5rem;font-size:.75rem;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.info-btn i{font-size:.875rem}.info-btn.navigate{background:var(--ono-yellow);color:#000}.info-btn.navigate:hover{background:#d4b800;transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.info-btn.call{background:var(--ono-red);color:#fff}.info-btn.call:hover{background:#8b1f26;transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.info-btn.email{color:#fff;background:#2563eb}.info-btn.email:hover{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (max-width:900px){.map-page-header .page-title{font-size:2.5rem}.map-wrapper{padding:0 1.5rem}.map-container{height:55vh;min-height:400px}.filters-content{grid-template-columns:1fr;gap:2rem}.station-info{width:16rem;min-width:16rem}}@media (max-width:768px){.map-page-header .page-subtitle{font-size:1rem}.map-controls{flex-direction:column;width:100%;padding:0 1rem}.city-search-wrapper{max-width:100%}.control-btn{justify-content:center;width:100%}.map-wrapper{padding:0 1rem}.map-container{border-width:2px;height:50vh;min-height:350px}.filter-options{grid-template-columns:1fr}.filters-panel{padding:1.5rem}}@media (max-width:480px){.map-container{height:45vh;min-height:300px}.control-btn{padding:.7rem 1.2rem;font-size:.9rem}.filters-panel{border-width:2px;padding:1rem}.filter-group h4{font-size:1rem}.city-item{padding:.6rem .9rem}.city-name{font-size:.85rem}.city-meta,.nearest-station{font-size:.7rem}.station-info{width:14rem;min-width:14rem}.info-header{padding:.75rem}.info-header h3{font-size:.875rem}.info-content{padding:.75rem}.info-actions{flex-direction:row;gap:.4rem;padding:.75rem}.info-btn{flex:1;padding:.6rem .4rem;font-size:.7rem}.info-btn i{font-size:.8rem}.station-counter{padding:.6rem 1rem;font-size:.8rem}}