/*
 * Public Violet theme
 * ---------------------------------------------------------------
 * Applies ONLY to pages whose <body> carries the `vx-public` class
 * (login, register, forgot, reset, purchase, 404).
 * Admin dashboard and logged-in panel pages do not load this file
 * or do not have the class, so they are not affected.
 */

/* ---------- 1. Design tokens ---------- */
body.vx-public {
  --vx-bg: #08080D;
  --vx-bg-2: #0D0D16;
  --vx-section: #101019;
  --vx-card: #151521;
  --vx-elev: #1B1B2A;
  --vx-violet: #8B5CF6;
  --vx-violet-2: #A78BFA;
  --vx-deep: #6D28D9;
  --vx-lav: #C4B5FD;
  --vx-text: #F5F3FF;
  --vx-text-2: #A1A1B5;
  --vx-muted: #77778E;
  --vx-border: #29263A;
  --vx-danger: #FCA5A5;
  --vx-radius-lg: 18px;
  --vx-radius-md: 12px;
  --vx-radius-sm: 10px;
  --vx-shadow-card: 0 28px 60px -24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --vx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --vx-dur: 0.25s;

  background: var(--vx-bg) !important;
  color: var(--vx-text) !important;
  font-family: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- 2. Ambient background ---------- */
/* Fine violet grid, faded toward the edges. Fixed, pointer-free, decorative. */
body.vx-public::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* Slow drifting violet light. Animates transform only (GPU friendly). */
body.vx-public::after {
  content: "";
  position: fixed;
  width: 120vmax;
  height: 120vmax;
  left: 50%;
  top: -35vmax;
  margin-left: -60vmax;
  background: radial-gradient(closest-side,
    rgba(139, 92, 246, 0.20),
    rgba(109, 40, 217, 0.08) 45%,
    transparent 72%);
  pointer-events: none;
  z-index: 0;
  animation: vx-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}

body.vx-public > .wrapper {
  position: relative;
  z-index: 1;
}

@keyframes vx-drift {
  0%   { transform: translate3d(-4%, 0, 0) scale(1); }
  100% { transform: translate3d(4%, 6%, 0) scale(1.08); }
}

/* ---------- 3. Entrance motion ---------- */
@keyframes vx-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vx-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 4. Brand block ---------- */
body.vx-public .vx-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  animation: vx-fade 0.9s var(--vx-ease) both;
}
body.vx-public .vx-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: var(--vx-lav);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.38), rgba(109, 40, 217, 0.12));
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 0 22px -6px rgba(139, 92, 246, 0.55);
}
body.vx-public .vx-brand-name {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vx-text-2);
}

/* ---------- 5. Surfaces ---------- */
body.vx-public .card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(27, 27, 42, 0.92), rgba(21, 21, 33, 0.96)) !important;
  border: 1px solid var(--vx-border) !important;
  border-radius: var(--vx-radius-lg) !important;
  box-shadow: var(--vx-shadow-card) !important;
  color: var(--vx-text) !important;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  animation: vx-rise 0.8s var(--vx-ease) 0.1s both;
}
/* Thin violet highlight along the top edge of the card */
body.vx-public .card::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.8), transparent);
  pointer-events: none;
}
body.vx-public .card-body {
  color: var(--vx-text) !important;
}
body.vx-public .section-authentication-signin .card {
  max-width: 460px;
  margin: 0 auto;
}

body.vx-public h1,
body.vx-public h2,
body.vx-public h3,
body.vx-public h4,
body.vx-public h5 {
  color: var(--vx-text) !important;
  letter-spacing: -0.02em;
}
body.vx-public .card h3 {
  font-size: 1.65rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}
body.vx-public p,
body.vx-public label,
body.vx-public .form-label {
  color: var(--vx-text-2) !important;
  line-height: 1.6;
}
body.vx-public .text-muted {
  color: var(--vx-muted) !important;
}
body.vx-public hr {
  border-top: 1px solid var(--vx-border) !important;
  opacity: 1;
}

/* ---------- 6. Links ---------- */
body.vx-public a {
  color: var(--vx-violet-2);
  text-decoration: none;
  transition: color var(--vx-dur) ease;
}
body.vx-public a:hover {
  color: var(--vx-lav);
}
body.vx-public a:focus-visible,
body.vx-public button:focus-visible,
body.vx-public input:focus-visible {
  outline: 2px solid var(--vx-lav);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 7. Form fields ---------- */
body.vx-public .form-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
body.vx-public .form-control,
body.vx-public .input-group-text {
  background-color: var(--vx-bg-2) !important;
  border: 1px solid var(--vx-border) !important;
  color: var(--vx-text) !important;
  border-radius: var(--vx-radius-sm) !important;
  padding: 0.7rem 0.9rem;
  transition: border-color var(--vx-dur) ease, box-shadow var(--vx-dur) ease, background-color var(--vx-dur) ease;
}
body.vx-public .input-group-text {
  color: var(--vx-text-2) !important;
  background-color: transparent !important;
}
body.vx-public .input-group .form-control {
  border-right: 0 !important;
}
body.vx-public .form-control::placeholder {
  color: var(--vx-muted) !important;
  opacity: 1;
}
body.vx-public .form-control:hover {
  border-color: #3a3556 !important;
}
body.vx-public .form-control:focus {
  background-color: var(--vx-card) !important;
  border-color: var(--vx-violet) !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.32) !important;
}
body.vx-public .form-control:disabled,
body.vx-public .form-control[readonly] {
  opacity: 0.6;
}
body.vx-public .form-check-input {
  background-color: var(--vx-bg-2);
  border-color: var(--vx-border);
}
body.vx-public .form-check-input:checked {
  background-color: var(--vx-violet) !important;
  border-color: var(--vx-violet) !important;
}
body.vx-public .form-check-input:focus {
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18);
  border-color: var(--vx-violet);
}
body.vx-public .form-check-label {
  color: var(--vx-text-2) !important;
}

/* Divider label between Discord login and email form */
body.vx-public .login-separater span {
  background: var(--vx-card);
  color: var(--vx-muted) !important;
  padding: 0 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

/* ---------- 8. Buttons ---------- */
body.vx-public .btn {
  border-radius: var(--vx-radius-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform var(--vx-dur) var(--vx-ease), box-shadow var(--vx-dur) ease,
              background-color var(--vx-dur) ease, border-color var(--vx-dur) ease, color var(--vx-dur) ease;
}
body.vx-public .btn:active {
  transform: translateY(0) scale(0.985);
}
body.vx-public .btn i {
  transition: transform var(--vx-dur) var(--vx-ease);
}
body.vx-public .btn:hover i {
  transform: translateX(2px);
}

/* Primary CTA: violet gradient with a single light sweep on hover */
body.vx-public .btn-primary,
body.vx-public .btn-warning {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%) !important;
  border: 1px solid rgba(167, 139, 250, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 30px -14px rgba(139, 92, 246, 0.8);
}
body.vx-public .btn-primary::after,
body.vx-public .btn-warning::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--vx-ease);
  pointer-events: none;
}
body.vx-public .btn-primary:hover,
body.vx-public .btn-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(139, 92, 246, 0.9);
  background: linear-gradient(135deg, #9B6CFA 0%, #7C3AED 100%) !important;
  color: #ffffff !important;
}
body.vx-public .btn-primary:hover::after,
body.vx-public .btn-warning:hover::after {
  transform: translateX(120%);
}
body.vx-public .btn-primary:focus-visible,
body.vx-public .btn-warning:focus-visible {
  outline: 2px solid var(--vx-lav);
  outline-offset: 3px;
}

/* Secondary: outlined lavender (used for "Get Shirt") */
body.vx-public .btn-success {
  background: rgba(139, 92, 246, 0.08) !important;
  border: 1px solid rgba(167, 139, 250, 0.45) !important;
  color: var(--vx-lav) !important;
  box-shadow: none;
}
body.vx-public .btn-success:hover {
  background: rgba(139, 92, 246, 0.18) !important;
  border-color: var(--vx-violet-2) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px rgba(139, 92, 246, 0.7);
}

/* Tertiary: understated ghost (used for "Other payments" and "Back") */
body.vx-public .btn-info,
body.vx-public .btn-outline-dark {
  background: transparent !important;
  border: 1px solid var(--vx-border) !important;
  color: var(--vx-text-2) !important;
  box-shadow: none;
}
body.vx-public .btn-info:hover,
body.vx-public .btn-outline-dark:hover {
  background: var(--vx-elev) !important;
  border-color: #3a3556 !important;
  color: var(--vx-text) !important;
  transform: translateY(-1px);
}

/* ---------- 9. Alerts & notices ---------- */
body.vx-public .alert {
  border-radius: var(--vx-radius-sm);
  border: 1px solid rgba(252, 165, 165, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: var(--vx-danger);
}
body.vx-public .text-success {
  color: var(--vx-lav) !important;
}

/* ---------- 10. SweetAlert popups (appended to body) ---------- */
body.vx-public .swal2-popup {
  background: var(--vx-card) !important;
  color: var(--vx-text) !important;
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-lg) !important;
  box-shadow: var(--vx-shadow-card);
}
body.vx-public .swal2-title,
body.vx-public .swal2-html-container {
  color: var(--vx-text) !important;
}
body.vx-public .swal2-confirm {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
  border-radius: var(--vx-radius-md) !important;
}

/* ---------- 11. 404 page ---------- */
body.vx-public .error-404 .card {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0.5rem 0;
}
body.vx-public .error-404 h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
}
body.vx-public .error-404 h1 span:nth-child(1) { color: var(--vx-violet-2) !important; }
body.vx-public .error-404 h1 span:nth-child(2) { color: var(--vx-violet) !important; }
body.vx-public .error-404 h1 span:nth-child(3) { color: var(--vx-lav) !important; }
body.vx-public .error-404 img {
  opacity: 0.85;
  filter: saturate(0.6) brightness(0.9);
  border-radius: var(--vx-radius-lg);
}
body.vx-public .error-404 .card-body {
  padding: 2.5rem !important;
}

/* ---------- 12. Responsive ---------- */
@media (max-width: 576px) {
  body.vx-public .card-body {
    padding: 1.25rem !important;
  }
  body.vx-public .card .p-4 {
    padding: 1rem !important;
  }
  body.vx-public .card h3 {
    font-size: 1.4rem;
  }
  body.vx-public .section-authentication-signin .card {
    margin: 0 0.25rem;
  }
  /* Lighter background on small / low-power screens */
  body.vx-public::after {
    animation: none;
    width: 150vmax;
    height: 150vmax;
    margin-left: -75vmax;
    opacity: 0.8;
  }
  body.vx-public .error-404 .card-body {
    padding: 1.5rem !important;
  }
}

/* ---------- 13. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.vx-public::after,
  body.vx-public .vx-brand,
  body.vx-public .vx-brand-mark,
  body.vx-public .card {
    animation: none !important;
  }
  body.vx-public *,
  body.vx-public *::before,
  body.vx-public *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}