/* Region Selector Styles */
.region-selector {
    position: relative;
    z-index: 9999;
}

.region-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 9999;
    white-space: nowrap;
}

.dropdown-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    opacity: 1;
    filter: brightness(1) invert(1); /* Make it white */
}

.region-button:hover .dropdown-icon {
    transform: translateY(2px);
}

/* New popup dropdown that's appended to the body */
.region-dropdown-popup {
    position: absolute;
    width: 360px; /* Increased width for two columns */
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    padding: 0; /* Columns will handle their own padding */
    max-height: 300px; /* Overall max height */
    overflow-y: auto; /* Scroll if combined column content is too tall */
}

.region-dropdown-popup.show {
    display: block;
}

.region-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
}

.region-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.region-item.active {
    background-color: rgba(0, 255, 157, 0.1);
    color: #00ff9d;
    position: relative;
}

.region-item.active::after {
    content: "✓";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #00ff9d;
}

/* Styles for section headers within the dropdown */
.dropdown-header {
    padding: 10px 16px 6px 16px; /* top right bottom left */
    font-size: 12px;
    font-weight: bold;
    color: #ccc; /* Changed to lighter gray for better readability */
    text-transform: uppercase;
    border-bottom: 1px solid #333; /* Separator line */
    margin-top: 0; /* Columns provide top spacing via padding */
}

.region-dropdown-popup .dropdown-header:first-of-type {
    margin-top: 0; /* No top margin for the very first header in the popup */
    border-top: none; /* Ensure no double border if popup has top border */
}


/* Two-column layout for dropdown */
.dropdown-columns-container {
    display: flex;
    width: 100%;
}

.region-column,
.language-column {
    flex: 1; /* Each column takes up half the space */
    padding: 10px; /* Inner padding for items and header */
    box-sizing: border-box;
    /* If individual column scrolling is needed later:
    max-height: calc(300px - 20px); /* Adjust based on popup padding and borders */
    /* overflow-y: auto; */
}

.region-column {
    border-right: 1px solid #444; /* Separator line between columns */
}

/* Language items inherit their color from .region-item { color: #fff; } */

/* Mobile styles */
@media (max-width: 768px) {
    .region-selector {
        display: none; /* Hide on mobile for now */
    }
}