/* ============================================================
   Melbet CI — Header CSS
   ============================================================ */

/* --- Top Bar --- */
.top-bar{
  background:var(--color-dark);font-size:.75rem;color:var(--color-muted);
  padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.top-bar .container{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;
}
.top-bar a{color:var(--color-muted);font-size:.75rem}
.top-bar a:hover{color:var(--color-primary)}

/* --- Site Disclaimer Banner --- */
.disclaimer-banner{
  background:rgba(255,229,0,.08);font-size:.75rem;color:var(--color-muted);
  text-align:center;padding:.35rem .75rem;
}
.disclaimer-banner strong{color:var(--color-accent)}

/* --- Header --- */
.header{
  background:var(--color-dark);position:sticky;top:0;z-index:100;
  box-shadow:var(--shadow-md);
}
.header-inner{
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem 1rem;max-width:1400px;margin:0 auto;
}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo svg,.logo img{height:32px;width:auto}

/* --- Search --- */
.search-box{
  flex:1;max-width:400px;position:relative;
}
.search-box input{
  width:100%;padding:.45rem .8rem .45rem 2.2rem;
  background:var(--color-surface);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);color:var(--color-text);font-size:.85rem;
  transition:border-color var(--transition);
}
.search-box input:focus{outline:none;border-color:var(--color-primary)}
.search-box input::placeholder{color:var(--color-muted)}
.search-icon{
  position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
  color:var(--color-muted);width:16px;height:16px;
}

/* --- Header Actions --- */
.header-actions{
  display:flex;align-items:center;gap:.5rem;flex-shrink:0;
}
.header-actions .btn{font-size:.8rem;padding:.35rem .9rem;min-height:38px}

/* --- Burger --- */
.burger{
  display:none;flex-direction:column;gap:4px;
  cursor:pointer;padding:6px;background:none;border:none;
}
.burger span{
  display:block;width:22px;height:2px;background:var(--color-text);
  transition:all .3s;border-radius:1px;
}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* --- Language Switcher --- */
.lang-switch{
  display:flex;align-items:center;gap:.3rem;
  color:var(--color-muted);font-size:.8rem;cursor:pointer;
  padding:.3rem .5rem;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.08);
}
.lang-switch:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* --- Top Navigation Tabs --- */
.top-nav{
  background:var(--color-dark);border-top:1px solid rgba(255,255,255,.06);
  overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;
}
.top-nav::-webkit-scrollbar{height:0}
.top-nav-inner{
  display:flex;align-items:center;gap:0;
  max-width:1400px;margin:0 auto;padding:0 .5rem;
}
.top-nav a{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.6rem .9rem;font-size:.82rem;font-weight:600;
  color:var(--color-muted);border-bottom:2px solid transparent;
  transition:all var(--transition);white-space:nowrap;
}
.top-nav a:hover{color:var(--color-text);background:rgba(255,255,255,.03)}
.top-nav a.active{
  color:#000;background:var(--color-primary);border-bottom-color:var(--color-primary);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.top-nav a .live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--color-live);
  display:inline-block;animation:pulse 1.5s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* --- Mobile Menu Overlay --- */
.mobile-menu{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;
  background:rgba(0,0,0,.7);opacity:0;transition:opacity .3s;
}
.mobile-menu.open{display:block;opacity:1}
.mobile-menu-panel{
  position:absolute;top:0;right:0;width:280px;max-width:85vw;
  height:100%;background:var(--color-dark);padding:1.5rem;
  overflow-y:auto;transform:translateX(100%);transition:transform .3s;
}
.mobile-menu.open .mobile-menu-panel{transform:translateX(0)}
.mobile-menu-panel .close-menu{
  position:absolute;top:1rem;right:1rem;background:none;border:none;
  color:var(--color-text);font-size:1.5rem;cursor:pointer;
}
.mobile-menu-panel nav{margin-top:2.5rem}
.mobile-menu-panel nav a{
  display:block;padding:.7rem 0;font-size:1rem;font-weight:600;
  color:var(--color-text);border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-menu-panel nav a:hover{color:var(--color-primary)}
.mobile-menu-panel .mobile-cta{
  margin-top:1.5rem;display:flex;flex-direction:column;gap:.5rem;
}

/* --- Responsive --- */
@media(max-width:1024px){
  .search-box{display:none}
  .header-actions .btn-download{display:none}
}
@media(max-width:600px){
  .header-inner{padding:.4rem .75rem}
  .header-actions .btn-outline{display:none}
  .burger{display:flex}
  .top-nav{display:none}
  .disclaimer-banner{font-size:.7rem;padding:.25rem .5rem}
}