/* ========================================================================
FILE : /assets/01-mstr-tmplet/02-jzn-topbar/css/jzn-lang.css
PURPOSE : LANGUAGE SWITCHER UI - Full 13-Language Support [jzn]
VERSION: v1.0 - DATE CREATED: 2026-02-21
VERSION: v2.0 - DATE MODIFIED: 2026-04-08 - GTranslate (Free) - Implementation
VERSION: v3.0 - DATE MODIFIED: 2026-04-09 - Merged Legacy with Touch & Hidden Shield
VERSION: v4.0 - DATE MODIFIED: 2026-04-09 - Final Scroll & Toggle Conflict Fix
========================================================================== */

:root {
  /* --- BRAT TWEAKS: Language Dropdown --- */
  --jzn-lang-max-h: 400px; /* <-- Brat Tweak: Max height before scroll */
  --jzn-lang-bg: rgba(15, 23, 42, 0.98); /* Opaque Dark Background */
  --jzn-lang-text: #ffffff; /* Pure White Text for Pristine Look */
  --jzn-scrollbar-w: 5px; /* <-- Brat Tweak: Scrollbar Width */
  --jzn-scroll-thumb: rgba(255, 255, 255, 0.2); /* <-- Brat Tweak: Scrollbar Color */
}

/* ========================================================================
   SECTION 1: SHARED DROPDOWN ARCHITECTURE
   ======================================================================== */
.jzn-desktop-dropdown-list,
.jzn-mobile-dropdown-list {
  position: absolute;
  top: 120%;
  right: 0;
  background: var(--jzn-lang-bg);
  border: 1px solid var(--jzn-glass-border);
  border-radius: 8px;
  padding: 8px 0;

  /* --- DIMENSIONS & DYNAMICS --- */
  width: max-content;
  min-width: 180px;
  max-width: 280px;
  
  /* --- CRITICAL: SCROLL RECOVERY --- */
  max-height: var(--jzn-lang-max-h); 
  overflow-y: auto; 
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scroll for Mobile */
  
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: var(--z-dropdowns); 
  backdrop-filter: blur(20px);

  /* --- ANIMATION ENGINE --- */
  display: none; /* <-- Hidden by default, JS will add .jzn-active */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toggle Logic Hook - Only show when JS class is present */
.jzn-desktop-dropdown-list.jzn-active,
.jzn-mobile-dropdown-list.jzn-active {
  display: block !important; /* Force layout */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ========================================================================
   SECTION 2: GLOBAL SCROLLBAR (TopBar Dropdown Scope)
   ======================================================================== */
/* Consolidated Webkit selectors to prevent conflicts */
.jzn-desktop-dropdown-list::-webkit-scrollbar,
.jzn-mobile-dropdown-list::-webkit-scrollbar {
  width: var(--jzn-scrollbar-w) !important;
  display: block !important;
}

.jzn-desktop-dropdown-list::-webkit-scrollbar-track,
.jzn-mobile-dropdown-list::-webkit-scrollbar-track {
  background: transparent;
}

.jzn-desktop-dropdown-list::-webkit-scrollbar-thumb,
.jzn-mobile-dropdown-list::-webkit-scrollbar-thumb {
  background: var(--jzn-scroll-thumb) !important; 
  border-radius: 10px;
}

/* ========================================================================
   SECTION 3: LANGUAGE MENU ITEMS
   ======================================================================== */
.jzn-lang-item {
  padding: 12px 20px;
  color: var(--jzn-lang-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--jzn-font-ui);
  font-size: 0.85rem; 
  letter-spacing: 0.5px;
  white-space: nowrap; 
}

.jzn-lang-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--jzn-hover);
  padding-left: 25px;
}

/* ========================================================================
   SECTION 4: GTRANSLATE SAFETY SHIELD
   ======================================================================== */
/* --- SECTION 4: GTRANSLATE SAFETY SHIELD --- */
#desktopLangDropdown, #mobileLangDropdown {
  display: none; /* Controlled by .active class */
  overflow: hidden !important; /* Forces the scroll-zone inside to take over */
  max-height: var(--jzn-lang-max-h) !important;
}

#desktopLangDropdown.active, #mobileLangDropdown.active {
  display: flex !important; /* Using Flex to support the inner scroll-zone */
}

/* Ensure the Inner Zone generated by JS is clean */
.jzn-dropdown-scroll-zone::-webkit-scrollbar {
  width: var(--jzn-scrollbar-w);
}
.jzn-dropdown-scroll-zone::-webkit-scrollbar-thumb {
  background: var(--jzn-scroll-thumb);
  border-radius: 10px;
}

/* ========================================================================
   SECTION 5: GTRANSLATE INTERNAL HIDER
   ======================================================================== */
.jzn-gtranslate-hidden, 
#gt_holder, 
.gtranslate_wrapper {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -9999px !important; /* Pushes the "thumb" off-screen */
}