/* Approved region controls use the shop's existing type and palette. */
.xfg-locale-tools,
.xfg-locale-tools *,
.xfg-region-dialog,
.xfg-region-dialog * { box-sizing:border-box; }
.gear-shop-page .xfg-locale-tools {
    display:flex;
    flex:none;
    align-items:center;
    gap:16px;
    min-width:0;
    color:#fff;
    font:400 16px/19px var(--shop-text,Arial,sans-serif);
}
.xfg-locale-control { position:relative; flex:none; width:120px; }
.xfg-locale-control[data-control="language"] { width:132px; }
.gear-shop-page .xfg-shop-utilities { gap:16px; }
.gear-shop-page .xfg-locale-trigger {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    width:100%;
    height:35px;
    min-height:35px;
    margin:0;
    padding:8px 24px 8px 12px;
    border:0;
    border-radius:3px;
    background:#1b1b1b;
    color:inherit;
    font:inherit;
    letter-spacing:0;
    text-transform:none;
    white-space:nowrap;
    cursor:pointer;
}
.xfg-locale-flag { display:inline-flex; flex:none; width:16px; height:12px; overflow:hidden; border-radius:0; }
.xfg-locale-flag > svg { display:block; width:100%; height:100%; }
.xfg-locale-value { min-width:0; }
.xfg-locale-chevron { position:absolute; right:12px; display:block; flex:none; width:16px; height:16px; transition:transform 140ms ease; }
.xfg-locale-trigger[aria-expanded="true"] .xfg-locale-chevron { transform:rotate(180deg); }
.gear-shop-page .xfg-locale-trigger:is(:hover,[aria-expanded="true"]) { background:#1b1b1b; color:#fff; }
.gear-shop-page [data-control="language"] .xfg-locale-trigger { height:36px; padding:8px 30px 8px 12px; }
.gear-shop-page .xfg-locale-menu {
    position:absolute;
    z-index:60;
    top:110%;
    left:0;
    display:grid;
    min-width:120px;
    width:100%;
    max-width:min(240px,calc(100vw - 32px));
    max-height:calc(100dvh - 100px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:8px 0;
    border:0;
    border-radius:6px;
    background:#1b1b1b;
    box-shadow:0 2px 8px #0003;
    color:#fff;
    scrollbar-width:thin;
}
.gear-shop-page .xfg-locale-menu > button {
    display:flex;
    align-items:center;
    gap:10px;
    height:35px;
    min-height:35px;
    width:100%;
    margin:0;
    padding:8px 16px;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
    font:inherit;
    line-height:19px;
    letter-spacing:0;
    text-align:left;
    text-transform:none;
    white-space:nowrap;
    cursor:pointer;
}
.xfg-locale-menu > button > svg { display:block; flex:none; width:20px; height:14px; }
.gear-shop-page .xfg-locale-menu > button:is(:hover,:focus-visible,[aria-checked="true"]) { background:#232a39; color:#fff; }
.xfg-locale-menu > button[aria-checked="true"]::after { content:none; }
.gear-shop-page #xfg-language-menu { top:100%; min-width:132px; padding:8px; border-radius:0; box-shadow:none; }
.gear-shop-page #xfg-language-menu > button { height:40px; padding:10px 8px; gap:10px; }
.gear-shop-page .xfg-locale-tools button:focus-visible,
.gear-shop-page .xfg-region-dialog button:focus-visible { outline:2px solid #ffd100; outline-offset:2px; }
.gear-shop-page .xfg-locale-menu > button:focus-visible { outline-offset:-2px; }
/* Never let a display rule override the controller's explicit closed state. */
.gear-shop-page .xfg-locale-tools [hidden],
.gear-shop-page .xfg-locale-tools[hidden],
.gear-shop-page .xfg-region-dialog[hidden] { display:none!important; }

.gear-shop-page .xfg-region-dialog {
    position:fixed;
    inset:0;
    width:min(400px,calc(100% - 32px));
    max-width:none;
    max-height:calc(100dvh - 32px);
    margin:auto;
    padding:20px;
    overflow-y:auto;
    overscroll-behavior:contain;
    border:0;
    border-radius:8px;
    background:#fff;
    color:#24272a;
    box-shadow:0 20px 70px #0006;
    font:400 14px/1.4 var(--shop-text,Arial,sans-serif);
    text-align:center;
}
.xfg-region-dialog:not([open]) { display:none; }
.xfg-region-dialog::backdrop { background:#080909ad; }
.gear-shop-page .xfg-region-close {
    position:absolute;
    top:5px;
    right:5px;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    padding:0;
    border:0;
    border-radius:3px;
    background:transparent;
    color:#34383c;
    font:400 18px/1 Arial,sans-serif;
    cursor:pointer;
}
.gear-shop-page .xfg-region-close:hover { background:#00000008; color:#111; }
.gear-shop-page .xfg-region-dialog h2 {
    margin:0;
    padding-inline:12px;
    color:inherit;
    font:600 20px/1.2 var(--shop-text,Arial,sans-serif);
    letter-spacing:.2px;
    text-transform:none;
}
.gear-shop-page .xfg-region-dialog > p { max-width:52ch; margin:10px auto 20px; color:#626262; font:inherit; }
.xfg-region-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.gear-shop-page .xfg-region-options > button {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    justify-items:center;
    gap:10px;
    min-width:0;
    min-height:108px;
    padding:12px 8px;
    border:1px solid #e1e1e1;
    border-radius:6px;
    background:#fff;
    color:#25292d;
    font:400 12px/1.3 var(--shop-text,Arial,sans-serif);
    text-align:center;
    cursor:pointer;
}
.xfg-region-options > button > span:first-child { grid-column:1; grid-row:1; }
.xfg-region-options > button > b { display:none; }
.xfg-region-options .xfg-region-flag { grid-column:1; grid-row:2; display:block; width:48px; height:32px; overflow:hidden; border-radius:0; }
.xfg-region-flag > svg { display:block; width:100%; height:100%; }
.gear-shop-page .xfg-region-options > button:hover { background:#fff; border-color:#747b7f; }
.gear-shop-page .xfg-region-options > button[aria-pressed="true"] { border-color:#555d63; box-shadow:inset 0 0 0 1px #555d63; }
.gear-shop-page .xfg-region-dialog button:focus-visible { box-shadow:0 0 0 4px #24272a; }
.gear-shop-page .xfg-region-dialog > small { display:block; max-width:62ch; margin:12px auto 0; color:#606469; font:400 10px/1.4 var(--shop-text,"Segoe UI",sans-serif); }

@media(max-width:820px) {
    /* COD's compact mobile header does not add a third locale-control row. */
    .gear-shop-page .xfg-shop-header > .xfg-locale-tools { display:none; }
}
@media(max-width:560px) {
    .gear-shop-page .xfg-region-dialog { padding:24px 16px 18px; }
    .gear-shop-page .xfg-region-dialog h2 { font-size:18px; }
    .gear-shop-page .xfg-region-dialog > p { margin-bottom:16px; font-size:12px; }
    .xfg-region-options { gap:8px; }
    .gear-shop-page .xfg-region-options > button { min-height:108px; padding:12px 6px; }
    
}
@media(pointer:coarse) {
    .gear-shop-page .xfg-locale-menu > button { min-height:44px; }
    .gear-shop-page .xfg-region-close { width:44px; height:44px; }
}
@media(prefers-reduced-motion:reduce) {
    .xfg-locale-chevron { transition:none; }
}
.gear-shop-page .xfg-shop-utilities .xfg-shop-session-link {
    display:none;
}
.gear-shop-page .xfg-shop-session-link[data-session-pending] {
    visibility:hidden;
}


.xfg-currency-estimate { margin:10px 0; font:400 13px/1.45 var(--shop-text,Arial,sans-serif); color:inherit; opacity:.8; }