/**
 * Maison Translate - Frontend Styles
 * Package: Maison Translate
 * Aesthetic: Maison De Suits Header Style (VN | EN)
 */

/* -------------------------------------------------------------
 * 1. Google Translate Silent Mode & Layout Fixes
 * ------------------------------------------------------------- */
body > .skiptranslate,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
iframe.skiptranslate,
iframe[id*=":1.container"],
iframe[id*=":2.container"],
iframe[class*="goog-te-banner-frame"],
[class*="VIpgJd-ZVi9od"],
[class*="VIpgJd-yAWNEb"],
.VIpgJd-ZVi9od-OR9BId-OStzg-Omikbe,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-yAWNEb-L7lbkb,
#google_translate_element,
#goog-gt-tt,
#goog-gt-vt,
.goog-te-balloon-frame,
.goog-te-menu-frame,
.goog-te-menu2,
.goog-tooltip,
.goog-tooltip:hover,
[id*="goog-gt-"],
.goog-logo-link,
.goog-te-gadget,
.goog-te-gadget span,
.goog-te-spinner-pos {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

body {
  top: 0px !important;
  position: static !important;
}

.goog-text-highlight {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* -------------------------------------------------------------
 * 2. Maison Language Switcher - Header & Mobile Drawer Styles
 * ------------------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  user-select: none;
  border-left: 1px solid var(--color-surface-container-highest, #e2e8f0);
  padding-left: 12px;
}

.lang-switch .lang-item {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  color: var(--color-on-surface-variant, #64748b);
  transition: color 0.2s ease;
  line-height: 1;
}

.lang-switch .lang-item.active,
.lang-switch .lang-item:hover {
  color: var(--color-primary, #162032);
  font-weight: 700;
}

.lang-switch .lang-sep {
  color: #bbb;
  font-size: 11px;
  user-select: none;
}

/* Mobile Drawer Language Pill */
.mobile-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  font-size: 11px;
  color: #d1cfc7;
  border-radius: 2px;
}

.mobile-lang-pill .lang-item {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  color: #d1cfc7;
  line-height: 1;
  transition: color 0.2s ease;
}

.mobile-lang-pill .lang-item.active,
.mobile-lang-pill .lang-item:hover {
  color: #ffffff;
  font-weight: 700;
}

.mobile-lang-pill .lang-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  user-select: none;
}

/* -------------------------------------------------------------
 * 3. Optional Floating Switcher (Header Style Inset)
 * ------------------------------------------------------------- */
.maison-translator-floating {
  position: fixed;
  z-index: 99998;
  padding: 6px 12px;
  background: rgba(22, 32, 50, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
}

.maison-translator-floating .lang-switch {
  border-left: none;
  padding-left: 0;
}

.maison-translator-floating .lang-item {
  color: #d1cfc7;
}

.maison-translator-floating .lang-item.active,
.maison-translator-floating .lang-item:hover {
  color: #ffffff;
}

.maison-translator-floating.pos-bottom-right {
  bottom: 24px;
  right: 24px;
}

.maison-translator-floating.pos-bottom-left {
  bottom: 24px;
  left: 24px;
}