/* ════════════════════════════════════════════
   Shared Toggle Widget — AR/EN + Dark/Light
   Used across all templates.
   ════════════════════════════════════════════ */

/* ── Bilingual helpers ── */
.lang-ar { display: inline; }
.lang-en { display: none; }
html[lang="en"] .lang-ar { display: none; }
html[lang="en"] .lang-en { display: inline; }

/* When the marker wraps a block element, keep block layout */
[data-block].lang-ar,
[data-block].lang-en { display: block; }
html[lang="en"] [data-block].lang-ar { display: none; }
html[lang="en"] [data-block].lang-en { display: block; }

/* ── Floating toggle widget ── */
.tk-toggle {
  position: fixed;
  bottom: 20px;
  inset-inline-end: 20px;
  z-index: 200;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

[data-theme="dark"] .tk-toggle {
  background: rgba(20, 20, 28, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.6);
}

.tk-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  position: relative;
  transition: background 200ms ease, transform 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.tk-btn:hover { background: rgba(0, 0, 0, 0.06); transform: translateY(-1px); }
[data-theme="dark"] .tk-btn:hover { background: rgba(255, 255, 255, 0.08); }

.tk-btn svg { width: 16px; height: 16px; }

.tk-btn .tk-icon-sun { display: none; }
[data-theme="dark"] .tk-btn .tk-icon-sun  { display: inline; }
[data-theme="dark"] .tk-btn .tk-icon-moon { display: none; }

.tk-btn-lang {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tk-btn-lang .tk-show-ar { display: none; }
.tk-btn-lang .tk-show-en { display: inline; }
html[lang="en"] .tk-btn-lang .tk-show-ar { display: inline; }
html[lang="en"] .tk-btn-lang .tk-show-en { display: none; }

@media (max-width: 480px) {
  .tk-toggle { bottom: 14px; inset-inline-end: 14px; padding: 6px; gap: 6px; }
  .tk-btn { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-btn { transition: none; }
}