/*
Theme Name: Dominix
Author: Dash
Version: 1.0
Description: Lightweight responsive theme with a top desktop header, sticky mobile header, and customizable UI elements.
Text Domain: dominix
*/

*,*::before,*::after{box-sizing:border-box}
html{width:100%;-webkit-text-size-adjust:100%}
body{margin:0;width:100%}
img,video,svg{max-width:100%;height:auto;display:block}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  line-height:1.7;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--page-bg,#111);
  color:var(--text-color,#fff);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

#site-header{
  background:var(--header-bg,#111);
  width:100%;
  z-index:1000;
  position:sticky;
  top:0;
}

.header-inner{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  padding:14px 16px;
  position:relative;
  gap:12px;
}

.logo-container{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.logo-container img{
  max-width:180px;
  height:auto;
  object-fit:contain;
}

.auth-buttons{
  width:100%;
  display:flex;
  gap:12px;
}

.login-button,.register-button{
  flex:1 1 0;
  width:100%;
  padding:12px 16px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  text-align:center;
  display:inline-block;
  transition:opacity .25s ease;
}

.login-button{
  background:#fff;
  color:#111;
}

.login-button:hover,.register-button:hover{opacity:.85}

.menu-toggle{
  display:block;
  border:0;
  font-size:20px;
  padding:12px 14px;
  border-radius:10px;
  cursor:pointer;
  background:var(--highlight-color,#FFD700);
  color:#111;
  position:absolute;
  top:12px;
  right:16px;
}

.main-menu{
  width:100%;
  display:none;
  flex-direction:column;
  margin-top:6px;
}

.main-menu ul{
  list-style:none;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0;
  margin:0;
}

.main-menu ul li{width:100%}

.main-menu ul li a{
  width:100%;
  display:block;
  padding:12px 14px;
  border-radius:10px;
  text-decoration:none;
  color:var(--menu-text-color,#fff);
  transition:background-color .25s ease,color .25s ease,opacity .25s ease;
}

.main-menu ul li a:hover{
  background:var(--menu-hover-bg,var(--highlight-color,#FFD700));
  color:var(--menu-hover-text,#111);
}

#content{
  flex:1;
  width:100%;
  padding:22px 16px;
}

#content p{margin:0 0 16px}
#content h2,#content h3,#content h4,#content h5,#content h6{
  margin:26px 0 12px;
  color:var(--headings-color,#fff);
}
#content ul,#content ol{margin:0 0 16px;padding-left:22px}
#content li{margin:0 0 8px}
#content blockquote{
  margin:0 0 16px;
  padding:12px 16px;
  border-left:3px solid var(--highlight-color,#FFD700);
}
#content hr{margin:24px 0;border:0;border-top:1px solid rgba(255,255,255,.15)}
#content table{width:100%;border-collapse:collapse;margin:0 0 16px}
#content th,#content td{border:1px solid rgba(255,255,255,.15);padding:10px}

footer{
  width:100%;
  background:var(--footer-bg,#222);
  color:var(--footer-text-color,#fff);
  padding:18px 16px;
  flex-shrink:0;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

@media (max-width:400px){
  .logo-container img{max-width:165px}
}

@media (min-width:768px){
  .header-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 18px;
  }

  .logo-container{
    width:auto;
    justify-content:flex-start;
    flex:0 0 auto;
  }

  .logo-container img{max-width:160px}

  .menu-toggle{display:none}

  .main-menu{
    display:flex;
    width:auto;
    margin-top:0;
    flex:1 1 auto;
    justify-content:center;
    align-items:center;
    min-width:0;
  }

  .main-menu ul{
    width:auto;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:12px;
  }

  .main-menu ul li{width:auto}

  .main-menu ul li a{
    width:auto;
    padding:10px 12px;
    white-space:nowrap;
  }

  .auth-buttons{
    width:auto;
    flex:0 0 auto;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
  }

  .login-button,.register-button{
    width:auto;
    flex:0 0 auto;
    padding:10px 14px;
    white-space:nowrap;
  }

  #content{padding:28px 24px}
  footer{padding:18px 24px}
}

@media (min-width:1100px){
  #content{padding:32px 40px}
  footer{padding:20px 40px}
}

#vb-bottom-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:99999;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  opacity:0;
  transform:translate3d(0,100%,0);
  animation:vbBarSlide .55s ease-out .05s forwards;
  contain:layout paint;
  will-change:transform,opacity;
}

@keyframes vbBarSlide{
  0%{opacity:0;transform:translate3d(0,100%,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}

#vb-bottom-bar .vb-wrap{
  max-width:720px;
  margin:0 auto;
  display:flex;
  gap:6px;
  padding:10px 8px;
  border-radius:16px;
  background:#000 !important;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 -6px 20px rgba(0,0,0,.55);
}

#vb-bottom-bar .vb-item{
  flex:1 1 0;
  min-width:0;
  text-align:center;
  text-decoration:none;
  color:#f5f5f7;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-weight:800;
  letter-spacing:.2px;
  border-radius:12px;
  padding:8px 6px;
  transition:transform .18s ease,color .18s ease,background-color .18s ease;
  white-space:nowrap;
}

#vb-bottom-bar .vb-ic{font-size:clamp(16px,4vw,20px);line-height:1}
#vb-bottom-bar .vb-tx{font-size:clamp(11px,2vw,14px);overflow:hidden;text-overflow:ellipsis}

#vb-bottom-bar .vb-item:hover{
  color:#D80D83;
  transform:translate3d(0,-1px,0);
  background:rgba(255,255,255,.06);
}

@media (min-width:768px){
  #vb-bottom-bar{display:none}
}

@media (max-width:767px){
  body{padding-bottom:82px}
}

.site-footer{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:12px !important;
}
.site-footer .footer-bottom{
  width:100% !important;
  text-align:center !important;
}

@media (prefers-reduced-motion:reduce){
  #vb-bottom-bar{
    animation:none;
    opacity:1;
    transform:none;
    will-change:auto;
  }
  #vb-bottom-bar .vb-item{transition:none}
}