/* DU'A FC MALANG — ULTRA-LUXURY LIGHT GLASSMORPHISM DESIGN SYSTEM
   Official Colors extracted from DU'A FC Emblem:
   - Flame Orange: #EA580C / #F97316 / #C2410C
   - Deep Pine Teal: #0D7377 / #0F766E / #14B8A6
   - Warm Ivory Porcelain: #FAF8F5 / #FBF6E9
   - Deep Slate Charcoal: #0F172A / #1E293B
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800;900&display=swap');

:root {
  --color-canvas-light: #FAF8F5;
  --color-canvas-cream: #FBF6E9;
  --color-surface-pure: #FFFFFF;
  --color-surface-frosted: rgba(255, 255, 255, 0.88);
  --color-border-subtle: rgba(226, 232, 240, 0.85);
  --color-border-hover: rgba(203, 213, 225, 0.9);
  
  /* DU'A FC Flame Orange Brand Palette */
  --color-orange-flame: #EA580C;
  --color-orange-tangerine: #F97316;
  --color-orange-deep: #C2410C;
  --color-orange-glow: rgba(234, 88, 12, 0.2);
  
  /* DU'A FC Deep Pine Teal Brand Palette */
  --color-teal-pine: #0F766E;
  --color-teal-deep: #0D7377;
  --color-teal-accent: #14B8A6;
  --color-teal-glow: rgba(15, 118, 110, 0.18);
  
  --color-slate-ink: #0F172A;
  --color-slate-body: #334155;
  --color-slate-muted: #64748B;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--color-canvas-light);
  color: var(--color-slate-body);
  background-image: 
    radial-gradient(circle at 8% 8%, rgba(234, 88, 12, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 92% 90%, rgba(15, 118, 110, 0.06) 0%, transparent 45%),
    radial-gradient(#E2E8F0 0.85px, transparent 0.85px);
  background-size: 100% 100%, 100% 100%, 20px 20px;
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  color: var(--color-slate-ink);
}

/* ============================================================
   LIGHT GLASSMORPHISM SYSTEM (DU'A FC BRAND ACCENTS)
   ============================================================ */

.glass-panel {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
}

.glass-panel-gold,
.glass-panel-orange {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 247, 237, 0.92) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(234, 88, 12, 0.28);
  box-shadow: 0 10px 30px -8px rgba(234, 88, 12, 0.12), 0 2px 8px rgba(15, 23, 42, 0.03);
}

.glass-panel-emerald,
.glass-panel-teal {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 253, 250, 0.92) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(15, 118, 110, 0.28);
  box-shadow: 0 10px 30px -8px rgba(15, 118, 110, 0.12), 0 2px 8px rgba(15, 23, 42, 0.03);
}

.glass-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  border-color: rgba(234, 88, 12, 0.35);
}

/* ============================================================
   GRADIENTS & METALLIC TEXT (MATCHING LOGO COLORS)
   ============================================================ */

.gold-gradient,
.orange-gradient {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 50%, #C2410C 100%) !important;
  color: #FFFFFF !important;
}

.gold-gradient-subtle,
.orange-gradient-subtle {
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.9) 0%, rgba(254, 243, 199, 0.6) 100%);
}

.gold-text,
.orange-text {
  background: linear-gradient(135deg, #9A3412 0%, #C2410C 30%, #EA580C 70%, #F97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-border,
.orange-border {
  border-color: rgba(234, 88, 12, 0.35) !important;
}

.emerald-gradient,
.teal-gradient {
  background: linear-gradient(135deg, #14B8A6 0%, #0F766E 50%, #0D7377 100%) !important;
  color: #FFFFFF !important;
}

.emerald-text,
.teal-text {
  background: linear-gradient(135deg, #134E4A 0%, #0F766E 50%, #14B8A6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.emerald-border,
.teal-border {
  border-color: rgba(15, 118, 110, 0.35) !important;
}

/* ============================================================
   MOBILE-FIRST BOTTOM NAVIGATION BAR & FIGMA MOTION
   ============================================================ */

.bottom-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 -4px 28px rgba(15, 23, 42, 0.06);
  padding-bottom: env(safe-area-inset-bottom, 8px);
}

/* Sliding active indicator with Figma motion spring physics */
.nav-motion-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  will-change: transform, width;
}

.nav-indicator-beam {
  width: 26px;
  height: 3.5px;
  background: linear-gradient(90deg, #F97316 0%, #EA580C 100%);
  border-radius: 9999px;
  box-shadow: 0 2px 10px rgba(234, 88, 12, 0.65), 0 0 6px rgba(249, 115, 22, 0.4);
  transition: all 0.3s ease;
}

.nav-indicator-glow {
  width: 46px;
  height: 36px;
  background: radial-gradient(ellipse at 50% 0%, rgba(234, 88, 12, 0.16) 0%, rgba(234, 88, 12, 0) 75%);
  margin-top: 0px;
  pointer-events: none;
}

/* Bottom Navigation Item */
.bottom-nav-item {
  position: relative;
  z-index: 2;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: color 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bottom-nav-item .bottom-nav-icon {
  position: relative;
  transition: transform 380ms cubic-bezier(0.34, 1.45, 0.64, 1), color 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.bottom-nav-item .bottom-nav-label {
  transition: transform 380ms cubic-bezier(0.34, 1.45, 0.64, 1), color 280ms cubic-bezier(0.2, 0.8, 0.2, 1), font-weight 200ms ease;
  will-change: transform;
}

/* Active State */
.bottom-nav-item.nav-item-active {
  color: #EA580C !important;
}

.bottom-nav-item.nav-item-active .bottom-nav-icon {
  color: #EA580C !important;
  transform: translateY(-2px) scale(1.14);
}

.bottom-nav-item.nav-item-active .bottom-nav-label {
  color: #EA580C !important;
  font-weight: 700 !important;
  transform: scale(1.04);
}

/* Clear static pseudo-indicator */
.nav-item-active::after {
  display: none !important;
}

/* Figma Spring Pop Animation */
@keyframes figmaSpringPop {
  0% {
    transform: translateY(0) scale(0.88);
  }
  45% {
    transform: translateY(-4px) scale(1.24);
  }
  75% {
    transform: translateY(-1px) scale(1.10);
  }
  100% {
    transform: translateY(-2px) scale(1.14);
  }
}

.figma-pop-anim {
  animation: figmaSpringPop 460ms cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

/* Touch Ripple on Active Tap */
.nav-touch-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(234, 88, 12, 0.22) 0%, rgba(234, 88, 12, 0) 70%);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 350ms ease-out;
}

.bottom-nav-item:active .nav-touch-ripple {
  opacity: 1;
  transform: scale(1.15);
  transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 150ms ease-in;
}

.bottom-nav-item:active .bottom-nav-icon {
  transform: scale(0.92);
  transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================
   SWEETALERT2 LIGHT LUXURY THEME
   ============================================================ */

.swal2-popup.duafc-luxury-popup {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(234, 88, 12, 0.3) !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.18), 0 0 25px rgba(234, 88, 12, 0.12) !important;
  color: #0F172A !important;
  padding: 1.75rem !important;
}

.swal2-title {
  font-family: 'Outfit', sans-serif !important;
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 1.35rem !important;
}

.swal2-html-container {
  color: #475569 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

.swal2-confirm.duafc-btn-gold {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 50%, #C2410C 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  padding: 12px 24px !important;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.35) !important;
  border: none !important;
  cursor: pointer !important;
}

.swal2-cancel.duafc-btn-cancel {
  background: #F1F5F9 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  padding: 12px 20px !important;
  border: 1px solid #CBD5E1 !important;
  cursor: pointer !important;
}

/* ============================================================
   MICRO-INTERACTIONS & SHIMMER
   ============================================================ */

.btn-press:active {
  transform: scale(0.97);
}

.shimmer-card {
  position: relative;
  overflow: hidden;
}

.shimmer-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F8FAFC;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #EA580C;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}