/* ==========================================================================
   Lumière Pet Gem Atelier - Custom Luxury Styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Noto+Serif+KR:wght@300;400;600;700&family=Pretendard:wght@300;400;500;600;700;800&display=swap');

:root {
  --color-gold-light: #F7E7CE;
  --color-gold: #D4AF37;
  --color-gold-dark: #AA7C11;
  --color-bg-dark: #0A0D14;
  --color-bg-card: rgba(18, 24, 38, 0.75);
  --color-emerald-deep: #061A14;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  background-color: #080B10;
  color: #E2E8F0;
  overflow-x: hidden;
  selection-background-color: #D4AF37;
  selection-color: #0A0D14;
}

.font-serif-luxury {
  font-family: 'Cinzel', 'Noto Serif KR', serif;
}

.font-kr-serif {
  font-family: 'Noto Serif KR', serif;
}

/* Gold Gradient Text */
.text-gold-gradient {
  background: linear-gradient(135deg, #FFF1D0 0%, #D4AF37 50%, #AA7C11 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gold-light {
  color: #F7E7CE;
}

/* Gold Border & Shadow */
.border-gold-subtle {
  border-color: rgba(212, 175, 55, 0.25);
}

.border-gold-glow {
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2), inset 0 0 15px rgba(212, 175, 55, 0.1);
}

.shadow-gold-glow {
  box-shadow: 0 10px 30px -10px rgba(212, 175, 55, 0.35);
}

.shadow-crystal {
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), 0 0 15px 1px rgba(147, 197, 253, 0.15);
}

/* Glassmorphism Cards */
.glass-panel {
  background: rgba(16, 22, 34, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-gold {
  background: radial-gradient(120% 120% at 50% 0%, rgba(212, 175, 55, 0.07) 0%, rgba(13, 17, 26, 0.8) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Sparkle Animation */
@keyframes sparkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
    filter: drop-shadow(0 0 8px #FFF1D0);
  }
}

.animate-sparkle {
  animation: sparkle 3s ease-in-out infinite;
}

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

.shimmer-bg {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(212, 175, 55, 0.15) 50%, 
    rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: shimmer 4s infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0A0D14;
}
::-webkit-scrollbar-thumb {
  background: #252e42;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #D4AF37;
}

/* Simulator Canvas Styling */
#gemCanvas {
  cursor: crosshair;
  background-color: #07090e;
  border-radius: 0.75rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

/* Custom Option Radio Cards */
.option-card.active {
  border-color: #D4AF37;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(26, 33, 49, 0.9) 100%);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
}

/* Compare Slider UI */
.before-after-container {
  position: relative;
  overflow: hidden;
  user-select: none;
}

.before-after-slider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #D4AF37;
  cursor: ew-resize;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}

.before-after-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #111827;
  border: 2px solid #D4AF37;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D4AF37;
  font-size: 13px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 12px rgba(212, 175, 55, 0.5);
}

/* Golden Button Hover Effects */
.btn-gold {
  background: linear-gradient(135deg, #E6C663 0%, #D4AF37 50%, #B8860B 100%);
  color: #0A0D14;
  font-weight: 700;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, #FFF1D0 0%, #E6C663 50%, #D4AF37 100%);
}
.btn-gold:active {
  transform: translateY(0);
}

.btn-outline-gold {
  border: 1px solid rgba(212, 175, 55, 0.6);
  color: #F7E7CE;
  transition: all 0.3s ease;
}
.btn-outline-gold:hover {
  border-color: #D4AF37;
  background: rgba(212, 175, 55, 0.12);
  color: #FFFFFF;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
}

/* Floating Kakao Chat Button */
.floating-chat-btn {
  box-shadow: 0 8px 25px rgba(254, 229, 0, 0.35);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.floating-chat-btn:hover {
  transform: scale(1.08) translateY(-4px);
  box-shadow: 0 12px 30px rgba(254, 229, 0, 0.5);
}