/* LRM Auto Translate — Frontend v1.1.0
   CSS variables are injected by PHP via wp_head (<style id="lrm-at-vars">)
   ========================================================================= */

/* ── Defaults (overridden by PHP output) ──────────── */
:root {
  --lrm-at-bg:           #f7f8fa;
  --lrm-at-text:         #6b7a94;
  --lrm-at-border:       #dde1ea;
  --lrm-at-active-bg:    #1a2035;
  --lrm-at-active-text:  #ffffff;
  --lrm-at-hover-bg:     #eef0f5;
  --lrm-at-radius:       8px;
  --lrm-at-font-size:    13px;
  --lrm-at-font-weight:  600;
}

/* ── Hide Google Translate UI (comprehensive) ────────
   These rules back up the early inline CSS injected by PHP.
   Using multiple selectors + !important to beat GT specificity. */

/* GT top banner frame */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame         { display: none !important; height: 0 !important; }

/* GT tooltip / balloon */
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-menu-frame                 { display: none !important; }

/* Hidden widget container — only GT's own elements, NOT .skiptranslate
   (themes/builders use that class on their own elements) */
#lrm_gte,
.goog-te-gadget,
.goog-te-gadget-simple              { display: none !important; visibility: hidden !important; }

/* GT sets body { top: 40px } — only override 'top', never margin-top
   (margin-top is used by WP admin bar and theme layouts) */
body                                { top: 0 !important; }
body.translated-ltr,
body.translated-rtl                 { top: 0 !important; }

/* GT text highlight  */
.goog-text-highlight                { background: none !important; box-shadow: none !important; }

/* ── Switcher wrapper ─────────────────────────────── */
.lrm-at-switcher {
  display: inline-flex;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ── INLINE layout ────────────────────────────────── */
.lrm-at-inline {
  border-radius: var(--lrm-at-radius);
  overflow: hidden;
  border: 1.5px solid var(--lrm-at-border);
  background: var(--lrm-at-bg);
}

.lrm-at-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 15px;
  text-decoration: none !important;
  color: var(--lrm-at-text) !important;
  background: transparent;
  font-size: var(--lrm-at-font-size);
  font-weight: var(--lrm-at-font-weight);
  transition: background .15s, color .15s;
  border: none;
  line-height: 1;
  cursor: pointer;
}

.lrm-at-btn + .lrm-at-btn {
  border-left: 1.5px solid var(--lrm-at-border);
}

.lrm-at-btn:hover {
  background: var(--lrm-at-hover-bg) !important;
  color: var(--lrm-at-text) !important;
  text-decoration: none !important;
}

.lrm-at-btn.lrm-at-active {
  background: var(--lrm-at-active-bg) !important;
  color: var(--lrm-at-active-text) !important;
  pointer-events: none;
  cursor: default;
}

/* ── DROPDOWN layout ──────────────────────────────── */
.lrm-at-dropdown-wrap {
  display: inline-flex;
  align-items: center;
}
.lrm-at-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.lrm-at-select {
  padding: 8px 32px 8px 12px;
  border: 1.5px solid var(--lrm-at-border);
  border-radius: var(--lrm-at-radius);
  background: var(--lrm-at-bg);
  color: var(--lrm-at-text) !important;
  font-size: var(--lrm-at-font-size);
  font-weight: var(--lrm-at-font-weight);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .15s;
}
.lrm-at-select:focus {
  outline: none;
  border-color: var(--lrm-at-active-bg);
}
.lrm-at-arrow {
  position: absolute;
  right: 10px;
  pointer-events: none;
  color: var(--lrm-at-text);
  font-size: 11px;
}

/* ── Button parts ─────────────────────────────────── */
.lrm-at-flag  { font-size: 1.1em; line-height: 1; }
.lrm-at-code  { font-size: .9em; font-weight: 800; letter-spacing: .04em; }
.lrm-at-label { font-size: .95em; }

/* ── Mobile ───────────────────────────────────────── */
@media ( max-width: 400px ) {
  .lrm-at-label { display: none; }
  .lrm-at-btn   { padding: 7px 11px; }
}