/* ========================================
   JAIN JINVANI - GLASSMORPHISM STYLES
   Frosted Glass / Liquid Glass Effects
   ======================================== */

/* ===== Glass Utility Classes ===== */
.glass {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border: 1px solid var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-shadow);
}

.glass-subtle {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ===== Glass Cards ===== */
.card,
.content-card {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border: 1px solid var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-shadow);
}

.card:hover,
.content-card:hover {
    box-shadow:
        0 12px 40px 0 rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

/* ===== Category Rows (Sadhana) ===== */
.category-row {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border: 1px solid var(--liquid-glass-border);
}

.category-link {
    background: transparent;
}

.category-row:hover {
    box-shadow: var(--liquid-glass-shadow);
    border-color: rgba(212, 175, 55, 0.3);
}

/* ===== Temple Cards ===== */
.temple-card {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border: 1px solid var(--liquid-glass-border);
    overflow: hidden;
}

/* ===== Page Hero Sections ===== */
.page-hero {
    background:
        linear-gradient(135deg, rgba(178, 34, 34, 0.85) 0%, rgba(92, 16, 16, 0.9) 100%),
        var(--liquid-glass-bg);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
}

/* ===== Hero Section ===== */
.hero {
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

/* ===== Panchang Section ===== */
.panchang-main,
.auspicious-times,
.upcoming-parva {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border: 1px solid var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-shadow);
}

.panchang-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
}

/* ===== Namokar Special Section ===== */
.namokar-special {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border: 1px solid var(--gold);
}

/* ===== Mobile Navigation ===== */
.mobile-bottom-nav {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border-top: 1px solid var(--liquid-glass-border);
}

.mobile-more-content {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
}

/* ===== Sidebar ===== */
.sidebar {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border-right: 1px solid var(--liquid-glass-border);
}

/* ===== Floating Elements ===== */
.floating-back-btn {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border: 1px solid var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-shadow);
}

/* ===== Viewer Controls ===== */
.viewer-controls {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border-bottom: 1px solid var(--liquid-glass-border);
}

/* ===== Verse Cards ===== */
.verse-card {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border: 1px solid var(--liquid-glass-border);
}

/* ===== Intro Box ===== */
.intro-box {
    background: var(--liquid-glass-bg);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--liquid-glass-border);
    border-left: 4px solid var(--primary-saffron);
}

/* ===== Quick Links Bar ===== */
.quick-links-bar {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border: 1px solid var(--liquid-glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

/* ===== Content List Items ===== */
.content-list li {
    background: var(--liquid-glass-bg);
    backdrop-filter: blur(15px) saturate(140%);
    -webkit-backdrop-filter: blur(15px) saturate(140%);
    border: 1px solid var(--liquid-glass-border);
}

.content-list li:hover {
    box-shadow: var(--liquid-glass-shadow);
    border-color: var(--gold);
}

/* ===== Toast Notifications ===== */
.toast {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border: 1px solid var(--liquid-glass-border);
}

/* ===== Resume Reading Bar ===== */
.resume-reading-bar {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
}

/* ===== Stamp Cards - Subtle Glass ===== */
.stamp-card .stamp-outer {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* ===== Buttons with Glass ===== */
.btn-glass {
    background: var(--liquid-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--liquid-glass-border);
    color: var(--text-title);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--gold);
}

/* ===== Search Results ===== */
.search-results {
    background: var(--liquid-glass-bg);
    backdrop-filter: var(--liquid-glass-blur);
    -webkit-backdrop-filter: var(--liquid-glass-blur);
    border: 1px solid var(--liquid-glass-border);
}

/* ===== Footer ===== */
.footer {
    background: var(--liquid-glass-bg);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border-top: 1px solid var(--liquid-glass-border);
}