.wkl { --wkl-size: 46px; }

.wkl-btn {
  width: var(--wkl-size); height: var(--wkl-size);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  color: var(--ink2, var(--muted));
  box-shadow: var(--sh-2, 0 2px 10px rgba(0, 0, 0, .07));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: color .18s, border-color .18s, transform .18s;
}
.wkl-btn svg { width: 24px; height: 24px; }
.wkl-btn:hover { color: var(--gold-text, #7F6412); border-color: var(--gold) }
.wkl-btn:active { transform: scale(.94) }
.wkl-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px }

.wkl-fixed { position: fixed; top: clamp(10px, 1.6vh, 18px); right: clamp(12px, 2vw, 24px); z-index: 130 }
html[dir="rtl"] .wkl-fixed { right: auto; left: clamp(12px, 2vw, 24px) }

.wkl-inline { position: relative; display: inline-flex; --wkl-size: 40px }
.wkl-inline .wkl-btn { background: #fff }

.wkl-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 140;
  min-width: 200px; padding: 6px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--sh-3, 0 18px 50px rgba(0, 0, 0, .16));
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.wkl-fixed .wkl-panel { top: calc(100% + 10px) }
html[dir="rtl"] .wkl-panel { right: auto; left: 0; transform-origin: top left }
.wkl-open .wkl-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1) }

.wkl-panel button {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 11px 14px; border: 0; border-radius: 11px;
  background: none; cursor: pointer; text-align: start;
  font: inherit; font-size: 1.02rem; font-weight: 600; line-height: 1.3;
  color: var(--ink); white-space: nowrap;
  transition: background .14s, color .14s;
}
.wkl-panel button:hover { background: var(--cream, #FAF7F0) }
.wkl-panel button[aria-checked="true"] { background: var(--cream, #FAF7F0); color: var(--gold-text, #7F6412) }
.wkl-panel button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px }
.wkl-tick { display: inline-flex; width: 18px; flex: none; color: var(--gold-text, #7F6412) }
.wkl-tick svg { width: 18px; height: 18px }

.wkl-panel button[lang="ur"] .wkl-n,
.wkl-panel button[lang="ar"] .wkl-n { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", system-ui, sans-serif; font-size: 1.12rem }
.wkl-panel button[lang="hi"] .wkl-n { font-family: "Noto Sans Devanagari", system-ui, sans-serif }
.wkl-panel button[lang="gu"] .wkl-n { font-family: "Noto Sans Gujarati", system-ui, sans-serif }
.wkl-panel button[lang="pa"] .wkl-n { font-family: "Noto Sans Gurmukhi", system-ui, sans-serif }

@media (max-width: 520px) {
  .wkl-panel {
    position: fixed; top: auto; right: 10px; left: 10px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 400;                    /* over the order bar (35) and Haniya's launcher (180) */
    min-width: 0; max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 8px; border-radius: 20px;
    transform-origin: bottom center; transform: translateY(14px);
  }
  html[dir="rtl"] .wkl-panel { left: 10px; right: 10px; transform-origin: bottom center }
  .wkl-open .wkl-panel { transform: translateY(0) }
  .wkl-panel button { padding: 14px 16px; font-size: 1.08rem }
  .wkl-fixed .wkl-panel { bottom: auto; top: calc(100% + 10px); max-height: none }
}

@media (prefers-reduced-motion: reduce) {
  .wkl-panel, .wkl-btn { transition: opacity .12s linear, visibility .12s linear }
  .wkl-panel { transform: none !important }
}