/* ================================================================
   Language Switcher Pro — cls-pro.css  v3.3
   ================================================================ */

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  /* Colors (overridden by PHP inline style) */
  --cls-accent:        #2563eb;
  --cls-active-bg:     #eff6ff;
  --cls-active-border: #2563eb;

  /* Sizes (overridden by PHP inline style) */
  --cls-flag-size:     24px;
  --cls-nav-flag:      20px;

  /* ── Typography custom properties ──────────────────────────────
     Each has a sensible CSS default. PHP overwrites any of these
     via wp_add_inline_style() when the user sets a value.
     Supports px, rem, em, %, var(--anything), __var__(--anything).
     ──────────────────────────────────────────────────────────── */
  --cls-fs-trigger:       0.875rem;   /* label in trigger button      */
  --cls-fs-trigger-code:  0.78rem;    /* 2-letter code in minimal     */
  --cls-fs-modal-heading: 1rem;       /* modal dialog heading         */
  --cls-fs-item-label:    0.875rem;   /* primary lang name in items   */
  --cls-fs-item-sublabel: 0.71rem;    /* secondary (english) name     */
  --cls-fs-search:        0.875rem;   /* search input                 */
  --cls-fs-section-label: 0.69rem;    /* "Recently Used" / "All Languages" headers  */
  --cls-fs-no-results:    0.875rem;   /* "No languages found"         */

  /* WPML per-language font (set by assets.php when WPML is active) */
  --cls-wpml-font: inherit;

  /* Misc */
  --cls-radius-sm:     8px;
  --cls-ease:          0.16s ease;
  --cls-shadow:        0 20px 60px rgba(0,0,0,.16),0 4px 16px rgba(0,0,0,.08);
  --cls-bg:            #ffffff;
  --cls-border:        #e4e9f0;
  --cls-text:          #0f172a;
  --cls-sub:           #64748b;
  --cls-hover:         #f1f5f9;
  --cls-item-bg:       #f8fafc;
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
}

/* ================================================================
   FLAG WRAP
   Inline styles on both container and img defeat any theme reset.
   ================================================================ */
.cls-flag-wrap {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  width:  var(--cls-flag-size) !important;
  height: var(--cls-flag-size) !important;
  min-width:  var(--cls-flag-size) !important;
  min-height: var(--cls-flag-size) !important;
  overflow: hidden !important;
  position: relative !important;
  background: #e5e7eb;
  vertical-align: middle;
  border-radius: 50%;
}

.cls-flag-wrap img,
.cls-flag-wrap > img {
  position: absolute !important;
  inset: 0 !important;
  width:  100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
}

.cls-flag-wrap--nav {
  width:  var(--cls-nav-flag) !important;
  height: var(--cls-nav-flag) !important;
  min-width:  var(--cls-nav-flag) !important;
  min-height: var(--cls-nav-flag) !important;
}

/* Flag shapes */
.cls-flag--circle  { border-radius: 50% !important; box-shadow: 0 0 0 1.5px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.12); }
.cls-flag--rounded { border-radius: 4px !important;  box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.cls-flag--square  { border-radius: 2px !important;  box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* Active flag ring */
.cls-item--active .cls-flag-wrap {
  box-shadow: 0 0 0 2.5px var(--cls-bg), 0 0 0 4.5px var(--cls-active-border) !important;
}

/* ── Nav item ────────────────────────────────────────────────────── */
.cls-nav-item, li.cls-nav-item { list-style: none; }

/* ================================================================
   TRIGGER BUTTON
   ================================================================ */

.cls-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  color: inherit;
  transition: background var(--cls-ease), border-color var(--cls-ease), box-shadow var(--cls-ease);
}

.cls-trigger:focus-visible {
  outline: 2px solid var(--cls-accent);
  outline-offset: 2px;
  border-radius: var(--cls-radius-sm);
}

/* ── Pill ── */
.cls-trigger--pill {
  padding: 5px 11px 5px 6px;
  border-radius: 9999px;
  border: 1.5px solid var(--cls-border);
  background: var(--cls-item-bg);
  font-size: var(--cls-fs-trigger);
  gap: 7px;
}
.cls-trigger--pill:hover { background: var(--cls-hover); border-color: #c5d1e0; }

/* ── PayPal ── */
.cls-trigger--paypal {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1.5px solid #d1d5db;
  background: #ffffff;
  font-size: var(--cls-fs-trigger);
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
  gap: 8px;
}
.cls-trigger--paypal:hover { background: #f9fafb; border-color: #b0bac6; box-shadow: 0 2px 6px rgba(0,0,0,.09); }

/* ── Card ── */
.cls-trigger--card {
  padding: 6px 12px;
  border-radius: var(--cls-radius-sm);
  border: 2px solid var(--cls-active-border);
  background: var(--cls-active-bg);
  color: var(--cls-accent);
  font-size: var(--cls-fs-trigger);
  font-weight: 600;
}
.cls-trigger--card:hover { filter: brightness(.96); }

/* ── Icon only ── */
.cls-trigger--icon_only {
  padding: 3px;
  border-radius: 50%;
  background: transparent;
  border: none;
  gap: 4px;
}
.cls-trigger--icon_only .cls-flag-wrap {
  width:  var(--cls-nav-flag) !important;
  height: var(--cls-nav-flag) !important;
  min-width:  var(--cls-nav-flag) !important;
  min-height: var(--cls-nav-flag) !important;
  box-shadow: 0 0 0 2px var(--cls-border);
  transition: box-shadow var(--cls-ease);
}
.cls-trigger--icon_only:hover .cls-flag-wrap { box-shadow: 0 0 0 2.5px var(--cls-accent); }

/* ── Minimal ── */
.cls-trigger--minimal {
  padding: 4px 6px;
  border-radius: 4px;
  background: transparent;
  font-size: var(--cls-fs-trigger);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  gap: 5px;
}
.cls-trigger--minimal:hover { background: rgba(0,0,0,.06); }

/* Trigger text elements */
.cls-trigger__label { font-size: var(--cls-fs-trigger); }

.cls-trigger__code {
  font-size: var(--cls-fs-trigger-code);
  font-weight: 700;
  letter-spacing: .06em;
}

.cls-trigger__chevron {
  opacity: .45;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.cls-trigger[aria-expanded="true"] .cls-trigger__chevron { transform: rotate(180deg); opacity: .7; }

/* RTL chevron */
[dir="rtl"] .cls-trigger { flex-direction: row-reverse; }
[dir="rtl"] .cls-trigger[aria-expanded="true"] .cls-trigger__chevron { transform: rotate(-180deg); }

/* ── Section labels ──────────────────────────────────────────────── */
.cls-section-label {
  font-size: var(--cls-fs-section-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cls-sub);
  padding: 14px 20px 5px;
}

/* ── Inline grid [cls_grid] ──────────────────────────────────────── */
.cls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 9px;
  padding: 4px 0;
}
.cls-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cls-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cls-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Language item ────────────────────────────────────────────────── */
.cls-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: var(--cls-radius-sm);
  background: var(--cls-item-bg);
  border: 1.5px solid var(--cls-border);
  color: var(--cls-text);
  font-size: var(--cls-fs-item-label);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--cls-ease), border-color var(--cls-ease), box-shadow var(--cls-ease), transform var(--cls-ease);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Left accent bar */
.cls-item::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  background: var(--cls-accent);
  border-radius: 0 2px 2px 0;
  transform: scaleY(0);
  transition: transform var(--cls-ease);
  transform-origin: center;
}
[dir="rtl"] .cls-item::before { left:auto; right:0; border-radius:2px 0 0 2px; }

.cls-item:hover {
  background: var(--cls-hover);
  border-color: #c5d1e0;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.cls-item:hover::before { transform: scaleY(1); }

.cls-item--active {
  background: var(--cls-active-bg) !important;
  border-color: var(--cls-active-border) !important;
  font-weight: 600;
  pointer-events: none;
}
.cls-item--active::before { transform: scaleY(1); }

.cls-item:focus-visible {
  outline: none;
  border-color: var(--cls-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
  transform: none;
}

.cls-item__text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }

.cls-item__label {
  font-size: var(--cls-fs-item-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.cls-item__sublabel {
  font-size: var(--cls-fs-item-sublabel);
  color: var(--cls-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

.cls-item__check {
  color: var(--cls-accent);
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0;
  transform: scale(.5);
  transition: opacity var(--cls-ease), transform .2s cubic-bezier(.34,1.5,.64,1);
}
.cls-item--active .cls-item__check { opacity:1; transform:scale(1); }

[dir="rtl"] .cls-item         { flex-direction:row-reverse; }
[dir="rtl"] .cls-item__check  { margin-left:0; margin-right:auto; }

/* ── Modal ────────────────────────────────────────────────────────── */
.cls-modal {
  position: fixed;
  inset: 0;
  /* Max possible z-index — guaranteed above Bricks mobile menu (z:300),
     WooCommerce cart drawer, cookie banners, and any builder overlay */
  z-index: 2147483647;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Establish own stacking context so nothing outside can paint over us */
  isolation: isolate;
}
@media (min-width: 600px) { .cls-modal { align-items:center; padding:20px; } }
.cls-modal[hidden] { display:none !important; }

.cls-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,18,35,.52);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: cls-fade-in .2s ease forwards;
}
@keyframes cls-fade-in { from{opacity:0} to{opacity:1} }

.cls-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--cls-bg);
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 88vh;
  max-height: 88dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--cls-shadow);
  animation: cls-sheet-in .3s cubic-bezier(.32,.72,0,1) forwards;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* WPML: inherit the per-language font family if set */
  font-family: var(--cls-wpml-font, inherit);
}
@media (min-width: 600px) {
  .cls-modal__panel { border-radius:16px; max-height:82vh; max-height:82dvh; animation:cls-panel-in .26s cubic-bezier(.34,1.25,.64,1) forwards; }
}
@keyframes cls-sheet-in  { from{transform:translateY(100%);opacity:.8} to{transform:translateY(0);opacity:1} }
@keyframes cls-panel-in  { from{opacity:0;transform:scale(.93) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }

.cls-modal--closing .cls-modal__backdrop { animation:cls-fade-in .18s ease reverse forwards; }
.cls-modal--closing .cls-modal__panel    { animation:cls-sheet-in .2s ease reverse forwards; }
@media (min-width: 600px) {
  .cls-modal--closing .cls-modal__panel  { animation:cls-panel-in .18s ease reverse forwards; }
}

/* Drag handle (mobile) */
.cls-modal__panel::before { content:''; display:block; width:32px; height:4px; background:#d1d5db; border-radius:2px; margin:10px auto 0; flex-shrink:0; }
@media (min-width: 600px) { .cls-modal__panel::before { display:none; } }

/* Header */
.cls-modal__header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 13px; border-bottom:1px solid var(--cls-border); flex-shrink:0; }

.cls-modal__heading {
  margin: 0;
  font-size: var(--cls-fs-modal-heading);
  font-weight: 700;
  color: var(--cls-text);
  letter-spacing: -.018em;
}

.cls-modal__close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: #f1f5f9; cursor: pointer; color: #475569;
  transition: background var(--cls-ease), color var(--cls-ease);
  flex-shrink: 0; padding: 0; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.cls-modal__close:hover { background:#e2e8f0; color:var(--cls-text); }
.cls-modal__close:focus-visible { outline:2px solid var(--cls-accent); outline-offset:2px; }

/* Search */
.cls-modal__search { padding:11px 20px 10px; border-bottom:1px solid var(--cls-border); flex-shrink:0; background:var(--cls-bg); }
.cls-search-wrap   { position:relative; display:flex; align-items:center; }
.cls-search-icon   { position:absolute; left:11px; color:var(--cls-sub); pointer-events:none; display:flex; align-items:center; }
[dir="rtl"] .cls-search-icon { left:auto; right:11px; }

.cls-modal__search-input {
  width: 100%;
  padding: 8px 36px;
  border: 1.5px solid var(--cls-border);
  border-radius: 8px;
  font-size: var(--cls-fs-search);
  color: var(--cls-text);
  background: #f8fafc;
  transition: border-color var(--cls-ease), box-shadow var(--cls-ease), background var(--cls-ease);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.cls-modal__search-input:focus { outline:none; border-color:var(--cls-accent); background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.13); }

.cls-search-clear {
  position: absolute; right: 8px;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: none; background: #94a3b8; border-radius: 50%;
  cursor: pointer; color: #fff; padding: 0;
  opacity: 0; pointer-events: none;
  transition: opacity var(--cls-ease), background var(--cls-ease);
}
[dir="rtl"] .cls-search-clear { right:auto; left:8px; }
.cls-search-clear.cls-visible { opacity:1; pointer-events:auto; }
.cls-search-clear:hover { background:#64748b; }

/* Scrollable body */
.cls-modal__body { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding-bottom:10px; }

/* Modal grid */
.cls-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 7px;
  padding: 4px 20px;
}
.cls-modal-grid--2 { grid-template-columns:repeat(2,1fr); }
.cls-modal-grid--3 { grid-template-columns:repeat(3,1fr); }
.cls-modal-grid--4 { grid-template-columns:repeat(4,1fr); }

.cls-modal__grid .cls-item       { padding:9px 11px; gap:9px; }
.cls-modal__grid .cls-item:hover { transform:none; }

/* Flag size in modal grid */
.cls-modal__grid .cls-flag-wrap {
  width:  var(--cls-flag-size) !important;
  height: var(--cls-flag-size) !important;
  min-width:  var(--cls-flag-size) !important;
  min-height: var(--cls-flag-size) !important;
}

.cls-modal__no-results {
  text-align: center;
  color: var(--cls-sub);
  font-size: var(--cls-fs-no-results);
  padding: 28px 20px;
  margin: 0;
}

/* Compact mode */
.cls-modal--compact .cls-modal__grid .cls-item { padding:7px 10px; gap:8px; }
.cls-modal--compact .cls-item__label           { font-size: calc(var(--cls-fs-item-label) * 0.9); }
.cls-modal--compact .cls-modal__grid .cls-flag-wrap { --cls-flag-size:18px; width:18px!important; height:18px!important; min-width:18px!important; min-height:18px!important; }

/* Responsive */
@media (max-width:480px) {
  .cls-modal__grid { grid-template-columns:1fr 1fr; padding:4px 14px; gap:6px; }
  .cls-modal-grid--2,.cls-modal-grid--3,.cls-modal-grid--4 { grid-template-columns:1fr 1fr; }
  .cls-modal__search,.cls-modal__header { padding-left:14px; padding-right:14px; }
  .cls-section-label { padding-left:14px; padding-right:14px; }
}

/* ================================================================
   ANIMATION VARIANTS
   ================================================================ */
.cls-anim-fade .cls-modal__panel {
  animation: cls-fade-in .22s ease forwards;
  border-radius: 16px;
}
.cls-anim-fade.cls-modal--closing .cls-modal__panel {
  animation: cls-fade-in .18s ease reverse forwards;
}
.cls-anim-scale .cls-modal__panel {
  animation: cls-scale-in .24s cubic-bezier(.34,1.3,.64,1) forwards;
  border-radius: 16px;
}
.cls-anim-scale.cls-modal--closing .cls-modal__panel {
  animation: cls-scale-in .18s ease reverse forwards;
}
@keyframes cls-scale-in {
  from { opacity:0; transform:scale(.88); }
  to   { opacity:1; transform:scale(1); }
}
.cls-anim-none .cls-modal__backdrop,
.cls-anim-none .cls-modal__panel,
.cls-anim-none.cls-modal--closing .cls-modal__backdrop,
.cls-anim-none.cls-modal--closing .cls-modal__panel { animation:none; }

/* Skip all animations when prefers-reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .cls-modal__backdrop,
  .cls-modal__panel,
  .cls-modal--closing .cls-modal__backdrop,
  .cls-modal--closing .cls-modal__panel { animation:none !important; transition:none !important; }
}

/* ================================================================
   INLINE DROPDOWN
   ================================================================ */
.cls-dropdown {
  position: absolute;
  z-index: 2147483647;
  background: var(--cls-bg);
  border: 1.5px solid var(--cls-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.08);
  padding: 6px;
  min-width: 160px;
  animation: cls-scale-in .18s cubic-bezier(.34,1.3,.64,1) forwards;
  overflow: hidden;
}
.cls-dropdown__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--cls-text);
  font-size: .85rem;
  font-weight: 500;
  transition: background var(--cls-ease);
  -webkit-tap-highlight-color: transparent;
}
.cls-dropdown__item:hover { background: var(--cls-hover); }
.cls-dropdown__item--active { background:var(--cls-active-bg); color:var(--cls-accent); font-weight:700; pointer-events:none; }
.cls-dropdown__flag { display:inline-flex; flex-shrink:0; width:20px; height:20px; border-radius:50%; overflow:hidden; position:relative; }
.cls-dropdown__flag img { position:absolute; inset:0; width:100%!important; height:100%!important; object-fit:cover!important; display:block!important; max-width:none!important; }

/* ================================================================
   GEO SUGGESTION BANNER
   All visual values driven by CSS custom properties so assets.php
   can override them from settings without touching the stylesheet.
   ================================================================ */
:root {
  --cls-geo-bg:              #1e293b;
  --cls-geo-color:           #f1f5f9;
  --cls-geo-msg-color:       #cbd5e1;
  --cls-geo-btn-bg:          var(--cls-accent);
  --cls-geo-btn-color:       #ffffff;
  --cls-geo-btn-hover-bg:    var(--cls-geo-btn-bg);
  --cls-geo-btn-hover-color: var(--cls-geo-btn-color);
  --cls-geo-radius:          12px;
  --cls-geo-fs:              0.875rem;
  --cls-geo-fs-btn:          0.82rem;
}

/* ── Desktop / base layout ───────────────────────────────────────── */
.cls-geo-banner {
  /* Anchor to viewport bottom-center using inset instead of left+transform
     so RTL direction on <html> never repositions it */
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483646;

  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;

  background: var(--cls-geo-bg);
  color: var(--cls-geo-color);
  padding: 11px 14px;
  border-radius: var(--cls-geo-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.15);
  font-size: var(--cls-geo-fs);

  /* Cap width on wide screens but never overflow viewport on small ones */
  max-width: min(520px, calc(100vw - 32px));
  width: max-content;

  /* Direction always set via dir attr on the element — see showGeoBanner() in JS */
  animation: cls-banner-in .3s cubic-bezier(.34,1.2,.64,1) forwards;

  /* Prevent text from triggering overflow on the banner container */
  overflow: hidden;
}

@keyframes cls-banner-in {
  from { opacity:0; transform:translateX(-50%) translateY(16px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* Flag */
.cls-geo-banner__flag {
  display: inline-flex;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  align-self: center;
}
.cls-geo-banner__flag img {
  position: absolute; inset: 0;
  width: 100%!important; height: 100%!important;
  object-fit: cover!important; display: block!important;
  max-width: none!important;
}

/* Message — single line on desktop, allow wrap on mobile only */
.cls-geo-banner__msg {
  color: var(--cls-geo-msg-color);
  font-size: var(--cls-geo-fs);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;      /* keeps it on one line on desktop */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Switch button */
.cls-geo-banner__switch {
  background: var(--cls-geo-btn-bg);
  color: var(--cls-geo-btn-color);
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--cls-geo-fs-btn);
  transition: filter .15s, background .15s, color .15s;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.4;
}
.cls-geo-banner__switch:hover {
  background: var(--cls-geo-btn-hover-bg);
  color: var(--cls-geo-btn-hover-color);
  filter: brightness(1.12);
}
.cls-geo-banner--custom-hover .cls-geo-banner__switch:hover { filter: none; }

/* Dismiss × */
.cls-geo-banner__dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(255,255,255,.12);
  color: var(--cls-geo-msg-color);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  /* Push to trailing edge without relying on margin-inline-start
     (which can fight with dir="rtl" on the banner) */
  margin-inline-start: 4px;
  transition: background .15s, color .15s;
}
.cls-geo-banner__dismiss:hover { background: rgba(255,255,255,.22); color: var(--cls-geo-color); }

/* ── Mobile layout ───────────────────────────────────────────────── */
/* Switch to a two-row card so nothing word-wraps letter by letter  */
@media (max-width: 520px) {
  .cls-geo-banner {
    /* Stretch edge-to-edge with a small gutter — no transform centering */
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    width: auto;
    max-width: none;

    /* Grid: row 1 = [flag] [msg] [dismiss]
               row 2 = [switch button full width] */
    display: grid;
    grid-template-columns: 22px 1fr 28px;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    align-items: center;
    padding: 12px 14px;
  }

  @keyframes cls-banner-in {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
  }

  .cls-geo-banner__flag    { grid-column: 1; grid-row: 1; }
  .cls-geo-banner__msg {
    grid-column: 2;
    grid-row: 1;
    white-space: normal;   /* allow wrapping in the message text on mobile */
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    font-size: 0.82rem;
    line-height: 1.4;
  }
  .cls-geo-banner__dismiss { grid-column: 3; grid-row: 1; margin-inline-start: 0; }
  .cls-geo-banner__switch {
    grid-column: 1 / -1;  /* full width across all 3 columns */
    grid-row: 2;
    text-align: center;
    padding: 9px 14px;
    font-size: 0.875rem;
    border-radius: var(--cls-geo-radius);
    display: block;
  }
}

/* ================================================================
   DARK MODE — html.cls-dark forced, html.cls-light forced off,
   or auto via prefers-color-scheme
   ================================================================ */
.cls-dark .cls-modal__panel,
.cls-dark .cls-dropdown {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
.cls-dark .cls-item { background:#273548; border-color:#334155; color:#f1f5f9; }
.cls-dark .cls-item:hover { background:#334155; border-color:#475569; }
.cls-dark .cls-item--active { background:#1d3a5f !important; border-color:var(--cls-active-border) !important; }
.cls-dark .cls-modal__heading { color:#f1f5f9; }
.cls-dark .cls-modal__close { background:#334155; color:#94a3b8; }
.cls-dark .cls-modal__close:hover { background:#475569; color:#f1f5f9; }
.cls-dark .cls-modal__search-input { background:#1a2840; color:#f1f5f9; border-color:#334155; }
.cls-dark .cls-modal__backdrop { background:rgba(0,0,0,.7); }
.cls-dark .cls-modal__header,.cls-dark .cls-modal__search { border-color:#334155; }
.cls-dark .cls-section-label { color:#64748b; }
.cls-dark .cls-item__sublabel { color:#64748b; }

@media (prefers-color-scheme: dark) {
  html:not(.cls-light) .cls-modal__panel,
  html:not(.cls-light) .cls-dropdown { background:#1e293b; border-color:#334155; color:#f1f5f9; }
  html:not(.cls-light) .cls-item { background:#273548; border-color:#334155; color:#f1f5f9; }
  html:not(.cls-light) .cls-item:hover { background:#334155; }
  html:not(.cls-light) .cls-item--active { background:#1d3a5f !important; }
  html:not(.cls-light) .cls-modal__heading { color:#f1f5f9; }
  html:not(.cls-light) .cls-modal__close { background:#334155; color:#94a3b8; }
  html:not(.cls-light) .cls-modal__close:hover { background:#475569; color:#f1f5f9; }
  html:not(.cls-light) .cls-modal__search-input { background:#1a2840; color:#f1f5f9; border-color:#334155; }
  html:not(.cls-light) .cls-modal__backdrop { background:rgba(0,0,0,.7); }
  html:not(.cls-light) .cls-modal__header,
  html:not(.cls-light) .cls-modal__search { border-color:#334155; }
  html:not(.cls-light) .cls-section-label,
  html:not(.cls-light) .cls-item__sublabel { color:#64748b; }
}