/* ===============================
   W O X Y  P R O J E C T
   Bootstrap Purple Sales Theme
   =============================== */

:root {
  --woxy-bg: #0b0614;
  --woxy-card: #130a24;
  --woxy-purple: #8b5cf6;
  --woxy-purple-light: #a78bfa;
  --woxy-text: #e9e7ff;
  --woxy-muted: #b6b2e6;
  --woxy-border: rgba(139, 92, 246, 0.3);
}

/* === BODY === */
body {
  background: radial-gradient(circle at top, #1a0f33, var(--woxy-bg));
  color: var(--woxy-text);
}

/* === NAVBAR === */
.navbar {
  background: rgba(19, 10, 36, 0.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--woxy-border);
}

/* === CARD / PRODUCT BOX === */
.card {
  background: linear-gradient(180deg, var(--woxy-card), #0e081a);
  border: 1px solid var(--woxy-border);
  border-radius: 18px;
  transition: all 0.35s ease;
  box-shadow: 0 0 0 rgba(139, 92, 246, 0);
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--woxy-purple);
  box-shadow:
    0 0 35px rgba(139, 92, 246, 0.45),
    inset 0 0 20px rgba(139, 92, 246, 0.15);
}

/* === CARD TITLE === */
.card-title {
  color: #f5f3ff;
  font-weight: 700;
}

/* === PRICE === */
.price,
.text-price {
  color: var(--woxy-purple-light);
  font-size: 1.5rem;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
}

/* === BUTTONS === */
.btn-primary {
  background: linear-gradient(135deg, var(--woxy-purple), var(--woxy-purple-light));
  border: none;
  border-radius: 14px;
  font-weight: 700;
  padding: 12px 22px;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.45);
}

.btn-primary:hover {
  transform: scale(1.07);
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.75);
}

/* === BADGE === */
.badge {
  background: rgba(139, 92, 246, 0.18);
  color: var(--woxy-purple-light);
  border: 1px solid var(--woxy-border);
  padding: 6px 12px;
  border-radius: 999px;
}

/* === INPUTS === */
.form-control {
  background: #0e081a;
  border: 1px solid var(--woxy-border);
  color: var(--woxy-text);
  border-radius: 12px;
}

.form-control:focus {
  background: #0e081a;
  color: var(--woxy-text);
  border-color: var(--woxy-purple);
  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.35);
}

/* === ALERT / INFO BOX === */
.alert {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid var(--woxy-border);
  color: var(--woxy-text);
}

/* === FOOTER === */
footer {
  color: var(--woxy-muted);
  opacity: 0.85;
}