/* ============================================================
   LANGUAGE TOGGLE — lang-toggle.css
   Styling for the Arabic/English toggle button + cleanup of the
   Google Translate chrome (banner, tooltips, highlights) and a
   handful of safe RTL refinements.
   ============================================================ */

/* ── The toggle button ──────────────────────────────────── */
.cr-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-gold, rgba(212, 175, 55, 0.3));
  background: var(--gold-subtle, rgba(212, 175, 55, 0.08));
  color: var(--gold, #D4AF37);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.cr-lang-toggle svg { flex: 0 0 auto; }

.cr-lang-toggle:hover {
  border-color: var(--border-gold-hover, rgba(212, 175, 55, 0.7));
  background: var(--gold-subtle2, rgba(212, 175, 55, 0.14));
  color: var(--gold-light, #F3E5AB);
}

.cr-lang-toggle:active { transform: scale(0.96); }

.cr-lang-toggle:focus-visible {
  outline: 2px solid var(--gold, #D4AF37);
  outline-offset: 2px;
}

/* Inside the navbar actions — sit before the WhatsApp/CTA buttons */
.cr-lang-toggle--nav { margin-right: 4px; }

/* Fallback floating button (pages without a navbar, e.g. 404) */
.cr-lang-toggle--float {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9998;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  background: rgba(5, 8, 17, 0.85);
}

@media (max-width: 600px) {
  .cr-lang-toggle { padding: 7px 11px; font-size: 0.8rem; }
  .cr-lang-toggle--float { top: 12px; right: 12px; }
}

/* ── Hide Google Translate's injected chrome ───────────────
   We drive Google Translate programmatically, so its banner,
   gadget and tooltips must stay out of sight. */
#google_translate_element {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.skiptranslate {
  display: none !important;
  visibility: hidden !important;
}

/* Google pushes <body> down by the banner height — undo it */
body { top: 0 !important; position: static !important; }

.goog-tooltip,
.goog-tooltip:hover,
.goog-te-balloon-frame { display: none !important; }

/* Remove the yellow highlight Google puts on translated spans */
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* ── RTL refinements when Arabic is on ─────────────────────
   Use the Arabic font that is already loaded (Tajawal) and keep
   text reading right-to-left without fighting the dark theme. */
html.cr-ar body,
html[dir="rtl"] body {
  font-family: 'Tajawal', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* The toggle itself keeps Latin spacing regardless of direction */
html[dir="rtl"] .cr-lang-toggle { direction: ltr; }