/* THE LANGUAGE BUTTON. Styles for assets/js/lang.js - see that file for why it is a button.
   Brand tokens only (assets/css/styles.css); this file defines no colour of its own. */

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

/* ── the button ──────────────────────────────────────────────────────────────────────────────── */
.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 }

/* ── where it sits ───────────────────────────────────────────────────────────────────────────── */
/* THE KIOSK: fixed, top right, out of flow so it cannot shift the welcome by a pixel. Mirrored
   in RTL, because in Urdu and Arabic the top-right corner is where the reading starts. */
.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) }

/* THE ORDERING APP: inside the header row it is given, beside the `?`. Its header already owns
   that corner - a floating button would land on the profile and the Table chip. */
.wkl-inline { position: relative; display: inline-flex; --wkl-size: 40px }
.wkl-inline .wkl-btn { background: #fff }

/* ── the panel ───────────────────────────────────────────────────────────────────────────────── */
.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 }

/* Each name is set in its own script, so the row is legible to the person who needs it. */
.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 }

/* A PHONE GETS A SHEET, NOT A DROPDOWN HANGING OFF THE TOP CORNER. On the ordering app the button
   is in a sticky header at the very top of the screen - the furthest point from a thumb - so the
   choices come up from the bottom where the hand already is. */
@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 }
  /* The kiosk is never this narrow, but if it ever is, its button is not in a bottom bar. */
  .wkl-fixed .wkl-panel { bottom: auto; top: calc(100% + 10px); max-height: none }
}

/* The page under it stays where it is - the panel is the only thing that moves. */
@media (prefers-reduced-motion: reduce) {
  .wkl-panel, .wkl-btn { transition: opacity .12s linear, visibility .12s linear }
  .wkl-panel { transform: none !important }
}