/*
 * =========================================================================
 * NARUNAADAN - MOBILE-FIRST SMARTPHONE OPTIMIZED STYLES
 * =========================================================================
 */

:root {
  --primary-deep: #134e3f;
  --primary-forest: #0d3a2e;
  --primary-leaf: #1b6b55;
  --primary-light: #eaf4f0;
  
  --accent-gold: #c59b48;
  --accent-amber: #d4a373;
  --accent-sand: #fbf8f3;
  --accent-cream: #f4ede4;
  
  --text-dark: #192420;
  --text-muted: #4b5a54;
  --text-light: #7c8b85;
  
  --border-light: #e5ece8;
  --border-soft: #f0f5f2;
}

/* Custom Scrollbars & Mobile Chip Scroller */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #fbf8f3;
}
::-webkit-scrollbar-thumb {
  background: #cbdcd5;
  border-radius: 4px;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

html {
  scroll-behavior: smooth;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-dark);
  background-color: #ffffff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 769px) {
  body {
    padding-bottom: 0;
  }
}

.font-serif-luxury {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.font-malayalam {
  font-family: 'Noto Serif Malayalam', 'Manjari', serif;
}

/* Glassmorphic Navbar */
.glass-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Button & Touch Micro-Interactions */
.luxury-btn {
  touch-action: manipulation;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.luxury-btn:active {
  transform: scale(0.97);
}

.product-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-touch-callout: none;
}
@media (min-width: 769px) {
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(19, 78, 63, 0.12);
  }
}

.wa-glow {
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
  transition: all 0.25s ease;
}
.wa-glow:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.25);
}

/* Modal and Drawer Transitions */
.drawer-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.drawer-content {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer-content.active {
  transform: translateX(0);
}

/* Mobile Bottom Sheet Modal Transition */
.bottom-sheet-content {
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.bottom-sheet-content.active {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .bottom-sheet-content {
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.25s ease;
  }
  .bottom-sheet-content.active {
    transform: scale(1);
    opacity: 1;
  }
}

/* Safe Area Inset Helper */
.safe-bottom-pad {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
/* =========================================================================
 * 5 CUSTOMIZABLE FESTIVE THEME SKINS (ONAM, DIWALI, CHRISTMAS, EID, DEFAULT)
 * ========================================================================= */

/* 1. DEFAULT KERALA NATURE THEME */
body.theme-default {
  --theme-bg: #ffffff;
  --theme-accent: #134e3f;
  --theme-gold: #c59b48;
}

/* 2. ONAM FESTIVAL THEME */
body.theme-onam {
  background-color: #fdfcf9 !important;
}
body.theme-onam .bg-stone-50 {
  background-color: #fcf8ee !important;
}
body.theme-onam .text-emerald-950 {
  color: #451a03 !important;
}
body.theme-onam .bg-emerald-950 {
  background-color: #451a03 !important;
}
body.theme-onam .bg-emerald-900 {
  background-color: #78350f !important;
}
body.theme-onam .border-emerald-200 {
  border-color: #fde68a !important;
}

/* 3. DEEPAVALI / DIWALI THEME */
body.theme-diwali {
  background-color: #fffaf0 !important;
}
body.theme-diwali .bg-stone-50 {
  background-color: #fff7ed !important;
}
body.theme-diwali .text-emerald-950 {
  color: #431407 !important;
}
body.theme-diwali .bg-emerald-950 {
  background-color: #431407 !important;
}
body.theme-diwali .bg-emerald-900 {
  background-color: #9a3412 !important;
}
body.theme-diwali .border-emerald-200 {
  border-color: #fdba74 !important;
}

/* 4. CHRISTMAS & NEW YEAR THEME */
body.theme-christmas {
  background-color: #fcf9f9 !important;
}
body.theme-christmas .bg-stone-50 {
  background-color: #fff1f2 !important;
}
body.theme-christmas .text-emerald-950 {
  color: #4c0519 !important;
}
body.theme-christmas .bg-emerald-950 {
  background-color: #4c0519 !important;
}
body.theme-christmas .bg-emerald-900 {
  background-color: #9f1239 !important;
}
body.theme-christmas .border-emerald-200 {
  border-color: #fecdd3 !important;
}

/* 5. RAMZAN & EID THEME */
body.theme-eid {
  background-color: #f4faf7 !important;
}
body.theme-eid .bg-stone-50 {
  background-color: #ecfdf5 !important;
}
body.theme-eid .text-emerald-950 {
  color: #022c22 !important;
}
body.theme-eid .bg-emerald-950 {
  background-color: #022c22 !important;
}
body.theme-eid .bg-emerald-900 {
  background-color: #065f46 !important;
}
body.theme-eid .border-emerald-200 {
  border-color: #a7f3d0 !important;
}

/* =========================================================================
 * 5 VISIBLE FESTIVE THEME SKINS & BACKGROUND TRANSFORMATIONS
 * ========================================================================= */

/* 1. DEFAULT KERALA NATURE THEME */
body.theme-default {
  background-color: #ffffff;
}

/* 2. ONAM FESTIVAL THEME (ഓണം - Kasavu Cream, Gold & Pookkalam Tones) */
body.theme-onam {
  background-color: #fbf7ee !important;
  background-image: radial-gradient(#d97706 0.6px, transparent 0.6px);
  background-size: 28px 28px;
}
body.theme-onam header {
  background: rgba(253, 248, 237, 0.96) !important;
  border-bottom: 2px solid #e7c875 !important;
}
body.theme-onam section {
  background-color: transparent !important;
}
body.theme-onam .bg-stone-50, 
body.theme-onam .bg-stone-50\/50,
body.theme-onam .bg-stone-50\/80 {
  background-color: #f7eedb !important;
  border-color: #ebdcb9 !important;
}
body.theme-onam .bg-white {
  background-color: #fffdf7 !important;
  border-color: #eddcb7 !important;
}
body.theme-onam .text-emerald-950 {
  color: #451a03 !important;
}
body.theme-onam .text-emerald-900,
body.theme-onam .text-emerald-800,
body.theme-onam .text-emerald-700 {
  color: #78350f !important;
}
body.theme-onam .bg-emerald-950 {
  background-color: #451a03 !important;
}
body.theme-onam .bg-emerald-900 {
  background-color: #78350f !important;
}
body.theme-onam .bg-emerald-800 {
  background-color: #92400e !important;
}
body.theme-onam .bg-emerald-50,
body.theme-onam .bg-emerald-100 {
  background-color: #fef3c7 !important;
  color: #78350f !important;
}

/* 3. DEEPAVALI / DIWALI THEME (Festival of Lights - Warm Gold & Diya Glow) */
body.theme-diwali {
  background-color: #fdf5e6 !important;
  background-image: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.12) 0%, transparent 60%), radial-gradient(#ea580c 0.6px, transparent 0.6px);
  background-size: 100% 600px, 30px 30px;
}
body.theme-diwali header {
  background: rgba(253, 244, 227, 0.96) !important;
  border-bottom: 2px solid #f97316 !important;
}
body.theme-diwali section {
  background-color: transparent !important;
}
body.theme-diwali .bg-stone-50,
body.theme-diwali .bg-stone-50\/50,
body.theme-diwali .bg-stone-50\/80 {
  background-color: #f7e8cc !important;
  border-color: #edd3a6 !important;
}
body.theme-diwali .bg-white {
  background-color: #fffaf0 !important;
  border-color: #edd3a6 !important;
}
body.theme-diwali .text-emerald-950 {
  color: #431407 !important;
}
body.theme-diwali .text-emerald-900,
body.theme-diwali .text-emerald-800,
body.theme-diwali .text-emerald-700 {
  color: #9a3412 !important;
}
body.theme-diwali .bg-emerald-950 {
  background-color: #431407 !important;
}
body.theme-diwali .bg-emerald-900 {
  background-color: #9a3412 !important;
}
body.theme-diwali .bg-emerald-800 {
  background-color: #c2410c !important;
}
body.theme-diwali .bg-emerald-50,
body.theme-diwali .bg-emerald-100 {
  background-color: #ffedd5 !important;
  color: #9a3412 !important;
}

/* 4. CHRISTMAS & NEW YEAR THEME (Festive Crimson, Pine Green & Star White) */
body.theme-christmas {
  background-color: #fcf4f4 !important;
  background-image: radial-gradient(circle at 50% 0%, rgba(225, 29, 72, 0.08) 0%, transparent 60%), radial-gradient(#e11d48 0.5px, transparent 0.5px);
  background-size: 100% 600px, 32px 32px;
}
body.theme-christmas header {
  background: rgba(254, 242, 242, 0.96) !important;
  border-bottom: 2px solid #be123c !important;
}
body.theme-christmas section {
  background-color: transparent !important;
}
body.theme-christmas .bg-stone-50,
body.theme-christmas .bg-stone-50\/50,
body.theme-christmas .bg-stone-50\/80 {
  background-color: #fce7e7 !important;
  border-color: #f8c9c9 !important;
}
body.theme-christmas .bg-white {
  background-color: #fffbfb !important;
  border-color: #f8c9c9 !important;
}
body.theme-christmas .text-emerald-950 {
  color: #4c0519 !important;
}
body.theme-christmas .text-emerald-900,
body.theme-christmas .text-emerald-800,
body.theme-christmas .text-emerald-700 {
  color: #9f1239 !important;
}
body.theme-christmas .bg-emerald-950 {
  background-color: #4c0519 !important;
}
body.theme-christmas .bg-emerald-900 {
  background-color: #9f1239 !important;
}
body.theme-christmas .bg-emerald-800 {
  background-color: #be123c !important;
}
body.theme-christmas .bg-emerald-50,
body.theme-christmas .bg-emerald-100 {
  background-color: #ffe4e6 !important;
  color: #9f1239 !important;
}

/* 5. RAMZAN & EID THEME (റംസാൻ - Royal Crescent Emerald, Mint & Gold) */
body.theme-eid {
  background-color: #eef8f3 !important;
  background-image: radial-gradient(circle at 50% 0%, rgba(5, 150, 105, 0.12) 0%, transparent 60%), radial-gradient(#059669 0.6px, transparent 0.6px);
  background-size: 100% 600px, 30px 30px;
}
body.theme-eid header {
  background: rgba(236, 253, 245, 0.96) !important;
  border-bottom: 2px solid #059669 !important;
}
body.theme-eid section {
  background-color: transparent !important;
}
body.theme-eid .bg-stone-50,
body.theme-eid .bg-stone-50\/50,
body.theme-eid .bg-stone-50\/80 {
  background-color: #def2e7 !important;
  border-color: #bbf0d4 !important;
}
body.theme-eid .bg-white {
  background-color: #f7fdfa !important;
  border-color: #bbf0d4 !important;
}
body.theme-eid .text-emerald-950 {
  color: #022c22 !important;
}
body.theme-eid .text-emerald-900,
body.theme-eid .text-emerald-800,
body.theme-eid .text-emerald-700 {
  color: #065f46 !important;
}
body.theme-eid .bg-emerald-950 {
  background-color: #022c22 !important;
}
body.theme-eid .bg-emerald-900 {
  background-color: #065f46 !important;
}
body.theme-eid .bg-emerald-800 {
  background-color: #047857 !important;
}
body.theme-eid .bg-emerald-50,
body.theme-eid .bg-emerald-100 {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
}