/* ==========================================
   SHREE POOJA - EPUJA SPECIFIC LAYOUTS
   ========================================== */

/* Page variables specific to ePuja */
:root {
    --epuja-green: #098263;
    --epuja-green-hover: #076b51;
    --epuja-card-shadow: 0 10px 25px rgba(9, 130, 99, 0.05);
    
    /* Stats box colors */
    --stats-blue: #EBF3FF;
    --stats-purple: #F3E8FF;
    --stats-pink: #FCE7F3;
    --stats-gold: #FEF3C7;
    
    --stats-blue-text: #1E40AF;
    --stats-purple-text: #6B21A8;
    --stats-pink-text: #9D174D;
    --stats-gold-text: #92400E;
}

/* Green CTA buttons as shown in the design mockup */
.btn-green {
    background-color: var(--epuja-green) !important;
    color: var(--text-light) !important;
    box-shadow: 0 4px 15px rgba(9, 130, 99, 0.2);
    border: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-smooth);
}

.btn-green:hover {
    background-color: var(--epuja-green-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(9, 130, 99, 0.35);
}

/* ePuja Custom Hero Banner styling */
.epuja-hero-section {
    padding: 15px 0 0 0 !important; /* Extremely tight padding, zero bottom space */
    background-color: var(--bg-ivory);
}

.epuja-hero-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.8rem;
    color: var(--navy-blue);
    text-align: center;
    margin-bottom: 12px !important; /* Tighter space between title and slider */
    line-height: 1.4;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* ePuja Hero Banner Slider adjustment */
.epuja-hero-slider-section {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 2px !important;
}

.h-full {
    height: 100% !important;
}

.hero-slide {
    display: block !important; /* Override flexbox layout to ensure the image scales to cover the slide completely */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #000 !important;
}

.hero-slide a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.epuja-hero-slider-section .hero-slider {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 885 / 257 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    background-color: #000 !important;
}

.epuja-banner-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Adjustments for controls inside container */
.epuja-hero-slider-section .hero-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.epuja-hero-slider-section .hero-slider-btn.prev {
    left: 40px;
}

.epuja-hero-slider-section .hero-slider-btn.next {
    right: 40px;
}

@media (max-width: 1200px) {
    .epuja-hero-slider-section {
        height: 360px !important; /* Taller height on tablets */
    }
    .epuja-hero-slider-section .hero-slider-btn.prev {
        left: 25px;
    }
    .epuja-hero-slider-section .hero-slider-btn.next {
        right: 25px;
    }
}

@media (max-width: 768px) {
    .epuja-hero-slider-section {
        height: 220px !important; /* Taller height on mobile for legibility */
        margin-bottom: 8px !important; /* Very tight spacing on mobile viewports */
    }
    .epuja-hero-slider-section .hero-slider-btn {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
    .epuja-hero-slider-section .hero-slider-btn.prev {
        left: 15px;
    }
    .epuja-hero-slider-section .hero-slider-btn.next {
        right: 15px;
    }
}

/* Category Filter Tabs styling */
.filter-tabs-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.filter-tabs-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

.filter-tab-pill {
    padding: 8px 20px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy-blue-light);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.filter-tab-pill:hover {
    border-color: var(--primary-saffron);
    color: var(--primary-saffron);
    transform: translateY(-1px);
}

.filter-tab-pill.active {
    background-color: var(--epuja-green);
    border-color: var(--epuja-green);
    color: #fff;
    box-shadow: 0 4px 10px rgba(9, 130, 99, 0.2);
}

/* ePuja specific Puja Cards layout adjustments */
.epuja-pujas-section {
    padding: 5px 0 60px 0 !important; /* Reduced top space to make content sit tightly below the slider */
}

.epuja-card-highlight-tag {
    color: #e11d48 !important; /* Elegant rose-600 color */
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 6px !important;
}

/* Testimonial slider indicators adjust */
.epuja-slider-indicator-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

/* Sacred Journey Statistics Layout */
.journey-stats-section {
    padding: 60px 0;
    background-color: #FAF6EE;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.journey-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.journey-stat-card {
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: var(--transition-smooth);
}

.journey-stat-card:hover {
    transform: translateY(-5px);
}

.journey-stat-card.blue { background-color: var(--stats-blue); border-color: rgba(30, 64, 175, 0.1); }
.journey-stat-card.purple { background-color: var(--stats-purple); border-color: rgba(107, 33, 168, 0.1); }
.journey-stat-card.pink { background-color: var(--stats-pink); border-color: rgba(157, 23, 77, 0.1); }
.journey-stat-card.gold { background-color: var(--stats-gold); border-color: rgba(146, 64, 14, 0.1); }

.journey-stat-card .stat-number {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 5px;
    font-family: 'Noto Sans', sans-serif;
}

.journey-stat-card.blue .stat-number { color: var(--stats-blue-text); }
.journey-stat-card.purple .stat-number { color: var(--stats-purple-text); }
.journey-stat-card.pink .stat-number { color: var(--stats-pink-text); }
.journey-stat-card.gold .stat-number { color: var(--stats-gold-text); }

.journey-stat-card .stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* How does Online Puja Work Section */
.how-works-section {
    padding: 80px 0;
    background-color: #fff;
}

.how-works-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.how-works-steps {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.how-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.how-step-num {
    width: 36px;
    height: 36px;
    background-color: var(--primary-saffron);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(255, 122, 0, 0.25);
}

.how-step-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy-blue);
    margin-bottom: 5px;
    font-family: 'Noto Sans', sans-serif;
}

.how-step-content p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.how-works-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.how-works-visual img {
    max-width: 100%;
    filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.12));
    border-radius: 20px;
}

/* Priests / Purohit Section */
.purohits-section {
    padding: 80px 0;
    background-color: var(--bg-ivory);
    border-top: 1px solid var(--border-color);
}

.purohits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.purohit-card {
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: var(--shadow-sm);
    padding: 24px 20px;
    text-align: center;
    transition: var(--transition-smooth);
}

.purohit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(212, 175, 55, 0.3);
}

.purohit-avatar-container {
    width: 90px;
    height: 90px;
    margin: 0 auto 15px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--primary-gold-light);
    background-color: #f1f5f9;
}

.purohit-avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.purohit-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy-blue);
    margin-bottom: 4px;
    font-family: 'Noto Sans', sans-serif;
}

.purohit-specialty {
    font-size: 0.8rem;
    color: var(--primary-saffron-dark);
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.purohit-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.purohit-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.purohit-meta i {
    color: var(--primary-gold);
}

/* Animations */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(212, 175, 55, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}

@keyframes flash {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .journey-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .purohits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .how-works-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .how-works-visual {
        order: -1;
    }
}

@media (max-width: 768px) {
    .epuja-promo-banner {
        flex-direction: column;
        gap: 20px;
        padding: 25px 20px;
        text-align: center;
    }
    
    .epuja-promo-left {
        flex-direction: column;
        gap: 15px;
    }
    
    .epuja-hero-title {
        font-size: 1.4rem;
    }
    
    .epuja-promo-title {
        font-size: 1.3rem;
    }
    
    .journey-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .purohits-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================
   MODERN DESIGN SYSTEM OVERRIDES & ENHANCEMENTS FOR EPUJA
   ======================================================== */

/* Force premium, clean sans-serif typography across the page */
body, h1, h2, h3, h4, h5, h6, .logo-text, .nav-links a, .section-title, .puja-title, .purohit-name {
    font-family: 'Noto Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: var(--navy-blue);
}

/* ePuja Hero Image Slider - Aspect-Ratio Responsive to avoid cropping banner text */
/* Responsive slide container helper */
.epuja-hero-slider-section .container {
    position: relative !important;
    max-width: 1400px !important;
    height: 100% !important;
}

.epuja-banner-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Scale to cover without letterboxing borders */
    background-color: #000 !important;
}

/* Center Filter Tabs on desktop, scroll on mobile */
.filter-tabs-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 40px 0 50px 0 !important;
    padding: 5px 10px 15px 10px !important;
}

.filter-tab-pill {
    padding: 11px 28px !important;
    background-color: #fff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--navy-blue-light) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02) !important;
    transition: var(--transition-smooth) !important;
}

.filter-tab-pill:hover {
    border-color: var(--epuja-green) !important;
    color: var(--epuja-green) !important;
    transform: translateY(-1px) !important;
}

.filter-tab-pill.active {
    background-color: var(--epuja-green) !important;
    border-color: var(--epuja-green) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(9, 130, 99, 0.25) !important;
}

/* Premium Card Layout Adjustments */
.pujas-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.puja-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.puja-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(255, 122, 0, 0.15) !important;
}

.puja-image-container {
    height: 200px !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
}

.puja-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.puja-card:hover .puja-image-container img {
    transform: scale(1.06) !important;
}

.puja-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.puja-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
}

.puja-desc {
    font-size: 0.85rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    flex-grow: 1 !important;
    min-height: 62px !important;
}

/* Clean Info Section */
.puja-details {
    margin-bottom: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.puja-detail {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.3 !important;
}

.puja-detail i {
    color: #f97316 !important;
    margin-top: 0 !important;
    font-size: 0.9rem !important;
    width: 16px !important;
    text-align: center !important;
}

/* Full Width Participate Button & Price Placement */
.puja-price-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.puja-price-label {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

.puja-price-box {
    display: flex !important;
    align-items: baseline !important;
    gap: 2px !important;
}

.puja-price-box .currency {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
}

.puja-price-box .amount {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #ea580c !important;
}

.puja-price-box .price-desc {
    font-size: 0.72rem !important;
    color: #64748b !important;
    margin-left: 2px !important;
}

.btn-participate {
    width: 100% !important;
    background: linear-gradient(135deg, #ff7a00, #ff5100) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 20px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-top: 12px !important;
    box-shadow: 0 4px 12px rgba(255, 81, 0, 0.25) !important;
}

.btn-participate:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(255, 81, 0, 0.35) !important;
}

.btn-participate i {
    transition: transform 0.2s ease !important;
}

.btn-participate:hover i {
    transform: translateX(3px) !important;
}

.puja-countdown {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    z-index: 2 !important;
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    width: auto !important;
}

.time-block {
    color: #ffb300 !important;
}

/* Responsiveness overrides */
@media (max-width: 1024px) {
    .pujas-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .pujas-grid {
        grid-template-columns: 1fr !important;
    }
    .filter-tabs-container {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
    }
    .filter-tabs-container::-webkit-scrollbar {
        display: none !important;
    }
}

/* Force opaque slide background to prevent overlapping visible edges during crossfade */
.hero-slide {
    background-color: #000 !important;
}

/* Centered Filter Tabs Style override for desktop (with visible overflow to allow center alignment) */
.filter-tabs-container {
    overflow-x: visible !important;
}

/* Premium Booking Modal Styling */
.booking-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important; /* On top of header and widgets */
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.booking-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.booking-modal-content {
    background: #ffffff !important;
    border-radius: 24px !important;
    max-width: 500px !important;
    width: 90% !important;
    padding: 35px !important;
    position: relative !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    transform: translateY(30px) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.booking-modal.active .booking-modal-content {
    transform: translateY(0) !important;
}

.booking-modal-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: #f1f5f9 !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition-smooth) !important;
}

.booking-modal-close:hover {
    background: #e2e8f0 !important;
    color: var(--navy-blue) !important;
}

.booking-modal-title {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--navy-blue) !important;
    margin-bottom: 5px !important;
}

.booking-modal-subtitle {
    font-size: 0.9rem !important;
    color: var(--primary-saffron-dark) !important;
    font-weight: 700 !important;
    margin-bottom: 25px !important;
}

.booking-form .form-group {
    margin-bottom: 18px !important;
}

.booking-form label {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--navy-blue-light) !important;
    margin-bottom: 6px !important;
}

.booking-form input, 
.booking-form select, 
.booking-form textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    color: var(--text-dark) !important;
    background: #f8fafc !important;
    transition: var(--transition-smooth) !important;
}

.booking-form input:focus, 
.booking-form select:focus, 
.booking-form textarea:focus {
    outline: none !important;
    border-color: var(--epuja-green) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(9, 130, 99, 0.15) !important;
}

.booking-form .form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
}

.booking-form .required {
    color: #ef4444 !important;
}

.booking-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #f0fdf4 !important;
    border: 1px dashed rgba(9, 130, 99, 0.3) !important;
    padding: 15px 20px !important;
    border-radius: 14px !important;
    margin: 25px 0 15px 0 !important;
}

.booking-summary-row span {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--epuja-green) !important;
}

.booking-summary-row .booking-summary-price {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
}

/* Special Sevas Grid styles */
.special-sevas-section {
    padding: 50px 0;
    background-color: #f8fafc;
}

.special-sevas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.seva-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.seva-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    border-color: rgba(9, 130, 99, 0.15);
}

.seva-image-container {
    height: 200px;
    overflow: hidden;
    position: relative;
    background-color: #f1f5f9;
}

.seva-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.seva-card:hover .seva-image-container img {
    transform: scale(1.05);
}

.seva-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.seva-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #0f172a !important; /* Slate-900 */
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
}

.seva-date {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 12px;
}

.seva-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
    word-break: break-all;
    overflow-wrap: break-word;
}

.btn-seva-action {
    background: #098263;
    color: #ffffff !important;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(9, 130, 99, 0.2);
}

.btn-seva-action:hover {
    background: #076b51;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(9, 130, 99, 0.3);
}

.btn-seva-action i {
    transition: transform 0.2s ease;
}

.btn-seva-action:hover i {
    transform: translateX(3px);
}

/* Responsive Seva styles */
@media (max-width: 1024px) {
    .special-sevas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .special-sevas-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================
   MODERN FILTER MODAL REDESIGN STYLING
   ======================================================== */

.filter-trigger-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.filter-trigger-btn:hover {
    border-color: #94a3b8 !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

.filter-trigger-btn.active-filter {
    background-color: #f0fdf4 !important;
    border-color: #098263 !important;
    color: #098263 !important;
}

.filter-trigger-btn .filter-badge {
    background: #098263 !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 50px !important;
    margin-left: 4px !important;
}

.filter-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.filter-modal.open {
    opacity: 1 !important;
    visibility: visible !important;
}

.filter-modal-content {
    background: #ffffff !important;
    border-radius: 16px !important;
    width: 90% !important;
    max-width: 800px !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    transform: scale(0.95) !important;
    transition: transform 0.3s ease !important;
    overflow: hidden !important;
}

.filter-modal.open .filter-modal-content {
    transform: scale(1) !important;
}

.filter-modal-header {
    padding: 16px 24px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.filter-modal-header h3 {
    margin: 0 !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.filter-modal-close-btn {
    background: transparent !important;
    border: none !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

.filter-modal-close-btn:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

.filter-modal-body {
    padding: 24px !important;
    overflow-y: auto !important;
    flex-grow: 1 !important;
}

.filter-section-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 8px !important;
}

/* Deity Cards Grid */
.deity-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
}

@media (max-width: 992px) {
    .deity-cards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .deity-cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.deity-card-item {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 8px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    user-select: none !important;
}

.deity-card-item:hover {
    border-color: #cbd5e1 !important;
    transform: translateY(-2px) !important;
}

.deity-card-item.selected {
    border-color: #098263 !important;
    background-color: #f0fdf4 !important;
}

.deity-card-img-wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
    margin-bottom: 6px !important;
}

.deity-card-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

.deity-card-item:hover .deity-card-img-wrapper img {
    transform: scale(1.05) !important;
}

.deity-card-checkbox {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    transition: all 0.2s ease !important;
}

.deity-card-item.selected .deity-card-checkbox {
    background: #098263 !important;
    border-color: #098263 !important;
}

.deity-card-checkbox::after {
    content: '' !important;
    width: 4px !important;
    height: 8px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    opacity: 0 !important;
    transition: opacity 0.1s ease !important;
}

.deity-card-item.selected .deity-card-checkbox::after {
    opacity: 1 !important;
}

.deity-card-name {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.deity-card-item.selected .deity-card-name {
    color: #098263 !important;
}

/* Filter checkbox groups columns */
.filter-checkbox-columns-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

@media (max-width: 768px) {
    .filter-checkbox-columns-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

.filter-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.checkbox-item-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
}

.checkbox-custom-input {
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.checkbox-item-wrapper:hover .checkbox-custom-input {
    border-color: #94a3b8 !important;
}

.checkbox-item-wrapper.selected .checkbox-custom-input {
    background: #098263 !important;
    border-color: #098263 !important;
}

.checkbox-custom-input::after {
    content: '' !important;
    width: 4px !important;
    height: 8px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    opacity: 0 !important;
}

.checkbox-item-wrapper.selected .checkbox-custom-input::after {
    opacity: 1 !important;
}

.checkbox-label-text {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    line-height: 1.4 !important;
}

.checkbox-item-wrapper.selected .checkbox-label-text {
    color: #098263 !important;
}

/* Filter Location Section */
.filter-location-section {
    margin-top: 12px !important;
}

.location-checkboxes-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

@media (max-width: 900px) {
    .location-checkboxes-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .location-checkboxes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Footer styles */
.filter-modal-footer {
    padding: 16px 24px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f8fafc !important;
}

.filter-btn-clear {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.filter-btn-clear:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.filter-btn-apply {
    background: #2563eb !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.filter-btn-apply:hover {
    background: #1d4ed8 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

/* Category Filter Buttons */
.category-filter-btn {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #2563eb !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    outline: none !important;
}

.category-filter-btn:hover {
    border-color: #cbd5e1 !important;
    background-color: #f1f5f9 !important;
    color: #1d4ed8 !important;
}

.category-filter-btn.active-category-btn {
    background-color: #f0fdf4 !important;
    border-color: #098263 !important;
    color: #098263 !important;
}

.category-filter-btn i {
    font-size: 0.8rem !important;
    transition: transform 0.2s ease !important;
    color: #2563eb !important;
}

.category-filter-btn.active-category-btn i {
    color: #098263 !important;
}

.category-filter-btn:hover i {
    transform: translateY(1px) !important;
}

/* Most Popular Chadhava Section Styles */
.popular-slider-outer {
    position: relative !important;
    width: 100%;
}
.popular-slider-wrapper {
    overflow: hidden !important;
    width: 100%;
}
.popular-slider-track {
    display: flex !important;
    align-items: stretch !important; /* Force equal heights for cards */
    gap: 24px !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 100%;
}
.popular-card {
    flex: 0 0 calc(33.333% - 16px) !important;
    width: calc(33.333% - 16px) !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.popular-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25) !important;
}
.popular-image-container {
    height: 200px !important;
    overflow: hidden !important;
    position: relative !important;
}
.popular-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.popular-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    text-align: left !important;
}
.popular-card-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
    font-family: 'Noto Sans', sans-serif !important;
}
.popular-card-meta {
    font-size: 0.82rem !important;
    color: #64748b !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.btn-popular-action {
    margin-top: auto !important; /* Pushes button to bottom */
    width: 100% !important;
    text-align: center !important;
    background: #6B21A8 !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    display: block !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}
.btn-popular-action:hover {
    background-color: #5b1b8f !important; /* darker purple */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(107, 33, 168, 0.3) !important;
}
.popular-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #475569 !important;
    z-index: 10 !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
}
.popular-nav-btn.prev {
    left: -22px !important;
}
.popular-nav-btn.next {
    right: -22px !important;
}
.popular-nav-btn:hover {
    background-color: #f8fafc !important;
    color: #FF6F00 !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important;
}

@media (max-width: 1024px) {
    .popular-card {
        flex: 0 0 calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
    }
    .popular-nav-btn.prev {
        left: -10px !important;
    }
    .popular-nav-btn.next {
        right: -10px !important;
    }
}

@media (max-width: 640px) {
    .popular-card {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .popular-nav-btn.prev {
        left: -5px !important;
    }
    .popular-nav-btn.next {
        right: -5px !important;
    }
}

/* ==========================================
   PARTICIPATE GREEN BUTTON & CARD STYLES
   ========================================== */
.btn-participate-green {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: #098263 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 13px 20px !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    margin-top: 16px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.btn-participate-green:hover {
    background: #06694f !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(9, 130, 99, 0.25) !important;
}

.btn-participate-green i {
    font-size: 0.9rem !important;
    transition: transform 0.2s ease !important;
}

.btn-participate-green:hover i {
    transform: translateX(4px) !important;
}

.puja-card {
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #edf2f7 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.puja-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.09) !important;
}

.puja-card .puja-image-container img {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

/* ==========================================
   PUJA FILTER MODAL & CATEGORY PILLS STYLES
   ========================================== */

.category-filter-btn {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 50px !important;
    padding: 9px 20px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
}

.category-filter-btn:hover {
    border-color: var(--primary-saffron) !important;
    color: var(--primary-saffron) !important;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.12) !important;
}

.category-filter-btn.active-category-btn {
    background: #f0fdf4 !important;
    border-color: #098263 !important;
    color: #098263 !important;
}

/* Filter Modal Backdrop */
.filter-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.filter-modal.open {
    opacity: 1 !important;
    visibility: visible !important;
}

.filter-modal-content {
    background: #ffffff !important;
    width: 100% !important;
    max-width: 860px !important;
    max-height: 85vh !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3) !important;
    transform: scale(0.95) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.filter-modal.open .filter-modal-content {
    transform: scale(1) !important;
}

.filter-modal-header {
    padding: 20px 28px !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #ffffff !important;
}

.filter-modal-header h3 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

.filter-modal-close-btn {
    background: #f1f5f9 !important;
    border: none !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    color: #64748b !important;
    cursor: pointer !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.filter-modal-close-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.filter-modal-body {
    padding: 28px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

.filter-section-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 14px !important;
    padding-bottom: 6px !important;
    border-bottom: 2px solid #fff3e6 !important;
}

/* Deity Cards Grid */
.deity-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
    gap: 12px !important;
}

.deity-card-item {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 12px 8px !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
}

.deity-card-item:hover {
    border-color: var(--primary-saffron) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.1) !important;
}

.deity-card-item.selected {
    border-color: #098263 !important;
    background: #f0fdf4 !important;
    box-shadow: 0 4px 12px rgba(9, 130, 99, 0.15) !important;
}

.deity-card-img-wrapper {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin: 0 auto 8px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.deity-card-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.deity-card-name {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    line-height: 1.3 !important;
}

.deity-card-item.selected .deity-card-name {
    color: #098263 !important;
}

.deity-card-checkbox {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
}

.deity-card-item.selected .deity-card-checkbox {
    border-color: #098263 !important;
    background: #098263 !important;
}

.deity-card-item.selected .deity-card-checkbox::after {
    content: "\f00c" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* Checkbox Columns Layout (Tithis, Dosha, Benefits, Location) */
.filter-checkbox-columns-layout {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

@media (max-width: 768px) {
    .filter-checkbox-columns-layout {
        grid-template-columns: 1fr !important;
    }
}

.location-checkboxes-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 10px !important;
}

.checkbox-item-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
    user-select: none !important;
}

.checkbox-item-wrapper:hover {
    border-color: var(--primary-saffron) !important;
}

.checkbox-item-wrapper.selected {
    border-color: #098263 !important;
    background: #f0fdf4 !important;
    color: #098263 !important;
}

.checkbox-custom-input {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.checkbox-item-wrapper.selected .checkbox-custom-input {
    border-color: #098263 !important;
    background: #098263 !important;
}

.checkbox-item-wrapper.selected .checkbox-custom-input::after {
    content: "\f00c" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #fff !important;
    font-size: 0.7rem !important;
}

.checkbox-label-text {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

.checkbox-item-wrapper.selected .checkbox-label-text {
    color: #098263 !important;
    font-weight: 700 !important;
}

/* Modal Footer Buttons */
.filter-modal-footer {
    padding: 16px 28px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #f8fafc !important;
}

.filter-btn-clear {
    background: transparent !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #64748b !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.filter-btn-clear:hover {
    border-color: #FF4D4F !important;
    color: #FF4D4F !important;
    background: #fff !important;
}

.filter-btn-apply {
    background: #098263 !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 28px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(9, 130, 99, 0.2) !important;
}

.filter-btn-apply:hover {
    background: #076b51 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(9, 130, 99, 0.3) !important;
}