/* ============================================================
   NEON VOID — Prometheus Theme
   Drop this folder into: path-to-prometheus/themes/
   Then select "neon-void" in Admin > Settings > Theme
   ============================================================

   QUICK CONFIG — edit these variables to personalise:
   --accent-1  : primary rainbow start color
   --accent-2  : secondary rainbow color
   --bg-base   : deepest background color
   ============================================================ */

/* ── GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ── ROOT VARIABLES ───────────────────────────────────────── */
:root {
  --accent-1:     #8844ff;
  --accent-2:     #00ccff;
  --accent-3:     #ff0080;
  --accent-4:     #00ff88;
  --accent-5:     #ffcc00;

  --bg-base:      #040408;
  --bg-surface:   rgba(10, 8, 24, 0.65);
  --bg-raised:    rgba(18, 14, 36, 0.70);
  --bg-card:      rgba(14, 10, 30, 0.60);

  --glass-blur:   18px;
  --glass-border: rgba(136, 68, 255, 0.22);
  --glass-border-hover: rgba(136, 68, 255, 0.55);

  --text-primary:   #eee8ff;
  --text-secondary: rgba(200, 185, 255, 0.65);
  --text-muted:     rgba(160, 140, 220, 0.4);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

/* ── KEYFRAMES ────────────────────────────────────────────── */
@keyframes rainbow-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rainbow-text {
  0%   { color: #ff0080; }
  15%  { color: #ff6600; }
  30%  { color: #ffcc00; }
  45%  { color: #00ff88; }
  60%  { color: #00ccff; }
  75%  { color: #8844ff; }
  100% { color: #ff0080; }
}

@keyframes rainbow-border {
  0%   { border-color: #ff0080; box-shadow: 0 0 12px rgba(255,0,128,.25); }
  20%  { border-color: #ffcc00; box-shadow: 0 0 12px rgba(255,204,0,.25); }
  40%  { border-color: #00ff88; box-shadow: 0 0 12px rgba(0,255,136,.25); }
  60%  { border-color: #00ccff; box-shadow: 0 0 12px rgba(0,204,255,.25); }
  80%  { border-color: #8844ff; box-shadow: 0 0 12px rgba(136,68,255,.25); }
  100% { border-color: #ff0080; box-shadow: 0 0 12px rgba(255,0,128,.25); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(136,68,255,.35), 0 0 60px rgba(136,68,255,.12); }
  50%       { box-shadow: 0 0 30px rgba(0,204,255,.45), 0 0 80px rgba(0,204,255,.15); }
}

@keyframes float-up {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}

@keyframes scan-line {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(500%); opacity: 0; }
}

@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -30px) scale(1.1); }
  66%  { transform: translate(-20px, 30px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes bar-rainbow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes bar-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(136,68,255,.55),
      0 0 24px rgba(136,68,255,.25),
      inset 0 1px 0 rgba(255,255,255,.15);
  }
  25% {
    box-shadow:
      0 0 14px rgba(0,204,255,.65),
      0 0 32px rgba(0,204,255,.25),
      inset 0 1px 0 rgba(255,255,255,.15);
  }
  50% {
    box-shadow:
      0 0 14px rgba(255,0,128,.60),
      0 0 30px rgba(255,0,128,.22),
      inset 0 1px 0 rgba(255,255,255,.15);
  }
  75% {
    box-shadow:
      0 0 14px rgba(0,255,136,.55),
      0 0 28px rgba(0,255,136,.20),
      inset 0 1px 0 rgba(255,255,255,.15);
  }
}

@keyframes bar-sweep {
  0%   { left: -40%; }
  100% { left: 110%; }
}

@keyframes track-pulse {
  0%, 100% { border-color: rgba(136,68,255,.22); }
  50%       { border-color: rgba(136,68,255,.45); }
}

/* ── GLOBAL RESET & BASE ──────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Full-page layout so footer is always pushed to the bottom */
  height: 100%;
}

body {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--text-primary) !important;

  /* Full-viewport background — fixed so it covers every page section */
  background-color: var(--bg-base) !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(136,68,255,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(0,204,255,.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(255,0,128,.08) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
  background-size: cover !important;

  /* Flexbox column so main content grows and footer sits at the very bottom */
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden;
}

/* The main Bootstrap container that wraps all page content */
body > .container,
body > .container-fluid,
body > div > .container,
#wrap,
#content,
.main-content,
.page-wrapper {
  flex: 1 0 auto !important; /* grow to fill space above footer */
  width: 100% !important;
}

/* Animated orb layer — fixed so it covers the full page at all resolutions */
body::before {
  content: '';
  position: fixed;
  top: -20%;
  left: -10%;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(136,68,255,.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: orb-drift 18s ease-in-out infinite;
}

body::after {
  content: '';
  position: fixed;
  bottom: -15%;
  right: -5%;
  width: 45vw;
  height: 45vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,204,255,.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: orb-drift 24s ease-in-out infinite reverse;
}

/* ── FULL-WIDTH ROW BACKGROUNDS ───────────────────────────── */
/* Row backgrounds are handled in the Prometheus-specific
   section at the bottom of this file.                        */
.row { position: relative; }

.container > .row,
.container-fluid > .row {
  background: transparent !important;
}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  color: var(--text-primary) !important;
}

a {
  color: var(--accent-2) !important;
  text-decoration: none !important;
  transition: color .2s, text-shadow .2s;
}

a:hover {
  color: #fff !important;
  text-shadow: 0 0 12px var(--accent-2);
}

/* Boosted body text — 500 weight, brighter colour, tighter tracking */
p, li, td, th, span, label, div {
  font-weight: 500 !important;
}

p {
  color: rgba(220, 210, 255, 0.85) !important;
  font-size: 14px !important;
}

/* ── NAVBAR ───────────────────────────────────────────────── */
.navbar,
nav.navbar,
header nav {
  background: rgba(6, 4, 16, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 0 20px rgba(136,68,255,.35), 0 0 60px rgba(136,68,255,.12) !important;
  position: relative !important;
  z-index: 1050 !important;
  /* overflow must be visible so the dropdown can escape the navbar bounds */
  overflow: visible !important;
}

.navbar-brand,
.navbar .brand {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, #ff0080, #8844ff, #00ccff, #ff0080) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: shimmer 3.5s linear infinite !important;
}

.navbar-nav .nav-link,
.navbar-nav > li > a {
  color: rgba(200,185,255,.65) !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm) !important;
  transition: all .25s !important;
  border: 1px solid transparent !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav > li > a:hover,
.navbar-nav .nav-link.active,
.navbar-nav > li.active > a {
  color: #fff !important;
  background: rgba(136,68,255,.15) !important;
  border-color: rgba(136,68,255,.35) !important;
  text-shadow: none !important;
}

/* ── HERO / JUMBOTRON ─────────────────────────────────────── */
.jumbotron,
.hero,
.hero-section,
.page-header {
  position: relative;
  overflow: hidden;
  background: var(--bg-card) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 60px 40px !important;
  margin-bottom: 28px !important;
  animation: fade-in-up .6s ease both;
}

/* Scan line effect on hero */
.jumbotron::before,
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(136,68,255,.6), rgba(0,204,255,.6), transparent);
  animation: scan-line 6s linear infinite;
  pointer-events: none;
}

/* Rainbow top border on hero */
.jumbotron::after,
.hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff0080, #ff6600, #ffcc00, #00ff88, #00ccff, #8844ff, #ff0080);
  background-size: 300% auto;
  animation: shimmer 4s linear infinite;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.jumbotron h1,
.hero h1 {
  background: linear-gradient(135deg, #fff 0%, #c8aaff 40%, #00ccff 70%, #ff0080 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: clamp(32px, 5vw, 60px) !important;
  line-height: 1.1 !important;
}

/* ── CARDS / PANELS ───────────────────────────────────────── */
.card,
.panel,
.well,
.box {
  background: var(--bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-primary) !important;
  transition: transform .25s, border-color .25s, box-shadow .25s !important;
  position: relative;
  overflow: hidden;
  animation: fade-in-up .5s ease both;
}

.card::after,
.panel::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #8844ff, #00ccff, #ff0080);
  opacity: 0;
  transition: opacity .3s;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card:hover,
.panel:hover {
  transform: translateY(-4px) !important;
  border-color: var(--glass-border-hover) !important;
  box-shadow: 0 12px 40px rgba(80,40,255,.20) !important;
}

.card:hover::after,
.panel:hover::after {
  opacity: 1;
}

.card-header,
.panel-heading {
  background: rgba(136,68,255,.08) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: .04em !important;
  color: var(--text-primary) !important;
}

.card-body,
.panel-body {
  color: var(--text-secondary) !important;
}

.card-footer,
.panel-footer {
  background: rgba(0,0,0,.2) !important;
  border-top: 1px solid var(--glass-border) !important;
}

/* ── PACKAGE / PRODUCT CARDS ──────────────────────────────── */
.package-card,
.product-card,
.item-card,
[class*="package"] .card,
[class*="product"] .card {
  transition: transform .3s, box-shadow .3s !important;
}

.package-card:hover,
.product-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 16px 50px rgba(136,68,255,.25) !important;
}

/* Featured / highlighted package */
.package-card.featured,
.package-card.popular,
.product-card.featured {
  border-color: rgba(0,204,255,.45) !important;
  animation: pulse-glow 3.5s ease-in-out infinite !important;
}

.package-price,
.product-price,
.price {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #fff !important;
  animation: rainbow-text 6s linear infinite;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn,
button:not([class*="close"]):not([class*="dismiss"]) {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-md) !important;
  transition: all .25s !important;
  position: relative;
  overflow: hidden;
}

.btn-primary,
button.btn-primary,
input[type="submit"],
input[type="button"] {
  background: linear-gradient(135deg, #8844ff, #00ccff) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(136,68,255,.35) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"]:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 28px rgba(136,68,255,.50) !important;
  background: linear-gradient(135deg, #9955ff, #11ddff) !important;
}

.btn-primary:active {
  transform: scale(0.98) !important;
}

/* Shimmer sweep on primary button */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .5s;
}

.btn-primary:hover::before {
  left: 150%;
}

.btn-default,
.btn-secondary,
.btn-outline {
  background: transparent !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-secondary) !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-outline:hover {
  background: rgba(136,68,255,.12) !important;
  border-color: rgba(136,68,255,.55) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

.btn-success {
  background: linear-gradient(135deg, #00c875, #00ff88) !important;
  border: none !important;
  color: #001a0a !important;
  box-shadow: 0 4px 18px rgba(0,200,120,.3) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ff0044, #ff6688) !important;
  border: none !important;
  color: #fff !important;
}

/* ── FORMS ────────────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: rgba(10, 8, 24, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-family: 'Montserrat', sans-serif !important;
  transition: border-color .25s, box-shadow .25s !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-1) !important;
  box-shadow: 0 0 0 3px rgba(136,68,255,.18) !important;
  outline: none !important;
  background: rgba(14, 10, 30, 0.75) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

label,
.form-label {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

/* ── TABLES ───────────────────────────────────────────────── */
.table,
table {
  color: var(--text-primary) !important;
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
}

.table thead th,
table thead th,
.table th,
table th {
  background: rgba(136,68,255,.10) !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 12px 16px !important;
}

.table tbody tr,
table tbody tr {
  background: var(--bg-card) !important;
  backdrop-filter: blur(8px) !important;
  transition: background .2s, transform .2s !important;
}

.table tbody tr:hover,
table tbody tr:hover {
  background: rgba(136,68,255,.10) !important;
  transform: scale(1.005) !important;
}

.table td,
table td {
  border: none !important;
  border-bottom: 1px solid rgba(136,68,255,.08) !important;
  padding: 12px 16px !important;
  color: var(--text-secondary) !important;
  vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(8,6,20,.4) !important;
}

/* ── ALERTS / FLASH MESSAGES ──────────────────────────────── */
.alert {
  backdrop-filter: blur(12px) !important;
  border-radius: var(--radius-md) !important;
  border-width: 1px !important;
  border-left-width: 3px !important;
  animation: fade-in-up .4s ease both, float-up 5s ease-in-out infinite;
}

.alert-success {
  background: rgba(0, 200, 120, .10) !important;
  border-color: #00c875 !important;
  color: #00ff99 !important;
}

.alert-danger,
.alert-error {
  background: rgba(255, 0, 80, .10) !important;
  border-color: #ff0050 !important;
  color: #ff6688 !important;
}

.alert-warning {
  background: rgba(255, 200, 0, .10) !important;
  border-color: #ffcc00 !important;
  color: #ffe066 !important;
}

.alert-info {
  background: rgba(0, 180, 255, .10) !important;
  border-color: #00b4ff !important;
  color: #66d9ff !important;
}

/* ── BADGES & LABELS ──────────────────────────────────────── */
.badge,
.label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
}

.badge-primary,
.label-primary {
  background: linear-gradient(90deg, #8844ff, #00ccff) !important;
  color: #fff !important;
}

.badge-success,
.label-success {
  background: rgba(0,200,120,.18) !important;
  color: #00ff99 !important;
  border: 1px solid rgba(0,200,120,.3) !important;
}

.badge-danger,
.label-danger {
  background: rgba(255,0,80,.18) !important;
  color: #ff6688 !important;
  border: 1px solid rgba(255,0,80,.3) !important;
}

/* ── PROGRESS BARS ────────────────────────────────────────── */
/* ── PROGRESS BAR TRACK ───────────────────────────────────── */
.progress {
  background: rgba(136,68,255,.10) !important;
  border-radius: 20px !important;
  height: 22px !important;          /* thick bar */
  overflow: visible !important;     /* let glow bleed outside */
  border: 1px solid rgba(136,68,255,.22) !important;
  box-shadow:
    0 0 0 3px rgba(136,68,255,.06),
    inset 0 2px 6px rgba(0,0,0,.35) !important;
  position: relative !important;
  animation: track-pulse 4s ease-in-out infinite !important;
  margin-bottom: 6px !important;
}

/* ── PROGRESS BAR FILL ────────────────────────────────────── */
.progress-bar {
  /* Full rainbow gradient that slides continuously */
  background: linear-gradient(
    90deg,
    #ff0080, #ff6600, #ffcc00, #00ff88, #00ccff, #8844ff, #ff0080
  ) !important;
  background-size: 300% 100% !important;
  animation:
    bar-rainbow   3s linear infinite,
    bar-glow-pulse 4s ease-in-out infinite !important;

  border-radius: 20px !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;

  /* Raised inner highlight */
  box-shadow:
    0 0 12px rgba(136,68,255,.6),
    0 0 28px rgba(136,68,255,.25),
    inset 0 1px 0 rgba(255,255,255,.20) !important;

  transition: width .8s cubic-bezier(.4, 0, .2, 1) !important;
}

/* Moving light-streak sweep across the bar */
.progress-bar::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 35%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.30) 50%,
    transparent 100%
  );
  border-radius: 20px;
  animation: bar-sweep 2.2s ease-in-out infinite;
  pointer-events: none;
}

/* Soft glowing tip at the leading edge */
.progress-bar::after {
  content: '';
  position: absolute;
  right: -4px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 10px 4px rgba(255,255,255,.5),
    0 0 22px 8px rgba(136,68,255,.6),
    0 0 40px 12px rgba(0,204,255,.3);
  pointer-events: none;
}

/* ── SUCCESS VARIANT (green goal bar) ─────────────────────── */
.progress-bar-success {
  background: linear-gradient(
    90deg,
    #00c875, #00ff88, #00ccff, #00ff88, #00c875
  ) !important;
  background-size: 300% 100% !important;
  animation:
    bar-rainbow   3.5s linear infinite,
    bar-glow-pulse 5s ease-in-out infinite !important;
  box-shadow:
    0 0 12px rgba(0,200,120,.6),
    0 0 28px rgba(0,200,120,.25),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.progress-bar-success::after {
  box-shadow:
    0 0 10px 4px rgba(255,255,255,.5),
    0 0 22px 8px rgba(0,200,120,.65),
    0 0 40px 12px rgba(0,204,255,.3);
}

/* ── MODALS ───────────────────────────────────────────────── */
.modal-content {
  background: rgba(10, 8, 24, 0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 60px rgba(136,68,255,.15) !important;
  animation: rainbow-border 5s linear infinite;
}

.modal-header {
  border-bottom: 1px solid var(--glass-border) !important;
  background: rgba(136,68,255,.06) !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}

.modal-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  background: linear-gradient(90deg, #fff, #c8aaff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.modal-footer {
  border-top: 1px solid var(--glass-border) !important;
  background: rgba(0,0,0,.15) !important;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.70) !important;
  backdrop-filter: blur(6px) !important;
}

/* ── DROPDOWNS ────────────────────────────────────────────── */
.dropdown-menu {
  background: rgba(12, 9, 28, 0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 30px rgba(136,68,255,.18) !important;
  padding: 6px !important;
  /* Must exceed navbar z-index so it floats above all content */
  z-index: 9999 !important;
  position: absolute !important;
}

.dropdown-item,
.dropdown-menu > li > a {
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
  transition: all .2s !important;
}

.dropdown-item:hover,
.dropdown-menu > li > a:hover {
  background: rgba(136,68,255,.14) !important;
  color: #fff !important;
}

/* ── PAGINATION ───────────────────────────────────────────── */
.pagination .page-item .page-link,
.pagination li a {
  background: var(--bg-card) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 3px !important;
  transition: all .2s !important;
}

.pagination .page-item.active .page-link,
.pagination li.active a {
  background: linear-gradient(135deg, #8844ff, #00ccff) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(136,68,255,.35) !important;
}

.pagination .page-item .page-link:hover,
.pagination li a:hover {
  background: rgba(136,68,255,.15) !important;
  border-color: rgba(136,68,255,.4) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ── TABS ─────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--glass-border) !important;
  gap: 4px !important;
}

.nav-tabs .nav-item .nav-link,
.nav-tabs > li > a {
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  transition: all .2s !important;
  padding: 9px 18px !important;
}

.nav-tabs .nav-item .nav-link:hover,
.nav-tabs > li > a:hover {
  color: var(--text-primary) !important;
  background: rgba(136,68,255,.08) !important;
  border-color: var(--glass-border) transparent var(--glass-border) var(--glass-border) !important;
}

.nav-tabs .nav-item .nav-link.active,
.nav-tabs > li.active > a {
  color: #fff !important;
  background: rgba(136,68,255,.12) !important;
  border-color: var(--glass-border) var(--glass-border) transparent !important;
}

/* ── TOOLTIPS ─────────────────────────────────────────────── */
.tooltip .tooltip-inner,
.tooltip-inner {
  background: rgba(12,9,28,.92) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: 12px !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ── FOOTER ───────────────────────────────────────────────── */
/* Prometheus outputs the footer inside the last .container row.
   We break it out to full-width by overriding width + margins,
   and ensure it always sits at the very bottom of the viewport. */
footer,
.footer,
#footer,
body > .container > .row:last-child,
body > .container > .row:last-of-type {
  flex-shrink: 0 !important;    /* never squish the footer */
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important; /* pull edge-to-edge */
  margin-right: 0 !important;
  padding-left: calc(50vw - 50%) !important; /* re-indent content */
  padding-right: calc(50vw - 50%) !important;
  background: rgba(4, 4, 10, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid var(--glass-border) !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  position: relative;
}

/* Rainbow shimmer line above footer */
footer::before,
.footer::before,
body > .container > .row:last-child::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8844ff, #00ccff, #ff0080, transparent);
  background-size: 300% auto;
  animation: shimmer 5s linear infinite;
}

footer a,
.footer a {
  color: var(--text-muted) !important;
  transition: color .2s !important;
}

footer a:hover,
.footer a:hover {
  color: var(--accent-2) !important;
  text-shadow: 0 0 8px var(--accent-2) !important;
}

/* ── PACKAGES PAGE FULL-WIDTH BACKGROUND ──────────────────── */
/* The store page has:  .container > .row > .col-md-9 (packages)
                                         + .col-md-3 (sidebar)
   We make the containing .row stretch full-viewport-width so
   the dark background spans edge-to-edge behind both columns. */
.container > .row.store-row,
.container > .row + .row,
.container .row:has(.col-md-9),
.container .row:has(.col-md-8),
.container .row:has([class*="package"]),
.container .row:has(.store-list) {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  background: rgba(6, 4, 16, 0.55) !important;
  backdrop-filter: blur(6px) !important;
}

/* Fallback: any .row that directly contains a multi-column grid */
.row::after {
  content: '';
  display: table;
  clear: both;
}

/* Make sure the full-width row background still uses border-box */
.container > .row {
  box-sizing: border-box !important;
}

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(4,4,10,.8);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8844ff, #00ccff);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9955ff, #11ddff);
}

/* ── TEXT SELECTION ───────────────────────────────────────── */
::selection {
  background: rgba(136,68,255,.35);
  color: #fff;
}

/* ── LOADING SPINNER ──────────────────────────────────────── */
.spinner,
.loading,
[class*="spinner"] {
  border-color: rgba(136,68,255,.2) !important;
  border-top-color: #8844ff !important;
}

/* ── LISTS ────────────────────────────────────────────────── */
ul li::marker {
  color: var(--accent-1);
}

/* ── HR DIVIDER ───────────────────────────────────────────── */
hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #8844ff, #00ccff, #ff0080, transparent) !important;
  background-size: 300% auto !important;
  animation: shimmer 5s linear infinite !important;
  margin: 24px 0 !important;
}

/* ── CODE BLOCKS ──────────────────────────────────────────── */
code,
pre {
  background: rgba(136,68,255,.07) !important;
  border: 1px solid rgba(136,68,255,.18) !important;
  border-radius: var(--radius-sm) !important;
  color: #c8aaff !important;
  font-size: 13px !important;
}

/* ── INPUT GROUPS ─────────────────────────────────────────── */
.input-group-addon,
.input-group-text {
  background: rgba(136,68,255,.10) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-muted) !important;
}

/* ── BREADCRUMBS ──────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
}

.breadcrumb-item,
.breadcrumb li {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.breadcrumb-item a,
.breadcrumb li a {
  color: var(--accent-2) !important;
}

.breadcrumb-item.active,
.breadcrumb li.active {
  color: var(--text-primary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(136,68,255,.4) !important;
  content: "›" !important;
}

/* ── STEAM AUTH BUTTON ────────────────────────────────────── */
.btn-steam,
[class*="steam"] .btn,
a[href*="steam"] {
  background: linear-gradient(135deg, #1b2838, #2a475e) !important;
  border: 1px solid rgba(102,192,244,.3) !important;
  color: #c2d4e0 !important;
  transition: all .25s !important;
}

.btn-steam:hover,
[class*="steam"] .btn:hover {
  border-color: rgba(102,192,244,.7) !important;
  box-shadow: 0 4px 18px rgba(102,192,244,.25) !important;
  transform: translateY(-2px) !important;
}

/* ── ADMIN PANEL ACCENTS ──────────────────────────────────── */
.admin-panel,
.admin-sidebar,
[class*="admin"] .sidebar {
  background: rgba(6,4,16,.8) !important;
  backdrop-filter: blur(16px) !important;
  border-right: 1px solid var(--glass-border) !important;
}

/* ── DONATION GOAL TRACKER ────────────────────────────────── */
[class*="goal"],
[class*="tracker"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
}

/* ── RAFFLE ELEMENTS ──────────────────────────────────────── */
[class*="raffle"],
[class*="ticket"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  transition: all .25s !important;
}

[class*="raffle"]:hover,
[class*="ticket"]:hover {
  border-color: var(--glass-border-hover) !important;
  box-shadow: 0 8px 30px rgba(136,68,255,.18) !important;
  animation: rainbow-border 3s linear infinite !important;
}

/* ── UTILITY: RAINBOW TEXT CLASS ──────────────────────────── */
.rainbow-text {
  background: linear-gradient(90deg, #ff0080, #ff6600, #ffcc00, #00ff88, #00ccff, #8844ff, #ff0080) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: shimmer 3.5s linear infinite !important;
}

/* ── UTILITY: GLOW VARIANTS ───────────────────────────────── */
.glow-purple { text-shadow: 0 0 14px rgba(136,68,255,.7); }
.glow-cyan   { text-shadow: 0 0 14px rgba(0,204,255,.7); }
.glow-pink   { text-shadow: 0 0 14px rgba(255,0,128,.7); }

/* ═══════════════════════════════════════════════════════════
   PROMETHEUS-SPECIFIC LAYOUT FIXES  (v1.10.x)
   ═══════════════════════════════════════════════════════════ */

/* ── PAGE-LEVEL FLEX LAYOUT ───────────────────────────────── */
html { height: 100%; }

body {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

/* Main container grows so footer is always at the bottom */
body > .container:first-of-type,
body > .container-fluid:first-of-type {
  flex: 1 0 auto !important;
}

/* ── ROW RESET — no extra padding ────────────────────────── */
.container > .row {
  margin-left:  -15px !important;
  margin-right: -15px !important;
  padding-left:  0    !important;
  padding-right: 0    !important;
  position: relative;
}

/* Nav row: transparent, high z-index so dropdown floats above everything */
.container > .row:first-child {
  background:    transparent !important;
  backdrop-filter: none      !important;
  z-index: 1050              !important;
  overflow: visible          !important;
}

/* Content rows: subtle tint — exclude first (nav) and last (footer) */
.container > .row:not(:first-child):not(:last-child) {
  background:    rgba(6, 4, 16, 0.45) !important;
  backdrop-filter: blur(6px)          !important;
  -webkit-backdrop-filter: blur(6px)  !important;
  z-index: 1                          !important;
  overflow: visible                   !important;
}

/* ── FOOTER — single RGB line, no duplicate band ─────────── */
.container > .row:last-child {
  flex-shrink:    0                     !important;
  padding-top:    18px                  !important;
  padding-bottom: 18px                  !important;
  /* Solid dark bg — no semi-transparent bleed showing nav behind it */
  background:     #060410              !important;
  border-top:     2px solid transparent !important;
  border-image:   linear-gradient(90deg, transparent, #8844ff 25%, #00ccff 50%, #ff0080 75%, transparent) 1 !important;
  text-align:     center               !important;
  color:          rgba(160,140,220,.45)!important;
  font-size:      12px                 !important;
  letter-spacing: .05em               !important;
  z-index:        5                   !important;
  /* No backdrop-filter — causes footer to show through and bleed */
  backdrop-filter: none               !important;
  -webkit-backdrop-filter: none       !important;
}

.container > .row:last-child::before {
  display: none !important;
}

.container > .row:last-child a {
  color: rgba(160,140,220,.45) !important;
  transition: color .2s, text-shadow .2s !important;
}
.container > .row:last-child a:hover {
  color: #00ccff !important;
  text-shadow: 0 0 8px rgba(0,204,255,.6) !important;
}

/* ── PACKAGE PANEL ITEMS ──────────────────────────────────── */
/* Prometheus renders packages as bare direct children of
   .col-md-9 — not always .panel or .well. Target everything. */

/* Gap between every package box */
.col-md-9 > *,
.col-md-8 > * {
  margin-bottom: 20px !important;
  margin-top: 0 !important;
}

.col-md-9 > .panel,
.col-md-9 > .well,
.col-md-9 > div,
.col-md-9 > section,
.col-md-9 .package-item,
.col-md-8 > .panel,
.col-md-8 > .well,
.col-md-8 > div,
.col-md-8 > section {
  background: rgba(12, 9, 26, 0.65) !important;
  backdrop-filter: blur(16px)         !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(136,68,255,.28) !important;
  border-radius: 16px                 !important;
  margin-bottom: 20px                 !important;
  padding: 20px                       !important;
  transition: transform .25s, border-color .25s, box-shadow .25s !important;
  position: relative;
  overflow: hidden;
}

.col-md-9 > .panel::after,
.col-md-9 > .well::after,
.col-md-9 > div::after,
.col-md-9 > section::after,
.col-md-8 > .panel::after,
.col-md-8 > div::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #8844ff, #00ccff, #ff0080);
  opacity: 0;
  transition: opacity .3s;
  border-radius: 16px 16px 0 0;
}

.col-md-9 > .panel:hover,
.col-md-9 > .well:hover,
.col-md-9 > div:hover,
.col-md-9 > section:hover,
.col-md-8 > .panel:hover,
.col-md-8 > div:hover {
  transform: translateY(-3px)                   !important;
  border-color: rgba(136,68,255,.55)            !important;
  box-shadow: 0 10px 36px rgba(80,40,255,.20)  !important;
}

.col-md-9 > .panel:hover::after,
.col-md-9 > .well:hover::after,
.col-md-9 > div:hover::after,
.col-md-9 > section:hover::after {
  opacity: 1;
}

/* Sidebar panels */
.col-md-3 > .panel,
.col-md-3 > div,
.col-sm-3 > .panel {
  background: rgba(8, 6, 20, 0.60) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(136,68,255,.16) !important;
  border-radius: 14px !important;
  margin-bottom: 16px !important;
}

/* ── RESPONSIVE BREAKPOINTS ───────────────────────────────── */
@media (max-width: 767px) {
  body {
    background-attachment: scroll !important;
  }
}