.dt-translate-switcher { position: relative; display: inline-block; font-size: 14px; }

/* Floating (auto) placement — --dt-offset-top/--dt-offset-side are set
   inline per-instance from the "Distance from edge" setting, so the widget
   can be nudged clear of a theme's own header/announcement bar. */
.dt-translate-switcher.dt-floating {
  position: fixed;
  z-index: 99998; /* above typical sticky theme headers; below the WP admin bar */
  --dt-offset-top: 20px;
  --dt-offset-side: 20px;
}
.dt-translate-switcher.dt-floating.dt-pos-bottom-right { right: var(--dt-offset-side); bottom: var(--dt-offset-top); }
.dt-translate-switcher.dt-floating.dt-pos-bottom-left { left: var(--dt-offset-side); bottom: var(--dt-offset-top); }
.dt-translate-switcher.dt-floating.dt-pos-top-right { right: var(--dt-offset-side); top: var(--dt-offset-top); }
.dt-translate-switcher.dt-floating.dt-pos-top-left { left: var(--dt-offset-side); top: var(--dt-offset-top); }

/* When logged in, the fixed WP admin bar covers a top-positioned widget —
   push top positions down so the switcher is never hidden behind it. */
body.admin-bar .dt-translate-switcher.dt-floating.dt-pos-top-right,
body.admin-bar .dt-translate-switcher.dt-floating.dt-pos-top-left {
  top: calc(var(--dt-offset-top) + 32px);
}
/* On phones, themes use sticky, variable-height headers that cover or collide
   with a top-anchored switcher (and it differs per device). Pin it to the
   bottom-right instead — a fixed, deterministic spot no header or admin bar can
   reach, clear of the phone's gesture bar — regardless of the chosen desktop
   corner. The dropdown opens upward so it never runs off the bottom edge. */
@media screen and (max-width: 782px) {
  .dt-translate-switcher.dt-floating {
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    left: auto !important;
  }
  .dt-translate-switcher.dt-floating .dt-tr-menu {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    max-height: 60vh;
    overflow-y: auto;
  }
}

.dt-tr-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-size: 14px;
  color: #222;
}
.dt-tr-trigger .dt-flag { font-size: 16px; line-height: 1; }
.dt-tr-trigger .dt-caret { font-size: 10px; opacity: 0.6; transition: transform 0.2s ease; }
.dt-translate-switcher.is-open .dt-tr-trigger .dt-caret { transform: rotate(180deg); }

.dt-tr-menu {
  position: absolute;
  min-width: 180px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.dt-translate-switcher.is-open .dt-tr-menu { opacity: 1; visibility: visible; transform: none; }

/* Position the dropdown relative to the trigger depending on corner */
.dt-pos-bottom-right .dt-tr-menu, .dt-pos-top-right .dt-tr-menu { right: 0; }
.dt-pos-bottom-left .dt-tr-menu, .dt-pos-top-left .dt-tr-menu { left: 0; }
.dt-pos-bottom-right .dt-tr-menu, .dt-pos-bottom-left .dt-tr-menu { bottom: calc(100% + 8px); }
.dt-pos-top-right .dt-tr-menu, .dt-pos-top-left .dt-tr-menu { top: calc(100% + 8px); }
.dt-inline .dt-tr-menu { top: calc(100% + 8px); left: 0; }

.dt-lang-link, .dt-instant-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: 6px;
  text-decoration: none;
  color: #222;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.dt-lang-link:hover, .dt-instant-link:hover { background: rgba(0, 0, 0, 0.06); }
.dt-lang-link.dt-lang-active { font-weight: 600; background: rgba(0, 0, 0, 0.05); }
.dt-flag { font-size: 15px; }

.dt-tr-instant-section { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.dt-tr-instant-label { margin: 2px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.55; }

/* Hide Google's own widget chrome — we only use its translation engine,
   triggered through our own UI, when instant preview is enabled. */
#google_translate_element { position: absolute !important; left: -9999px !important; }
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }