/* Flavor Digital Theme - Exact React Parity */
:root {
    --background: 0 0% 5%;
    --foreground: 0 0% 95%;
    --card: 0 0% 9%;
    --card-foreground: 0 0% 95%;
    --primary: 0 84% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 14%;
    --secondary-foreground: 0 0% 85%;
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 55%;
    --accent: 0 84% 50%;
    --border: 0 0% 16%;
    --destructive: 0 84% 60%;
    --radius: 0.5rem;
    --gradient-primary: linear-gradient(135deg, hsl(0,84%,50%), hsl(0,90%,40%));
    --gradient-accent: linear-gradient(135deg, hsl(0,84%,50%), hsl(30,90%,50%));
    --gradient-card: linear-gradient(145deg, hsl(0,0%,11%), hsl(0,0%,7%));
    --shadow-glow: 0 0 20px hsl(0 84% 50% / 0.2);
    --shadow-card: 0 4px 24px hsl(0 0% 0% / 0.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid hsl(var(--border)); }
html { scroll-behavior: smooth; }
body { background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: 'Inter','Hind Siliguri',sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* Utilities */
.container { max-width: 1200px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.min-h-screen { min-height: 100vh; }
.bg-background { background: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75; }
.text-center { text-align: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.hidden { display: none !important; }

.glass { background: hsl(var(--card) / 0.9); backdrop-filter: blur(24px); border: 1px solid hsl(var(--border) / 0.5); }

/* Header */
.site-header { position: fixed; top: 0; width: 100%; z-index: 50; background: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background) / 0.8), transparent); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; padding-left: 1.5rem; padding-right: 1.5rem; }
.site-logo { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.025em; }
.site-logo img { height: 40px; width: auto; }
@media(min-width:768px) { .site-logo { font-size: 1.875rem; } }
.header-nav { display: none; align-items: center; gap: 1.5rem; }
@media(min-width:768px) { .header-nav { display: flex; } }
.header-nav a { font-size: 0.875rem; color: hsl(var(--muted-foreground)); transition: color 0.2s; }
.header-nav a:hover { color: hsl(var(--foreground)); }
.header-wa-btn { display: flex; align-items: center; gap: 0.5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: 0.625rem 1.25rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; transition: background 0.2s; }
.header-wa-btn:hover { background: hsl(var(--primary) / 0.8); }
.header-wa-btn svg { color: hsl(var(--primary-foreground)); }
.hide-sm { display: none; }
@media(min-width:640px) { .hide-sm { display: inline; } }

/* Hero */
.hero-section { position: relative; padding-top: 5rem; padding-bottom: 4rem; overflow: hidden; min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.hero-bg-grid { position: absolute; inset: 0; opacity: 0.07; pointer-events: none; overflow: hidden; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.5rem; padding: 1rem; transform: rotate(-6deg) scale(1.25); }
@media(min-width:768px) { .hero-bg-grid { grid-template-columns: repeat(12, 1fr); } }
.hero-emoji-cell { aspect-ratio: 2/3; background: hsl(var(--muted)); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.875rem; }
@media(min-width:768px) { .hero-emoji-cell { font-size: 2.25rem; } }
.hero-overlay-1 { position: absolute; inset: 0; background: linear-gradient(to top, hsl(var(--background)), hsl(var(--background) / 0.6), hsl(var(--background) / 0.3)); pointer-events: none; }
.hero-overlay-2 { position: absolute; inset: 0; background: linear-gradient(to right, hsl(var(--background) / 0.5), transparent, hsl(var(--background) / 0.5)); pointer-events: none; }
.hero-content { position: relative; z-index: 10; max-width: 768px; text-align: center; }
.hero-title { font-size: 2.25rem; font-weight: 900; margin-bottom: 1.25rem; line-height: 1.1; color: hsl(var(--foreground)); }
@media(min-width:768px) { .hero-title { font-size: 3.75rem; } }
.hero-subtitle { color: hsl(var(--muted-foreground)); font-size: 1.125rem; margin-bottom: 2rem; max-width: 36rem; margin-left: auto; margin-right: auto; }
@media(min-width:768px) { .hero-subtitle { font-size: 1.25rem; } }
.hero-badges { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.hero-badge { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.hero-badge svg { color: hsl(var(--primary)); }

/* Search */
.search-bar-wrapper { position: relative; max-width: 36rem; margin: 0 auto; }
.search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); }
.search-input { width: 100%; padding: 0.875rem 1rem 0.875rem 3rem; border-radius: var(--radius); background: hsl(var(--muted) / 0.8); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); font-size: 1rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.search-input::placeholder { color: hsl(var(--muted-foreground)); }
.search-input:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.25); }

/* Promo */
.promo-section { padding-bottom: 2.5rem; }
.promo-slider { position: relative; overflow: hidden; border-radius: var(--radius); background: linear-gradient(to right, hsl(var(--primary) / 0.2), hsl(var(--card)), hsl(var(--primary) / 0.1)); border: 1px solid hsl(var(--border)); }
.promo-slide { padding: 1.5rem 2rem; transition: opacity 0.5s; }
@media(min-width:768px) { .promo-slide { padding: 2rem; } }
.promo-badge { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.promo-badge span { font-size: 0.75rem; font-weight: 700; color: hsl(var(--primary)); text-transform: uppercase; letter-spacing: 0.05em; }
.promo-badge svg { color: hsl(var(--primary)); }
.promo-title { font-size: 1.25rem; font-weight: 900; color: hsl(var(--foreground)); margin-bottom: 0.5rem; }
@media(min-width:768px) { .promo-title { font-size: 1.5rem; } }
.promo-subtitle { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.25rem; }
.promo-cta { display: inline-flex; align-items: center; gap: 0.5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: 0.625rem 1.5rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 700; transition: background 0.2s; }
.promo-cta:hover { background: hsl(var(--primary) / 0.8); }
.promo-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.25rem; height: 2.25rem; border-radius: 50%; background: hsl(var(--background) / 0.7); display: flex; align-items: center; justify-content: center; color: hsl(var(--foreground)); transition: background 0.2s; border: none; }
.promo-nav:hover { background: hsl(var(--background)); }
.promo-nav.prev { left: 0.5rem; }
.promo-nav.next { right: 0.5rem; }
.promo-dots { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.375rem; }
.promo-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: hsl(var(--muted-foreground) / 0.4); transition: all 0.3s; border: none; }
.promo-dot.active { background: hsl(var(--primary)); width: 1.25rem; }

/* Categories */
.categories-section { padding-bottom: 2rem; }
.category-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.cat-btn { padding: 0.5rem 1rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; transition: all 0.2s; border: none; background: hsl(var(--muted)); color: hsl(var(--secondary-foreground)); }
.cat-btn:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.cat-btn.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* Product Grid */
.products-section { padding-bottom: 5rem; }
.category-title { font-size: 1.5rem; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media(min-width:640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width:768px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media(min-width:1024px) { .product-grid { grid-template-columns: repeat(5, 1fr); } }

.product-card { display: block; background: hsl(var(--card)); border-radius: var(--radius); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; position: relative; }
.product-card:hover { transform: scale(1.05); box-shadow: var(--shadow-card); z-index: 10; }
.product-card.out-of-stock { opacity: 0.5; pointer-events: none; }
.product-card-bar { height: 4px; width: 100%; background: hsl(var(--primary)); opacity: 0; transition: opacity 0.2s; }
.product-card:hover .product-card-bar { opacity: 1; }
.product-card-body { padding: 1rem 1.25rem; }
@media(max-width:767px) { .product-card-body { padding: 1rem; } }
.product-stock-badge { position: absolute; top: 0.75rem; right: 0.75rem; font-size: 10px; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: var(--radius); }
.product-stock-badge.in-stock { background: hsl(var(--primary) / 0.2); color: hsl(var(--primary)); }
.product-stock-badge.out { background: hsl(var(--destructive) / 0.2); color: hsl(var(--destructive)); }
.product-emoji { font-size: 2.25rem; margin-bottom: 0.75rem; }
.product-name { font-size: 0.875rem; font-weight: 700; color: hsl(var(--foreground)); line-height: 1.25; transition: color 0.2s; }
@media(min-width:768px) { .product-name { font-size: 1rem; } }
.product-card:hover .product-name { color: hsl(var(--primary)); }
.product-pkg-count { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; }
.product-price { color: hsl(var(--primary)); font-weight: 700; font-size: 0.875rem; }
.product-arrow { color: hsl(var(--muted-foreground)); transition: color 0.2s, transform 0.2s; }
.product-card:hover .product-arrow { color: hsl(var(--primary)); transform: translateX(4px); }

.no-products { text-align: center; color: hsl(var(--muted-foreground)); padding: 3rem 0; }

/* About */
.about-section { padding: 5rem 1rem; border-top: 3px solid hsl(var(--muted)); }
.section-title { font-size: 1.875rem; font-weight: 900; color: hsl(var(--foreground)); margin-bottom: 1.5rem; }
@media(min-width:768px) { .section-title { font-size: 2.25rem; } }

/* FAQ */
.faq-section { padding: 0 1rem; border-top: 3px solid hsl(var(--muted)); }
.faq-list { padding: 5rem 0; }
.faq-item { background: hsl(var(--muted)); border-radius: var(--radius); margin-bottom: 0.5rem; overflow: hidden; }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; background: none; border: none; color: hsl(var(--foreground)); font-weight: 600; font-size: 0.9375rem; text-align: left; cursor: pointer; transition: color 0.2s; }
.faq-question:hover { color: hsl(var(--primary)); }
.faq-chevron { transition: transform 0.3s; flex-shrink: 0; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s; }
.faq-item.open .faq-answer { max-height: 500px; padding: 0 1.25rem 1.25rem; }
.faq-answer p { color: hsl(var(--muted-foreground)); font-size: 0.875rem; line-height: 1.7; }

/* Terms */
.terms-section { padding: 5rem 1rem; border-top: 3px solid hsl(var(--muted)); }
.terms-grid { display: grid; gap: 2.5rem; }
@media(min-width:768px) { .terms-grid { grid-template-columns: 1fr 1fr; } }
.terms-heading { font-size: 1.25rem; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: 1rem; }
.terms-list { list-style: none; }
.terms-list li { font-size: 0.875rem; color: hsl(var(--muted-foreground)); padding: 0.375rem 0; }
.terms-list li::before { content: '• '; }

/* Footer */
.site-footer { border-top: 3px solid hsl(var(--muted)); padding: 3.5rem 0; background: hsl(var(--card) / 0.5); }
.footer-grid { display: grid; gap: 2rem; }
@media(min-width:768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-logo { font-size: 1.25rem; font-weight: 900; margin-bottom: 0.75rem; }
.footer-heading { font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.75rem; }
.footer-payment { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.footer-payment p { margin-bottom: 0.25rem; }
.footer-wa-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: hsl(var(--primary)); }
.footer-wa-link:hover { text-decoration: underline; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); text-align: center; }
.footer-bottom p { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

/* Floating WA */
.floating-wa { position: fixed; bottom: 1rem; right: 1rem; z-index: 50; width: 3.5rem; height: 3.5rem; background: hsl(var(--primary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-glow); animation: pulse-glow 2s ease-in-out infinite; }
.floating-wa svg { color: hsl(var(--primary-foreground)); }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 20px hsl(0 84% 50% / 0.2); } 50% { box-shadow: 0 0 30px hsl(0 84% 50% / 0.4); } }

/* Fake Notification */
.fake-notification { position: fixed; bottom: 1rem; left: 1rem; z-index: 50; max-width: 20rem; transition: transform 0.5s, opacity 0.5s; }
.fake-notification.show { transform: translateX(0); opacity: 1; }
.fake-notification.hide { transform: translateX(-100%); opacity: 0; }
.fake-notification-inner { border-radius: 0.5rem; padding: 0.75rem; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 0.75rem; }
.fake-notification-icon { width: 2rem; height: 2rem; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fake-notification-icon svg { color: hsl(var(--primary-foreground)); }
.fn-name { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-detail { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

/* Packages Page */
.pkg-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid hsl(var(--border) / 0.5); }
.pkg-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: hsl(var(--muted-foreground)); font-size: 0.875rem; margin-bottom: 1.5rem; transition: color 0.2s; }
.back-link:hover { color: hsl(var(--foreground)); }
.pkg-product-name { font-size: 1.875rem; font-weight: 900; color: hsl(var(--foreground)); margin-bottom: 0.5rem; }
.packages-list { display: flex; flex-direction: column; gap: 0.75rem; }
.package-item { border-radius: 0.75rem; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: border-color 0.2s; }
.package-item:hover { border-color: hsl(var(--primary) / 0.3); }
.pkg-name { font-weight: 500; color: hsl(var(--foreground)); }
.pkg-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.pkg-price { color: hsl(var(--primary)); font-weight: 700; font-size: 1.125rem; }
.pkg-order-btn { display: flex; align-items: center; gap: 0.5rem; background: var(--gradient-primary); color: hsl(var(--primary-foreground)); padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; transition: opacity 0.2s; border: none; }
.pkg-order-btn:hover { opacity: 0.9; }

/* Checkout */
.checkout-card { border-radius: 0.75rem; padding: 1.25rem; margin-bottom: 1.5rem; }
.checkout-heading { font-weight: 700; color: hsl(var(--foreground)); margin-bottom: 0.75rem; }
.checkout-summary-row { display: flex; justify-content: space-between; align-items: center; }
.payment-methods { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.pay-btn { flex: 1; padding: 0.5rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; transition: all 0.2s; border: none; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); text-transform: capitalize; }
.pay-btn.active { background: var(--gradient-primary); color: hsl(var(--primary-foreground)); }
.payment-number { text-align: center; font-family: monospace; font-size: 1.125rem; color: hsl(var(--foreground)); margin-bottom: 0.25rem; }
.checkout-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group label { display: block; font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.25rem; }
.form-input { width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem; background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); font-size: 0.875rem; outline: none; transition: box-shadow 0.2s; resize: none; font-family: inherit; }
.form-input:focus { box-shadow: 0 0 0 2px hsl(var(--primary) / 0.25); }
.form-input::placeholder { color: hsl(var(--muted-foreground)); }
.submit-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--gradient-primary); color: hsl(var(--primary-foreground)); padding: 0.75rem; border-radius: 0.75rem; font-weight: 700; font-size: 1.125rem; border: none; transition: opacity 0.2s; }
.submit-btn:hover { opacity: 0.9; }

/* Thank You */
.thankyou-icon { width: 5rem; height: 5rem; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; animation: pulse-glow 2s ease-in-out infinite; }
.thankyou-icon svg { color: hsl(var(--primary-foreground)); }
.thankyou-title { font-size: 1.875rem; font-weight: 900; color: hsl(var(--foreground)); margin-bottom: 0.75rem; }
.thankyou-buttons { display: flex; flex-direction: column; gap: 0.75rem; }
@media(min-width:640px) { .thankyou-buttons { flex-direction: row; justify-content: center; } }
.btn-secondary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 600; transition: background 0.2s; }
.btn-secondary:hover { background: hsl(var(--border)); }
.btn-primary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--gradient-primary); color: hsl(var(--primary-foreground)); padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 600; transition: opacity 0.2s; }
.btn-primary:hover { opacity: 0.9; }

/* WP overrides */
.custom-logo-link img { height: 40px; width: auto; }