/* ===== MAP PAGE SPECIFIC STYLES ===== *//* Main Layout */.main { padding:var(--space-6) 0;}/* Search Section */.search-section { margin-bottom:var(--space-6);}.search-container { background:linear-gradient(145deg,#ffffff 0%,#f8f9fa 100%); padding:var(--space-6); border-radius:var(--radius-2xl); box-shadow:0 15px 50px rgba(0,0,0,0.1),0 5px 15px rgba(40,167,69,0.05); border:2px solid rgba(40,167,69,0.15); position:relative; overflow:hidden;}.search-container::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary-green) 0%,var(--primary-dark) 100%);}.modern-card { background:rgba(255,255,255,0.98); backdrop-filter:blur(10px); border:2px solid rgba(40,167,69,0.12); box-shadow:0 12px 48px rgba(0,0,0,0.08); transition:all 0.3s cubic-bezier(0.4,0,0.2,1); will-change:transform;}.modern-card:hover { box-shadow:0 20px 70px rgba(0,0,0,0.15); transform:translateY(-6px); border-color:rgba(40,167,69,0.3);}.search-wrapper { position:relative; margin-bottom:var(--space-4);}.search-icon { position:absolute; left:var(--space-4); top:50%; transform:translateY(-50%); font-size:1.25rem; opacity:0.6; pointer-events:none;}.search-input { width:100%; padding:var(--space-4) var(--space-5); border:2px solid var(--gray-300); border-radius:var(--radius-xl); font-size:var(--font-size-base); transition:all 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow:0 2px 8px rgba(0,0,0,0.05);}.modern-input { padding-left:3.5rem; border:2px solid rgba(40,167,69,0.3); background:white; font-size:1rem; font-weight:500;}.search-input:focus,.modern-input:focus { outline:none; border-color:var(--primary-green); box-shadow:0 0 0 5px rgba(40,167,69,0.12),0 4px 12px rgba(0,0,0,0.08); background:var(--white); transform:translateY(-2px);}.filter-buttons { display:flex; gap:var(--space-3); flex-wrap:wrap;}.filter-btn { padding:var(--space-2) var(--space-4); background:var(--gray-100); border:2px solid var(--gray-300); border-radius:var(--radius-lg); font-size:var(--font-size-sm); font-weight:500; cursor:pointer; transition:transform var(--transition-normal),border-color var(--transition-normal),background var(--transition-normal); transform:translateZ(0);}.modern-filter { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-5); background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%); border:2px solid rgba(40,167,69,0.2); box-shadow:0 4px 12px rgba(0,0,0,0.06); font-weight:600; position:relative; overflow:hidden;}.modern-filter::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(40,167,69,0.1),transparent); transition:left 0.5s;}.modern-filter:hover::before { left:100%;}.filter-icon { font-size:1.2rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));}.filter-btn:hover,.modern-filter:hover { border-color:var(--primary-green); background:linear-gradient(135deg,#f0fff4 0%,#d4edda 100%); transform:translateY(-3px) translateZ(0); box-shadow:0 6px 20px rgba(40,167,69,0.2);}.filter-btn.active,.modern-filter.active { background:linear-gradient(135deg,var(--primary-green) 0%,var(--primary-dark) 100%); color:var(--white); border-color:var(--primary-dark); box-shadow:0 6px 20px rgba(40,167,69,0.4),0 0 0 3px rgba(40,167,69,0.1); transform:scale(1.02);}.filter-btn.active .filter-icon,.modern-filter.active .filter-icon { filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3)); animation:pulse 2s infinite; will-change:transform;}@keyframes pulse { 0%,100% {transform:scale(1) translateZ(0);} 50% {transform:scale(1.1) translateZ(0);}}/* Map Section */.map-section { margin-bottom:var(--space-8); position:relative;}/* Location Permission Banner */.location-banner { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; padding:var(--space-4); border-radius:var(--radius-lg); margin-bottom:var(--space-4); box-shadow:var(--shadow-md); animation:slideDown 0.3s ease-out; will-change:transform,opacity;}@keyframes slideDown { from { opacity:0; transform:translateY(-10px) translateZ(0); } to { opacity:1; transform:translateY(0) translateZ(0); }}.banner-content { display:flex; align-items:center; gap:var(--space-4);}.banner-icon { font-size:2rem; flex-shrink:0;}.banner-text { flex:1;}.banner-text strong { display:block; font-size:var(--font-size-base); margin-bottom:var(--space-1);}.banner-text p { font-size:var(--font-size-sm); margin:0; opacity:0.9;}.banner-close { background:rgba(255,255,255,0.2); border:none; color:white; font-size:1.5rem; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--transition-normal); flex-shrink:0;}.banner-close:hover { background:rgba(255,255,255,0.3);}#map { height:500px; min-height:400px; width:100%; border-radius:var(--radius-xl); box-shadow:0 8px 32px rgba(0,0,0,0.1); z-index:1; background:#f0f0f0; border:3px solid rgba(40,167,69,0.1); transition:all var(--transition-normal); position:relative; margin-bottom:var(--space-4);}@media (max-width:1024px) { #map { height:450px; }}@media (max-width:768px) { #map { height:350px; min-height:300px; border-radius:var(--radius-lg); }}@media (max-width:600px) { #map { height:280px; min-height:250px; border:2px solid rgba(40,167,69,0.1); }}/* Two-finger scroll hint for touch devices */#map::after { content:'☝️ Use two fingers to scroll the map'; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.75); color:white; padding:8px 16px; border-radius:20px; font-size:13px; font-weight:500; pointer-events:none; z-index:1000; opacity:0; transition:opacity 0.3s ease; white-space:nowrap;}/* Show hint on touch devices when map is first loaded */@media (hover:none) and (pointer:coarse) { #map.show-hint::after { opacity:1; }}#map:hover { box-shadow:0 12px 48px rgba(0,0,0,0.15);}/* Stations Section */.stations-section { margin-top:var(--space-8);}.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-5); flex-wrap:wrap; gap:var(--space-4);}.modern-header-bar { background:linear-gradient(135deg,rgba(40,167,69,0.05),rgba(30,126,52,0.05)); padding:var(--space-5); border-radius:var(--radius-xl); border:2px solid rgba(40,167,69,0.1);}.header-left { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;}.section-icon { font-size:1.5rem; margin-right:var(--space-2);}.section-header h2 { margin-bottom:0; color:var(--primary-dark); display:flex; align-items:center; font-size:var(--font-size-2xl);}.last-updated { font-size:var(--font-size-sm); color:var(--gray-700); padding:var(--space-2) var(--space-4); background:var(--gray-100); border-radius:var(--radius-md);}.modern-badge { background:linear-gradient(135deg,var(--primary-green) 0%,var(--primary-dark) 100%); color:var(--white); padding:var(--space-2) var(--space-4); border-radius:var(--radius-lg); font-weight:600; box-shadow:0 2px 8px rgba(40,167,69,0.2);}.proximity-controls { display:flex; gap:var(--space-3); align-items:center;}.modern-controls { background:var(--white); padding:var(--space-3); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);}.mode-toggle { display:flex; gap:var(--space-1); background:var(--gray-100); padding:var(--space-1); border-radius:var(--radius-md);}.btn-toggle { padding:var(--space-2) var(--space-4); background:transparent; border:none; border-radius:var(--radius-md); font-weight:600; cursor:pointer; transition:all var(--transition-fast); color:var(--gray-700);}.btn-toggle.modern { font-size:var(--font-size-sm);}.btn-toggle.active,.btn-toggle.modern.active { background:var(--white); color:var(--primary-dark); box-shadow:0 2px 4px rgba(0,0,0,0.1);}.radius-control { display:flex; gap:var(--space-2); align-items:center;}.control-label { font-size:var(--font-size-sm); color:var(--gray-700); font-weight:600;}.modern-number-input { width:80px; padding:var(--space-2) var(--space-3); border:2px solid var(--gray-300); border-radius:var(--radius-md); font-size:var(--font-size-sm); text-align:center; transition:all var(--transition-fast);}.modern-number-input:focus { outline:none; border-color:var(--primary-green); box-shadow:0 0 0 3px rgba(40,167,69,0.1);}.btn-save { padding:var(--space-2) var(--space-4); background:linear-gradient(135deg,var(--primary-green) 0%,var(--primary-dark) 100%); color:var(--white); border:none; border-radius:var(--radius-md); font-weight:600; font-size:var(--font-size-sm); cursor:pointer; transition:all var(--transition-normal);}.btn-save:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(40,167,69,0.3);}@media (max-width:768px) { .section-header { flex-direction:column; align-items:flex-start; }  .modern-header-bar { padding:var(--space-4); }  .header-left { width:100%; }  .proximity-controls, .modern-controls { width:100%; flex-direction:column; }  .mode-toggle, .radius-control { width:100%; }}/* Stations Grid */.stations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-5);contain:layout;width:100%}@media (max-width:1024px){.stations-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--space-4)}}@media (max-width:800px){.stations-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-3)}}@media (max-width:600px){.stations-grid{grid-template-columns:1fr;gap:var(--space-3)}}/* Station Card */.station-card{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal);border:2px solid transparent;border-left:4px solid var(--primary-green);cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;will-change:transform}@media (max-width:768px) { .station-card { padding:var(--space-4); border-radius:var(--radius-lg); }}@media (max-width:600px) { .station-card { padding:var(--space-3); border-left:3px solid var(--primary-green); }}.station-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--primary-green),transparent); opacity:0; transition:opacity var(--transition-normal);}.station-card:hover { transform:translateY(-6px) translateZ(0); box-shadow:0 12px 40px rgba(40,167,69,0.15); border-color:rgba(40,167,69,0.2);}.station-card:hover::before { opacity:1;}.station-card.busy { border-left-color:var(--secondary-orange);}.station-card.busy::before { background:linear-gradient(90deg,var(--secondary-orange),transparent);}.station-card.offline { border-left-color:var(--gray-400); opacity:0.7;}.station-card.offline::before { background:linear-gradient(90deg,var(--gray-400),transparent);}.station-header { margin-bottom:var(--space-5); padding-bottom:var(--space-3); border-bottom:1px solid rgba(0,0,0,0.05);}.station-name { font-size:var(--font-size-xl); font-weight:700; color:var(--gray-900); margin-bottom:var(--space-2); display:flex; align-items:center; gap:var(--space-2);}.station-location { color:var(--gray-700); font-size:var(--font-size-sm); display:flex; align-items:center; gap:var(--space-2); font-weight:500;}.station-location i { color:var(--primary-green);}.station-details { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-5); gap:var(--space-3); flex-wrap:wrap;}@media (max-width:768px) { .station-details { flex-direction:column; align-items:stretch; gap:var(--space-2); }}@media (max-width:600px) { .station-details { margin-bottom:var(--space-3); gap:var(--space-2); }}.station-status { display:inline-flex; align-items:center; padding:var(--space-2) var(--space-4); border-radius:var(--radius-lg); font-size:var(--font-size-sm); font-weight:600; gap:var(--space-2); box-shadow:0 2px 8px rgba(0,0,0,0.08);}.status-available { background:linear-gradient(135deg,var(--primary-light),rgba(40,167,69,0.1)); color:var(--primary-dark); border:1px solid rgba(40,167,69,0.2);}.status-busy { background:linear-gradient(135deg,#fff3cd,rgba(255,193,7,0.1)); color:#705400; border:1px solid rgba(255,193,7,0.3);}.status-offline { background:linear-gradient(135deg,var(--gray-200),var(--gray-100)); color:var(--gray-700); border:1px solid var(--gray-300);}.guns-info { font-size:var(--font-size-sm); color:var(--gray-600); font-weight:600; background:var(--gray-100); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);}.station-power { background:linear-gradient(135deg,rgba(40,167,69,0.05),rgba(30,126,52,0.05)); padding:var(--space-4); border-radius:var(--radius-lg); margin-bottom:var(--space-4); border:1px solid rgba(40,167,69,0.1);}.power-label { font-size:var(--font-size-sm); color:var(--gray-600); margin-bottom:var(--space-2); font-weight:500; display:flex; align-items:center; gap:var(--space-2);}.power-label i { color:var(--primary-green);}.power-value { font-size:var(--font-size-lg); font-weight:700; color:var(--primary-dark);}.charge-time { font-size:var(--font-size-sm); color:var(--gray-600); margin-bottom:var(--space-5); display:flex; align-items:center; gap:var(--space-2);}.charge-time i{color:var(--secondary-orange)}.station-actions{display:flex;gap:var(--space-3);margin-top:auto;padding-top:var(--space-3)}.btn-charge{flex:1;width:100%;padding:var(--space-3) var(--space-5);background:linear-gradient(135deg,var(--primary-green) 0%,var(--primary-dark) 100%);color:var(--white);border:none;border-radius:var(--radius-lg);font-weight:600;font-size:var(--font-size-base);cursor:pointer;transition:all var(--transition-normal);box-shadow:0 4px 12px rgba(40,167,69,0.2);position:relative;overflow:hidden;min-height:48px}.btn-charge::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255,255,255,0.2); transform:translate(-50%,-50%); transition:width 0.6s ease-out,height 0.6s ease-out; pointer-events:none;}.btn-charge:hover:not(:disabled)::before { width:300px; height:300px;}.btn-charge:hover:not(:disabled) { transform:translateY(-2px) translateZ(0); box-shadow:0 8px 24px rgba(40,167,69,0.3);}.btn-charge:disabled { background:linear-gradient(135deg,var(--gray-400),var(--gray-500)); cursor:not-allowed; box-shadow:none; transform:none;}.btn-details { display:none;}/* No Stations State */.no-stations { grid-column:1 / -1; text-align:center; padding:var(--space-12); color:var(--gray-600);}.no-stations-icon { font-size:3rem; margin-bottom:var(--space-4); opacity:0.5;}/* Loading State for Stations */.stations-loading { grid-column:1 / -1; text-align:center; padding:var(--space-12);}/* Responsive Design for Map Page */@media (max-width:768px) { .search-section { padding:0; margin-bottom:var(--space-4); }  .search-container { padding:var(--space-4); border-radius:var(--radius-lg); }  .search-wrapper { margin-bottom:var(--space-3); }  .search-wrapper input { font-size:var(--font-size-base); padding:var(--space-3) var(--space-4); padding-left:3rem; }  .search-icon { left:var(--space-3); font-size:1.1rem; }  .filter-buttons { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-2); }  .modern-filter { padding:var(--space-3); font-size:var(--font-size-sm); white-space:nowrap; justify-content:center; min-height:48px; }  .filter-icon { font-size:1rem; }  .modern-header-bar { padding:var(--space-4); }  .section-header { gap:var(--space-3); }  .section-header h2 { font-size:var(--font-size-xl); }  .section-icon { font-size:1.25rem; }  .proximity-controls { width:100%; }  .modern-controls { width:100%; padding:var(--space-3); }  .mode-toggle { width:100%; }  .radius-control { width:100%; flex-wrap:wrap; }  .station-name { font-size:var(--font-size-lg); }  .station-actions { flex-direction:column; gap:var(--space-2); width:100%; }  .btn-charge { padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); min-height:48px; width:100%; }}@media (max-width:600px) { .container { padding:0 var(--space-3); }  .search-section { margin-bottom:var(--space-3); }  .search-container { padding:var(--space-3); }  .search-wrapper input { padding:var(--space-3); padding-left:2.75rem; font-size:0.9rem; }  .search-icon { left:var(--space-2); font-size:1rem; }  .filter-buttons { grid-template-columns:1fr; gap:var(--space-2); }  .modern-filter { padding:var(--space-3); font-size:var(--font-size-sm); min-height:44px; }  .filter-icon { font-size:1rem; }  .station-header { padding-bottom:var(--space-2); margin-bottom:var(--space-3); }  .station-name { font-size:var(--font-size-base); gap:var(--space-1); }  .station-power { padding:var(--space-2) var(--space-3); margin-bottom:var(--space-2); }  .power-value { font-size:var(--font-size-base); }  .btn-charge, .btn-details { padding:var(--space-2) var(--space-3); font-size:var(--font-size-xs); width:100%; }  .section-header { flex-direction:column; align-items:flex-start; }}/* Proximity controls (toggle + radius) */.proximity-controls { font-size:0.95em; gap:var(--space-2);}.proximity-controls .btn-toggle { padding:8px 12px; border-radius:6px; border:2px solid #ddd; background:#fff; cursor:pointer; font-weight:500; transition:all var(--transition-normal); min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;}.proximity-controls .btn-toggle:hover { border-color:var(--primary-green);}.proximity-controls .btn-toggle.active { background:var(--primary-green); color:#fff; border-color:var(--primary-green);}.proximity-controls input { font-size:0.95em; min-height:44px; padding:var(--space-3);}/* Touch-friendly button sizes */.btn-charge,.btn-details { min-height:48px; min-width:44px; display:flex; align-items:center; justify-content:center; font-weight:600; border-radius:var(--radius-lg); transition:all var(--transition-normal);}.btn-charge:active,.btn-details:active { transform:scale(0.98);}/* Marker distance badge shown under the marker */.marker-distance { font-size:11px; background:rgba(0,0,0,0.8); color:#fff; padding:3px 8px; border-radius:12px; text-align:center; margin-top:4px; font-weight:600; white-space:nowrap;}.station-marker { display:flex; flex-direction:column; align-items:center; cursor:pointer;}.marker-pin { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,0.25); transition:transform var(--transition-normal);}.marker-pin:active { transform:scale(1.1);}.marker-guns { font-size:12px; font-weight:700;}/* Mobile-specific optimizations */@media (max-width:768px) { /* Increase touch target sizes */ .station-card:active { transform:scale(0.98); }  .filter-btn, .modern-filter { min-height:44px; display:flex; align-items:center; justify-content:center; }  /* Disable hover effects on touch devices */ @media (hover:none) and (pointer:coarse) { .station-card:hover { transform:none; }  .filter-btn:hover, .modern-filter:hover { transform:none; } }}/* ===== DARK MODE FOR STATUS BADGES ===== */body.dark-theme .status-available { background:linear-gradient(135deg,#1e4d2b,rgba(40,167,69,0.2)) !important; color:#66ff99 !important; border:1px solid #28a745 !important; font-weight:700;}body.dark-theme .status-busy { background:linear-gradient(135deg,#4d3d1e,rgba(255,152,0,0.2)) !important; color:#ffdd99 !important; border:1px solid #ff9800 !important; font-weight:700;}body.dark-theme .status-offline { background:linear-gradient(135deg,#2d2d2d,rgba(108,117,125,0.2)) !important; color:#a0a0a0 !important; border:1px solid #6c757d !important; font-weight:700;}body.dark-theme .guns-info { background:#2a2a2a !important; color:#d1d1d1 !important; border:1px solid #404040;}body.dark-theme .status-available{background:linear-gradient(135deg,#1e4d2b,rgba(40,167,69,.2))!important;color:#66ff99!important;border:1px solid #28a745!important;font-weight:700}body.dark-theme .status-busy{background:linear-gradient(135deg,#4d3d1e,rgba(255,152,0,.2))!important;color:#ffdd99!important;border:1px solid #ff9800!important;font-weight:700}body.dark-theme .status-offline{background:linear-gradient(135deg,#2d2d2d,rgba(108,117,125,.2))!important;color:#a0a0a0!important;border:1px solid #6c757d!important;font-weight:700}body.dark-theme .guns-info{background:#2a2a2a!important;color:#d1d1d1!important;border:1px solid #404040}body.dark-theme .status-available{background:linear-gradient(135deg,#1e4d2b,rgba(40,167,69,.2))!important;color:#66ff99!important;border:1px solid #28a745!important;font-weight:700}body.dark-theme .status-busy{background:linear-gradient(135deg,#4d3d1e,rgba(255,152,0,.2))!important;color:#ffdd99!important;border:1px solid #ff9800!important;font-weight:700}body.dark-theme .status-offline{background:linear-gradient(135deg,#2d2d2d,rgba(108,117,125,.2))!important;color:#a0a0a0!important;border:1px solid #6c757d!important;font-weight:700}body.dark-theme .guns-info{background:#2a2a2a!important;color:#d1d1d1!important;border:1px solid #404040}