/* ============================================================
   Molisha Panchang — Visual Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700&family=Noto+Sans+Devanagari:wght@400;500;600;700;800;900&display=swap');

:root {
    --primary-orange: #ea580c;
    --primary-orange-light: #fb923c;
    --deep-navy: #0f172a;
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(255, 255, 255, 0.6);
    --shadow-soft: 0 8px 30px rgba(15, 23, 42, 0.08);
    --shadow-lift: 0 20px 45px -10px rgba(234, 88, 12, 0.25);
}

/* Inter Devanagari glyphs nahi rakhta, isliye Noto Sans Devanagari fallback zaroori hai */
* { font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; }

/* Poore project mein ab sirf Inter hi use hota hai (quotes/headings ke liye bhi) */
.font-art { font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; }

html { scroll-behavior: smooth; }

body {
    background: linear-gradient(180deg, #fff7ed 0%, #fef3e7 30%, #eef2ff 100%);
    min-height: 100vh;
}

/* ---------- Hide scrollbars for app-like feel ---------- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   Animated background blobs
   ============================================================ */
.art-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.blob {
    position: absolute;
    filter: blur(70px);
    opacity: 0.35;
    animation: floatBlob 14s ease-in-out infinite;
}
.blob-1 {
    width: 380px; height: 380px;
    top: -120px; left: -100px;
    background: radial-gradient(circle at 30% 30%, #fb923c, #ea580c);
}
.blob-2 {
    width: 420px; height: 420px;
    bottom: -160px; right: -140px;
    background: radial-gradient(circle at 60% 40%, #818cf8, #4f46e5);
    animation-delay: -6s;
}
@keyframes floatBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -25px) scale(1.08); }
    66%      { transform: translate(-20px, 20px) scale(0.95); }
}

/* ============================================================
   Glassmorphism
   ============================================================ */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
}
.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.sticky-glass {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* Layered fade-in reveal, staggered */
.fade-up {
    opacity: 0;
    transform: translateY(18px);
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.15s; }
.delay-3 { animation-delay: 0.25s; }
.delay-4 { animation-delay: 0.35s; }
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Interactive micro-animations
   ============================================================ */
.tap-effect { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.tap-effect:active { transform: scale(0.92); }

.float-icon { display: inline-block; animation: gentleFloat 3.2s ease-in-out infinite; }
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.spin-slow { animation: spinSlow 12s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.pulse-red {
    animation: pulseRed 1.8s ease-in-out infinite;
}
@keyframes pulseRed {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* Image zoom on hover (kept for legacy hooks) */
.img-zoom { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.img-zoom:hover { transform: scale(1.05); }

/* ============================================================
   Ticker / marquee
   ============================================================ */
.marquee-track { overflow: hidden; white-space: nowrap; }
.marquee-content {
    display: inline-flex;
    animation: marqueeScroll 16s linear infinite;
    white-space: nowrap;
}
@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   Loading skeleton shimmer (used while data streams in)
   ============================================================ */
@keyframes shimmer {
    0%   { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}
.skeleton {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s infinite linear;
}

/* ============================================================
   Bottom-sheet modal slide-up
   ============================================================ */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.animate-slide-up { animation: slideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1); }

/* Custom select arrow polish */
select { background-image: none; }

/* Nav active state (legacy hook, still supported) */
.nav-item.active {
    color: var(--primary-orange);
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

/* Card border gradient accent on hover for quick-fact tiles */
.glass-card.group:hover {
    border-color: rgba(234, 88, 12, 0.35);
}

/* Smooth image reveal */
img { transition: opacity 0.4s ease; }
img[loading="lazy"] { opacity: 0; animation: imgReveal 0.6s ease forwards 0.1s; }
@keyframes imgReveal { to { opacity: 1; } }

/* ============================================================
   7-day quick-jump strip
   ============================================================ */
.week-strip { scroll-snap-type: x proximity; }
.week-pill {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    color: #475569;
    scroll-snap-align: center;
}
.week-pill-today { border: 1.5px solid var(--primary-orange); color: var(--primary-orange); }
.week-pill-active {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 20px -6px rgba(234, 88, 12, 0.5);
    transform: translateY(-2px) scale(1.05);
}

/* ============================================================
   Prev/Next swipe arrows on hero day-card
   ============================================================ */
.swipe-arrow {
    position: relative;
    z-index: 10;
    width: 34px; height: 34px;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    flex-shrink: 0;
}
.swipe-arrow:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ============================================================
   Chandra Kala — moon phase visual
   ============================================================ */
.moon-phase {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    overflow: hidden;
    box-shadow: 0 0 18px rgba(99, 102, 241, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.12);
}
.moon-phase .moon-light {
    position: absolute;
    top: 0; bottom: 0;
    background: radial-gradient(circle at 40% 40%, #fef9c3, #fcd34d 75%);
}

/* ============================================================
   Dark mode overrides
   Tailwind CDN generates the base utility rules at runtime;
   these rules use the .dark ancestor + !important to reliably
   win regardless of stylesheet injection order.
   ============================================================ */
.dark body { background: linear-gradient(180deg, #0b1120 0%, #111827 45%, #0b1120 100%) !important; }
.dark .bg-white\/40 { background-color: rgba(15, 23, 42, 0.55) !important; }
.dark .border-white\/30 { border-color: rgba(255, 255, 255, 0.08) !important; }
.dark .glass-card { background: rgba(30, 41, 59, 0.55) !important; border-color: rgba(255, 255, 255, 0.08) !important; }
.dark .sticky-glass { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(255, 255, 255, 0.08) !important; }
.dark .text-slate-800, .dark .text-slate-900 { color: #f1f5f9 !important; }
.dark .text-slate-500, .dark .text-slate-400 { color: #94a3b8 !important; }
.dark .bg-orange-50\/80 { background-color: rgba(67, 40, 15, 0.5) !important; }
.dark .text-orange-900 { color: #fdba74 !important; }
.dark .bg-amber-50\/80 { background-color: rgba(58, 44, 12, 0.55) !important; }
.dark .text-amber-900 { color: #fde68a !important; }
.dark .border-amber-100\/50 { border-color: rgba(217, 119, 6, 0.25) !important; }
.dark .week-pill { color: #cbd5e1; }
.dark select { background-color: rgba(30, 41, 59, 0.8) !important; color: #f1f5f9 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
.dark .bg-white\/90 { background-color: rgba(15, 23, 42, 0.9) !important; }

/* Rashifal accordion active state */
.rashi-btn-active { background: linear-gradient(135deg, #f97316, #dc2626) !important; }
.rashi-btn-active i, .rashi-btn-active span { color: #fff !important; }

/* ============================================================
   Month view grid cells
   ============================================================ */
.day-cell { color: #475569; }
.day-cell-today {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(234, 88, 12, 0.5);
}
.day-cell-holiday:not(.day-cell-today) { border: 1.5px solid rgba(239, 68, 68, 0.4); }
.dark .day-cell { color: #cbd5e1; }