/* LAGNAM - Luxury Wedding & Festive Wear Styling (Est. 1890 - 135 Years) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --lagnam-crimson: #580c14;
  --lagnam-crimson-dark: #37040a;
  --lagnam-crimson-light: #7c141f;
  --lagnam-gold: #c99c33;
  --lagnam-gold-light: #e5be5a;
  --lagnam-gold-pale: #faf4e6;
  --lagnam-ivory: #fcfaf7;
  --lagnam-linen: #f4efe6;
  --lagnam-charcoal: #1a1617;
  --lagnam-muted: #6e6566;
  --lagnam-border: #e8ded2;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Asset & Design Protection: Disable image dragging */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--lagnam-ivory);
  color: var(--lagnam-charcoal);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: var(--font-heading);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1ece4;
}
::-webkit-scrollbar-thumb {
  background: var(--lagnam-crimson);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--lagnam-gold);
}

/* Gold Gradient Borders & Text */
.gold-gradient-text {
  background: linear-gradient(135deg, #d4af37 0%, #f3e5ab 50%, #aa771c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Stylist Haute Couture Typography & Headings */
.stylist-gold-heading {
  background: linear-gradient(135deg, #ffffff 0%, #fae19c 25%, #dfb746 55%, #ffe6a3 80%, #c99c33 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 15px rgba(201, 156, 51, 0.45));
}

.stylist-dark-gold-heading {
  background: linear-gradient(135deg, #580c14 0%, #8c1d28 40%, #c99c33 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stylist-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lagnam-gold-light);
  padding: 5px 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(229, 190, 90, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.stylist-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px auto 24px;
  color: var(--lagnam-gold);
  font-size: 12px;
}
.stylist-divider::before,
.stylist-divider::after {
  content: "";
  height: 1px;
  width: 54px;
  background: linear-gradient(90deg, transparent, var(--lagnam-gold), transparent);
}

.stylist-title-shadow {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Hero Ambient Backgrounds & Stylist Elements */
.hero-royal-bg {
  background: radial-gradient(circle at 80% 15%, rgba(229, 190, 90, 0.18) 0%, transparent 45%),
              radial-gradient(circle at 15% 75%, rgba(184, 30, 50, 0.28) 0%, transparent 55%),
              radial-gradient(circle at 50% 50%, rgba(88, 12, 20, 0.4) 0%, transparent 70%),
              linear-gradient(160deg, #090102 0%, #1a0205 35%, #2a0308 65%, #080001 100%);
}

.hero-glass-card {
  background: linear-gradient(180deg, rgba(38, 4, 8, 0.95) 0%, rgba(20, 2, 5, 0.98) 100%);
  border: 1px solid rgba(229, 190, 90, 0.45);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(201, 156, 51, 0.22);
}

.hero-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(229, 190, 90, 0.25);
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-stat-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(229, 190, 90, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.gold-glow-btn {
  background: linear-gradient(135deg, #d4af37 0%, #fdf0cd 35%, #dfb746 70%, #aa771c 100%);
  color: #120103;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4), 0 0 10px rgba(229, 190, 90, 0.2);
  transition: all 0.3s ease;
}
.gold-glow-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 25px rgba(212, 175, 55, 0.6), 0 0 15px rgba(229, 190, 90, 0.4);
}

.gold-gradient-bg {
  background: linear-gradient(135deg, #c99c33 0%, #dfb746 50%, #b8861b 100%);
}

.crimson-gradient-bg {
  background: linear-gradient(145deg, var(--lagnam-crimson-dark) 0%, var(--lagnam-crimson) 60%, #4a070e 100%);
}

/* Luxury Button Styles */
.btn-gold {
  background: linear-gradient(135deg, #c99c33 0%, #e0b94d 50%, #b8861b 100%);
  color: #1a1617;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(201, 156, 51, 0.25);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #dfb746 0%, #f4d068 50%, #c99c33 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 156, 51, 0.38);
}

.btn-crimson {
  background: var(--lagnam-crimson);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  border: 1px solid var(--lagnam-crimson-light);
}
.btn-crimson:hover {
  background: var(--lagnam-crimson-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(88, 12, 20, 0.3);
}

.btn-outline-gold {
  border: 1px solid var(--lagnam-gold);
  color: var(--lagnam-crimson);
  background: transparent;
  transition: all 0.3s ease;
}
.btn-outline-gold:hover {
  background: var(--lagnam-gold-pale);
  border-color: var(--lagnam-gold-light);
}

/* Product Card Luxury Hover */
.product-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--lagnam-border);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px -8px rgba(88, 12, 20, 0.12);
  border-color: var(--lagnam-gold);
}

/* Image Zoom Lens */
.zoom-container {
  overflow: hidden;
  position: relative;
  cursor: crosshair;
}
.zoom-container img {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.zoom-container:hover img {
  transform: scale(1.4);
}

/* Floating WhatsApp Button */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  background: #25D366;
  color: white;
  border-radius: 50px;
  padding: 12px 20px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
}

/* Modals and Drawers */
.drawer-backdrop {
  background: rgba(26, 22, 23, 0.65);
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease;
}

.custom-shadow {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* Occasion Pill Active */
.occasion-btn.active {
  background: var(--lagnam-crimson);
  color: #ffffff;
  border-color: var(--lagnam-crimson);
}

/* Badges */
.badge-gold {
  background-color: var(--lagnam-gold-pale);
  color: #8c6508;
  border: 1px solid rgba(201, 156, 51, 0.4);
}

.badge-crimson {
  background-color: #fdf2f2;
  color: var(--lagnam-crimson);
  border: 1px solid rgba(88, 12, 20, 0.2);
}

/* Pulse Animation for Live Order Counter */
@keyframes softPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}
.pulse-live {
  animation: softPulse 2s infinite ease-in-out;
}
/* AI Stylist & LLM Search Styling */
.ai-sparkle-btn {
  background: linear-gradient(135deg, #37040a 0%, #580c14 40%, #c99c33 100%);
  border: 1px solid rgba(229, 190, 90, 0.5);
  box-shadow: 0 0 15px rgba(201, 156, 51, 0.25);
  transition: all 0.3s ease;
}
.ai-sparkle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(201, 156, 51, 0.45);
  border-color: #e5be5a;
}

.ai-chat-bubble-user {
  background: #580c14;
  color: #ffffff;
  border-radius: 16px 16px 2px 16px;
}

.ai-chat-bubble-bot {
  background: #fdfaf3;
  color: #1a1617;
  border: 1px solid #e8ded2;
  border-radius: 16px 16px 16px 2px;
}

@keyframes aiGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(201, 156, 51, 0.2); }
  50% { box-shadow: 0 0 20px rgba(201, 156, 51, 0.5); }
}
.ai-glow-card {
  animation: aiGlow 3s infinite ease-in-out;
}

/* Hero Rotating Showcase Transitions */
#heroShowcaseImage {
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-indicator-dot {
  cursor: pointer;
}