/* --- 🎨 Global Master Theme --- */
:root {
    /* 🔴 Primary Brand Colors */
    --brand-color: #f35252;          /* ප්‍රධාන වර්ණය */
    --brand-gradient: linear-gradient(135deg, #f35252 0%, #f79d65 100%);
    --brand-dark: #374151;           /* අකුරු වල වර්ණය */
    
    /* ⚪ Background & Surfaces */
    --bg-light: #f9fafb;             /* මුළු පිටුවේම පසුබිම් වර්ණය */
    --card-bg: #ffffff;              /* කාඩ්පත් වල පසුබිම */
    --border-color: #f1f5f9;         /* දාර වල වර්ණය */

    /* ✨ Effects */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 30px rgba(243, 82, 82, 0.1);
    --radius-full: 50px;
    --radius-lg: 24px;
    --radius-md: 18px;
}

/* --- Common Layout Elements --- */
body {
    background-color: var(--bg-light);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--brand-dark);
}

/* Hero Section (පිටුවල ඉහළ කොටස) */
.page-hero {
    background: var(--brand-gradient);
    padding: 70px 0 110px;
    color: white;
    text-align: center;
    border-radius: 0 0 40px 40px;
}

/* Floating Layer (කාඩ්පත් පාවී එන ස්වභාවය) */
.content-layer {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 30px;
	box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: 50px;
}

/* Modern App Card (පොත්, පාඩම් සඳහා පොදු කාඩ්පත) */
.modern-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.modern-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-color);
}

/* Universal Button */
.btn-theme {
    background: var(--brand-gradient);
    color: white !important;
    border-radius: var(--radius-full);
    padding: 10px 25px;
    font-weight: 600;
    border: none;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.btn-theme:hover {
    box-shadow: 0 8px 20px rgba(243, 82, 82, 0.3);
    transform: scale(1.03);
}


/* --- Header & Navigation --- */
.main-nav {
    background: var(--white);
    padding: 12px 0;
    box-shadow: 0 2px 15px rgba(0,0,0,0.03);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.brand-icon-box {
    width: 42px;
    height: 42px;
    background: var(--brand-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.3rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.4rem;
    color: #1f2937 !important;
}

.navbar-brand span {
    color: var(--brand-color);
}

/* --- Dynamic Hero Wrapper --- */
.page-hero-wrapper {
    background: var(--brand-gradient);
    padding: 60px 0 100px; /* පල්ලෙහා Layer එකට ඉඩ තැබීමට */
    border-radius: 0 0 50px 50px;
    position: relative;
    overflow: hidden;
}

.hero-logo-container {
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    margin: 0 auto;
    border-radius: 50%;
    padding: 10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.hero-logo-container:hover {
    transform: scale(1.05);
}

.hero-main-logo {
    max-width: 85%;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
}

.hero-event-title {
    color: white;
    font-weight: 700;
    font-size: 1.8rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* --- Special Event Banner --- */
.special-event-banner {
    background: #2d3436;
    color: #ffd700;
    padding: 8px 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.event-badge {
    background: #ffd700;
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    margin-right: 8px;
    font-weight: 900;
}

/* --- Glass Effect Navigation --- */
.glass-nav {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}



/* --- 👣 Modern Site Footer --- */
.site-footer {
    background: var(--white);
    padding-top: 80px;
    border-top: 1px solid var(--border-color);
    margin-top: 40px;
}

.footer-top-layer {
    padding-bottom: 50px;
}

.footer-brand {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-dark);
    letter-spacing: -0.5px;
}

.footer-brand span {
    color: var(--brand-color);
}

.footer-about {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.7;
    margin-top: 15px;
}

.footer-header {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: 25px;
    position: relative;
}

.footer-list {
    list-style: none;
    padding: 0;
}

.footer-list li {
    margin-bottom: 12px;
}

.footer-list li a {
    text-decoration: none;
    color: #4b5563;
    font-size: 0.95rem;
    transition: 0.3s;
}

.footer-list li a:hover {
    color: var(--brand-color);
    padding-left: 5px;
}

/* Newsletter Input Fixes */
.footer-newsletter .form-control {
    border-radius: 50px 0 0 50px;
    padding-left: 20px;
    border-color: var(--border-color);
    font-size: 0.9rem;
}

.footer-newsletter .form-control:focus {
    box-shadow: none;
    border-color: var(--brand-color);
}

.footer-newsletter .btn-theme {
    border-radius: 0 50px 50px 0;
    padding-left: 20px;
    padding-right: 20px;
}

/* Social Icons */
.footer-socials {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.footer-socials a {
    width: 38px;
    height: 38px;
    background: var(--bg-light);
    color: var(--brand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    text-decoration: none;
    transition: 0.3s;
}

.footer-socials a:hover {
    background: var(--brand-color);
    color: var(--white);
    transform: translateY(-3px);
}

/* Footer Bottom Bar */
.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding: 25px 0;
    font-size: 0.85rem;
    color: #9ca3af;
}

@media (max-width: 991px) {
    .site-footer {
        text-align: center;
        padding-top: 60px;
    }
    .footer-socials {
        justify-content: center;
        margin-bottom: 40px;
    }
    .footer-header::after {
        left: 50%;
        transform: translateX(-50%);
    }
}



/* --- 📚 Book Card Specific Styles --- */

.book-thumb-container {
    position: relative;
    height: 240px;
    background: #f8fafc;
    overflow: hidden;
}

.book-thumb-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.modern-card:hover .book-thumb-container img {
    transform: scale(1.1);
}

/* Hover Overlay */
.book-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s ease;
    backdrop-filter: blur(3px);
}

.modern-card:hover .book-hover-overlay {
    opacity: 1;
}

/* Custom Badges */
.badge-custom {
    font-size: 10px;
    background: var(--bg-light);
    color: #64748b;
    padding: 4px 12px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid var(--border-color);
}

/* Filter Fixes */
.filter-box .input-group-text {
    border-radius: 15px 0 0 15px;
}

.filter-box .form-select {
    border-radius: 0 15px 15px 0;
    font-size: 0.9rem;
}

@media (max-width: 576px) {
    .book-thumb-container {
        height: 180px;
    }
    .modern-card h6 {
        font-size: 0.85rem;
    }
}

/* --- 📝 Notes Specific Styles --- */
.teacher-avatar {
    width: 32px;
    height: 32px;
    background: var(--brand-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.teacher-info {
    border: 1px solid var(--border-color);
    transition: 0.3s;
}

.modern-card:hover .teacher-info {
    background: var(--white) !important;
    border-color: var(--brand-color);
}

/* සටහන් පිටුවේ Badges */
.badge-custom {
    background: var(--brand-soft) !important;
    color: var(--brand-color) !important;
    border: none;
    font-weight: 800;
}

/* --- 📰 News Specific Styles --- */
.news-article-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.news-article-card:hover {
    transform: translateY(-5px);
}

.news-img-wrapper {
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.news-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-read-more {
    color: var(--brand-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: 0.3s;
}

.btn-read-more:hover {
    color: var(--brand-dark);
    letter-spacing: 0.5px;
}

.sidebar-box {
    background: #f8fafc;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.recent-post-link a span {
    transition: 0.3s;
}

.recent-post-link a:hover span {
    color: var(--brand-color) !important;
}

@media (max-width: 768px) {
    .news-img-wrapper {
        height: 200px;
    }
}

/* --- 📄 Single News View Styles --- */
.single-news-card {
    background: var(--white);
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.news-hero-img {
    max-height: 500px;
    overflow: hidden;
}

.news-hero-img img {
    object-fit: cover;
    width: 100%;
}

.news-main-title {
    color: var(--brand-dark);
    font-size: 2.2rem;
    letter-spacing: -1px;
}

.author-img-box img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 3px solid var(--white);
}

.news-text-content {
    font-size: 1.15rem;
    color: #374151;
    text-align: justify;
}

/* Share Icons Customization */
.share-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white !important;
    font-size: 1.2rem;
    transition: 0.3s;
    text-decoration: none;
}

.share-icon.wa { background-color: #25d366; }
.share-icon.fb { background-color: #1877f2; }

.share-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .news-main-title {
        font-size: 1.6rem;
    }
    .news-text-content {
        font-size: 1.05rem;
    }
}

/* --- 📞 Contact Page Styles --- */
.custom-input {
    border-radius: 12px;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    background: #fdfdfd;
    transition: 0.3s;
}

.custom-input:focus {
    background: var(--white);
    border-color: var(--brand-color);
    box-shadow: 0 0 0 4px rgba(243, 82, 82, 0.1);
}

.wa-card {
    display: flex;
    align-items: center;
    padding: 15px;
    background: var(--white);
    border-radius: 15px;
    text-decoration: none !important;
    color: var(--brand-dark);
    border: 1px solid var(--border-color);
    transition: 0.3s;
}

.wa-card:hover {
    transform: translateX(10px);
    border-color: #25d366;
    box-shadow: var(--shadow-sm);
}

.wa-icon {
    width: 45px;
    height: 45px;
    background: #e8faf0;
    color: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
    margin-right: 15px;
}



/* --- Buddha Varsha Card Styling --- */
.buddha-card {
    background: #fff;
    border-top: 5px solid #9e0000;
}

.buddha_varsha_container {
    text-align: center;
    padding: 10px;
}

.buddha_varsha_header p {
    line-height: 1.2;
    margin-bottom: 5px;
}

.buddha_varsha_month {
    background: #9e0000;
    font-size: 24px;
    color: #f8c733;
    padding: 10px;
    font-weight: bold;
}

.buddha-varsha-date {
    font-size: 80px;
    color: #9e0000;
    line-height: 1;
    margin: 20px 0;
}

.buddha-varsha-a { font-size: 22px; }
.buddha-varsha-b { font-size: 30px; }

/* --- Poya Table Styling --- */
.custom-poya-table thead th {
    background-color: #f8f9fa;
    color: #2c3e50;
    font-weight: 700;
    border-bottom: 2px solid #eee;
}

.pulse-effect {
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Glass effect background for the current row */
.table-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.opacity-50 {
    opacity: 0.6;
}

/* Poya & Buddha Widget Styling */
.mt-n5 { margin-top: -50px; position: relative; z-index: 100; }

.buddha-widget {
    border-top: 5px solid #9e0000;
    padding: 20px;
    background: white;
}

.buddha_varsha_container { text-align: center; }
.buddha_varsha_month { background: #9e0000; color: #f8c733; font-weight: bold; }
.buddha-varsha-date { font-size: 60px; font-weight: 800; color: #9e0000; line-height: 1; margin: 10px 0; }
.buddha-varsha-a { font-size: 1.1rem; color: #555; }
.buddha-varsha-b { font-size: 1.5rem; }

.poya-countdown-card {
    background: white;
    border-top: 5px solid var(--brand-color);
    padding: 30px;
}

.dharma-text { letter-spacing: 1px; font-style: italic; color: #888; }

.timer-box {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 12px;
    min-width: 70px;
    border: 1px solid #eee;
}

.timer-num {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--brand-color);
    line-height: 1.2;
}

.timer-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #888;
    font-weight: bold;
}

@media (max-width: 768px) {
    .mt-n5 { margin-top: 20px; }
    .timer-box { min-width: 60px; padding: 8px; }
    .timer-num { font-size: 1.4rem; }
}



/* Hero Section එකේ ප්‍රධාන සැකසුම් */
        .page-hero {
            position: relative;
            z-index: -5;
    margin-bottom: -2.5%;
            background: linear-gradient(135deg, #0055aa 0%, #ffa500 25%, #ffcc00 50%, #ff0000 75%, #8b0000 100%);
            padding: 70px 0 110px;
            color: white;
            text-align: center;
            border-radius: 0 0 40px 40px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* ඇනිමේෂන් කැන්වසය */
        #loadingCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }
        
        /* අකුරු සහ අන්තර්ගතය කැන්වසයට උඩින් තැබීම */
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .hero-logo-container {
            width: 100px;
            height: 100px;
            background: rgba(255,255,255,0.95);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            border: 3px solid rgba(255,255,255,0.6);
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 0 5px rgba(255,255,255,0.3);
            animation: logoFloat 3s ease-in-out infinite;
            padding: 10px;
        }
        
        .hero-logo-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }
        
        @keyframes logoFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        h1 {
            text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
            animation: fadeInUp 1s ease-out;
        }
        
        p.lead {
            text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Timer Styles */
        .mt-n4 { margin-top: -4rem !important; }
        .timer-box {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 12px;
            min-width: 65px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .timer-num { 
            display: block; 
            font-size: 1.5rem; 
            font-weight: bold; 
            color: #d9534f; 
        }
        .timer-label { 
            font-size: 0.7rem; 
            text-transform: uppercase; 
            color: #888; 
        }


/* User Posts Section */
.user-post-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.user-post-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

/* Image */
.post-thumb {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badge */
.post-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--brand-color, #ff9800);
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* Body */
.post-body {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.post-meta {
    font-size: 0.8rem;
    color: #666;
}

.post-meta .author i {
    color: #ff9800;
}