/**
 * US Markets Page Styles
 * Clean, responsive SVG map styling
 */

/* US Flag Styling for US Markets Page */
.us-flag {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 100"><rect width="190" height="100" fill="%23B22234"/><rect width="190" height="7.69" y="7.69" fill="white"/><rect width="190" height="7.69" y="23.08" fill="white"/><rect width="190" height="7.69" y="38.46" fill="white"/><rect width="190" height="7.69" y="53.85" fill="white"/><rect width="190" height="7.69" y="69.23" fill="white"/><rect width="190" height="7.69" y="84.62" fill="white"/><rect width="76" height="53.85" fill="%233C3B6E"/><g fill="white"><circle cx="12.6" cy="8.5" r="1.5"/><circle cx="25.2" cy="8.5" r="1.5"/><circle cx="37.8" cy="8.5" r="1.5"/><circle cx="50.4" cy="8.5" r="1.5"/><circle cx="63" cy="8.5" r="1.5"/><circle cx="6.3" cy="15.4" r="1.5"/><circle cx="18.9" cy="15.4" r="1.5"/><circle cx="31.5" cy="15.4" r="1.5"/><circle cx="44.1" cy="15.4" r="1.5"/><circle cx="56.7" cy="15.4" r="1.5"/><circle cx="69.3" cy="15.4" r="1.5"/><circle cx="12.6" cy="22.3" r="1.5"/><circle cx="25.2" cy="22.3" r="1.5"/><circle cx="37.8" cy="22.3" r="1.5"/><circle cx="50.4" cy="22.3" r="1.5"/><circle cx="63" cy="22.3" r="1.5"/><circle cx="6.3" cy="29.2" r="1.5"/><circle cx="18.9" cy="29.2" r="1.5"/><circle cx="31.5" cy="29.2" r="1.5"/><circle cx="44.1" cy="29.2" r="1.5"/><circle cx="56.7" cy="29.2" r="1.5"/><circle cx="69.3" cy="29.2" r="1.5"/><circle cx="12.6" cy="36.1" r="1.5"/><circle cx="25.2" cy="36.1" r="1.5"/><circle cx="37.8" cy="36.1" r="1.5"/><circle cx="50.4" cy="36.1" r="1.5"/><circle cx="63" cy="36.1" r="1.5"/><circle cx="6.3" cy="43" r="1.5"/><circle cx="18.9" cy="43" r="1.5"/><circle cx="31.5" cy="43" r="1.5"/><circle cx="44.1" cy="43" r="1.5"/><circle cx="56.7" cy="43" r="1.5"/><circle cx="69.3" cy="43" r="1.5"/><circle cx="12.6" cy="49.9" r="1.5"/><circle cx="25.2" cy="49.9" r="1.5"/><circle cx="37.8" cy="49.9" r="1.5"/><circle cx="50.4" cy="49.9" r="1.5"/><circle cx="63" cy="49.9" r="1.5"/></g></svg>');
    box-shadow: 0 0 20px rgba(178, 34, 52, 0.4), 0 0 40px rgba(178, 34, 52, 0.2), 0 0 60px rgba(178, 34, 52, 0.1);
    margin: 0 0 1rem 0;
    position: relative;
    z-index: 3;
    transition: all 0.3s ease;
}

/* US Map Container - Clean and Simple */
.us-map-container {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.map-container {
    position: relative;
    width: 100%;
    display: block;
}

/* SVG Responsive Styling - No Fixed Heights */
.us-map-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* Force SVG to be responsive */
.us-map-container object,
.us-map-container svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
}

/* Network overlay performance optimization */
.network-dot,
.network-line {
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .us-map-container {
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .us-map-container {
        padding: 0 0.5rem;
    }
}