/* FOX FINANCE — Preloader, naviqasiya paneli, dil dəyişdirici, mobil menyu
   (index.html-dən çıxarılıb; sıra vacibdir — layout.php-dəki yükləmə sırasını dəyişmə) */
/* ============ PRELOADER ============ */
#preloader{
  position:fixed; inset:0; background:var(--ink); z-index:9999;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
#preloader.hide{opacity:0; visibility:hidden;}
.loader-mark{font-family:var(--font-display); font-size:15px; letter-spacing:.3em; color:var(--white); font-weight:600;}
.loader-bar{width:180px; height:2px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden;}
.loader-fill{height:100%; width:0%; background:var(--orange); transition:width .3s ease;}

/* ============ NAVBAR ============ */
#navbar{
  --nav-fg:#FFFFFF;
  --nav-fg-soft:rgba(255,255,255,.72);
  --nav-line:rgba(255,255,255,.14);
  --nav-chip:rgba(255,255,255,.08);
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:16px 0;
  transition: padding .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
#navbar .container{max-width:1480px;}

/* Solid state: on scroll, and on the customer/admin panels (light backgrounds) */
#navbar.scrolled,
body:has(#dashboardPage.active) #navbar,
body:has(#adminPage.active) #navbar,
body:has(#serviceDetailPage.active) #navbar{
  --nav-fg:var(--ink);
  --nav-fg-soft:var(--grey-600);
  --nav-line:rgba(17,17,17,.10);
  --nav-chip:rgba(17,17,17,.04);
  padding:10px 0;
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow:0 1px 0 rgba(17,17,17,.07), 0 10px 30px -22px rgba(17,17,17,.35);
}

.nav-inner{display:flex; align-items:center; gap:28px; min-height:64px;}

/* ---- Logo ---- */
.logo{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:800; letter-spacing:.01em;
  flex-shrink:0;
}
.logo .mark{
  width:44px;height:44px;border-radius:13px;
  background:linear-gradient(145deg,var(--orange),var(--orange-dark));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;
  box-shadow:0 10px 22px -8px rgba(255,107,0,.65);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  flex-shrink:0;
}
.logo:hover .mark{transform:rotate(-10deg) scale(1.06); box-shadow:0 12px 26px -8px rgba(255,107,0,.8);}
.logo span:not(.mark){
  display:flex; flex-direction:column; line-height:1;
  font-size:19px; color:var(--nav-fg); transition:color .4s var(--ease);
}
.logo span:not(.mark) em{
  font-style:normal; color:var(--orange);
  font-size:19px; letter-spacing:.055em; margin-top:4px;
}

/* ---- Links ---- */
.nav-links{display:flex; align-items:center; gap:4px; margin-left:auto;}
.nav-links a{
  position:relative;
  padding:12px 14px 14px;
  font-family:var(--font-body);
  font-size:14.5px; font-weight:500; letter-spacing:-.005em;
  color:var(--nav-fg-soft);
  transition: color .3s var(--ease);
  white-space:nowrap;
}
.nav-links a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  border-radius:2px; background:var(--orange);
  transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{color:var(--nav-fg);}
.nav-links a:hover::after{transform:scaleX(1);}

/* ---- Right cluster ---- */
.nav-right{display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0;}
.nav-right::before{
  content:''; width:1px; height:26px; background:var(--nav-line);
  transition:background .4s var(--ease);
}

/* Language chip — now wired to the AZ/RU i18n system (see LANGUAGE / I18N SYSTEM in JS).
   Click toggles between the two languages; the chip's text/chevron are purely visual. */
.nav-lang{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:100px;
  font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--nav-fg); background:transparent;
  transition:background .3s var(--ease), color .3s var(--ease);
  cursor:pointer; border:none;
}
.nav-lang i.fa-globe{font-size:15px; opacity:.85;}
.nav-lang .nl-caret{font-size:9px; opacity:.7;}
.nav-lang:hover{background:var(--nav-chip); color:var(--orange);}

#navGuest .btn{
  padding:13px 24px; border-radius:100px;
  font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:-.005em;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--orange); color:#fff; border:none;
  box-shadow:0 10px 24px -12px rgba(255,107,0,.9);
}
#navGuest .btn i{font-size:14px;}
#navGuest .btn:hover{background:var(--orange-dark); transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(255,107,0,1);}

#menuToggle{
  display:none; width:46px;height:46px; border-radius:13px;
  align-items:center; justify-content:center;
  font-size:19px; color:var(--nav-fg);
  background:var(--nav-chip); border:1px solid var(--nav-line);
  transition:all .3s var(--ease);
}
#menuToggle:hover{background:var(--orange); border-color:var(--orange); color:#fff;}

/* ---- Profile / account dropdown in navbar ---- */
.nav-profile{position:relative;}
.np-trigger{
  display:flex; align-items:center; gap:10px; padding:6px 16px 6px 6px;
  border-radius:100px; background:var(--nav-chip);
  border:1px solid var(--nav-line); transition:all .3s var(--ease);
}
.np-trigger:hover{background:rgba(255,107,0,.12); border-color:rgba(255,107,0,.45);}
.np-avatar{width:34px;height:34px;border-radius:50%; background:linear-gradient(145deg,var(--orange),var(--orange-dark)); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700; font-size:12.5px; font-family:var(--font-display); flex-shrink:0;}
.np-name{font-size:13.5px; font-weight:600; color:var(--nav-fg); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .4s var(--ease);}
.np-caret{font-size:10px; color:var(--nav-fg-soft); transition:transform .3s var(--ease), color .4s var(--ease);}
.np-trigger.open .np-caret{transform:rotate(180deg);}
.np-dropdown{
  position:absolute; top:calc(100% + 14px); right:0; min-width:246px; background:var(--white);
  border:1px solid var(--grey-200); border-radius:18px; box-shadow:0 24px 50px -20px rgba(17,17,17,.3); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .3s var(--ease); z-index:1100;
}
.np-dropdown.open{opacity:1; visibility:visible; transform:translateY(0);}
.np-dropdown .np-item{display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border-radius:12px; font-size:13.5px; font-weight:500; color:var(--ink-soft); text-align:left; transition:all .25s ease;}
.np-dropdown .np-item i{width:16px; color:var(--grey-400); font-size:13px;}
.np-dropdown .np-item:hover{background:var(--grey-100); color:var(--orange);}
.np-dropdown .np-item:hover i{color:var(--orange);}
.np-dropdown .np-divider{height:1px; background:var(--grey-200); margin:6px 8px;}
.np-dropdown .np-logout{color:var(--red);}
.np-dropdown .np-logout i{color:var(--red);}
.np-dropdown .np-logout:hover{background:rgba(225,74,59,.08); color:var(--red);}

/* ---- Navbar responsive ---- */
@media (max-width:1400px){
  .nav-links a{padding:12px 11px 14px; font-size:14px;}
  .nav-links a::after{left:11px; right:11px;}
  .nav-right{gap:10px;}
}
@media (max-width:1240px){
  .nav-links{display:none;}
  #menuToggle{display:flex;}
  .nav-right{margin-left:auto;}
  .np-name{display:none;}
  .np-trigger{padding:6px;}
}
@media (max-width:760px){
  #navbar{padding:12px 0;}
  #navbar.scrolled{padding:8px 0;}
  .nav-inner{gap:12px; min-height:56px;}
  #navbar .container{padding:0 20px;}
  .logo .mark{width:40px;height:40px;border-radius:12px;font-size:16px;}
  .logo span, .logo span em{font-size:16.5px;}
  .nav-right::before{display:none;}
  .nav-lang{padding:8px 9px; font-size:12.5px;}
  .nav-lang .nl-caret{display:none;}
  #navGuest .btn{padding:11px 16px; font-size:13px;}
  #navGuest .btn span{display:none;}
  #menuToggle{width:42px;height:42px;font-size:17px;}
}
@media (max-width:400px){
  #navbar .container{padding:0 16px;}
  .nav-inner{gap:8px;}
  .logo span, .logo span em{font-size:15px;}
  .nav-lang span{display:none;}
  #navGuest .btn{padding:10px 14px;}
  .nav-right{gap:8px;}
}

/* ---- Mobile menu ---- */
#mobileMenu{
  position:fixed; inset:0; background:var(--ink); z-index:1200;
  transform:translateX(100%); transition:transform .55s var(--ease);
  display:flex; flex-direction:column; padding:22px 24px 40px;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  background-image:radial-gradient(ellipse 500px 380px at 88% 4%, rgba(255,107,0,.20), transparent 62%);
}
#mobileMenu.open{transform:translateX(0);}
#mobileMenu .mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.1);}
#mobileMenu .mm-top .logo span:not(.mark){color:#fff;}
#mobileMenu .close-mm{
  width:44px;height:44px;border-radius:13px; color:#fff;font-size:19px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  transition:all .3s var(--ease); flex-shrink:0;
}
#mobileMenu .close-mm:hover{background:var(--orange); border-color:var(--orange);}
#mobileMenu a{
  color:rgba(255,255,255,.82);
  font-family:var(--font-display); font-size:19px; font-weight:600;
  padding:16px 14px; min-height:56px; display:flex; align-items:center;
  border-radius:14px; border-bottom:1px solid rgba(255,255,255,.07);
  transition:all .3s var(--ease);
}
#mobileMenu a:hover, #mobileMenu a:active{color:#fff; background:rgba(255,107,0,.14); padding-left:20px; border-bottom-color:transparent;}
.mm-profile{display:none; align-items:center; gap:14px; padding:16px; margin-bottom:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:18px;}
.mm-profile .np-avatar{width:46px;height:46px; font-size:15px;}
.mm-profile .mmp-name{color:#fff; font-size:15.5px; font-weight:700;}
.mm-profile .mmp-role{color:rgba(255,255,255,.5); font-size:12px; margin-top:3px;}
#mobileMenu .mm-account-links{display:none; flex-direction:column; gap:2px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.1);}
#mobileMenu .mm-account-links a{font-size:16px; gap:14px; border-bottom:none;}
#mobileMenu .mm-account-links a i{width:20px; color:var(--orange);}
#mobileMenu .mm-logout{color:var(--red) !important;}
#mobileMenu .mm-lang{
  display:flex; align-items:center; gap:10px; align-self:flex-start;
  margin-top:22px; padding:11px 16px; border-radius:100px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-family:var(--font-body); font-size:13px; font-weight:600;
  cursor:pointer;
}
#mmGuestLoginBtn{
  padding:16px 24px; border-radius:100px; font-size:15px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--orange); color:#fff; border:none; min-height:56px;
}
#mmGuestLoginBtn:hover{background:var(--orange-dark);}
@media (max-width:400px){
  #mobileMenu{padding:18px 18px 34px;}
  #mobileMenu a{font-size:17.5px; padding:14px 12px;}
}