/* ==========================================================================
   VI-EN Translator — Public Frontend Styles
   ========================================================================== */

/* ── CSS Variables (overridden by wp_add_inline_style) ─────────────────── */
:root {
  --vien-primary:    #1a73e8;
  --vien-bg:         #ffffff;
  --vien-text:       #333333;
  --vien-radius:     8px;
  --vien-font-size:  14px;
  --vien-shadow:     0 2px 12px rgba(0,0,0,0.12);
  --vien-transition: 0.25s ease;
}

/* ── Fixed Wrapper Positions ─────────────────────────────────────────────── */
.vien-fixed-wrapper {
  position: fixed;
  z-index: 99999;
}
.vien-pos-top-right    { top: 18px;    right: 18px; }
.vien-pos-top-left     { top: 18px;    left: 18px; }
.vien-pos-bottom-right { bottom: 18px; right: 18px; }
.vien-pos-bottom-left  { bottom: 18px; left: 18px; }
.vien-pos-floating {
  bottom: 80px;
  right:  24px;
  animation: vien-float 3s ease-in-out infinite;
}
@keyframes vien-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── Base Switcher ────────────────────────────────────────────────────────── */
.vien-switcher {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  background:      var(--vien-bg);
  box-shadow:      var(--vien-shadow);
  border-radius:   var(--vien-radius);
  padding:         4px;
  font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:       var(--vien-font-size);
  color:           var(--vien-text);
  backdrop-filter: blur(8px);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.vien-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  padding:        6px 12px;
  border:         none;
  border-radius:  calc(var(--vien-radius) - 2px);
  background:     transparent;
  color:          var(--vien-text);
  font-size:      var(--vien-font-size);
  font-weight:    500;
  cursor:         pointer;
  transition:     background var(--vien-transition), color var(--vien-transition), transform var(--vien-transition);
  white-space:    nowrap;
  line-height:    1;
}
.vien-btn:hover {
  background: rgba(0,0,0,0.06);
  transform:  translateY(-1px);
}
.vien-btn.active,
.vien-btn[aria-pressed="true"] {
  background: var(--vien-primary);
  color:      #fff;
  box-shadow: 0 2px 8px rgba(26,115,232,0.35);
}
.vien-btn .vien-flag { font-size: 1.2em; line-height: 1; }
.vien-divider {
  width:   1px;
  height:  20px;
  background: rgba(0,0,0,0.12);
  margin: 0 2px;
}

/* ── Style: Flags only ───────────────────────────────────────────────────── */
.vien-style-flags .vien-btn { padding: 6px 10px; }

/* ── Style: Text only ───────────────────────────────────────────────────── */
.vien-style-text .vien-flag { display: none; }

/* ── Style: Toggle ───────────────────────────────────────────────────────── */
.vien-style-toggle {
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.vien-toggle-track {
  position:      relative;
  width:         46px;
  height:        24px;
  background:    rgba(0,0,0,0.15);
  border-radius: 12px;
  cursor:        pointer;
  transition:    background var(--vien-transition);
  flex-shrink:   0;
}
.vien-toggle-track.is-en { background: var(--vien-primary); }
.vien-toggle-thumb {
  position:      absolute;
  top:           3px;
  left:          3px;
  width:         18px;
  height:        18px;
  background:    #fff;
  border-radius: 50%;
  transition:    transform var(--vien-transition);
  box-shadow:    0 1px 4px rgba(0,0,0,0.2);
}
.vien-toggle-track.is-en .vien-toggle-thumb { transform: translateX(22px); }
.vien-style-toggle .vien-btn {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vien-text) !important;
  opacity: 0.55;
  padding: 0;
}
.vien-style-toggle .vien-btn.active  { opacity: 1; }

/* ── Style: Dropdown ─────────────────────────────────────────────────────── */
.vien-style-dropdown { position: relative; padding: 0; }
.vien-dropdown-trigger {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  padding:     8px 14px;
  border:      none;
  border-radius: var(--vien-radius);
  background:  var(--vien-bg);
  color:       var(--vien-text);
  font-size:   var(--vien-font-size);
  font-weight: 500;
  cursor:      pointer;
  width:       100%;
  transition:  background var(--vien-transition);
}
.vien-dropdown-trigger:hover { background: rgba(0,0,0,0.04); }
.vien-arrow { transition: transform var(--vien-transition); margin-left: auto; }
.vien-dropdown-trigger[aria-expanded="true"] .vien-arrow { transform: rotate(180deg); }
.vien-dropdown-menu {
  position:     absolute;
  top:          calc(100% + 6px);
  left:         0;
  min-width:    150px;
  background:   var(--vien-bg);
  border-radius: var(--vien-radius);
  box-shadow:   var(--vien-shadow);
  list-style:   none;
  margin:       0;
  padding:      4px;
  opacity:      0;
  visibility:   hidden;
  transform:    translateY(-8px);
  transition:   opacity var(--vien-transition), transform var(--vien-transition), visibility var(--vien-transition);
  z-index:      9999;
}
.vien-dropdown-menu.open {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}
.vien-option {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       8px 12px;
  border-radius: calc(var(--vien-radius) - 2px);
  cursor:        pointer;
  font-size:     var(--vien-font-size);
  transition:    background var(--vien-transition);
}
.vien-option:hover  { background: rgba(0,0,0,0.05); }
.vien-option.active { background: var(--vien-primary); color: #fff; }

/* ── Style: Globe (🌐 + current language name) ───────────────────────────── */
.vien-style-globe { position: relative; padding: 0; background: transparent; box-shadow: none; }
.vien-style-globe .vien-dropdown-trigger {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  padding:     6px 10px;
  background:  transparent;
  border:      none;
  border-radius: var(--vien-radius);
  color:       var(--vien-text);
  font-size:   var(--vien-font-size);
  font-weight: 600;
  cursor:      pointer;
  white-space: nowrap;
  transition:  background var(--vien-transition);
  box-shadow:  none;
}
.vien-style-globe .vien-dropdown-trigger:hover { background: rgba(0,0,0,0.05); }
.vien-globe-icon { font-size: 1.1em; line-height: 1; }
.vien-current-label { font-weight: 600; }
.vien-style-globe .vien-arrow {
  font-size: 0.8em;
  margin-left: 1px;
  transition: transform var(--vien-transition);
}
.vien-style-globe .vien-dropdown-trigger[aria-expanded="true"] .vien-arrow { transform: rotate(180deg); }
/* Reuse .vien-dropdown-menu – just align right for globe */
.vien-style-globe .vien-dropdown-menu { left: auto; right: 0; min-width: 140px; }

/* ── Language Switch Transition ─────────────────────────────────────────── */
.vien-switching {
  opacity:    0;
  transition: opacity 0.2s ease;
}
.vien-switched {
  opacity:    1;
  transition: opacity 0.3s ease;
}

/* ── Responsiveness ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .vien-btn .vien-label { display: none; }
  .vien-btn { padding: 6px 8px; }
}

/* ── Hide fixed button on mobile (use in-menu switcher instead) ───────────── */
@media (max-width: 767px) {
  .vien-fixed-wrapper { display: none !important; }

  /* Đảm bảo trigger có đủ vùng chạm */
  .vien-dropdown-trigger {
    min-height: 44px;
    min-width: 44px;
  }

  /* Dropdown được JS set top/left khi mở trên mobile */
  /* top:60px là fallback; JS touchend override bằng BoundingClientRect chính xác */
  .vien-style-dropdown .vien-dropdown-menu.open,
  .vien-style-globe .vien-dropdown-menu.open {
    position: fixed;
    top: 60px;   /* fallback nếu JS chưa kịp set */
    left: auto;
    right: 10px;
    z-index: 999999;
    transform: none;  /* reset transition transform để không bị offset */
  }
}