/* ============================================================
   EasyBoxs v2 – nav.css
   ============================================================ */

nav { position:sticky; top:0; z-index:100; background:var(--white); border-bottom:1.5px solid var(--border); padding:0 2rem; box-shadow:var(--shadow-nav); }
.nav-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:66px; }
.logo-nav { display:flex; align-items:center; cursor:pointer; }
.logo-nav img { height:50px; width:auto; object-fit:contain; }
.logo-fallback { display:none; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--navy); }
.logo-shield { width:36px; height:36px; background:linear-gradient(135deg,var(--blue),var(--accent)); border-radius:9px; display:flex; align-items:center; justify-content:center; color:white; font-size:18px; }
.nav-links { display:flex; gap:1.25rem; list-style:none; }
.nav-links a { font-size:13px; font-weight:600; color:#2D3E55; padding:6px 10px; border-radius:7px; transition:all .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--mid); background:var(--softgray); }
.nav-cta { background:var(--accent); color:#FFF; border:none; padding:10px 20px; border-radius:9px; font-size:13px; font-weight:700; transition:all .2s; white-space:nowrap; }
.nav-cta:hover { background:var(--green); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px; }
.hamburger span { width:22px; height:2px; background:var(--navy); border-radius:2px; transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── TRUST BAR ── */
.trust-bar { background:#F7F9FD; padding:1rem 2rem; border-bottom:1.5px solid #DCE5F0; }
.trust-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:2.5rem; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#3D5270; }
.trust-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* ── FOOTER ── */
footer { background:var(--navy); color:rgba(255,255,255,0.65); padding:3.5rem 2rem 1.5rem; }
.footer-inner { max-width:1100px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.footer-brand img { height:42px; width:auto; filter:brightness(0) invert(1); opacity:.85; }
.footer-brand p { font-size:.8rem; line-height:1.7; margin-top:.75rem; max-width:260px; color:rgba(255,255,255,.5); }
.footer-col h4 { font-family:var(--font-head); font-size:.78rem; font-weight:700; color:#FFF; text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px; }
.footer-col a { display:block; font-size:.82rem; color:rgba(255,255,255,.5); margin-bottom:7px; transition:color .2s; cursor:pointer; }
.footer-col a:hover { color:#FFF; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:rgba(255,255,255,.4); flex-wrap:wrap; gap:.5rem; }
.ssl-badge { display:flex; align-items:center; gap:6px; background:rgba(0,184,156,0.15); border:1px solid rgba(0,184,156,0.3); padding:5px 12px; border-radius:20px; color:#00D4A0; font-size:11px; font-weight:700; }

@media(max-width:768px) {
  .nav-links { display:none; position:absolute; top:66px; left:0; right:0; background:white; border-bottom:1.5px solid var(--border); flex-direction:column; padding:1rem 2rem; gap:.5rem; z-index:200; }
  .nav-links.open { display:flex; }
  .hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr !important; }
}
@media(max-width:480px) {
  .footer-grid { grid-template-columns:1fr !important; }
  .trust-inner { gap:1rem; }
}

/* ── LANG SWITCHER ── */
.lang-switcher{display:flex;align-items:center;background:var(--softgray,#F2F4F8);border-radius:24px;padding:3px;gap:2px;flex-shrink:0;margin-left:auto}
.lang-btn{background:none;border:none;font-size:20px;line-height:1;padding:4px 7px;border-radius:18px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;opacity:.55}
.lang-btn.active{background:var(--white);box-shadow:0 1px 5px rgba(0,0,0,.12);opacity:1}
.lang-btn:hover{opacity:.85;background:rgba(0,0,0,.05)}

/* ============================================================
   EasyBoxs — nav.css  v4.0
   Flag switcher + GasControl menu item
   ============================================================ */

/* ── RESET & BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1.5px solid var(--cardborder);height:64px}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 2rem;height:100%;display:flex;align-items:center;gap:1rem}

/* Logo */
.logo-nav{display:flex;align-items:center;gap:9px;margin-right:.5rem;flex-shrink:0}
.logo-nav img{height:32px;width:auto}
.logo-fallback{display:none;align-items:center;gap:8px;font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--navy)}
.logo-shield{background:var(--accent);color:white;width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px}

/* Nav links */
.nav-links{display:flex;list-style:none;gap:.25rem;flex:1;margin-left:.5rem}
.nav-links a{padding:6px 11px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--gray);transition:all .18s;white-space:nowrap}
.nav-links a:hover{color:var(--navy);background:var(--softgray)}
.nav-links a.active{color:var(--mid);background:var(--lightblue)}
/* GasControl star item */
.nav-links a.nav-star{color:var(--mid);font-weight:700}
.nav-links a.nav-star:hover{background:rgba(0,184,156,.1);color:var(--accent)}

/* ============================================================
   EasyBoxs — nav.css  v4.0
   Flag switcher + GasControl menu item
   ============================================================ */

/* ── RESET & BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1.5px solid var(--cardborder);height:64px}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 2rem;height:100%;display:flex;align-items:center;gap:1rem}

/* Logo */
.logo-nav{display:flex;align-items:center;gap:9px;margin-right:.5rem;flex-shrink:0}
.logo-nav img{height:32px;width:auto}
.logo-fallback{display:none;align-items:center;gap:8px;font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--navy)}
.logo-shield{background:var(--accent);color:white;width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px}

/* Nav links */
.nav-links{display:flex;list-style:none;gap:.25rem;flex:1;margin-left:.5rem}
.nav-links a{padding:6px 11px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--gray);transition:all .18s;white-space:nowrap}
.nav-links a:hover{color:var(--navy);background:var(--softgray)}
.nav-links a.active{color:var(--mid);background:var(--lightblue)}
/* GasControl star item */
.nav-links a.nav-star{color:var(--mid);font-weight:700}
.nav-links a.nav-star:hover{background:rgba(0,184,156,.1);color:var(--accent)}



/* CTA */
.nav-cta{background:var(--mid);color:white;padding:8px 18px;border-radius:var(--r-btn);font-size:13px;font-weight:700;font-family:var(--font-head);white-space:nowrap;transition:all .18s;flex-shrink:0}
.nav-cta:hover{background:var(--accent);transform:translateY(-1px)}



/* Back button */
.back-btn{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.75);font-size:13px;font-weight:600;margin-bottom:1.25rem;background:none;border:none;cursor:pointer;text-decoration:none;transition:color .2s}
.back-btn:hover{color:white}

@media(max-width:1100px){
  .nav-links a{font-size:12.5px;padding:5px 8px}
}
@media(max-width:900px){
  .hamburger{display:flex}
  .nav-links{
    display:none;flex-direction:column;
    position:absolute;top:64px;left:0;right:0;
    background:white;border-bottom:2px solid var(--cardborder);
    padding:1rem 1.5rem;gap:4px;box-shadow:0 8px 24px rgba(0,0,0,.08)
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 12px;font-size:14px;border-radius:var(--r-sm)}
  .lang-switcher{display:flex;align-items:center;background:var(--softgray,#F2F4F8);border-radius:24px;padding:3px;gap:2px;flex-shrink:0;margin-left:auto}
  .nav-cta{display:none}
}


/* CTA */
.nav-cta{background:var(--mid);color:white;padding:8px 18px;border-radius:var(--r-btn);font-size:13px;font-weight:700;font-family:var(--font-head);white-space:nowrap;transition:all .18s;flex-shrink:0}
.nav-cta:hover{background:var(--accent);transform:translateY(-1px)}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:5px;margin-left:auto}
.hamburger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Back button */
.back-btn{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.75);font-size:13px;font-weight:600;margin-bottom:1.25rem;background:none;border:none;cursor:pointer;text-decoration:none;transition:color .2s}
.back-btn:hover{color:white}

@media(max-width:1100px){
  .nav-links a{font-size:12.5px;padding:5px 8px}
}
@media(max-width:900px){
  .hamburger{display:flex}
  .nav-links{
    display:none;flex-direction:column;
    position:absolute;top:64px;left:0;right:0;
    background:white;border-bottom:2px solid var(--cardborder);
    padding:1rem 1.5rem;gap:4px;box-shadow:0 8px 24px rgba(0,0,0,.08)
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 12px;font-size:14px;border-radius:var(--r-sm)}
  .lang-switcher{display:flex;align-items:center;background:var(--softgray,#F2F4F8);border-radius:24px;padding:3px;gap:2px;flex-shrink:0;margin-left:auto}
  .nav-cta{display:none}
}