/* =================================================================
   GT Translate RTL/LTR  v3 — Frontend CSS
   Styles: pill | flag-only | text-only | sidebar-tab
   ================================================================= */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  --gtr-btn-bg    : #1a73e8;   /* overridden inline by PHP */
  --gtr-btn-txt   : #ffffff;
  --gtr-btn-hover : #1558b0;

  --gtr-bg        : #ffffff;
  --gtr-bg2       : #f4f5f7;
  --gtr-bg-hover  : #f1f3f6;
  --gtr-border    : #dce1ea;
  --gtr-text      : #1c2333;
  --gtr-text2     : #6b7280;
  --gtr-active-bg : #e8f0fe;
  --gtr-active-c  : #1a73e8;
  --gtr-shadow    : 0 6px 28px rgba(0,0,0,.13), 0 1px 5px rgba(0,0,0,.07);
  --gtr-radius    : 14px;
  --gtr-rsm       : 10px;
  --gtr-font      : -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --gtr-z         : 2147483647;
  --gtr-t         : .2s cubic-bezier(.4,0,.2,1);
}

/* ── Dark theme ─────────────────────────────────────────────── */
.gtr-theme-dark {
  --gtr-bg        : #1e2235;
  --gtr-bg2       : #252a3d;
  --gtr-bg-hover  : #2e3450;
  --gtr-border    : #323749;
  --gtr-text      : #e4e8f0;
  --gtr-text2     : #8892a4;
  --gtr-active-bg : #253050;
  --gtr-active-c  : #6ba4ff;
  --gtr-shadow    : 0 6px 28px rgba(0,0,0,.5), 0 1px 5px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark) {
  .gtr-theme-auto {
    --gtr-bg        : #1e2235;--gtr-bg2:#252a3d;--gtr-bg-hover:#2e3450;
    --gtr-border    : #323749;--gtr-text:#e4e8f0;--gtr-text2:#8892a4;
    --gtr-active-bg : #253050;--gtr-active-c:#6ba4ff;
    --gtr-shadow    : 0 6px 28px rgba(0,0,0,.5),0 1px 5px rgba(0,0,0,.35);
  }
}

/* ── Widget base ────────────────────────────────────────────── */
.gtr-widget {
  position: relative;
  display: inline-block;
  font-family: var(--gtr-font);
  font-size: 14px;
  color: var(--gtr-text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.gtr-widget *,.gtr-widget *::before,.gtr-widget *::after { box-sizing: border-box; }

.gtr-language-toggle {
  cursor: pointer;
}

/* ── Floating ───────────────────────────────────────────────── */
.gtr-floating { position:fixed !important; z-index:var(--gtr-z); }
.gtr-floating.gtr-pos-bottom-right { bottom:20px; right:20px; }
.gtr-floating.gtr-pos-bottom-left  { bottom:20px; left:20px; }
.gtr-floating.gtr-pos-top-right    { top:20px;    right:20px; }
.gtr-floating.gtr-pos-top-left     { top:20px;    left:20px; }

/* =================================================================
   STYLE 1: PILL BUTTON  (default)
   ================================================================= */
.gtr-style-pill .gtr-btn,
.gtr-style-text-only .gtr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--gtr-btn-bg);
  color: var(--gtr-btn-txt);
  border: none;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--gtr-font);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  transition: background var(--gtr-t), transform var(--gtr-t), box-shadow var(--gtr-t);
  outline: none;
  user-select: none;
}
.gtr-style-pill .gtr-btn:hover,
.gtr-style-text-only .gtr-btn:hover {
  background: var(--gtr-btn-hover);
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
.gtr-style-pill .gtr-btn:focus-visible,
.gtr-style-text-only .gtr-btn:focus-visible { outline: 3px solid rgba(255,255,255,.5); outline-offset:2px; }

.gtr-globe  { width:16px; height:16px; flex-shrink:0; }
.gtr-chevron{ width:13px; height:13px; flex-shrink:0; transition:transform var(--gtr-t); }
.gtr-btn[aria-expanded="true"] .gtr-chevron { transform:rotate(180deg); }

/* TEXT-ONLY: chevron slightly muted */
.gtr-style-text-only .gtr-chevron { opacity:.7; }

/* =================================================================
   STYLE 2: FLAG GRID
   ================================================================= */
.gtr-style-flag-only .gtr-flag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: var(--gtr-bg);
  border: 1.5px solid var(--gtr-border);
  border-radius: var(--gtr-radius);
  box-shadow: var(--gtr-shadow);
  max-width: 260px;
}
/* hide unused elements — these are never rendered in other styles */

.gtr-flag-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid transparent;
  border-radius: var(--gtr-rsm);
  background: none;
  cursor: pointer;
  transition: background var(--gtr-t), border-color var(--gtr-t), transform var(--gtr-t);
  padding: 4px;
  gap: 2px;
}
.gtr-flag-btn:hover  { background: var(--gtr-bg-hover); border-color: var(--gtr-border); transform:scale(1.08); }
.gtr-flag-btn:focus-visible { outline:2px solid var(--gtr-active-c); outline-offset:1px; }
.gtr-flag-btn.gtr-active { background:var(--gtr-active-bg); border-color:var(--gtr-active-c); }

.gtr-flag-emoji { font-size:20px; line-height:1; }
.gtr-flag-code  { font-size:8px; font-weight:700; color:var(--gtr-text2); letter-spacing:.03em; }

/* =================================================================
   STYLE 3: SIDEBAR TAB
   ================================================================= */
/* flag-grid not rendered in sidebar-tab style (PHP outputs only what's needed) */

.gtr-tab-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  padding: 14px 0;
  background: var(--gtr-btn-bg);
  color: var(--gtr-btn-txt);
  border: none;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--gtr-font);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .05em;
  transition: background var(--gtr-t), width var(--gtr-t);
  box-shadow: -2px 0 12px rgba(0,0,0,.15);
  outline: none;
}
.gtr-tab-handle svg { width:18px; height:18px; flex-shrink:0; writing-mode:horizontal-tb; }
.gtr-tab-handle:hover  { background:var(--gtr-btn-hover); }
.gtr-tab-handle:focus-visible { outline:3px solid rgba(255,255,255,.5); }

/* Sidebar tab widget is always right-edge or left-edge */
.gtr-style-sidebar-tab.gtr-floating.gtr-pos-bottom-right,
.gtr-style-sidebar-tab.gtr-floating.gtr-pos-top-right {
  right: 0 !important; bottom: 40% !important; top: auto !important;
  display: flex; align-items: center;
}
.gtr-style-sidebar-tab.gtr-floating.gtr-pos-bottom-left,
.gtr-style-sidebar-tab.gtr-floating.gtr-pos-top-left {
  left: 0 !important; bottom: 40% !important; top: auto !important;
  display: flex; align-items: center; flex-direction: row-reverse;
}
.gtr-style-sidebar-tab.gtr-floating.gtr-pos-bottom-left .gtr-tab-handle,
.gtr-style-sidebar-tab.gtr-floating.gtr-pos-top-left    .gtr-tab-handle {
  border-radius: 0 10px 10px 0;
  box-shadow: 2px 0 12px rgba(0,0,0,.15);
}

/* Sidebar list panel */
.gtr-style-sidebar-tab .gtr-list {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  max-height: 70vh;
}
.gtr-style-sidebar-tab.gtr-floating.gtr-pos-bottom-left .gtr-list,
.gtr-style-sidebar-tab.gtr-floating.gtr-pos-top-left    .gtr-list {
  right: auto; left: 44px;
}

/* =================================================================
   DROPDOWN LIST  (shared by pill, text-only, sidebar-tab)
   ================================================================= */
.gtr-list {
  position: absolute;
  background: var(--gtr-bg);
  border: 1.5px solid var(--gtr-border);
  border-radius: var(--gtr-radius);
  box-shadow: var(--gtr-shadow);
  padding: 6px;
  margin: 0;
  list-style: none;
  min-width: 210px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: var(--gtr-z);
  animation: gtrDrop .18s ease;
  transform-origin: top right;
  scrollbar-width: thin;
  scrollbar-color: var(--gtr-border) transparent;
}
.gtr-list::-webkit-scrollbar       { width:5px; }
.gtr-list::-webkit-scrollbar-track { background:transparent; }
.gtr-list::-webkit-scrollbar-thumb { background:var(--gtr-border); border-radius:4px; }

/* Position relative to button */
.gtr-pos-bottom-right .gtr-list,
.gtr-pos-bottom-left  .gtr-list { bottom:calc(100% + 8px); }
.gtr-pos-top-right    .gtr-list,
.gtr-pos-top-left     .gtr-list { top:calc(100% + 8px); }
.gtr-pos-bottom-right .gtr-list,
.gtr-pos-top-right    .gtr-list { right:0; transform-origin:bottom right; }
.gtr-pos-bottom-left  .gtr-list,
.gtr-pos-top-left     .gtr-list { left:0;  transform-origin:bottom left; }
.gtr-inline .gtr-list            { top:calc(100% + 6px); left:0; transform-origin:top left; }

@keyframes gtrDrop {
  from { opacity:0; transform:scale(.96) translateY(4px); }
  to   { opacity:1; transform:scale(1)   translateY(0);   }
}

.gtr-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--gtr-rsm);
  cursor: pointer;
  color: var(--gtr-text);
  transition: background var(--gtr-t), color var(--gtr-t);
  font-size: 13px;
}
.gtr-list li:hover,
.gtr-list li:focus  { background:var(--gtr-bg-hover); outline:none; }
.gtr-list li.gtr-active { background:var(--gtr-active-bg); color:var(--gtr-active-c); font-weight:600; }

.gtr-flag     { font-size:16px; line-height:1; flex-shrink:0; }
.gtr-lang-name{ flex:1; }
.gtr-rtl-tag  {
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gtr-text2); background:var(--gtr-bg2); border:1px solid var(--gtr-border);
  border-radius:4px; padding:1px 5px; flex-shrink:0;
}

/* =================================================================
   COMPACT MOBILE  (icon-only when < 480px)
   ================================================================= */
.gtr-compact .gtr-label  { display:none !important; }
.gtr-compact .gtr-chevron{ display:none !important; }
.gtr-compact .gtr-btn    { padding:10px 12px !important; border-radius:50% !important; }

/* =================================================================
   PAGE TRANSITION OVERLAYS
   ================================================================= */
#gtr-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0;
}

/* Fade */
.gtr-trans-fade {
  background: #fff;
  transition: opacity .3s ease;
}
.gtr-trans-fade.gtr-trans-active { opacity: 1; }

/* Slide down */
.gtr-trans-slide {
  background: #fff;
  transform: translateY(-100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .32s ease;
}
.gtr-trans-slide.gtr-trans-active { transform:translateY(0); opacity:1; }

/* Blur out */
.gtr-trans-blur {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: rgba(255,255,255,0);
  transition: backdrop-filter .4s ease, background .4s ease;
}
.gtr-trans-blur.gtr-trans-active {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,.6);
}

/* Dark theme transitions */
.gtr-theme-dark #gtr-transition-overlay,
.gtr-theme-auto #gtr-transition-overlay {
  --gtr-trans-bg: #1e2235;
}
@media (prefers-color-scheme:dark) {
  #gtr-transition-overlay { --gtr-trans-bg:#1e2235; }
}
.gtr-trans-fade  { background:var(--gtr-trans-bg, #fff); }
.gtr-trans-slide { background:var(--gtr-trans-bg, #fff); }

/* =================================================================
   RTL / LTR BODY
   ================================================================= */
body.gtr-rtl { direction:rtl; text-align:right; }
body.gtr-ltr { direction:ltr; text-align:left; }

/* =================================================================
   HIDE GOOGLE'S OWN UI
   ================================================================= */
body > .skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame { display:none !important; }
body { top:0 !important; }
#gtr-gt-hidden { display:none !important; width:0 !important; height:0 !important; }

/* =================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================= */
@media (max-width:440px) {
  .gtr-floating.gtr-pos-bottom-right,
  .gtr-floating.gtr-pos-top-right    { right:12px; }
  .gtr-floating.gtr-pos-bottom-left,
  .gtr-floating.gtr-pos-top-left     { left:12px; }
  .gtr-floating.gtr-pos-bottom-right,
  .gtr-floating.gtr-pos-bottom-left  { bottom:12px; }
}