/* KhanAtlas shared preference controls — inspired by contemporary travel UI, not copied. */
:root{--ka-pref-radius:18px;--ka-pref-accent:#b78c55;--ka-pref-border:#dfe6ee}
.ux-locale>summary{border-radius:999px!important;min-height:42px;gap:8px}
.ux-locale-panel{border-radius:var(--ka-pref-radius);box-shadow:0 18px 48px rgba(16,40,59,.18);max-width:calc(100vw - 24px)}
.ux-locale-panel :is(a,select,input,button){min-height:40px}
.ux-locale-panel :is(a,select,input,button):focus-visible,.ux-locale>summary:focus-visible,.ux-mode:focus-visible{outline:3px solid var(--ka-pref-accent);outline-offset:2px}
.ux-appearance{border-radius:999px}
.ux-mode{min-width:36px;min-height:36px}
html[data-theme="dark"] .ux-locale-panel{background:var(--surface,#1c3147);color:var(--ink,#eaf1fa);border-color:#4b6175}
@media(max-width:390px){.ux-locale-panel{width:min(320px,calc(100vw - 24px));padding:14px}.ux-mode{min-width:32px;min-height:32px}}

/* One shared, centered preference sheet for both homepage locales. */
.ux-locale[open]{z-index:10000!important}
.ux-locale[open]::before{content:"";position:fixed;inset:0;background:rgba(10,25,39,.58);z-index:10000;pointer-events:none}
.ux-locale[open]>summary{position:relative;z-index:10002}
.ux-locale[open]>.ux-locale-panel{position:fixed!important;inset:auto!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;z-index:10001!important;width:min(540px,calc(100vw - 32px))!important;max-height:min(78vh,700px);overflow:auto;padding:clamp(18px,3vw,30px)!important;border-radius:24px!important;background:var(--surface,#fff);box-shadow:0 32px 100px rgba(5,20,33,.3)}
.ux-locale-panel .ka-pref-close{float:inline-end;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--ka-pref-border);border-radius:50%;background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer}
.ux-locale-panel .ka-pref-close:hover{background:rgba(130,150,160,.12)}
.ux-locale-panel>p:first-of-type{font-size:clamp(19px,2vw,24px);font-weight:700;margin-block:0 22px}
.ux-locale-panel label{display:block;font-weight:700;margin-block:16px 8px}
.ux-locale-panel nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ux-locale-panel nav :is(a,strong){display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border:1px solid var(--ka-pref-border);border-radius:12px}
.ux-locale-panel nav strong{border-color:var(--ka-pref-accent);background:rgba(183,140,85,.1)}
.ux-locale-panel #ux-country-filter,.ux-locale-panel #market-preference{width:100%;border-radius:12px;border:1px solid var(--ka-pref-border);padding:10px 14px;background:var(--surface,#fff);color:inherit}
.ux-locale-panel small{display:block;line-height:1.6;margin-top:12px}
@media(max-width:600px){.ux-locale[open]>.ux-locale-panel{width:calc(100vw - 20px)!important;max-height:82dvh;border-radius:20px!important;padding:20px!important}}

/* Compact shared preference entry in Khan headers; modal content is shared. */
.ka-shared-toolbar{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-inline-start:auto;font-family:inherit;position:relative;z-index:40}
.ka-toolbar-locale{position:relative;color:inherit;font:inherit}
.ka-toolbar-locale>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:6px 14px;border:1px solid rgba(180,194,206,.65);border-radius:999px;background:rgba(255,255,255,.09);color:inherit;cursor:pointer;white-space:nowrap;font-size:13px;font-weight:700}
.ka-toolbar-locale>summary::-webkit-details-marker{display:none}
.ka-toolbar-locale>.ux-locale-panel{color:#142e42;line-height:1.6;text-align:start;direction:inherit}
.ka-toolbar-locale>.ux-locale-panel nav{position:static!important;display:flex!important;width:auto!important;box-shadow:none!important;background:transparent!important}
.ka-toolbar-locale>.ux-locale-panel a{color:#142e42!important;text-decoration:none}
.ka-toolbar-locale>.ux-locale-panel strong{color:#142e42}
.ka-toolbar-locale[open]::before{position:fixed}
@media(max-width:720px){.ka-shared-toolbar{margin-inline-start:8px}.ka-toolbar-locale>summary{font-size:12px;padding-inline:10px;white-space:normal;line-height:1.25;text-align:center}}

.ka-toolbar-appearance{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(180,194,206,.55);background:rgba(255,255,255,.08);border-radius:999px}
.ka-toolbar-appearance .ux-mode{display:grid;place-items:center;width:34px;min-width:34px;height:34px;min-height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;font-size:17px}
.ka-toolbar-appearance .ux-mode.active,.ka-toolbar-appearance .ux-mode[aria-pressed=true]{background:rgba(183,140,85,.24)}
@media(max-width:720px){.ka-toolbar-appearance .ux-mode{width:28px;min-width:28px;height:30px;min-height:30px;font-size:14px}.ka-toolbar-appearance{gap:0;padding:2px}}

/* Stable modal backdrop: block background clicks and keep panel above the overlay. */
.ux-locale[open]::before{pointer-events:auto!important}
.ux-locale[open]>.ux-locale-panel{isolation:isolate;overscroll-behavior:contain}
.ka-toolbar-locale>.ux-locale-panel :is(input,select){width:100%;max-width:100%;box-sizing:border-box;border:1px solid #cdd8e1;border-radius:12px;padding:8px 12px;background:#fff;color:#142e42}
.ka-toolbar-locale>.ux-locale-panel label{display:block;margin-block:12px 5px;font-weight:700}
.ka-toolbar-locale>.ux-locale-panel nav{gap:12px;flex-wrap:wrap}
.ka-toolbar-locale>.ux-locale-panel nav :is(a,strong){display:inline-flex;align-items:center;padding:7px 13px;border-radius:12px;border:1px solid #d9e2e9}
.ka-toolbar-locale>.ux-locale-panel small{display:block;margin-block-start:12px;color:#566779}
html[data-theme=dark] .ka-toolbar-locale>.ux-locale-panel{background:#1c3147!important;color:#eaf1fa!important}
html[data-theme=dark] .ka-toolbar-locale>.ux-locale-panel nav :is(a,strong){color:#eaf1fa!important}
html[data-theme=dark] .ka-toolbar-locale>.ux-locale-panel :is(input,select){background:#10283b;color:#fff;border-color:#536779}
html[data-theme=dark] .ka-toolbar-locale>.ux-locale-panel small{color:#c8d4df}
/* Homepage-only refinements: existing locale, country and appearance controls remain functional. */
body:has(#khans) .nav>.header-context{display:flex;align-items:center;gap:8px;min-width:0}
body:has(#khans) .ux-locale>summary{min-height:42px!important;border-radius:999px!important;transition:border-color .16s,box-shadow .16s}
body:has(#khans) .ux-locale>summary:hover{border-color:#b78c55!important;box-shadow:0 3px 12px #10283b16}
body:has(#khans) .ux-locale-panel{font-family:inherit;text-align:start}
body:has(#khans) .ux-locale-panel :is(select,input){font-size:16px}
body:has(#khans) .ux-mode{min-width:36px;min-height:36px}
@media(max-width:620px){body:has(#khans) .nav>.header-context{gap:6px;flex-wrap:wrap;justify-content:center}body:has(#khans) .ux-locale-panel{max-height:82dvh}}

/* Existing header controls: consistent touch targets and RTL/LTR safe spacing. */
body:has(#khans) .header-context :is(.ux-locale>summary,.ux-mode){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;border-radius:999px}
body:has(#khans) .header-context :is(.ux-locale>summary,.ux-mode):focus-visible{outline:2px solid #af884f;outline-offset:3px}
@media(max-width:620px){body:has(#khans) .header-context :is(.ux-locale>summary,.ux-mode){min-height:40px}}

/* Review v2: visible language flags, keep language separate from market selection. */
.ka-lang-flag{font-size:19px;line-height:1;display:inline-block}.ux-locale-panel nav :is(a,strong){gap:8px}.ux-mode[aria-pressed=true]{background:#fff!important;color:#10283b!important;box-shadow:0 2px 8px #10283b26!important}.ux-mode[aria-pressed=false]{opacity:.7}html[data-theme=dark] .ux-mode[aria-pressed=true]{background:#45617a!important;color:#fff!important}

/* Review v3: one two-position sliding appearance control; preserve existing JS theme events. */
body:has(#khans) .ux-appearance{position:relative;display:inline-flex;direction:ltr;gap:0!important;padding:4px!important;isolation:isolate;background:#edf2f6;border:1px solid #dce5ed;border-radius:999px;box-shadow:inset 0 1px 3px #10283b0c}
body:has(#khans) .ux-appearance::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/2);border-radius:999px;background:#fff;box-shadow:0 2px 9px #10283b2a;transition:transform .26s cubic-bezier(.2,.8,.2,1)}
body:has(#khans) .ux-appearance:has(.ux-mode[data-mode=dark][aria-pressed=true])::before{transform:translateX(100%)}
body:has(#khans) .ux-appearance .ux-mode{width:39px;min-width:39px;height:36px;min-height:36px;position:relative;background:transparent!important;box-shadow:none!important;opacity:1!important;color:#6d7c8c!important;transition:color .2s,transform .2s}
body:has(#khans) .ux-appearance .ux-mode[aria-pressed=true]{color:#123a59!important;transform:scale(1.06)}
html[data-theme=dark] body:has(#khans) .ux-appearance{background:#263b51;border-color:#476075}
html[data-theme=dark] body:has(#khans) .ux-appearance::before{background:#46627d;box-shadow:0 2px 8px #07152270}
html[data-theme=dark] body:has(#khans) .ux-appearance .ux-mode[aria-pressed=true]{color:#fff!important}
/* Compact language and independent market flags. Text remains in DOM for assistive technologies. */
body:has(#khans) .ux-locale>summary{gap:8px!important;padding-inline:11px!important}
body:has(#khans) .ux-locale>summary>.ux-locale-name,body:has(#khans) .ux-locale>summary>.ux-dot,body:has(#khans) .ux-locale>summary>#ux-country-name{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
body:has(#khans) .ux-locale>summary>.ka-lang-flag,body:has(#khans) .ux-locale>summary>.ka-country-flag{display:inline-flex;align-items:center;justify-content:center;font-size:22px;min-width:24px;line-height:1.2}
@media(max-width:620px){body:has(#khans) .ux-appearance .ux-mode{width:34px;min-width:34px;height:33px;min-height:33px}body:has(#khans) .ux-locale>summary{padding-inline:8px!important}}
@media(prefers-reduced-motion:reduce){body:has(#khans) .ux-appearance::before,body:has(#khans) .ux-appearance .ux-mode{transition:none!important}}

/* Review v4: compact sliding theme toggle; native SVG flags, no text codes. */
body:has(#khans) .ux-appearance{padding:3px!important}
body:has(#khans) .ux-appearance::before{top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/2)}
body:has(#khans) .ux-appearance .ux-mode{width:34px!important;min-width:34px!important;height:32px!important;min-height:32px!important}
body:has(#khans) .ux-appearance .ux-mode svg{width:17px;height:17px}
body:has(#khans) .ux-locale>summary{gap:7px!important;padding-inline:10px!important;min-height:39px!important}
body:has(#khans) .ux-locale>summary>.ka-lang-flag,body:has(#khans) .ux-locale>summary>.ka-country-flag{font-size:0!important;min-width:28px;line-height:0}
body:has(#khans) .ux-locale>summary :is(.ka-lang-flag,.ka-country-flag) img{display:block;width:28px;height:21px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px #10283b22}
body:has(#khans) .ux-locale>summary>.ux-locale-name,body:has(#khans) .ux-locale>summary>.ux-dot,body:has(#khans) .ux-locale>summary>#ux-country-name{display:none!important}
@media(max-width:620px){body:has(#khans) .ux-appearance .ux-mode{width:32px!important;min-width:32px!important;height:31px!important;min-height:31px!important}}

/* V5: flag-only locale trigger; accessible language list with selected check. */
body:has(#khans) .ux-locale>summary>.ka-lang-flag img{display:block;width:28px;height:21px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px #10283b22}
body:has(#khans) .ux-locale-panel nav :is(a,strong){display:flex!important;align-items:center;gap:10px!important;justify-content:flex-start!important;text-align:start!important;min-width:0}
body:has(#khans) .ux-locale-panel nav :is(a,strong) img{display:inline-block;width:28px;height:21px;flex:none;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px #10283b22}
body:has(#khans) .ux-locale-panel nav strong{background:#edf4f8!important;color:#10283b!important;border:1px solid #c9d9e4!important}
body:has(#khans) .ux-locale-panel nav .ka-language-check{margin-inline-start:auto;color:#218457;font-size:18px;font-weight:800}
html[data-theme=dark] body:has(#khans) .ux-locale-panel nav strong{background:#28445b!important;color:#fff!important;border-color:#59718a!important}

/* V6: header displays exactly one flag for the active language; country remains a panel preference. */
body:has(#khans) .ux-locale>summary>.ka-country-flag,body:has(#khans) .ux-locale>summary>svg:first-child:not(:last-child){display:none!important}


/* Header refinement: compact, sticky navigation; top announcement remains scrollable. */
@media (min-width: 851px) {
  body:has(#khans) > header.wrap {
    position: sticky;
    top: 0;
    z-index: 90;
    width: 100%;
    max-width: none;
    background: var(--surface, #fff);
    box-shadow: 0 1px 0 rgba(16,40,59,.10), 0 5px 16px rgba(16,40,59,.055);
  }
  body:has(#khans) > header.wrap > .nav {
    width: min(calc(100% - 56px), 1480px);
    margin-inline: auto;
    min-height: 72px;
    gap: 22px;
  }
  body:has(#khans) > header.wrap .brand-logo {
    width: 108px !important;
    height: 66px !important;
    max-height: 66px !important;
  }
}
body:has(#khans) .ux-appearance {
  padding: 3px !important;
  border-radius: 999px;
}
body:has(#khans) .ux-appearance .ux-mode {
  width: 31px !important;
  min-width: 31px !important;
  height: 30px !important;
  min-height: 30px !important;
}
body:has(#khans) .ux-appearance .ux-mode svg { width: 16px; height: 16px; }
body:has(#khans) .ux-locale>summary {
  min-height: 38px !important;
  gap: 5px !important;
  padding-inline: 9px !important;
}
body:has(#khans) .ux-locale>summary>.ka-lang-flag {
  min-width: 25px !important;
}
body:has(#khans) .ux-locale>summary>.ka-lang-flag img {
  width: 25px !important;
  height: 18px !important;
}
html[data-theme=dark] body:has(#khans) > header.wrap {
  background: var(--surface, #10283b);
  box-shadow: 0 1px 0 rgba(210,225,238,.15), 0 5px 16px rgba(0,0,0,.16);
}
@media (max-width: 850px) {
  body:has(#khans) > header.wrap {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--surface, #fff);
    box-shadow: 0 1px 0 rgba(16,40,59,.10);
  }
  body:has(#khans) > header.wrap .brand-logo {
    width: 96px !important;
    height: 60px !important;
    max-height: 60px !important;
  }
}
@media (max-width: 620px) {
  body:has(#khans) .ux-appearance .ux-mode {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
}