/* =========================================================
   Theme Override: Dark Purple Glass (match uploaded screenshot)
   Layout unchanged. Colors only.
   ========================================================= */

/* ---------- Core palette ---------- */
:root{
  --p-bg-0: #05041e;         /* deepest */
  --p-bg-1: #120a33;         /* dark purple */
  --p-bg-2: #0b0827;         /* panel base */
  --p-text: #e9e7ff;         /* primary text */
  --p-muted: rgba(233,231,255,.72);

  --p-accent: #624ad7;       /* primary purple (from screenshot) */
  --p-accent-2: #6977f4;     /* blue-violet */
  --p-accent-3: #35a3ff;     /* light blue highlight */

  --p-border: rgba(137, 124, 255, .22);
  --p-glass: rgba(14, 10, 44, .55);

  --p-shadow: 0 18px 40px rgba(0,0,0,.45);
  --p-glow: 0 0 0 1px rgba(137,124,255,.12), 0 18px 60px rgba(98,74,215,.18);
}

/* ---------- Global background + base text ---------- */
html, body{
  height: 100%;
}

body.theme-color-3{
  color: var(--p-text) !important;
  background:
    radial-gradient(900px 600px at 15% 15%, rgba(105,119,244,.22), transparent 60%),
    radial-gradient(900px 600px at 80% 10%, rgba(98,74,215,.20), transparent 55%),
    radial-gradient(1000px 800px at 45% 85%, rgba(53,163,255,.12), transparent 60%),
    linear-gradient(180deg, var(--p-bg-1), var(--p-bg-0)) !important;
  background-attachment: fixed;
}

p, .text, .card-text{
  color: var(--p-muted) !important;
}

/* Links */
a{
  color: rgba(233,231,255,.90);
}
a:hover{
  color: #ffffff;
}

/* ---------- Headings (soft gradient like screenshot) ---------- */
h1, h2, h3, h4, h5, h6,
.section-title .title,
.banner-content .title{
  color: var(--p-text) !important;
}

.banner-content .title,
.section-title .title{
  background: linear-gradient(90deg, #a6a0ff 0%, var(--p-accent-2) 45%, #b7b2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 10px 40px rgba(0,0,0,.35);
}

.banner-content .subtitle,
.section-title .text,
.section-title p{
  color: rgba(233,231,255,.75) !important;
  letter-spacing: .06em;
}

/* ---------- Glass header like screenshot ---------- */
.header-area.header-2{
  background: transparent !important;
}

.header-area.header-2 .overlay{
  background: transparent !important;
}

.header-area.header-2 .header-bottom{
  border-top: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(10, 8, 34, .55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.header-area.header-2 .header-top{
  /*background: rgba(10, 8, 34, .35) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);*/
}

.navbar-nav .nav-link{
  color: rgba(233,231,255,.80) !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  color: #ffffff !important;
}

/* Dropdown menu glass */
.menu-dropdown{
  background: rgba(10, 8, 34, .82) !important;
  border: 1px solid rgba(137,124,255,.18) !important;
  box-shadow: var(--p-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Header icon buttons */
.btn-icon-text i{
  color: rgba(233,231,255,.85) !important;
}
.btn-icon-text:hover i{
  color: #ffffff !important;
}

/* ---------- Hero banner (keep layout, deepen theme) ---------- */
.hero-banner.hero-banner-3{
  position: relative;
}

.hero-banner.hero-banner-3 .overlay{
  background:
    radial-gradient(700px 480px at 25% 25%, rgba(98,74,215,.28), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(105,119,244,.20), transparent 62%),
    linear-gradient(180deg, rgba(5,4,30,.55), rgba(5,4,30,.88)) !important;
  opacity: 1 !important;
}

/* ---------- Buttons (pill, purple glow) ---------- */
.btn,
.btn-primary,
.btn.btn-primary,
.btn-primary.style-3{
  border-radius: 999px !important;
}

.btn-primary,
.btn-primary.style-3{
  background: linear-gradient(135deg, var(--p-accent) 0%, #4b2fd0 55%, #3b7cff 110%) !important;
  border: 1px solid rgba(137,124,255,.25) !important;
  color: #ffffff !important;
  box-shadow: var(--p-glow);
}

.btn-primary:hover,
.btn-primary.style-3:hover{
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(137,124,255,.18), 0 22px 70px rgba(98,74,215,.26);
}

/* Outline style if your template uses it anywhere */
.btn-outline,
.btn-outline-primary,
.btn.btn-outline-primary{
  background: rgba(10, 8, 34, .25) !important;
  border: 1px solid rgba(137,124,255,.35) !important;
  color: rgba(233,231,255,.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-outline:hover,
.btn-outline-primary:hover{
  border-color: rgba(137,124,255,.55) !important;
  color: #ffffff !important;
}

/* Text button color (READ MORE) */
.btn-text.color-primary,
.color-primary{
  color: rgba(166,160,255,.95) !important;
}
.btn-text.color-primary:hover{
  color: #ffffff !important;
}

/* ---------- Cards / panels (glass) ---------- */
.card,
.product-default-2,
.item,
.choose-area .item,
.blog-area article.card{
  background: rgba(14, 10, 44, .28) !important;
  border: 1px solid rgba(137,124,255,.14) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card.bg-none,
.blog-area .card.bg-none{
  background: rgba(14, 10, 44, .20) !important;
}

/* Card titles */
.card-title a,
.product-title a{
  color: rgba(233,231,255,.92) !important;
}
.card-title a:hover,
.product-title a:hover{
  color: #ffffff !important;
}

/* Tags */
.product-tag a{
  color: rgba(166,160,255,.95) !important;
}

/* Hover action button on products */
.hover-show .btn-icon{
  background: rgba(10, 8, 34, .60) !important;
  border: 1px solid rgba(137,124,255,.22) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hover-show .btn-icon i{
  color: rgba(233,231,255,.92) !important;
}

/* ---------- Sliders navigation buttons ---------- */
.slider-navigation .slider-btn{
  background: rgba(10, 8, 34, .55) !important;
  border: 1px solid rgba(137,124,255,.22) !important;
  color: rgba(233,231,255,.88) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.slider-navigation .slider-btn:hover{
  border-color: rgba(137,124,255,.45) !important;
  color: #ffffff !important;
}

/* ---------- Tabs (All Games / Action / etc) ---------- */
.tabs-navigation .nav .nav-link{
  background: rgba(10, 8, 34, .45) !important;
  border: 1px solid rgba(137,124,255,.20) !important;
  color: rgba(233,231,255,.82) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tabs-navigation .nav .nav-link.active,
.tabs-navigation .nav .nav-link:hover{
  background: linear-gradient(135deg, rgba(98,74,215,.85), rgba(105,119,244,.65)) !important;
  border-color: rgba(137,124,255,.35) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 55px rgba(98,74,215,.18);
}

/* ---------- Section spacing backgrounds (do not remove images, just unify) ---------- */
section{
  position: relative;
}

.sponsor,
.category-area,
.choose-area,
.product-area,
.blog-area{
  background: transparent !important;
}

.choose-area .wrapper .overlay{
  background:
    radial-gradient(800px 600px at 35% 35%, rgba(98,74,215,.22), transparent 62%),
    linear-gradient(180deg, rgba(5,4,30,.65), rgba(5,4,30,.92)) !important;
}

/* ---------- Footer: same dark theme ---------- */
.footer-area{
  background:
    radial-gradient(700px 480px at 30% 25%, rgba(105,119,244,.16), transparent 60%),
    linear-gradient(180deg, rgba(10,8,34,.55), rgba(5,4,30,.92)) !important;
}

.footer-area .info-list a,
.footer-area .social-link a{
  color: rgba(233,231,255,.82) !important;
}
.footer-area .info-list a:hover,
.footer-area .social-link a:hover{
  color: #ffffff !important;
}

.copy-right-area{
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* ---------- Preloader ---------- */
#preLoader{
  background: linear-gradient(180deg, var(--p-bg-1), var(--p-bg-0)) !important;
}
#preLoader .loader{
  color: rgba(233,231,255,.90) !important;
}

/* ---------- Go top button ---------- */
.go-top{
  background: rgba(10, 8, 34, .65) !important;
  border: 1px solid rgba(137,124,255,.22) !important;
  box-shadow: var(--p-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.go-top i{
  color: rgba(233,231,255,.90) !important;
}

/* ---------- Small polish ---------- */
img{
  filter: saturate(1.02) contrast(1.02);
}