/* ====================================================================
   Region tab bar — country + banking-type selector.
   Kept in its own file, loaded after each page's own stylesheet, so it
   can't be clobbered by style_goodbank.css's late-cascading navbar rules.

   IMPORTANT: this bar is fixed to the very top of the viewport on every
   page, because two of the three pages it appears on already have their
   own fixed-position header (index.html's full-width `.navbar`, and
   ai_hub_landing.html's floating `.landing-nav` pill) — if this bar were
   left in normal document flow, those fixed headers would render on top
   of it and hide it completely (this is exactly the bug seen in testing).
   Making this bar fixed too, then shifting each page's own fixed header
   down by this bar's height, keeps both visible with no overlap. The
   `body:has(.region-tabs)` rule reserves the equivalent space in normal
   flow on every page (including aihub.html, whose header is NOT fixed
   and otherwise needs no special handling at all).
   ==================================================================== */

:root {
    --region-tabs-height: 44px;
}

.region-tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    /* above .navbar (1000) and .landing-nav (30) */
    height: var(--region-tabs-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 5%;
    background: #1f1147;
    font-size: 0.82rem;
    /* No overflow-x here: mixing overflow-x:auto with the default overflow-y
       forces overflow-y to 'auto' too (per spec), which would clip the
       absolutely-positioned dropdown menus below this bar's own 44px box. */
}

body:has(.region-tabs) {
    padding-top: var(--region-tabs-height);
}

/* Push each page's own fixed header down by the tab bar's height. */
.region-tabs + .navbar {
    top: var(--region-tabs-height);
}

.region-tabs + .landing-nav {
    top: calc(18px + var(--region-tabs-height));
}

.region-tabs + .admin-navbar {
    top: var(--region-tabs-height);
}

/* Country / banking-type selectors — native <details>/<summary> dropdowns.
   Using <details> means open/close, keyboard support, and click-to-toggle
   all come for free with zero required JS; region_tabs.js only adds the
   "close on outside click" / "only one open at a time" polish. */

.region-dropdown {
    position: relative;
}

.region-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    list-style: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.region-dropdown-trigger::-webkit-details-marker {
    display: none;
}

.region-dropdown-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.region-dropdown[open] .region-dropdown-trigger {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.region-caret {
    font-style: normal;
    font-size: 0.7rem;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.region-dropdown[open] .region-caret {
    transform: rotate(180deg);
}

.region-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #2a1a5e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    z-index: 1003;
}

.region-dropdown-item {
    display: block;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

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

.region-dropdown-item.active {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-weight: 600;
}

@media (max-width: 720px) {
    .region-tabs {
        justify-content: flex-start;
        gap: 0.5rem;
    }
}

/* Static, non-clickable variant — used in the admin area, which has no
   per-region behavior/URLs of its own yet. Shows the current selection
   without implying it can be changed or navigating you out of admin. */

.region-static-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    cursor: default;
}