/* Flow Elegant Translate — compact, Flow-friendly (refined) */
.fet{
  --fet-accent: var(--accent, #27b6a4);
  --fet-accent2: var(--accent2, #29c29b);
  --fet-accent-dark: var(--accentDark, #005b50);
  --fet-z: 9999;

  --fet-radius-pill: 999px;
  --fet-radius: 14px;
  --fet-radius-sm: 10px;

  --fet-shadow-btn: 0 10px 24px rgba(124,96,67,.14);
  --fet-shadow-panel: 0 18px 40px rgba(0,0,0,.22);
  --fet-btn-border: rgba(113,87,56,.12);
  --fet-btn-bg: rgba(255,255,255,.92);
  --fet-btn-color: #18212e;
  --fet-btn-hover-ring: rgba(39,182,164,.14);
  --fet-panel-border: rgba(0,0,0,.10);
  --fet-panel-bg: rgba(255,255,255,.96);
  --fet-panel-color: #111;
  --fet-label-color: currentColor;
  --fet-select-border: rgba(0,0,0,.12);
  --fet-select-bg: #fff;
  --fet-select-color: #111;
  --fet-note-color: rgba(17,17,17,.78);
  --fet-close-border: rgba(0,0,0,.10);
  --fet-close-bg: rgba(255,255,255,.92);
  --fet-close-bg-hover: rgba(255,255,255,1);
  --fet-close-color: rgba(0,0,0,.78);
  --fet-close-color-hover: rgba(0,0,0,.92);
  --fet-focus-ring: rgba(39,182,164,.65);
  --fet-focus-ring-soft: rgba(39,182,164,.45);
  --fet-shimmer-strong: rgba(255,255,255,.92);
  --fet-shimmer-soft: rgba(255,255,255,.32);
  --fet-icon-color: rgba(0,0,0,.75);

  position: fixed;
  z-index: var(--fet-z);
  font: inherit;
  color-scheme: light;
}

.fet[data-fet-theme="dark"],
html[data-theme="dark"] .fet,
body[data-theme="dark"] .fet,
body.dark-mode .fet,
body.dark .fet,
body.theme-dark .fet,
body.blangkon-makeover .fet{
  --fet-shadow-btn: 0 10px 24px rgba(0,0,0,.38);
  --fet-shadow-panel: 0 18px 44px rgba(0,0,0,.46);
  --fet-btn-border: rgba(255,255,255,.12);
  --fet-btn-bg: rgba(9,15,22,.82);
  --fet-btn-color: #f3f8ff;
  --fet-btn-hover-ring: rgba(39,182,164,.18);
  --fet-panel-border: rgba(255,255,255,.10);
  --fet-panel-bg: rgba(10,17,24,.94);
  --fet-panel-color: #eef4ff;
  --fet-label-color: #f5f9ff;
  --fet-select-border: rgba(255,255,255,.12);
  --fet-select-bg: rgba(255,255,255,.06);
  --fet-select-color: #eef4ff;
  --fet-note-color: rgba(238,244,255,.72);
  --fet-close-border: rgba(255,255,255,.10);
  --fet-close-bg: rgba(255,255,255,.06);
  --fet-close-bg-hover: rgba(255,255,255,.12);
  --fet-close-color: rgba(238,244,255,.86);
  --fet-close-color-hover: #fff;
  --fet-focus-ring: rgba(39,182,164,.72);
  --fet-focus-ring-soft: rgba(39,182,164,.55);
  --fet-shimmer-strong: rgba(255,255,255,.42);
  --fet-shimmer-soft: rgba(255,255,255,.10);
  --fet-icon-color: rgba(0,0,0,.84);
  color-scheme: dark;
}

.fet, .fet *{ box-sizing: border-box; }

/* Allow clicks through container except on interactive elements */
.fet{ pointer-events:none; }
.fet__btn, .fet__panel{ pointer-events:auto; }

/* Positions */
.fet-pos-bottom_right{ right: 14px; bottom: 14px; }
.fet-pos-bottom_left{ left: 14px; bottom: 14px; }
.fet-pos-top_right{ right: 14px; top: 14px; }
.fet-pos-top_left{ left: 14px; top: 14px; }
.fet-pos-inline{ position: relative; z-index: 1; pointer-events:auto; }

/* Button */
.fet__btn{
  appearance: none;
  border: 1px solid var(--fet-btn-border);
  background: var(--fet-btn-bg);
  color: var(--fet-btn-color);

  border-radius: var(--fet-radius-pill);
  padding: 10px 12px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  cursor: pointer;
  position: relative;
  overflow: hidden;

  box-shadow: var(--fet-shadow-btn);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* Mobile/touch safety */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color: transparent;

  transition: box-shadow .18s ease, transform .18s ease;
}

.fet__btn:focus{
  outline: 2px solid var(--fet-focus-ring);
  outline-offset: 2px;
}

.fet__icon{
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--fet-radius-pill);
  background: linear-gradient(135deg, var(--fet-accent), var(--fet-accent2));
  color: var(--fet-icon-color);
}

.fet__text{
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Panel */
.fet__panel{
  margin-top: 10px;
  width: min(320px, calc(100vw - 28px));
  border-radius: var(--fet-radius);
  border: 1px solid var(--fet-panel-border);
  background: var(--fet-panel-bg);
  color: var(--fet-panel-color);
  box-shadow: var(--fet-shadow-panel);
  padding: 12px;

  position: relative;
}

/* Anchor panel to button depending on position */
.fet-pos-bottom_right .fet__panel,
.fet-pos-bottom_left .fet__panel{
  position: absolute;
  bottom: 58px;
}
.fet-pos-bottom_right .fet__panel{ right: 0; }
.fet-pos-bottom_left .fet__panel{ left: 0; }

.fet-pos-top_right .fet__panel,
.fet-pos-top_left .fet__panel{
  position: absolute;
  top: 58px;
}
.fet-pos-top_right .fet__panel{ right: 0; }
.fet-pos-top_left .fet__panel{ left: 0; }

/* Form bits */
.fet__row{ display:flex; flex-direction:column; gap:6px; }
.fet__label{ font-size: 12px; font-weight: 600; color: var(--fet-label-color); }

.fet__select{
  width: 100%;
  border-radius: var(--fet-radius-sm);
  border: 1px solid var(--fet-select-border);
  padding: 10px 12px;
  font: inherit;
  background: var(--fet-select-bg);
  color: var(--fet-select-color);
}

.fet__select:focus{
  outline: 2px solid var(--fet-focus-ring-soft);
  outline-offset: 2px;
}

.fet__note{
  margin-top: 10px;
  font-size: 11px;
  color: var(--fet-note-color);
}

.fet__noscript{
  margin-top: 10px;
  font-size: 12px;
  background: var(--fet-panel-bg);
  border: 1px solid var(--fet-panel-border);
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--fet-panel-color);
}

/* Close (X) button */
.fet__close{
  appearance: none;
  border: 1px solid var(--fet-close-border);
  background: var(--fet-close-bg);
  color: var(--fet-close-color);

  position: absolute;
  top: 8px;
  right: 8px;

  width: 32px;
  height: 32px;
  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  line-height: 1;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fet__close:hover{
  background: var(--fet-close-bg-hover);
  color: var(--fet-close-color-hover);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

.fet__close:focus{
  outline: 2px solid var(--fet-focus-ring);
  outline-offset: 2px;
}

/* Hide Google Translate tooltip/popups */
#goog-gt-tt, .goog-te-balloon-frame{ display:none !important; }
.goog-text-highlight{ background:inherit !important; box-shadow:none !important; }

/* Hide Google default dropdown UI (keep only custom FET select) */
.fet .fet__google{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.fet .fet__google .goog-te-gadget,
.fet .fet__google .goog-te-gadget-simple,
.fet .fet__google select.goog-te-combo{ display:none !important; }
.fet .fet__google .goog-logo-link,
.fet .fet__google .goog-te-gadget span{ display:none !important; }

/* --- Glossy attention (shimmer + pulse) --- */
.fet__btn::before{
  content:"";
  position:absolute;
  top:-55%;
  left:-75%;
  width:70%;
  height:220%;
  transform: rotate(18deg);
  pointer-events:none;
  opacity:.42;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--fet-shimmer-strong) 28%,
    var(--fet-shimmer-soft) 52%,
    transparent 100%
  );
  animation: fetShimmer 2.6s ease-in-out infinite;
}
.fet__btn::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.30), transparent 55%);
  opacity:.36;
}

@keyframes fetShimmer{
  0%   { transform: translateX(-140%) rotate(18deg); opacity: .00; }
  12%  { opacity: .42; }
  48%  { opacity: .42; }
  65%  { opacity: .00; }
  100% { transform: translateX(340%) rotate(18deg); opacity: .00; }
}

.fet__btn{
  animation: fetPulse 5.8s ease-in-out infinite;
}
@keyframes fetPulse{
  0%, 72%, 100% { box-shadow: var(--fet-shadow-btn), 0 0 0 0 rgba(39,182,164,0); }
  82%          { box-shadow: var(--fet-shadow-btn), 0 0 0 12px rgba(39,182,164,.14); }
  90%          { box-shadow: var(--fet-shadow-btn), 0 0 0 0 rgba(39,182,164,0); }
}

.fet__btn:hover{
  box-shadow: 0 12px 26px rgba(0,0,0,.20), 0 0 0 10px var(--fet-btn-hover-ring);
}
.fet__btn:hover::before,
.fet__btn:focus::before{ opacity:.55; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .fet__btn{ animation:none !important; }
  .fet__btn::before{ animation:none !important; opacity:.18; }
}

/* Mobile: keep small and unobtrusive */
@media (max-width: 480px){
  .fet-pos-bottom_right{ right: 10px; bottom: 10px; }
  .fet-pos-bottom_left{ left: 10px; bottom: 10px; }
  .fet__btn{ padding: 10px; }
  .fet__text{ display: none; } /* icon-only on small screens */
}

.fet__panel{ padding-top: 14px; }
.fet__label{ padding-right: 44px; } /* memberi ruang agar judul tidak “berkompetisi” dengan tombol X */

/* Pastikan stacking context panel rapi */
.fet__panel{
  position: relative;
  isolation: isolate; /* penting: z-index anak jadi konsisten di dalam panel */
}

/* Tombol close harus selalu di atas ring fokus */
.fet__close{
  z-index: 10;
}

/* Select dan konten form berada di bawah tombol close */
.fet__row{
  position: relative;
  z-index: 1;
}

/* GANTI focus ring: jangan pakai outline, pakai box-shadow */
.fet__select:focus{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(39,182,164,.45);
}

.fet__panel{ padding-top: 14px; }