/* ===== XEDM THEMES ===== */
/* Egypt picks one — saved to DB, applied via body class */

/* ─── THEME 1: REDLINE (default) ─── */
.theme-redline {
  --bg:        #0a0a0a;
  --bg-2:      #111111;
  --bg-3:      #1a1a1a;
  --card-bg:   #141414;
  --border:    rgba(255,255,255,0.07);
  --text:      #f0f0f0;
  --text-muted:#888888;
  --accent:    #cc2200;
  --accent-2:  #ff4422;
  --accent-3:  #881500;
  --input-bg:  #1e1e1e;
}

.theme-redline .site-header {
  background: rgba(10,10,10,0.96);
  border-bottom-color: rgba(204,34,0,0.2);
}

.theme-redline .nav-link.active,
.theme-redline .logo-text { color: #cc2200; }

.theme-redline .hero-banner {
  background-image: url('/assets/images/banners/banner-redline.jpg');
}

/* ─── THEME 2: BLUEPRINT ─── */
.theme-blueprint {
  --bg:        #060c14;
  --bg-2:      #0a1220;
  --bg-3:      #0f1c30;
  --card-bg:   #0d1828;
  --border:    rgba(100,160,255,0.1);
  --text:      #e8f0ff;
  --text-muted:#5a7aaa;
  --accent:    #2266ee;
  --accent-2:  #44aaff;
  --accent-3:  #1144bb;
  --input-bg:  #0f1c30;
}

.theme-blueprint .site-header {
  background: rgba(6,12,20,0.96);
  border-bottom-color: rgba(34,102,238,0.2);
}

.theme-blueprint .countdown-num,
.theme-blueprint .stat-box-num { color: #44aaff; }

.theme-blueprint .hero-banner {
  background-image: url('/assets/images/banners/banner-blueprint.jpg');
}

/* ─── THEME 3: VOIDWALKER ─── */
.theme-voidwalker {
  --bg:        #08060f;
  --bg-2:      #0e0a18;
  --bg-3:      #160e24;
  --card-bg:   #110d1e;
  --border:    rgba(160,100,255,0.1);
  --text:      #ede8ff;
  --text-muted:#7055aa;
  --accent:    #8833ee;
  --accent-2:  #aa66ff;
  --accent-3:  #5511bb;
  --input-bg:  #160e24;
}

.theme-voidwalker .site-header {
  background: rgba(8,6,15,0.96);
  border-bottom-color: rgba(136,51,238,0.2);
}

.theme-voidwalker .nav-link.active { color: #aa66ff; }
.theme-voidwalker .countdown-num,
.theme-voidwalker .stat-box-num { color: #aa66ff; }

.theme-voidwalker .hero-banner {
  background-image: url('/assets/images/banners/banner-voidwalker.jpg');
}

/* ─── THEME 4: CONCRETE ─── */
.theme-concrete {
  --bg:        #0e0e0e;
  --bg-2:      #161616;
  --bg-3:      #202020;
  --card-bg:   #1a1a1a;
  --border:    rgba(255,255,255,0.08);
  --text:      #e8e8e8;
  --text-muted:#777777;
  --accent:    #ee6622;
  --accent-2:  #ff8844;
  --accent-3:  #aa3300;
  --input-bg:  #222222;
}

.theme-concrete .site-header {
  background: rgba(14,14,14,0.96);
  border-bottom-color: rgba(238,102,34,0.2);
}

.theme-concrete .countdown-num,
.theme-concrete .stat-box-num { color: #ee6622; }

.theme-concrete .hero-banner {
  background-image: url('/assets/images/banners/banner-concrete.jpg');
}

/* ─── THEME 5: VENOM ─── */
.theme-venom {
  --bg:        #050505;
  --bg-2:      #0a0a0a;
  --bg-3:      #111111;
  --card-bg:   #0d0d0d;
  --border:    rgba(200,0,0,0.12);
  --text:      #f5eeee;
  --text-muted:#664444;
  --accent:    #cc0000;
  --accent-2:  #ff2222;
  --accent-3:  #880000;
  --input-bg:  #111111;
}

.theme-venom .site-header {
  background: rgba(5,5,5,0.97);
  border-bottom-color: rgba(200,0,0,0.25);
}

.theme-venom .card { border-color: rgba(200,0,0,0.1); }
.theme-venom .card:hover { border-color: rgba(200,0,0,0.25); }

.theme-venom .nav-link.active { color: #ff2222; }
.theme-venom .countdown-num,
.theme-venom .stat-box-num { color: #cc0000; }

.theme-venom .hero-banner {
  background-image: url('/assets/images/banners/banner-venom.jpg');
}

/* ─── MOM THEME: WU XING (admin panel only) ─── */
.theme-mom {
  --bg:        #faf7f2;
  --bg-2:      #f5f0e8;
  --bg-3:      #ede5d8;
  --card-bg:   #ffffff;
  --border:    rgba(0,0,0,0.08);
  --text:      #1a1208;
  --text-muted:#8a7a60;
  --accent:    #c0392b;   /* Fire — red */
  --accent-2:  #27ae60;   /* Wood — green */
  --accent-3:  #f39c12;   /* Earth — yellow */
  --input-bg:  #f5f0e8;
}

/* Wu Xing element badges */
.wuxing-fire   { background: rgba(192,57,43,0.1);  color: #c0392b; border: 1px solid rgba(192,57,43,0.2); }
.wuxing-wood   { background: rgba(39,174,96,0.1);  color: #27ae60; border: 1px solid rgba(39,174,96,0.2); }
.wuxing-earth  { background: rgba(243,156,18,0.1); color: #f39c12; border: 1px solid rgba(243,156,18,0.2); }
.wuxing-metal  { background: rgba(149,165,166,0.1);color: #95a5a6; border: 1px solid rgba(149,165,166,0.2); }
.wuxing-water  { background: rgba(41,128,185,0.1); color: #2980b9; border: 1px solid rgba(41,128,185,0.2); }

/* ─── THEME PICKER UI ─── */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.theme-option {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  position: relative;
}

.theme-option:hover { transform: translateY(-2px); }
.theme-option.selected { border-color: #fff; }

.theme-swatch {
  height: 80px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 0.5rem;
}

.theme-swatch-redline    { background: linear-gradient(135deg, #0a0a0a, #1a0000); }
.theme-swatch-blueprint  { background: linear-gradient(135deg, #060c14, #0f1c30); }
.theme-swatch-voidwalker { background: linear-gradient(135deg, #08060f, #1a0a30); }
.theme-swatch-concrete   { background: linear-gradient(135deg, #0e0e0e, #222222); }
.theme-swatch-venom      { background: linear-gradient(135deg, #050505, #1a0000); }

.theme-accent-bar {
  height: 3px;
  width: 100%;
}
.theme-accent-redline    { background: #cc2200; }
.theme-accent-blueprint  { background: #2266ee; }
.theme-accent-voidwalker { background: #8833ee; }
.theme-accent-concrete   { background: #ee6622; }
.theme-accent-venom      { background: #cc0000; }

.theme-label {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
}

.theme-option.selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fff;
  color: #000;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}