/**
 * Geo Content — Region Selector Styles
 *
 * Kept intentionally minimal so it inherits your theme's typography
 * and colors. Override these in your theme's stylesheet as needed.
 */

/* ── Dropdown style ──────────────────────────────────────────── */

.geo-selector--dropdown {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.geo-selector__label {
    font-weight: 600;
    font-size: 0.875em;
}

.geo-selector__select {
    font-size: 0.875em;
    padding: 0.35em 0.6em;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.geo-selector__select:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Inline button style ─────────────────────────────────────── */

.geo-selector--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

.geo-selector__btn {
    font-size: 0.8125em;
    padding: 0.3em 0.75em;
    border: 1px solid currentColor;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.geo-selector__btn:hover {
    opacity: 0.8;
}

.geo-selector__btn--active {
    background: currentColor;
}

/* Invert text color when active — works on both light and dark themes. */
.geo-selector__btn--active {
    color: inherit;
    background: currentColor;
}

/* We need a nested span trick or use outline instead. Simpler: use a subtle bg. */
.geo-selector__btn--active {
    background: rgba(0, 0, 0, 0.08);
    font-weight: 700;
    border-width: 2px;
}

.geo-selector__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}