/*
 * Kleve Kitchens - Premium Luxury Design System
 * Official Theme: Modern European-Indian Luxury Kitchen Aesthetics
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --kk-dark: #0f1418;
  --kk-dark-surface: #182028;
  --kk-dark-card: #1f2a35;
  --kk-gold: #c5a059;
  --kk-gold-light: #dfbe7d;
  --kk-gold-dark: #a27e38;
  --kk-gold-subtle: rgba(197, 160, 89, 0.12);
  --kk-cream: #fbfaf8;
  --kk-warm-white: #ffffff;
  --kk-gray-bg: #f5f4ef;
  --kk-border: #e6e3dc;
  --kk-border-dark: #2a3543;
  --kk-text-main: #1d252c;
  --kk-text-muted: #64748b;
  --kk-whatsapp: #25d366;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--kk-text-main);
  background-color: var(--kk-cream);
  overflow-x: hidden;
}

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

.font-serif-accent {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Glassmorphism & Header */
.glass-header {
  background: rgba(15, 20, 24, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}

.glass-light-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 226, 220, 0.8);
}

/* Gold Accents & Badges */
.gold-gradient-text {
  background: linear-gradient(135deg, #dfbe7d 0%, #c5a059 50%, #f3d79b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

.gold-badge {
  background: rgba(197, 160, 89, 0.15);
  color: #a27e38;
  border: 1px solid rgba(197, 160, 89, 0.35);
}

.gold-badge-dark {
  background: rgba(197, 160, 89, 0.12);
  color: #dfbe7d;
  border: 1px solid rgba(197, 160, 89, 0.3);
}

/* Card Hover Elevation */
.luxury-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 35px -10px rgba(15, 20, 24, 0.12), 0 0 1px rgba(197, 160, 89, 0.4);
}

.luxury-card-dark:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4), 0 0 1px rgba(223, 190, 125, 0.5);
}

/* Image Zoom */
.img-zoom-wrapper {
  overflow: hidden;
}

.img-zoom-wrapper img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-card:hover .img-zoom-wrapper img,
.img-zoom-wrapper:hover img {
  transform: scale(1.06);
}

/* Floating CTAs & Mobile Bottom Bar */
.floating-widget-btn {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.floating-widget-btn:hover {
  transform: scale(1.08);
}

.mobile-bottom-bar {
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1efe9;
}
::-webkit-scrollbar-thumb {
  background: #c5a059;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a27e38;
}

/* Pulse animation for CTA */
@keyframes pulse-subtle {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.6);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 10px rgba(197, 160, 89, 0);
  }
}

.pulse-cta {
  animation: pulse-subtle 2.5s infinite;
}

/* Form Styles */
.form-input-luxury {
  border: 1px solid #e2ded5;
  background-color: #ffffff;
  color: #1e293b;
  transition: all 0.2s ease;
}
.form-input-luxury:focus {
  border-color: #c5a059;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.18);
  outline: none;
}

/* Timeline Process Connector */
.process-step::after {
  content: '';
  position: absolute;
  top: 2rem;
  right: -50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #c5a059 0%, rgba(197, 160, 89, 0.2) 100%);
  z-index: 1;
}

@media (max-width: 1024px) {
  .process-step::after {
    display: none;
  }
}