/*
  NeoDark Theme (2026)
  - Dark / gaming look, high-contrast, glass cards, neon accents
  - Drop-in overrides for existing markup (style.css) so you don't need to rewrite templates.
*/

:root{
  --bg0:#070912;
  --bg1:#0b1023;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.10);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.70);
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --shadow2:0 10px 30px rgba(0,0,0,.45);
  --radius:18px;
  --accent:#8b5cf6;   /* purple */
  --accent2:#22d3ee;  /* cyan */
  --accent3:#f472b6;  /* pink */
}

html,body{background: radial-gradient(1200px 600px at 20% 10%, rgba(139,92,246,.25), transparent 60%),
                    radial-gradient(900px 540px at 85% 15%, rgba(34,211,238,.18), transparent 55%),
                    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%) !important;
  color: var(--text) !important;
}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; line-height:1.65 !important;}

/* Links */
a{color: var(--text);} a:hover{color:#fff;}
.text-muted{color:var(--muted) !important;}

/* Reduce the old template's bright backgrounds */
.bg-gray1, .bg-gray2, .bg-gra4, .bg-gra3, .bg-gray3, .bg-gray4{background: transparent !important;}

/* Header */
.header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(7,9,18,.65) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.header.style2{background: rgba(7,9,18,.65) !important;}
.header .logo img, .header .logo-sticky img{height:42px !important; width:auto !important; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));}

.menu > li > a{
  color: rgba(234,240,255,.90) !important;
  font-weight: 800;
  padding: 10px 14px !important;
  border-radius: 12px;
  transition: all .16s ease;
}
.menu > li > a:hover{background: rgba(255,255,255,.07) !important; color:#fff !important;}

.menu .login.button{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%) !important;
  color: #050814 !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  box-shadow: var(--shadow2);
}
.menu .login.button:hover{transform: translateY(-1px); filter: brightness(1.05);}

/* Page banner */
.banner-section.page-banner{
  background: radial-gradient(1000px 500px at 15% 30%, rgba(139,92,246,.20), transparent 60%),
              radial-gradient(900px 500px at 90% 40%, rgba(34,211,238,.14), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.banner-section .title{color:#fff !important; letter-spacing:-.03em;}
.breadcrumb-area{background: transparent !important;}
.breadcrumb{background: transparent !important;}
.breadcrumb .breadcrumb-item a{color: rgba(234,240,255,.70) !important;}
.breadcrumb .breadcrumb-item.active{color:#fff !important; font-weight:800;}

/* Fix home hero huge empty height (template sets 100vh on desktop) */
@media (min-width: 992px){
  .banner-section{height:auto !important; min-height: 560px !important;}
}
.banner-section{background-color: transparent !important; padding-top: 88px !important;}
.banner-section.search{
  padding: 92px 0 44px !important;
  background: radial-gradient(1200px 650px at 20% 10%, rgba(139,92,246,.28), transparent 62%),
              radial-gradient(1000px 520px at 85% 20%, rgba(34,211,238,.20), transparent 56%),
              linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 100%) !important;
}
.banner-section.search .subtitle{color: rgba(234,240,255,.72) !important; font-weight:700;}
.banner-section.search .title{font-size: clamp(34px, 4.2vw, 58px) !important; line-height:1.06 !important;}
.banner-section .shape-layer{opacity:.18 !important; pointer-events:none;}
.banner-section .shape-layer .circle-shape,
.banner-section .shape-layer .circle-shape-2{border-color: rgba(255,255,255,.10) !important;}

/* Search */
.search-form .card-body{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  padding: 10px 12px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.search-form input{
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  padding: 10px 14px !important;
  width: 100%;
  outline: none !important;
}
.search-form input::placeholder{color: rgba(234,240,255,.55) !important;}

.btn-2{
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%) !important;
  color: #050814 !important;
  box-shadow: var(--shadow2);
  border: 0 !important;
}
.btn-2:hover{filter: brightness(1.06); transform: translateY(-1px);}

/* Generic cards */
.product-item,
.blog-item,
.service-item,
.about-item,
.widget,
.cart-item,
.checkout-area,
.login-area,
.account-area{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}

/* Feature cards (added to home) */
.feature-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--radius) !important;
  padding: 18px 18px !important;
  box-shadow: var(--shadow2);
  height: 100%;
}
.feature-card .icon{
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 10px;
}
.feature-card h5{margin:0 0 6px 0; font-weight: 900; letter-spacing:-.02em; color:#fff;}
.feature-card p{margin:0; color: rgba(234,240,255,.72);}

/* Tabs */
.product-tabname .tabnav-btn{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(234,240,255,.78) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
}
.product-tabname .tabnav-btn.active,
.product-tabname .tabnav-btn:hover{
  background: linear-gradient(135deg, rgba(139,92,246,.55) 0%, rgba(34,211,238,.35) 100%) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* Product card */
.product-item{overflow: hidden !important; transition: transform .16s ease, box-shadow .16s ease;}
.product-item:hover{transform: translateY(-4px); box-shadow: var(--shadow);} 
.product-item .thumb{background: rgba(0,0,0,.25) !important;}
.product-item .thumb img{width: 100%; height: 210px; object-fit: cover; display:block;}
.product-item .content{padding: 16px 16px 18px 16px !important;}
.product-item .title a{color: #fff !important; font-weight: 900 !important; letter-spacing:-.02em;}
.product-item .price{color: #fff !important; font-weight: 900 !important; font-size: 20px !important;}

/* Make the overlay button look premium */
.product-overlay{background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.78) 100%) !important;}
.product-overlay-btn.details{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%) !important;
  color: #050814 !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  border: 0 !important;
  box-shadow: var(--shadow2);
}
.product-overlay-btn.details:hover{filter: brightness(1.06) !important;}

/* Sidebar */
.product-sidebar .widget-title{color:#fff !important; font-weight: 900 !important;}
.catagory-submenu li a{border-radius: 12px !important; padding: 10px 12px !important; color: rgba(234,240,255,.78) !important;}
.catagory-submenu li a:hover{background: rgba(255,255,255,.06) !important; color:#fff !important;}

/* Buttons */
.btn, button, .button, .primary-btn, .theme-btn{border-radius: 14px !important;}
.button, .primary-btn, .theme-btn, .view-theme.button{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%) !important;
  border: 0 !important;
  color: #050814 !important;
  font-weight: 900 !important;
  box-shadow: var(--shadow2);
}
.button:hover, .primary-btn:hover, .theme-btn:hover, .view-theme.button:hover{filter: brightness(1.06); transform: translateY(-1px);} 

/* Inputs */
.form-control,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
}
input::placeholder, textarea::placeholder{color: rgba(234,240,255,.55) !important;}
.form-control:focus, input:focus, textarea:focus, select:focus{
  border-color: rgba(34,211,238,.45) !important;
  box-shadow: 0 0 0 4px rgba(34,211,238,.18) !important;
}

/* Tables */
.table, table{color: rgba(234,240,255,.88) !important;}
.table thead th, table thead th{background: rgba(255,255,255,.06) !important; border-bottom: 1px solid rgba(255,255,255,.12) !important;}

/* Pagination */
.pagination .page-link{border-radius: 12px !important; margin: 0 4px; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(234,240,255,.85) !important;}
.pagination .page-item.active .page-link{background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%) !important; color:#050814 !important; border-color: rgba(255,255,255,.14) !important;}

/* Footer */
.footer{margin-top: 70px; background: rgba(0,0,0,.32) !important; border-top: 1px solid rgba(255,255,255,.10) !important;}
.footer .footer-top{padding-top: 60px !important;}
.footer .widget-title{color:#fff !important; font-weight: 900 !important;}
.footer p, .footer a{color: rgba(234,240,255,.75) !important;}
.footer a:hover{color:#fff !important;}
.footer-bottom{border-top: 1px solid rgba(255,255,255,.10) !important;}
.social-media-list li a{background: rgba(255,255,255,.07) !important; border-radius: 14px !important;}
.social-media-list li a:hover{background: rgba(255,255,255,.14) !important;}

/* Small screens */
@media (max-width: 991px){
  .banner-section.search{padding: 80px 0 38px !important;}
}