/* ================================================================
 * Yalla Market Landing — Navbar, Language Switcher, Mobile Menu
 * ================================================================ */

/* ── Navbar ── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(0,0,0,.05);
  transition:box-shadow .3s;
}
.navbar.scrolled { box-shadow:0 2px 28px rgba(0,0,0,.09); }
.navbar-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:64px; gap:12px;
}
.logo-link { display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; flex-shrink:0; }
.logo-icon { width:36px; height:36px; border-radius:10px; }
.logo-text { background:linear-gradient(135deg,var(--primary),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* Desktop nav links */
.nav-links { display:flex; gap:24px; align-items:center; }
.nav-links a { font-size:14px; font-weight:500; color:#555; transition:color .2s; white-space:nowrap; }
.nav-links a:hover { color:var(--primary); }
.nav-cta {
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff !important; -webkit-text-fill-color:#fff;
  padding:9px 20px; border-radius:11px; font-weight:700; font-size:14px;
  transition:transform .2s,box-shadow .2s;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(255,106,0,.3); }

/* ── Language Switcher — Premium ── */
.lang-switcher { position:relative; display:flex; align-items:center; }
.lang-btn {
  display:flex; align-items:center; gap:6px; padding:8px 12px;
  border:1.5px solid rgba(0,0,0,.08); border-radius:12px;
  background:rgba(255,255,255,.8); backdrop-filter:blur(8px);
  cursor:pointer; font-size:13px; font-weight:600; color:#555;
  transition:all .2s; white-space:nowrap;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.lang-btn:hover {
  border-color:var(--primary); color:var(--primary);
  background:rgba(255,106,0,.04);
  box-shadow:0 2px 14px rgba(255,106,0,.14);
}
.lang-globe { width:15px; height:15px; color:currentColor; opacity:.7; }
.lang-flag { font-size:20px; line-height:1; }
.lang-code { display:none; }
.lang-chevron { width:13px; height:13px; color:currentColor; transition:transform .25s ease; }
.lang-switcher.open .lang-chevron { transform:rotate(180deg); }

.lang-dropdown {
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:192px; background:#fff; border-radius:18px; padding:8px;
  box-shadow:0 16px 56px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05);
  opacity:0; pointer-events:none;
  transform:translateY(-8px) scale(.96);
  transition:opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1);
  transform-origin:top right; z-index:200;
}
.lang-switcher.open .lang-dropdown { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }

.lang-option {
  display:flex; align-items:center; gap:10px; padding:11px 12px;
  border-radius:11px; cursor:pointer; transition:background .15s;
  border:none; background:none; width:100%; text-align:start;
}
.lang-option:hover  { background:rgba(255,106,0,.05); }
.lang-option.active { background:rgba(255,106,0,.09); }

.lang-opt-flag   { font-size:20px; line-height:1; }
.lang-opt-info   { flex:1; }
.lang-opt-name   { font-size:14px; font-weight:700; color:#1a1a2e; line-height:1.3; display:block; }
.lang-opt-native { font-size:11px; color:#999; display:block; }
.lang-opt-check  {
  width:18px; height:18px; color:var(--primary); opacity:0;
  flex-shrink:0; transition:opacity .15s;
}
.lang-option.active .lang-opt-check { opacity:1; }

/* ── Mobile Menu Toggle ── */
.mobile-menu-toggle {
  display:none; background:none; border:none; cursor:pointer;
  padding:8px; margin-right:-8px; flex-shrink:0;
  border-radius:10px; transition:background .2s;
}
.mobile-menu-toggle:hover { background:rgba(0,0,0,.04); }
.hamburger { display:flex; flex-direction:column; justify-content:center; gap:5px; width:22px; height:20px; }
.hamburger span { height:2px; background:#1a1a2e; border-radius:2px; transition:all .3s; display:block; }
.hamburger span:nth-child(2) { width:75%; }

/* ── Mobile Menu ── */
.mobile-menu {
  position:fixed; top:64px; left:0; right:0; background:#fff;
  border-bottom:1px solid rgba(0,0,0,.05);
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transform:translateY(-10px);
  transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 12px 40px rgba(0,0,0,.1); z-index:99;
  max-height:calc(100svh - 64px); overflow-y:auto;
}
.mobile-menu.active { opacity:1; pointer-events:auto; transform:translateY(0); }

.mobile-nav-links { padding:8px 20px 4px; }
.mobile-nav-links a {
  display:flex; align-items:center; font-size:16px; font-weight:600;
  color:#1a1a2e; padding:15px 4px; border-bottom:1px solid #f3f4f6;
  transition:color .2s;
}
.mobile-nav-links a:last-child { border-bottom:none; }
.mobile-nav-links a:hover { color:var(--primary); }
.mobile-cta {
  display:block; margin:12px 20px 0;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff !important; text-align:center; border-radius:14px;
  padding:16px !important; font-size:16px !important; font-weight:700 !important;
  box-shadow:0 4px 16px rgba(255,106,0,.3);
}

/* Mobile Language Section — properly styled grid */
.mobile-lang-section {
  border-top:1px solid #f3f4f6; padding:16px 20px 22px; margin-top:4px;
}
.mobile-lang-label {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  color:#aaa; margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.mobile-lang-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mobile-lang-opt {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:13px 8px; border:1.5px solid #e5e7eb; border-radius:14px;
  background:#fafafa; cursor:pointer; transition:all .2s;
}
.mobile-lang-opt .mlang-flag { font-size:26px; line-height:1; }
.mobile-lang-opt .mlang-name { font-size:11px; font-weight:700; color:#555; line-height:1; }
.mobile-lang-opt.active {
  border-color:var(--primary); background:rgba(255,106,0,.06);
}
.mobile-lang-opt.active .mlang-name { color:var(--primary); }
.mobile-lang-opt:hover:not(.active) { border-color:#d1d5db; background:#f5f5f5; }