/* EchoHost Dark Theme Overrides (loaded after theme-color-1.css) */

:root{
  --accentA:#ff8a00;
  --accentB:#00c6ff;

  --echo-bg-0:#05070a;
  --echo-bg-1:#070b12;
  --echo-bg-2:#0b1220;
  --echo-text:#d6dde6;
  --echo-muted:#9aa7b6;
  --echo-card:rgba(255,255,255,.05);
  --echo-border:rgba(255,255,255,.12);
  --echo-accent-1:#ff6a2a; /* orange */
  --echo-accent-2:#ffd04a; /* yellow */
  --echo-accent-3:#4fd3ff; /* cyan */
  --echo-accent-grad:linear-gradient(90deg,var(--echo-accent-1),var(--echo-accent-2),var(--echo-accent-3));
}

html,body{height:100%;}
body{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(79,211,255,.12), transparent 55%),
    radial-gradient(900px 600px at 80% 20%, rgba(255,208,74,.10), transparent 55%),
    radial-gradient(900px 600px at 60% 85%, rgba(255,106,42,.10), transparent 60%),
    linear-gradient(135deg,var(--echo-bg-0) 0%, var(--echo-bg-2) 45%, var(--echo-bg-0) 100%);
  color:var(--echo-text);
}

p{color:var(--echo-text);}
.small, .text-muted, .fw--about p, .footer--widget p{color:var(--echo-muted) !important;}

/* Make “lightgrey/lightergrey” sections dark too */
.bg--lightgrey, .bg--lightergrey{background: transparent !important;}
.bd--bottom, .bd--top-bottom{border-color:rgba(255,255,255,.08) !important;}

/* Header */
#header .navbar{
  background: rgba(5,7,10,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
#header .navbar .navbar-brand h1,
#header .navbar .navbar-brand h1 span{color:#fff !important;}
#headerNav .nav>li>a{color:rgba(255,255,255,.86) !important;}
#headerNav .nav>li>a:hover{color:#fff !important;}
#headerNav .dropdown-menu{
  background: rgba(7,11,18,.96) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
#headerNav .dropdown-menu>li>a{color:rgba(255,255,255,.86) !important;}
#headerNav .dropdown-menu>li>a:hover{background: rgba(255,255,255,.06) !important;}

/* Buttons */
.btn--primary, a.btn--primary, .btn--default.hover:hover, a.btn--default.hover:hover{
  background-image: var(--echo-accent-grad) !important;
  background-color: transparent !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#0b1220 !important;
  font-weight:700;
}
.btn--default, a.btn--default{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Cards / panels */
.pricing--item, .service--item, .features--item, .faq--content .panel, .contact--form, .login--form{
  background: var(--echo-card) !important;
  border-color: var(--echo-border) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
}

/* Section titles accent line */
.section--title h2:before, .page-header--title h2:before{background-image:var(--echo-accent-grad) !important;}

/* Icons accent */
.service--item:hover .service--icon,
.service--item:hover .service--content h3{color: var(--echo-accent-2) !important;}

/* Banner overlay */
#banner.bg--overlay:before{background: rgba(5,7,10,.65) !important;}

/* Footer */
.footer--widgets.bg--dark{background: rgba(5,7,10,.75) !important; border-top:1px solid rgba(255,255,255,.08);}
.footer--copyright{border-top:1px solid rgba(255,255,255,.08);}
.footer--widget ul li a{color: rgba(255,255,255,.80) !important;}
.footer--widget ul li a:hover{color: #fff !important;}
.footer--copyright p{color: rgba(255,255,255,.78) !important;}
.footer--copyright a{color: var(--echo-accent-2) !important;}

/* Inputs */
input, textarea, select{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Clean up any remaining light backgrounds */
.page-header--title, .page-header--breadcrumb{background: transparent !important;}

/* Contact info alignment */
.contact-row{
  display:flex;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  align-items:center;
}
.contact-label{
  min-width:90px;
  opacity:0.85;
  font-weight:600;
}
.contact-value a{
  text-decoration:none;
}
.contact-value a:hover{
  text-decoration:underline;
}

/* Panel buttons */
.panel-links{
  display:flex;
  gap:16px;
  justify-content:center;
  margin:40px 0 20px;
  flex-wrap:wrap;
}
.panel-btn{
  padding:14px 28px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  background:linear-gradient(135deg,var(--accentA),#ffc400);
  color:#000;
  transition:all .25s ease;
}
.panel-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.4);
}
.panel-btn.game-panel{
  background:linear-gradient(135deg,#ffc400,var(--accentB));
}
.panel-btn.client-area{
  background:linear-gradient(135deg,var(--accentA),var(--accentB));
color:#fff;
}

/* Plans */
.plans-section{
  padding:70px 0;
}
.section-title{
  text-align:center;
  margin-bottom:10px;
}
.section-subtitle{
  text-align:center;
  opacity:0.85;
  max-width:860px;
  margin:0 auto 28px;
}
.plans-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.plans-grid.small{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.plan-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:22px 20px;
  backdrop-filter: blur(6px);
}
.plan-card.featured{
  border:1px solid rgba(255,196,0,0.55);
  box-shadow:0 18px 45px rgba(0,0,0,0.35);
}
.plan-card h3, .plan-card h4{
  margin-top:0;
  margin-bottom:12px;
}
.plan-card ul{
  padding-left:18px;
  margin:0;
  opacity:0.9;
}
.plan-card li{ margin:8px 0; }
.plans-note{
  text-align:center;
  margin-top:18px;
  opacity:0.8;
}
.plans-split .game-group{
  margin-top:28px;
}
@media (max-width: 992px){
  .plans-grid, .plans-grid.small{
    grid-template-columns:1fr;
  }
}

/* Mini hero for service pages */
.hero-mini{
  padding:70px 0 30px;
}
.hero-mini h1{
  text-align:center;
  margin:0 0 10px;
}
.hero-mini p{
  text-align:center;
  opacity:0.85;
  max-width:860px;
  margin:0 auto;
}

/* Top navigation */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(8,10,16,0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand-logo{
  width:34px;
  height:34px;
  border-radius:10px;
}
.brand-name{
  font-weight:800;
  letter-spacing:0.2px;
  color:#fff;
}
.site-nav .nav-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  padding:0;
}
.site-nav a{
  color: rgba(255,255,255,0.92);
  text-decoration:none;
  padding:10px 10px;
  border-radius:10px;
}
.site-nav a:hover{
  background: rgba(255,255,255,0.06);
}
.nav-cta-btn{
  padding:10px 16px !important;
  border-radius:12px;
}
.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  min-width: 230px;
  background: rgba(12,14,22,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding:8px;
  display:none;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
}
.dropdown-menu li{ list-style:none; }
.dropdown-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  display:block;
}

/* Mobile */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}
.nav-toggle span{
  display:block;
  height:2px;
  margin:6px 10px;
  background: rgba(255,255,255,0.9);
  border-radius:2px;
}
@media (max-width: 992px){
  .nav-toggle{ display:block; }
  .site-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background: rgba(8,10,16,0.96);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display:none;
  }
  .site-nav.open{ display:block; }
  .site-nav .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:12px;
  }
  .dropdown-menu{
    position:static;
    display:block;
    background: transparent;
    border:none;
    box-shadow:none;
    padding:0 0 6px 0;
  }
  .dropdown-menu a{
    padding-left:22px;
    opacity:0.9;
  }
}

/* Navbar fixes */
.site-header{
  background: rgba(6,8,14,0.92) !important;
}
.site-nav a{
  color: rgba(255,255,255,0.95) !important;
}
.dropdown-menu{
  background: rgba(14,16,24,0.98) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  z-index: 2000 !important;
}
.dropdown-menu a{
  color: rgba(255,255,255,0.92) !important;
}
.dropdown-menu a:hover{
  background: rgba(255,255,255,0.08) !important;
}
/* Ensure dropdown doesn't appear faded */
.dropdown-menu{
  opacity: 1 !important;
}
/* Make dropdown toggle look like a button hover */
.dropdown-toggle{
  cursor:pointer;
}

/* Click-open dropdown state */


/* Content sections */
.content-section{
  padding:50px 0;
}
.two-col{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap:22px;
  align-items:start;
}
.info-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:18px 18px;
}
.feature-list{
  padding-left:18px;
  margin:12px 0 0;
  opacity:0.92;
}
.feature-list li{ margin:10px 0; }
.faq-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}
.faq-item{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:16px;
}
.cards-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}
.mini-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:16px;
}
@media (max-width: 992px){
  .two-col{ grid-template-columns:1fr; }
  .faq-grid, .cards-3{ grid-template-columns:1fr; }
}





/* Hover dropdown */
.dropdown-menu{
  display:none;
}
.dropdown:hover > .dropdown-menu{
  display:block;
}

/* Improve hover stability */
.dropdown-menu{
  }

/* Mobile: show nested items when menu expanded */
@media (max-width: 992px){
  .dropdown-menu{
    display:block;
  }
}

/* Robust hover dropdown */
.site-header, .nav-wrap, .site-nav, .nav-list, .dropdown{
  overflow: visible !important;
}
.dropdown{ position: relative; }

/* Use visibility/opacity so hover is reliable */
.dropdown-menu{
  display:block !important;          /* keep in flow for transitions */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
}

/* Mobile: show nested items when nav is open */
@media (max-width: 992px){
  .dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:none;
    position: static !important;
    display:block !important;
  }
}

/* Hover bridge: prevents the submenu closing when moving mouse from parent to menu */
.dropdown-menu{
  top: 100% !important;
  left: 0 !important;
  margin-top: 0 !important;
}
.dropdown-menu::before{
  content:"";
  position:absolute;
  top:-12px;
  left:0;
  right:0;
  height:12px;
  background:transparent;
}

/* Color switcher fixes */
.color-switcher, .style-switcher, #style-switcher, .theme-switcher{
  z-index: 4000 !important;
}
.color-switcher .color, .color-box span, .color-switcher li{
  cursor:pointer;
}

/* Nested dropdown submenu */
.dropdown-sub{ position:relative; }
.dropdown-submenu{
  list-style:none;
  margin:6px 0 0;
  padding:6px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dropdown-submenu li a{
  padding-left: 22px !important;
  opacity: 0.92;
  display:block;
}