/* Desh Print Theme - Main Stylesheet */

/* ============================================
   CSS Variables (Design Tokens)
   ============================================ */
:root {
  --primary: hsl(142, 70%, 40%);
  --primary-foreground: hsl(0, 0%, 100%);
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(150, 10%, 15%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(150, 10%, 15%);
  --muted: hsl(150, 10%, 96%);
  --muted-foreground: hsl(150, 5%, 45%);
  --accent: hsl(45, 100%, 50%);
  --border: hsl(150, 10%, 90%);
  --green-light: hsl(142, 50%, 97%);
  --green-glow: hsl(142, 70%, 45%);
  --whatsapp: #25D366;
  --radius: 0.75rem;
  --shadow-soft: 0 4px 20px -4px hsla(150, 10%, 20%, 0.1);
  --shadow-card: 0 8px 30px -8px hsla(150, 10%, 20%, 0.15);
  --shadow-hover: 0 12px 40px -12px hsla(142, 70%, 40%, 0.25);
}

/* ============================================
   Base Styles
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Hind Siliguri', sans-serif; background: var(--background); color: var(--foreground); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

/* ============================================
   Layout
   ============================================ */
.container-max { max-width: 1152px; margin: 0 auto; }
.section-padding { padding: 3rem 1rem; }
@media (min-width: 768px) { .section-padding { padding: 4rem 2rem; } }
@media (min-width: 1024px) { .section-padding { padding: 5rem 2rem; } }
.bg-green-soft { background-color: var(--green-light); }

/* ============================================
   Header
   ============================================ */
.site-header { position: sticky; top: 0; z-index: 40; background: hsla(0, 0%, 100%, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; }
.site-branding { display: flex; align-items: center; gap: 0.5rem; }
.logo-placeholder { width: 40px; height: 40px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.logo-text { color: var(--primary-foreground); font-weight: 700; font-size: 1.125rem; }
.site-title { font-weight: 700; font-size: 1.25rem; color: var(--foreground); }
.main-navigation ul { display: flex; gap: 1.5rem; }
.main-navigation a { font-weight: 500; transition: color 0.2s; }
.main-navigation a:hover { color: var(--primary); }
@media (max-width: 767px) { .main-navigation { display: none; } .btn-text-desktop { display: none; } }

/* ============================================
   Buttons
   ============================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; border-radius: var(--radius); transition: all 0.2s; cursor: pointer; border: none; font-family: inherit; }
.btn .icon { width: 1.25rem; height: 1.25rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn-lg { padding: 0.875rem 1.75rem; font-size: 1.125rem; }
.btn-xl { padding: 1rem 2rem; font-size: 1.25rem; }
.btn-full { width: 100%; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--green-glow); }
.btn-whatsapp { background: var(--whatsapp); color: white; box-shadow: 0 4px 14px -4px rgba(37, 211, 102, 0.4); }
.btn-whatsapp:hover { background: #20bd5a; transform: translateY(-2px); box-shadow: 0 6px 20px -4px rgba(37, 211, 102, 0.5); }
.btn-cta { background: var(--primary-foreground); color: var(--primary); }
.btn-cta:hover { background: hsla(0, 0%, 100%, 0.9); }

/* ============================================
   Hero Section
   ============================================ */
.hero-section { position: relative; overflow: hidden; }
.hero-content { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
@media (min-width: 1024px) { .hero-content { flex-direction: row; gap: 3rem; } }
.hero-text { flex: 1; text-align: center; }
@media (min-width: 1024px) { .hero-text { text-align: left; } }
.hero-title { font-size: 1.875rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
@media (min-width: 768px) { .hero-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 3rem; } }
.hero-subtitle { font-size: 1.125rem; color: var(--muted-foreground); margin-bottom: 2rem; }
@media (min-width: 768px) { .hero-subtitle { font-size: 1.25rem; } }
.hero-image { flex: 1; position: relative; }
.hero-image-glow { position: absolute; inset: 0; background: hsla(142, 70%, 40%, 0.1); border-radius: 50%; filter: blur(48px); transform: scale(0.75); }
.hero-mug-image { position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
.hero-decoration { position: absolute; border-radius: 50%; }
.hero-decoration-1 { top: 5rem; left: 2.5rem; width: 5rem; height: 5rem; background: hsla(142, 70%, 40%, 0.05); filter: blur(32px); }
.hero-decoration-2 { bottom: 5rem; right: 2.5rem; width: 8rem; height: 8rem; background: hsla(142, 70%, 40%, 0.1); filter: blur(48px); }

/* ============================================
   Section Headers
   ============================================ */
.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .section-title { font-size: 1.875rem; } }
.section-subtitle { color: var(--muted-foreground); max-width: 36rem; margin: 0 auto; }
.section-icon { width: 4rem; height: 4rem; background: hsla(142, 70%, 40%, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.section-icon svg { width: 2rem; height: 2rem; color: var(--primary); }
.text-gradient { background: linear-gradient(to right, var(--primary), hsl(142, 70%, 30%)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ============================================
   Products Section
   ============================================ */
.products-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
.product-card { background: var(--card); border-radius: 1rem; box-shadow: var(--shadow-card); overflow: hidden; transition: all 0.3s; }
.product-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.product-card-special { border: 2px solid var(--primary); }
.product-badge { background: var(--primary); color: var(--primary-foreground); text-align: center; padding: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.product-image-wrapper { padding: 1rem; }
.product-image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.5rem; }
.magic-mug-images { display: flex; gap: 0.5rem; }
.magic-mug-before, .magic-mug-after { flex: 1; }
.magic-label { font-size: 0.75rem; color: var(--muted-foreground); text-align: center; margin-bottom: 0.25rem; }
.magic-mug-before img, .magic-mug-after img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.5rem; }
.product-content { padding: 1rem; padding-top: 0; }
.product-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.product-price { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.price-original { color: var(--muted-foreground); text-decoration: line-through; font-size: 1.125rem; }
.price-discounted { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.price-badge { background: hsla(142, 70%, 40%, 0.1); color: var(--primary); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 9999px; }
.product-features { margin-bottom: 1rem; }
.product-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.icon-check { width: 1rem; height: 1rem; color: var(--primary); flex-shrink: 0; margin-top: 0.125rem; }

/* ============================================
   Gallery Section
   ============================================ */
.gallery-slider-mobile { position: relative; }
@media (min-width: 768px) { .gallery-slider-mobile { display: none; } }
.gallery-slider-container { overflow: hidden; border-radius: 1rem; box-shadow: var(--shadow-card); }
.gallery-slide { display: none; }
.gallery-slide.active { display: block; }
.gallery-slide img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: hsla(0, 0%, 100%, 0.9); padding: 0.5rem; border-radius: 50%; box-shadow: var(--shadow-soft); border: none; cursor: pointer; }
.gallery-nav svg { width: 1.25rem; height: 1.25rem; color: var(--foreground); }
.gallery-prev { left: 0.5rem; }
.gallery-next { right: 0.5rem; }
.gallery-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.gallery-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: hsla(142, 70%, 40%, 0.3); border: none; cursor: pointer; transition: all 0.2s; }
.gallery-dot.active { background: var(--primary); width: 1.5rem; }
.gallery-grid-desktop { display: none; }
@media (min-width: 768px) { .gallery-grid-desktop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.gallery-item { position: relative; overflow: hidden; border-radius: 1rem; box-shadow: var(--shadow-card); }
.gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.5s; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, hsla(150, 10%, 15%, 0.6), transparent); opacity: 0; transition: opacity 0.3s; display: flex; align-items: flex-end; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay p { padding: 1rem; color: white; font-weight: 500; }

/* ============================================
   Reviews Section
   ============================================ */
.reviews-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
.review-card { background: var(--card); padding: 1.5rem; border-radius: 1rem; box-shadow: var(--shadow-card); transition: all 0.3s; }
.review-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.review-stars { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; }
.star { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.review-text { color: var(--foreground); margin-bottom: 1rem; line-height: 1.7; }
.review-author { display: flex; align-items: center; gap: 0.75rem; }
.author-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: hsla(142, 70%, 40%, 0.1); display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 700; font-size: 1.125rem; }
.author-name { font-weight: 600; }
.author-location { font-size: 0.875rem; color: var(--muted-foreground); }

/* ============================================
   Order Rules Section
   ============================================ */
.order-rules-wrapper { max-width: 42rem; margin: 0 auto; }
.rules-card { background: var(--card); border-radius: 1rem; box-shadow: var(--shadow-card); padding: 1.5rem; }
@media (min-width: 768px) { .rules-card { padding: 2rem; } }
.rules-list li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.rules-list .icon-check { width: 1.25rem; height: 1.25rem; color: var(--primary); margin-top: 0.125rem; }
.rules-note { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: flex-start; gap: 0.75rem; background: hsla(142, 70%, 40%, 0.05); padding: 1rem; border-radius: 0.75rem; }
.rules-note svg { width: 1.25rem; height: 1.25rem; color: var(--primary); flex-shrink: 0; margin-top: 0.125rem; }
.rules-note p { font-weight: 500; }

/* ============================================
   Contact Section
   ============================================ */
.contact-wrapper { max-width: 48rem; margin: 0 auto; }
.contact-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
.contact-card { background: var(--card); border-radius: 1rem; box-shadow: var(--shadow-card); padding: 1.5rem; transition: all 0.3s; }
.contact-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.whatsapp-card { text-align: center; }
.contact-icon { width: 4rem; height: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.contact-icon svg { width: 2rem; height: 2rem; }
.whatsapp-icon-bg { background: hsla(142, 79%, 50%, 0.1); }
.whatsapp-icon-bg svg { color: var(--whatsapp); }
.contact-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.contact-card > p { color: var(--muted-foreground); margin-bottom: 1rem; }
.info-card { display: flex; flex-direction: column; gap: 1rem; }
.info-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.info-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: hsla(142, 70%, 40%, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-icon svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }
.info-text h4 { font-weight: 600; margin-bottom: 0.25rem; }
.info-text p { font-size: 0.875rem; color: var(--muted-foreground); }

/* ============================================
   CTA Section
   ============================================ */
.cta-section { background: var(--primary); color: var(--primary-foreground); position: relative; overflow: hidden; }
.cta-decorations { position: absolute; inset: 0; opacity: 0.1; }
.cta-decoration { position: absolute; }
.cta-decoration svg { width: 5rem; height: 5rem; }
.cta-decoration-1 { top: 2.5rem; left: 2.5rem; }
.cta-decoration-2 { bottom: 2.5rem; right: 2.5rem; }
.cta-content { position: relative; z-index: 10; text-align: center; max-width: 42rem; margin: 0 auto; }
.cta-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: hsla(0, 0%, 100%, 0.2); padding: 0.5rem 1rem; border-radius: 9999px; margin-bottom: 1.5rem; }
.cta-badge svg { width: 1rem; height: 1rem; }
.cta-badge span { font-size: 0.875rem; font-weight: 500; }
.cta-title { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 768px) { .cta-title { font-size: 2.25rem; } }
.cta-subtitle { font-size: 1.125rem; opacity: 0.9; margin-bottom: 2rem; }

/* ============================================
   Footer
   ============================================ */
.site-footer { background: var(--foreground); color: var(--primary-foreground); padding: 2rem 1rem; }
.footer-inner { text-align: center; }
.footer-branding { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
.footer-logo { width: 2rem; height: 2rem; background: var(--primary-foreground); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.footer-logo span { color: var(--foreground); font-weight: 700; }
.footer-site-name { font-weight: 700; font-size: 1.125rem; }
.footer-tagline { opacity: 0.7; font-size: 0.875rem; margin-bottom: 0.5rem; }
.footer-copyright { opacity: 0.5; font-size: 0.75rem; }

/* ============================================
   Floating WhatsApp
   ============================================ */
.floating-whatsapp { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; background: var(--whatsapp); padding: 1rem; border-radius: 50%; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: all 0.3s; animation: bounce-slow 2s ease-in-out infinite; }
.floating-whatsapp:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5); }
.floating-whatsapp svg { width: 1.75rem; height: 1.75rem; color: white; }

/* ============================================
   Posts & Pages
   ============================================ */
.posts-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { background: var(--card); border-radius: 1rem; box-shadow: var(--shadow-card); overflow: hidden; transition: all 0.3s; }
.post-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.post-card .post-thumbnail img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.post-card .post-content { padding: 1.5rem; }
.post-card .post-title { font-size: 1.125rem; margin-bottom: 0.5rem; }
.post-card .post-title a:hover { color: var(--primary); }
.post-card .post-meta { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 0.75rem; }
.post-card .post-excerpt { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1rem; }
.page-header, .archive-header, .search-header { margin-bottom: 2rem; }
.page-title, .archive-title, .search-title { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; }
.search-query { color: var(--primary); }
.search-form { display: flex; gap: 0.5rem; margin-top: 1rem; max-width: 32rem; }
.search-input { flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: inherit; font-size: 1rem; }
.search-input:focus { outline: none; border-color: var(--primary); }
.pagination { margin-top: 2rem; display: flex; justify-content: center; gap: 0.5rem; }
.pagination a, .pagination span { padding: 0.5rem 1rem; border-radius: var(--radius); background: var(--muted); }
.pagination a:hover { background: var(--primary); color: var(--primary-foreground); }
.pagination .current { background: var(--primary); color: var(--primary-foreground); }
.single-post-article .post-header { margin-bottom: 2rem; }
.single-post-article .post-title { font-size: 2.5rem; margin-bottom: 1rem; }
.single-post-article .post-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--muted-foreground); }
.single-post-article .post-meta span { display: flex; align-items: center; gap: 0.25rem; }
.icon-small { width: 1rem; height: 1rem; }
.single-post-article .post-thumbnail { margin-bottom: 2rem; border-radius: 1rem; overflow: hidden; }
.single-post-article .post-content { line-height: 1.8; }
.single-post-article .post-content p { margin-bottom: 1.5rem; }
.single-post-article .post-content h2, .single-post-article .post-content h3 { margin-top: 2rem; margin-bottom: 1rem; }
.post-navigation { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.post-navigation .nav-links { display: grid; gap: 1rem; }
@media (min-width: 768px) { .post-navigation .nav-links { grid-template-columns: repeat(2, 1fr); } }
.post-navigation a { display: block; padding: 1rem; background: var(--muted); border-radius: var(--radius); transition: all 0.2s; }
.post-navigation a:hover { background: var(--primary); color: var(--primary-foreground); }
.post-navigation .nav-label { font-size: 0.875rem; opacity: 0.7; }
.post-navigation .nav-title { font-weight: 600; }
.nav-next { text-align: right; }

/* ============================================
   404 Page
   ============================================ */
.error-404 { text-align: center; padding: 4rem 0; }
.error-icon svg { width: 6rem; height: 6rem; color: var(--muted-foreground); margin: 0 auto 1rem; }
.error-title { font-size: 6rem; font-weight: 700; color: var(--primary); line-height: 1; }
.error-subtitle { font-size: 1.5rem; margin-bottom: 1rem; }
.error-description { color: var(--muted-foreground); max-width: 28rem; margin: 0 auto 2rem; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.error-search { max-width: 24rem; margin: 0 auto; }
.error-search p { margin-bottom: 0.5rem; color: var(--muted-foreground); }
.no-posts, .search-no-results { text-align: center; padding: 4rem 0; }
.no-results-icon { width: 4rem; height: 4rem; color: var(--muted-foreground); margin: 0 auto 1rem; }

/* ============================================
   Sidebar
   ============================================ */
.sidebar { padding: 2rem 1rem; }
.widget { margin-bottom: 2rem; padding: 1.5rem; background: var(--card); border-radius: 1rem; box-shadow: var(--shadow-soft); }
.widget-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary); }

/* ============================================
   Animations
   ============================================ */
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bounce-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.animate-fade-in { animation: fade-in 0.5s ease-out forwards; }
.animate-slide-up { animation: slide-up 0.6s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }