/* ==========================================================================
   ЛОМБАРД №1 БИШКЕК — ULTRA-LUXURY PRECIOUS METALS BOUTIQUE
   Специализация: Исключительно Золото и Серебро (Precious Metals Only)
   ========================================================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --gold-primary: #D4AF37;
  --gold-light: #F7E7A9;
  --gold-champagne: #E6C775;
  --silver-primary: #E2E8F0;
  --silver-glow: #CBD5E1;
  --bg-noir: #070709;
  --bg-card: #0F0F14;
  --bg-surface: #14141B;
}

body {
  background-color: var(--bg-noir);
  color: #F3F4F6;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  selection-background-color: var(--gold-primary);
  selection-color: #000;
}

/* Metallic Gradients */
.gold-gradient-text {
  background: linear-gradient(135deg, #FFF6D1 0%, #E2BE53 35%, #B88B22 75%, #F0D57E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.silver-gradient-text {
  background: linear-gradient(135deg, #FFFFFF 0%, #CBD5E1 50%, #94A3B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-gradient-btn {
  background: linear-gradient(135deg, #F5DE88 0%, #D4AF37 50%, #A57717 100%);
  color: #070709;
  font-weight: 800;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.25);
  transition: all 0.3s ease;
}

.gold-gradient-btn:hover {
  background: linear-gradient(135deg, #FFF0B3 0%, #E2BE53 50%, #BA891E 100%);
  box-shadow: 0 10px 32px rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

/* Metal Tabs (Gold / Silver) */
.metal-tab {
  transition: all 0.25s ease;
}

.metal-tab.active-gold {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(20, 20, 27, 0.9) 100%) !important;
  border-color: #D4AF37 !important;
  color: #FFD700 !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
}

.metal-tab.active-silver {
  background: linear-gradient(135deg, rgba(226, 232, 240, 0.18) 0%, rgba(20, 20, 27, 0.9) 100%) !important;
  border-color: #CBD5E1 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 20px rgba(203, 213, 225, 0.25);
}

/* Purity Card Active States */
.purity-card {
  transition: all 0.25s ease;
  cursor: pointer;
}

.purity-card:hover {
  border-color: rgba(212, 175, 55, 0.6);
  transform: translateY(-2px);
  background: rgba(212, 175, 55, 0.04);
}

.purity-card.active-gold {
  border-color: #D4AF37 !important;
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.15) 0%, rgba(20, 20, 27, 0.8) 100%) !important;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.22);
}

.purity-card.active-silver {
  border-color: #E2E8F0 !important;
  background: linear-gradient(145deg, rgba(226, 232, 240, 0.15) 0%, rgba(20, 20, 27, 0.8) 100%) !important;
  box-shadow: 0 0 25px rgba(226, 232, 240, 0.22);
}

/* Luxury Range Slider */
input[type=range] {
  -webkit-appearance: none;
  background: #1C1C24;
  height: 6px;
  border-radius: 6px;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCE89F 0%, #D4AF37 100%);
  border: 2px solid #070709;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
  cursor: pointer;
  transition: transform 0.15s ease;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* Clean Input Number Arrows */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield;
}

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

::-webkit-scrollbar-track {
  background: #070709;
}

::-webkit-scrollbar-thumb {
  background: #20202A;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.15);
}

::-webkit-scrollbar-thumb:hover {
  background: #D4AF37;
}

/* Slow Spin Animation for Logo Ring */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 20s linear infinite;
}