/* ── Header dropdowns (country / language) ──────────────────────────────────
   Two independent, plain dropdowns — trigger + panel anchored directly under
   it (position:absolute, no portalling needed). Matches the .tm-footer system:
   teal #1ed5c1 on #0a0d14, hairline rgba(255,255,255,.08), light text #eaf1fb. */

.hdr-selectors { display: inline-flex; align-items: center; gap: 8px; }
.hdr-dd { position: relative; display: inline-flex; }

/* ── Trigger (in header) ─────────────────────────────────────────────────── */
.hdr-dd__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: #e8eef7;
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.hdr-dd__trigger:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); }
.hdr-dd__trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(30, 213, 193, 0.35); }
.hdr-dd__flag { font-size: 1.05rem; line-height: 1; }
.hdr-dd__label { white-space: nowrap; }
.hdr-dd__chev { width: 14px; height: 14px; opacity: 0.6; flex: none; transition: transform 0.2s ease; }
.hdr-dd__trigger[aria-expanded="true"] .hdr-dd__chev { transform: rotate(180deg); }

/* ── Panel ───────────────────────────────────────────────────────────────── */
/* The [hidden] attribute must win over the panel's own display:flex — author
   display beats the UA [hidden] rule by origin, so scope display:none to the
   attribute (higher specificity). Without this the panel never closes. */
.hdr-dd__panel[hidden] { display: none; }
.hdr-dd__panel {
    position: absolute;
    z-index: 200;
    top: calc(100% + 8px);
    left: 0;
    width: max(220px, 100%);
    max-height: min(60vh, 420px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(180deg, #0d1119, #0a0d14);
    color: #eaf1fb;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 0 60px rgba(30, 213, 193, 0.08);
    padding: 6px;
    animation: ddPop 0.16s ease;
}
@keyframes ddPop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.hdr-dd__group {
    margin: 4px 8px 2px;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6f83a0;
    font-weight: 700;
}
.hdr-dd__group:first-child { margin-top: 2px; }

.hdr-dd__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #eaf1fb;
    font-size: 0.88rem;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.hdr-dd__item:hover { background: rgba(255, 255, 255, 0.06); }
.hdr-dd__item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(30, 213, 193, 0.4); }
.hdr-dd__item.is-active { background: rgba(30, 213, 193, 0.1); color: #1ed5c1; font-weight: 600; }
.hdr-dd__item-flag { font-size: 1.1rem; line-height: 1; flex: none; }
.hdr-dd__item-name { flex: 1; }
.hdr-dd__check { width: 15px; height: 15px; color: #1ed5c1; flex: none; }
.hdr-dd__badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1ed5c1;
    background: rgba(30, 213, 193, 0.12);
    border: 1px solid rgba(30, 213, 193, 0.35);
    border-radius: 999px;
    padding: 2px 7px;
    flex: none;
}

/* Matches header.css's own mobile breakpoint (900px) — below it .header-left
   becomes a tight 2-column grid (hamburger + selectors), so both pills need to
   shrink to icon+flag together, not at a different width than the header does. */
@media (max-width: 900px) {
    .hdr-dd__trigger { padding: 6px 8px; gap: 4px; }
    .hdr-dd__chev { display: none; }
    /* Both triggers sit near the LEFT edge of the mobile header (grid area
       "left"), so the panel keeps its default left-anchor (opens rightward,
       away from the viewport edge) — just capped so it can't overflow. */
    .hdr-dd__panel { width: min(260px, calc(100vw - 24px)); }
    .hdr-dd__label { display: none; } /* keep the trigger compact on mobile */
}

@media (prefers-reduced-motion: reduce) {
    .hdr-dd__panel { animation: none; }
    .hdr-dd__item { transition: none; }
}

/* ── Soft geo-suggestion banner ──────────────────────────────────────────── */
.geo-suggest {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    background: rgba(30, 213, 193, 0.1);
    border-bottom: 1px solid rgba(30, 213, 193, 0.25);
    color: #0a0d14;
    font-size: 0.9rem;
}
.geo-suggest__flag { font-size: 1.2rem; line-height: 1; }
.geo-suggest__text { flex: 1; }
.geo-suggest__yes {
    padding: 7px 16px;
    border-radius: 999px;
    background: #1ed5c1;
    color: #06231f;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.geo-suggest__yes:hover { filter: brightness(1.05); }
.geo-suggest__no {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #0a0d14;
    cursor: pointer;
    opacity: 0.6;
}
.geo-suggest__no:hover { opacity: 1; }
.geo-suggest__no svg { width: 16px; height: 16px; }
@media (prefers-color-scheme: dark) {
    .geo-suggest { color: #eaf1fb; background: rgba(30, 213, 193, 0.12); }
    .geo-suggest__no { color: #eaf1fb; }
}
@media (max-width: 560px) {
    .geo-suggest { font-size: 0.84rem; padding: 9px 12px; gap: 9px; }
    .geo-suggest__yes { padding: 6px 12px; }
}