* SG EV Charging Map Styles * Version: 1.1.3 */ .sg-ev-map-wrapper {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     background: #fff;
     font-family: 'Inter', sans-serif;
 }

 .sg-ev-map-controls {
     position: absolute;
     top: 12px;
     left: 20px;
     right: 20px;
     z-index: 1000;
     display: flex;
     gap: 10px;
     pointer-events: none;
 }

 .sg-ev-map-controls>* {
     pointer-events: auto;
 }

 .search-box {
     display: flex;
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
     border-radius: 8px;
     padding: 5px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     flex-grow: 1;
     max-width: 400px;
     margin-left: 60px !important;
     /* Force margin as requested */
 }

 .search-box input {
     border: none;
     background: transparent;
     padding: 8px 12px;
     flex-grow: 1;
     outline: none;
     font-size: 14px;
 }

 .search-box button,
 #sg-ev-locate-btn {
     background: #007bff;
     color: white;
     border: none;
     padding: 8px 15px;
     border-radius: 6px;
     cursor: pointer;
     font-weight: 500;
     transition: background 0.2s;
 }

 #sg-ev-locate-btn {
     padding: 8px 12px;
     font-size: 18px;
 }

 .search-box button:hover,
 #sg-ev-locate-btn:hover {
     background: #0056b3;
 }

 .sg-ev-map-status {
     position: absolute !important;
     bottom: 25px !important;
     top: auto !important;
     /* PREVENT STRETCHING */
     left: 50% !important;
     transform: translateX(-50%) !important;
     background: rgba(0, 0, 0, 0.85) !important;
     color: white !important;
     padding: 8px 20px !important;
     border-radius: 30px !important;
     font-size: 13px !important;
     font-weight: 600 !important;
     z-index: 10000 !important;
     display: none;
     white-space: nowrap !important;
     max-height: 40px !important;
     /* Force compact height */
     height: auto !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
 }

 #sg-ev-map-legend {
     position: absolute;
     bottom: 20px;
     left: 20px;
     background: rgba(255, 255, 255, 0.9);
     padding: 10px 15px;
     border-radius: 8px;
     z-index: 1000;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     font-family: 'Inter', sans-serif;
     font-size: 14px;
 }

 .legend-item {
     display: flex;
     align-items: center;
     margin-bottom: 5px;
 }

 .legend-item:last-child {
     margin-bottom: 0;
 }

 .dot {
     height: 12px;
     width: 12px;
     border-radius: 50%;
     display: inline-block;
     margin-right: 8px;
 }

 .dot.available {
     background-color: #00ff00;
 }

 .dot.occupied {
     background-color: #ff0000;
 }

 .dot.unavailable {
     background-color: #888888;
 }

 /* Custom Marker Pin */
 .marker-pin {
     width: 30px;
     height: 30px;
     border-radius: 50% 50% 50% 0;
     background: #00ff00;
     position: absolute;
     transform: rotate(-45deg);
     left: 50%;
     top: 50%;
     margin: -15px 0 0 -15px;
     border: 2px solid #fff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .marker-pin::after {
     content: '';
     width: 16px;
     height: 16px;
     margin: 7px 0 0 7px;
     background: #fff;
     position: absolute;
     border-radius: 50%;
 }

 .ev-popup {
     font-family: 'Inter', sans-serif;
     min-width: 200px;
 }

 .ev-popup h3 {
     margin: 0 0 10px 0;
     font-size: 16px;
     color: #333;
 }

 .ev-popup p {
     margin: 5px 0;
     font-size: 13px;
     line-height: 1.4;
 }

 .plug-types {
     background: #f5f5f5;
     padding: 8px;
     border-radius: 4px;
     font-size: 11px;
     margin-top: 10px;
 }

 /* Real-time Section Styles */
 .sg-ev-realtime-section {
     margin-top: 25px;
     background: #fff;
     padding: 20px;
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     border: 1px solid #eee;
     font-family: 'Inter', sans-serif;
 }

 .sg-ev-realtime-section h3 {
     margin-top: 0;
     font-size: 1.2rem;
     color: #333;
     border-bottom: 2px solid #007bff;
     padding-bottom: 10px;
     display: inline-block;
 }

 .sg-ev-realtime-results .placeholder {
     color: #888;
     font-style: italic;
 }

 .realtime-card {
     background: #f9f9f9;
     padding: 15px;
     border-radius: 8px;
     margin-bottom: 10px;
     border-left: 5px solid #007bff;
 }

 .realtime-card h4 {
     margin: 0 0 10px 0;
     font-size: 1rem;
 }

 .realtime-attr {
     font-size: 0.9rem;
     margin-bottom: 5px;
 }

 .attr-label {
     font-weight: 600;
     color: #555;
     width: 130px;
     display: inline-block;
 }

 .status-badge {
     padding: 2px 8px;
     border-radius: 12px;
     font-size: 0.8rem;
     font-weight: bold;
     color: #fff;
 }

 .status-available {
     background: #28a745;
 }

 .status-occupied {
     background: #dc3545;
 }

 .status-unavailable {
     background: #6c757d;
 }