/* SKDA region picker - retail theme (2026-10-09). Behaviour in assets/js/skda-region-picker.js.
   Every value here was set by Tyson against the live prototype; change them only with him. */

/* ---- desktop header flag (desktop-nav.css:227 lets #skda-region-li through) ---- */
header.header nav.navUser .navUser-section--alt > li#skda-region-li { display: flex !important; align-items: center; }
#skda-region-btn { display: flex; align-items: center; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; }
#skda-region-btn:hover { opacity: .75; }
/* the same height as the neighbouring account glyph (18px drawn) */
#skda-region-btn .skda-rg-btnflag { display: block; width: 24px; height: 18px; }

/* ---- flags everywhere: 4:3 SVGs, a hairline so white flags (JP, FI) keep an edge ---- */
img.skda-rg-f { display: block; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); flex: none; }
span.skda-rg-f { display: flex; align-items: center; justify-content: center; flex: none; }
.skda-rg-globe { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---- phone menu: "My Account" + "<flag> <Country>" pinned to the bottom ---- */
#skda-rg-menurow, #skda-rg-accrow { display: none; }
/* Phone width only, not just html.skda-mnav: skda-mobile-nav.js never removes that class when
   the window widens past 800px (an iPad rotating to landscape, Page Builder's view switch), so
   on its own it left these rows inside the desktop menu bar (Tyson, PREVIEW-3, 2026-10-12). */
@media (max-width: 800px) {
    html.skda-mnav #skda-rg-menurow {
        display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 14px 18px 14px 20px;
        border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 0;
        background: transparent; font: 500 16px/1.25 var(--sk-font); color: inherit; text-align: left; cursor: pointer;
        transition: transform .3s ease;
    }
    html.skda-mnav .navPages-container nav.navPages:has(> #skda-rg-menurow) { display: flex; flex-direction: column; min-height: 100%; }
    html.skda-mnav nav.navPages > #skda-rg-menurow {
        margin-top: auto; border-bottom: 0; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
    html.skda-mnav header.header #menu.navPages-container .navPages:has(.navPage-subMenu.is-open) > #skda-rg-menurow { transform: translateX(-100%) !important; }
    html.skda-mnav #skda-rg-accrow {
        display: flex; align-items: center; gap: 14px; width: 100%; margin: auto 0 0; padding: 14px 18px 14px 20px;
        border: 0; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); background: transparent;
        font: 500 16px/1.25 var(--sk-font); color: inherit; text-decoration: none; transition: transform .3s ease;
    }
    html.skda-mnav nav.navPages > #skda-rg-accrow + #skda-rg-menurow { margin-top: 0; }
    /* flush with the bottom of the screen: drop the menu's own 40px bottom padding */
    html.skda-mnav header.header #menu.navPages-container nav.navPages:has(> #skda-rg-menurow) { padding-bottom: 0 !important; }
    html.skda-mnav header.header #menu.navPages-container .navPages:has(.navPage-subMenu.is-open) > #skda-rg-accrow { transform: translateX(-100%) !important; }
    /* two ids to beat the menu's svg / svg * fill rules (mobile-nav.css, nav-invert.css) */
    html.skda-mnav header.header #menu.navPages-container #skda-rg-accrow svg.skda-rg-accicon,
    html.skda-mnav header.header #menu.navPages-container #skda-rg-accrow svg.skda-rg-accicon * { fill: none !important; stroke: currentColor !important; stroke-width: 1.7 !important; }
    html.skda-mnav header.header #menu.navPages-container #skda-rg-menurow svg.skda-rg-globe,
    html.skda-mnav header.header #menu.navPages-container #skda-rg-menurow svg.skda-rg-globe * { fill: none !important; stroke: currentColor !important; }
    #skda-rg-accrow .skda-rg-accicon { width: 22px; height: 22px; margin: 0 1px; flex: none; stroke-linecap: round; stroke-linejoin: round; }
    #skda-rg-accrow .skda-rg-mr-text, #skda-rg-menurow .skda-rg-mr-text { flex: 1; }
    #skda-rg-accrow .navPages-action-moreIcon, #skda-rg-menurow .navPages-action-moreIcon {
        position: static !important; transform: rotate(-90deg) !important; width: 8px; height: 9px; margin: 0 2px 0 0; flex: none; display: inline-flex;
    }
    #skda-rg-menurow .skda-rg-mflag { display: flex; width: 24px; justify-content: center; flex: none; }
    #skda-rg-menurow .skda-rg-rowflag { width: 20px; height: 15px; }
}

/* ---- dialog ---- */
#skda-region-dialog {
    position: fixed; inset: 0; z-index: 13000; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(12, 12, 14, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    font-family: var(--sk-font); opacity: 0; transition: opacity .2s ease;
}
#skda-region-dialog.is-open { opacity: 1; }
.skda-rg-card {
    position: relative; width: 100%; max-width: 520px; background: var(--sk-white); color: var(--sk-ink);
    border-radius: 18px; padding: 44px 48px 32px; text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 24px 60px rgba(0, 0, 0, .28);
    transform: translateY(8px); transition: transform .2s ease;
}
#skda-region-dialog.is-open .skda-rg-card { transform: none; }
.skda-rg-grab { display: none; }
.skda-rg-x {
    position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--sk-ink-2);
}
.skda-rg-x:hover { background: var(--sk-surface); color: var(--sk-ink); }
.skda-rg-x svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.skda-rg-card h2 { margin: 0 0 16px; font: 600 var(--sk-fs-heading)/1.2 var(--sk-font); color: var(--sk-ink); letter-spacing: -.01em; text-transform: none; }
.skda-rg-card p { margin: 0 auto 28px; max-width: 400px; font: 400 var(--sk-fs-small)/1.45 var(--sk-font); color: var(--sk-ink-2); }
.skda-rg-field { position: relative; text-align: center; }
.skda-rg-select {
    position: relative; width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 0 40px; border: 1px solid var(--sk-line); border-radius: 10px; background: var(--sk-white); cursor: pointer;
    font: 400 var(--sk-fs-body)/1 var(--sk-font); color: var(--sk-ink); text-align: left;
}
.skda-rg-select:hover { border-color: var(--sk-ink-3); }
.skda-rg-select[aria-expanded=true] { border-color: var(--sk-blue); box-shadow: 0 0 0 3px var(--sk-blue-tint); }
.skda-rg-select .skda-rg-name { flex: none; }
.skda-rg-sflag { display: flex; flex: none; }
.skda-rg-selflag, .skda-rg-lflag { width: 20px; height: 15px; }
.skda-rg-chev { position: absolute; right: 14px; top: 50%; margin-top: -7px; width: 14px; height: 14px; stroke: var(--sk-ink-2); stroke-width: 2; fill: none; transition: transform .15s; flex: none; }
.skda-rg-select[aria-expanded=true] .skda-rg-chev { transform: rotate(180deg); }
.skda-rg-list {
    text-align: left; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2; max-height: 280px; overflow-y: auto;
    margin: 0; padding: 6px; list-style: none; background: var(--sk-white); border: 1px solid var(--sk-line-soft); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16); display: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.skda-rg-list.is-open { display: block; }
.skda-rg-list li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer; font: 400 var(--sk-fs-small)/1.2 var(--sk-font); color: var(--sk-ink); }
.skda-rg-list li:hover, .skda-rg-list li.is-active { background: var(--sk-surface); }
.skda-rg-list li[aria-selected=true] { font-weight: 500; }
.skda-rg-list li[aria-selected=true]::after { content: ""; margin-left: auto; width: 6px; height: 11px; border: solid var(--sk-blue); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }
.skda-rg-list li.skda-rg-sep { border-top: 1px solid var(--sk-line-soft); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 12px; }
.skda-rg-list .skda-rg-globe { color: var(--sk-ink-2); }
.skda-rg-confirm {
    display: block; width: 100%; height: 48px; margin: 20px 0 0; border: 0; border-radius: 10px;
    background: var(--sk-blue); color: var(--sk-white); font: 500 var(--sk-fs-body)/1 var(--sk-font); cursor: pointer;
}
.skda-rg-confirm:hover { background: var(--sk-blue-hover); }
.skda-rg-confirm:active { background: var(--sk-blue-press); }
.skda-rg-skip {
    display: inline-block; margin-top: 25px; background: none; border: 0; padding: 4px; cursor: pointer;
    font: 400 var(--sk-fs-small)/1 var(--sk-font); color: var(--sk-ink-2); text-decoration: underline; text-underline-offset: 3px;
}
.skda-rg-skip:hover { color: var(--sk-ink); }
.skda-rg-trade { margin: 48px 0 0; padding: 0; font: 400 var(--sk-fs-body)/1.4 var(--sk-font); color: var(--sk-ink); text-align: center; }
.skda-rg-trade a { color: var(--sk-blue); font-weight: 500; text-decoration: none; white-space: nowrap; }
.skda-rg-trade a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- phones: bottom sheet, list inline so it can never run off the bottom of the screen ---- */
@media (max-width: 800px) {
    #skda-region-dialog { align-items: flex-end; padding: 0; }
    .skda-rg-card {
        max-width: none; border-radius: 20px 20px 0 0; padding: 12px 22px calc(32px + env(safe-area-inset-bottom));
        transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); max-height: 92vh; overflow-y: auto;
    }
    .skda-rg-grab { display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--sk-line); margin: 0 auto 28px; touch-action: none; }
    /* no visible X: swipe down or tap outside. Kept, visually hidden, for screen readers. */
    .skda-rg-x { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
    .skda-rg-card h2 { font-size: 21px; margin: 0 0 18px; }
    .skda-rg-card p { margin-bottom: 32px; font-size: 14px; }
    .skda-rg-list { position: static; margin-top: 6px; max-height: 40vh; box-shadow: none; }
    .skda-rg-list li { padding: 12px 10px; font-size: 15px; }
    .skda-rg-confirm { margin: 20px 0 0; height: 52px; }
    .skda-rg-trade { margin-top: 40px; }
}

/* ---- language (stores with Weglot, i.e. EU): a native <select> styled like the country one,
   12px under it; the phone gets the OS picker. Weglot's own flag switcher is hidden - the picker
   is the one place to choose (Tyson, 2026-10-12). ---- */
.skda-rg-langfield { position: relative; margin-top: 12px; }
.skda-rg-langfield[hidden] { display: none; }
.skda-rg-lang {
    width: 100%; height: 48px; margin: 0; padding: 0 40px; border: 1px solid var(--sk-line); border-radius: 10px;
    background: var(--sk-white); font: 400 var(--sk-fs-body)/1 var(--sk-font); color: var(--sk-ink);
    text-align: center; text-align-last: center; -webkit-appearance: none; appearance: none; cursor: pointer; box-shadow: none;
}
.skda-rg-lang:hover { border-color: var(--sk-ink-3); }
.skda-rg-lang:focus { outline: none; border-color: var(--sk-blue); box-shadow: 0 0 0 3px var(--sk-blue-tint); }
.skda-rg-langfield .skda-rg-chev { pointer-events: none; }
.weglot-container { display: none !important; }

/* ---- display-currency converter (skda-display-fx.js) ---- */
/* the real charge under the cart / mini-cart grand total */
.skda-fx-charged { clear: both; margin: 2px 0 0; font: 400 var(--sk-fs-caption, 12px)/1.3 var(--sk-font, inherit); color: var(--sk-ink-2, #6e6e73); text-align: inherit; }
/* prices wait (max 2.5s) for the converter on pages where a display currency is set, so the
   transacting amount never flashes up first. The flag is set inline in base.html. */
html[data-skda-fx-pending] :is(.price, .productView-price, .cart-total-value, .cart-item-value, .previewCartCheckout-price, .sk-bar-price, .sk-bar-save) { visibility: hidden !important; }