/* Shashvat KB CUBE Workshop - Mobile First Custom Enhancements */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --color-primary: #050b14;
  --color-surface: #0a1322;
  --color-surface-elevated: #0f1d33;
  --color-gold: #f59e0b;
  --color-gold-hover: #d97706;
  --color-gold-light: #fef3c7;
  --color-text-main: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-border-gold: rgba(245, 158, 11, 0.28);
}

html, body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-primary);
  color: var(--color-text-main);
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

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

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

.gold-gradient-bg {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
}

/* Glassmorphism Luxury Cards */
.luxury-card {
  background: rgba(15, 29, 51, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 158, 11, 0.22);
  transition: all 0.25s ease-out;
}

.luxury-card:hover {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.15);
}

/* Glowing CTA Button */
.cta-glow-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  box-shadow: 0 4px 18px rgba(234, 88, 12, 0.45);
  transition: all 0.2s ease;
}

.cta-glow-btn:hover {
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.65);
}

.cta-glow-btn:active {
  transform: scale(0.98);
}

/* Photo Frames */
.portrait-gold-frame {
  position: relative;
  background: linear-gradient(145deg, #132238, #09111e);
  border: 2px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.15);
}

/* Modal styling */
.modal-backdrop {
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(8px);
}

/* Mobile Sticky Bottom Bar */
.mobile-sticky-bar {
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.85);
}

/* Print Receipt Styles */
@media print {
  body * {
    visibility: hidden !important;
  }
  #receiptModalContent, #receiptModalContent * {
    visibility: visible !important;
  }
  #receiptModalContent {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 15px;
    background: #ffffff !important;
    color: #111827 !important;
  }
}