/*
 * TheGoldenNumbers - Master Unified Design System & Design Tokens
 * Premium Light Modern Fintech Palette with Subtle Champagne Gold Accents
 * Shared CSS Custom Properties and Global Component Styles for User Website & Admin Panel
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

:root {
  /* Canvas & Layout Color Tokens (Light Modern Fintech) */
  --theme-bg: #F8FAFC;
  /* Clean Slate 50 Light Canvas */
  --theme-surface: #FFFFFF;
  /* Pristine White Surface for Navbar/Sidebar/Header */
  --theme-card: #FFFFFF;
  /* Elevated Pure White Card Surface */
  --theme-card-hover: #FFFFFF;
  /* Hover state for Cards */
  --theme-input-bg: #F1F5F9;
  /* Clean Slate 100 Input Fields */

  /* Subtle Champagne Gold Palette Tokens (Refined & Understated) */
  --theme-gold: #D4AF37;
  /* Refined Warm Champagne Gold Accent */
  --theme-gold-hover: #B58E22;
  /* Rich Gold Hover */
  --theme-gold-dark: #8E6B18;
  --theme-gold-gradient: linear-gradient(135deg, #E5C358 0%, #D4AF37 50%, #B58E22 100%);
  --theme-gold-glow: 0 10px 25px -5px rgba(212, 175, 55, 0.25);
  --theme-gold-soft: rgba(212, 175, 55, 0.08);

  /* Text & Typography Color Tokens */
  --theme-text-main: #0F172A;
  /* Slate 900 Charcoal Text for High Legibility */
  --theme-text-muted: #64748B;
  /* Slate 500 Subtle Neutral Text */
  --theme-text-gold: #B58E22;
  /* Refined Understated Gold Text Accent */

  /* Border Tokens */
  --theme-border: #E2E8F0;
  /* Slate 200 Crisp Minimalist Border */
  --theme-border-hover: rgba(212, 175, 55, 0.40);
  /* Subtle Gold Accent Border on Hover */
  --theme-border-subtle: #F1F5F9;

  /* Status & State Color Tokens (Clean Fintech Style) */
  --theme-success: #059669;
  --theme-success-bg: #ECFDF5;
  --theme-success-border: #A7F3D0;

  --theme-warning: #D97706;
  --theme-warning-bg: #FFFBEB;
  --theme-warning-border: #FDE68A;

  --theme-error: #DC2626;
  --theme-error-bg: #FEF2F2;
  --theme-error-border: #FECACA;

  /* Legacy Alias Mappings for Admin Panel Parity */
  --admin-bg: var(--theme-bg);
  --admin-sidebar-bg: var(--theme-surface);
  --admin-card-bg: var(--theme-card);
  --admin-card-hover: var(--theme-card-hover);
  --admin-border: var(--theme-border);
  --admin-border-hover: var(--theme-border-hover);
  --admin-gold: var(--theme-gold);
  --admin-gold-hover: var(--theme-gold-hover);
  --admin-gold-gradient: var(--theme-gold-gradient);
  --admin-gold-glow: var(--theme-gold-glow);
  --admin-text-main: var(--theme-text-main);
  --admin-text-muted: var(--theme-text-muted);
  --admin-input-bg: var(--theme-input-bg);
}

/* Global Font & Body Settings */
body {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text-main) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: 'Outfit', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--theme-bg);
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-gold);
}

/* Text Gradients & Gold Helpers */
.text-gold-gradient {
  background: var(--theme-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-gold {
  color: var(--theme-text-gold) !important;
}

.bg-gold-gradient {
  background: var(--theme-gold-gradient) !important;
}

/* Shared Button Design Tokens */
.btn-gold {
  background: var(--theme-gold-gradient) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.65rem 1.4rem !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.25) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.btn-gold:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
  color: #FFFFFF !important;
}

.btn-glass {
  background: #FFFFFF !important;
  border: 1px solid var(--theme-border) !important;
  color: #334155 !important;
  border-radius: 12px !important;
  padding: 0.6rem 1.25rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.btn-glass:hover,
.btn-glass.active {
  background: var(--theme-gold-soft) !important;
  border-color: var(--theme-border-hover) !important;
  color: var(--theme-gold-dark) !important;
}

.btn-outline-gold {
  background: transparent !important;
  border: 1px solid var(--theme-gold) !important;
  color: var(--theme-gold-dark) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.25rem !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-outline-gold:hover {
  background: var(--theme-gold) !important;
  color: #FFFFFF !important;
}

/* Cards & Surfaces */
.theme-card,
.admin-card {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  padding: 1.6rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-card:hover,
.admin-card:hover {
  border-color: var(--theme-border-hover);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.08), var(--theme-gold-glow);
}

/* Form Controls */
.theme-input,
.form-control-admin,
.form-select-admin {
  background-color: var(--theme-input-bg) !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-text-main) !important;
  border-radius: 12px !important;
  padding: 0.7rem 1.1rem;
  transition: all 0.2s ease !important;
}

.theme-input::placeholder,
.form-control-admin::placeholder {
  color: #94A3B8 !important;
}

.theme-input:focus,
.form-control-admin:focus,
.form-select-admin:focus {
  background-color: #FFFFFF !important;
  border-color: var(--theme-gold) !important;
  color: var(--theme-text-main) !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12) !important;
  outline: none !important;
}

/* Status Badges */
.badge-available {
  background: var(--theme-success-bg) !important;
  color: var(--theme-success) !important;
  border: 1px solid var(--theme-success-border) !important;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
}

.badge-sold {
  background: var(--theme-error-bg) !important;
  color: var(--theme-error) !important;
  border: 1px solid var(--theme-error-border) !important;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
}

.badge-pending {
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning) !important;
  border: 1px solid var(--theme-warning-border) !important;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
}

/* Premium Hero Section Animations */
@keyframes heroFadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroGlowPulse {

  0%,
  100% {
    transform: translate(-50%, 0) scale(1);
    opacity: 0.12;
  }

  50% {
    transform: translate(-50%, 0) scale(1.10);
    opacity: 0.24;
  }
}

@keyframes heroFloatSlow {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes heroFloatReverse {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(6px);
  }
}

.animate-hero-fade {
  animation: heroFadeInUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.animate-hero-glow {
  animation: heroGlowPulse 7s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes heroGlowAlt {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.10;
  }

  50% {
    transform: translate(30px, -20px) scale(1.15);
    opacity: 0.22;
  }
}

.animate-hero-glow-alt {
  animation: heroGlowAlt 9s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Subtle Hero Grid Pattern & Mesh Animation */
@keyframes heroGridPan {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 40px 40px;
  }
}

.animate-grid-pan {
  animation: heroGridPan 25s linear infinite;
  will-change: background-position;
}

.bg-fintech-mesh {
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-hero-grid {
  background-image: radial-gradient(rgba(15, 23, 42, 0.07) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

.animate-hero-float {
  animation: heroFloatSlow 4s ease-in-out infinite;
}

/* 3D Perspective & Flagship Hero Visual Showcase Effects */
.perspective-1000 {
  perspective: 1000px;
}

.transform-3d {
  transform-style: preserve-3d;
}

@keyframes orbitSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

.animate-orbit-slow {
  animation: orbitSpin 30s linear infinite;
}

@keyframes pulseGlowSlow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.08); }
}

.animate-pulse-glow {
  animation: pulseGlowSlow 6s ease-in-out infinite;
}

.text-glow-gold {
  text-shadow: 0 0 25px rgba(212, 175, 55, 0.5), 0 0 50px rgba(212, 175, 55, 0.25);
}

.glass-card-premium {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.08), 0 10px 25px -5px rgba(212, 175, 55, 0.15);
}

.glass-card-dark {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.94) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 30px 70px -15px rgba(15, 23, 42, 0.4), 0 0 50px rgba(212, 175, 55, 0.25);
}

.animate-hero-float-reverse {
  animation: heroFloatReverse 4.5s ease-in-out infinite;
}

/* Stagger Delays */
.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-400 {
  animation-delay: 400ms;
}

.delay-500 {
  animation-delay: 500ms;
}

/* Subtle Button Shimmer Hover */
.btn-gold {
  position: relative;
  overflow: hidden;
}

.btn-gold::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg,
      transparent 30%,
      rgba(255, 255, 255, 0.25) 50%,
      transparent 70%);
  transform: rotate(30deg) translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.btn-gold:hover::after {
  transform: rotate(30deg) translateX(100%);
}

/* Accessibility: prefers-reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {

  .animate-hero-fade,
  .animate-hero-glow,
  .animate-hero-float {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .btn-gold::after {
    display: none !important;
  }
}