/* 1. அடிப்படை அமைப்புகள் */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #ffffff;
    /* வெப்சைட்டை முழுமையாக வெள்ளை நிறமாக்க */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* மொத்த வெப்சைட்டையும் திரையின் நடுவில் வைக்கும் */
    transition: background 0.3s ease;
}

/* 2. மெயின் கண்டெய்னர் - Full Screen */
.main-wrapper {
    width: 100%;
    max-width: 100%;
    /* Full screen */
    background-color: #ffffff;
    box-shadow: none;
    min-height: 100vh;
    position: relative;
}

/* 3. மேல் பட்டை (Top Bar) */
.top-bar {
    background-color: #800000;
    color: white;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 11px;
    border-bottom: 2px solid #ffcc00;
}

/* 4. செய்தி ஓடும் பகுதி - திருத்தப்பட்டது */
.news-container {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
    height: 100%;
    margin: 0 10px;
}

.news-label {
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
    color: black;
    padding: 3px 10px;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 15px;
    white-space: nowrap;
    flex-shrink: 0;
    z-index: 5;
}

.breaking-tag {
    color: #ff0000;
    margin-right: 5px;
    animation: blink 1s infinite;
}

.news-category-tag {
    color: #ffcc00;
    font-weight: bold;
    margin-right: 5px;
}

.ticker-separator {
    color: #ffffff;
    margin: 0 15px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.news-ticker {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.ticker-text {
    display: inline-block;
    white-space: nowrap;
    color: white;
    font-size: 13px;
    animation: scroll-left-new 15s linear infinite !important;
}

@keyframes scroll-left-new {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* 5. ஹெடர் அமைப்பு (Logo & Tools) */
.main-header {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* இங்க தான் மாற்றம் செய்யணும் */
    padding: 5px 20px;
    /* 10px-ஐ 5px ஆக குறைத்தால் மேலேயும் கீழேயும் கேப் குறையும் */
    height: 70px;
    /* பேடிங் குறைக்கும் போது உயரத்தையும் (height) கொஞ்சம் குறைத்தால் இன்னும் கச்சிதமாக இருக்கும் */
    position: relative;
    border-bottom: 1px solid #eee;
}

.site-logo {
    height: 65px;
    width: auto;
    /* டெஸ்க்டாப்ல மட்டும் லோகோவை தள்ளி வைக்க */
    margin-left: 30px;
}

.mobile-header-slider {
    display: none;
    width: 100%;
    background: #800000;
    color: #ffffff;
    border-bottom: 1px solid #c04040;
    overflow: hidden;
}

.mobile-header-slide {
    display: none;
    padding: 20px 18px;
    min-height: 240px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.mobile-header-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.68));
}

.mobile-header-slide.active {
    display: block;
}

.mobile-header-slide a {
    display: block;
    color: inherit;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.mobile-header-slide-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-header-slide-meta {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.9;
}

.mobile-header-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 0 12px;
    background: rgba(0, 0, 0, 0.12);
}

.mobile-header-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.mobile-header-dot.active {
    background: #ffffff;
    transform: scale(1.2);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    /* ஐகான்களுக்கு இடையே இடைவெளி - இது பக்கத்துல பக்கத்துல வைக்க உதவும் */
    /* டெஸ்க்டாப்ல மட்டும் ஐகான்களை தள்ளி வைக்க */
    margin-right: 50px;
}

/* மொபைலில் (850px கீழ) ஐகான்கள் மேல கீழ வராம இருக்க இந்த பிக்ஸ் முக்கியம் */
@media (max-width: 850px) {
    .site-logo {
        margin-left: 0px;
        /* மொபைல்ல லோகோ ஓரமாகவே இருக்கட்டும் */
    }

    .header-right {
        margin-right: 0px;
        /* மொபைல்ல ஐகான்கள் ஓரமாக இருக்கட்டும் */
        gap: 10px;
        /* ஐகான்கள் பக்கத்துல பக்கத்துல வர குறைந்த இடைவெளி */
        display: flex;
        /* இது கண்டிப்பா இருக்கணும் */
        flex-direction: row;
        /* ஐகான்கள் வரிசையாக (Horizontal) வர இது உதவும் */
    }
}

/* 6. செர்ச் மற்றும் டார்க் மோட் பட்டன்கள் (அனைத்திற்கும் வட்ட பார்டர் சேர்க்கப்பட்டுள்ளது) */
@media (max-width: 850px) {
    .mobile-header-slider {
        display: block;
    }

    .main-news-card {
        display: none;
    }
}

.icon-btn {
    background: none;
    border: 1px solid #800000;
    /* எல்லா ஐகானுக்கும் மெரூன் பார்டர் */
    width: 38px;
    height: 38px;
    border-radius: 50%;
    /* வட்டமாக மாற்ற */
    cursor: pointer;
    font-size: 18px;
    color: #800000;
    /* ஐகான் நிறம் மெரூன் */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    padding: 0;
}

.icon-btn:hover {
    background-color: rgba(128, 0, 0, 0.05);
    /* லேசான ஹோவர் எஃபெக்ட் */
}

/* 7. செர்ச் மற்றும் கேலண்டர் பாப்-அப் */
.search-container,
.calendar-container {
    position: relative;
}

.search-popup,
.calendar-popup {
    display: none;
    position: absolute;
    right: 0;
    top: 55px;
    background: white;
    border: 1px solid #800000;
    padding: 20px;
    z-index: 9999;
    width: 380px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.calendar-popup {
    width: auto;
    min-width: 250px;
}

.search-popup.active,
.calendar-popup.active {
    display: block;
}

.up-arrow {
    position: absolute;
    top: -10px;
    right: 12px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #800000;
}

.search-form,
.calendar-form {
    display: flex;
    gap: 8px;
}

.search-form input,
.calendar-form input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    outline: none;
    font-family: inherit;
}

.btn-red {
    background: #800000;
    color: white;
    border: none;
    padding: 0 15px;
    font-weight: bold;
    cursor: pointer;
}

/* 8. டார்க் மோட் செட்டிங்ஸ் (வட்ட பார்டர் நிறமும் இதில் மாறும்) */
body.dark-mode {
    background-color: #121212;
}

body.dark-mode .main-wrapper,
body.dark-mode .main-header,
body.dark-mode .search-popup {
    background-color: #1e1e1e;
    color: #ffffff;
    border-bottom-color: #333;
}

body.dark-mode .icon-btn {
    color: #ffffff;
    border-color: #ffffff;
    /* டார்க் மோடில் வெள்ளை பார்டர் */
}

body.dark-mode .search-form input {
    background: #2c2c2c;
    color: #fff;
    border-color: #444;
}

/* 9. தொடர்பு விவரங்கள் - டாப் பார் ஐகான் கலர் மாற்ற */
.contact-section {
    display: flex;
    gap: 15px;
    margin-left: 20px;
    flex-shrink: 0;
    color: #ffffff;
    /* மெயில் மற்றும் போன் டெக்ஸ்ட் வெள்ளை */
}

.contact-section i {
    color: #ffd700 !important;
    /* மெயில் மற்றும் கால் ஐகான் மட்டும் தங்க நிறம் */
    margin-right: 5px;
    font-size: 14px;
}


/* மொபைல் மற்றும் டேப்லெட் வியூக்கான திருத்தம் */
@media (max-width: 850px) {

    /* 1. டாப் பாரில் தேவையில்லாதவற்றை மறைக்க */
    .hide-mobile {
        display: none !important;
    }

    /* 2. நியூஸ் மட்டும் வலதுபுறமிருந்து இடதுபுறம் ஓட வைக்க */
    .news-container {
        display: flex;
        align-items: center;
        width: 100%;
        overflow: hidden;
    }

    .news-label {
        flex-shrink: 0;
        z-index: 5;
        margin-right: 10px;
    }

    .news-ticker {
        flex: 1;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .ticker-text {
        display: inline-block;
        white-space: nowrap;
        padding-left: 100%;
        /* செய்தியை வெளியிலிருந்து ஆரம்பிக்க */
        animation: scroll-left 15s linear infinite !important;
        position: relative;
    }

    @keyframes scroll-left {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    /* 3. செர்ச் மற்றும் கேலண்டர் பாக்ஸ் அளவை குறைத்து கச்சிதமாக வைக்க */
    .search-popup,
    .calendar-popup {
        display: none;
        width: 60vw !important;
        max-width: 280px;
        position: absolute;
        right: -15px;
        padding: 10px;
        border: 1px solid #800000;
        background: white;
        z-index: 1000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .calendar-popup {
        min-width: 200px;
    }

    .search-popup.active,
    .calendar-popup.active {
        display: block;
    }

    /* அம்பு குறியை செர்ச் ஐகானுக்கு நேராக வைக்க */
    .up-arrow {
        right: 25px;
        border-bottom-color: #800000;
    }

    .search-form input {
        padding: 6px 10px;
        font-size: 13px;
    }

    .btn-red {
        padding: 0 10px;
        font-size: 11px;
    }
}

/* --- பூட்டர் பெட்டி (Footer Outer Box) --- */
.maroon-footer-simple {
    background: #8b0000 !important;
    padding: 20px 0;
    color: white;

    /* முக்கிய திருத்தம் இங்கே: */
    width: 1200px !important;
    /* உங்கள் பாக்ஸ் அளவு [cite: 2026-02-06] */
    margin: 0 auto !important;
    /* கேப்பை நீக்க 0 மார்ஜின் */

    display: block !important;
    box-sizing: border-box;
    /* பேடிங் கொடுத்தாலும் 1200px தாண்டாது */
}

.footer-container {
    /* வெளியே 1200px இருப்பதால் உள்ளே 100% கொடுத்தால் போதும் */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    /* ஓரங்களில் லோகோ ஒட்டாமல் இருக்க */
}

/* --- இடது பக்கம்: லோகோ மற்றும் காப்பிரைட் --- */
.footer-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mini-footer-logo {
    height: 40px;
    /* லோகோ அளவு */
    filter: brightness(0) invert(1);
    /* கருப்பு லோகோவை வெள்ளையாக மாற்ற */
}

.copyright-text {
    font-size: 14px;
    white-space: nowrap;
    /* எழுத்துக்கள் கீழே உடையாமல் இருக்க */
}

/* --- வலது பக்கம்: சோஷியல் மீடியா --- */
.footer-social-original {
    display: flex;
    gap: 12px;
}

.footer-social-original a {
    color: #8b0000 !important;
    background: #ffffff !important;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* வட்டமான ஐகான்கள் */
    text-decoration: none;
    transition: 0.3s;
}

.footer-social-original a:hover {
    background: #ffcc00 !important;
    /* ஹோவர் செய்யும்போது மஞ்சள் நிறம் */
    transform: translateY(-3px);
}

/* --- மொபைல் வியூ திருத்தம் (850px-க்கு கீழே) --- */
@media (max-width: 850px) {
    .maroon-footer-simple .footer-container {
        flex-direction: column;
        /* மொபைலில் ஒன்றன் கீழ் ஒன்றாக வரும் */
        gap: 20px;
        text-align: center;
    }
}


/* --- 10. Navigation Bar (Desktop) --- */

.nav-bar {
    background-color: #800000;
    /* Maroon Background */
    border-top: 1px solid #ffcc00;
    border-bottom: 3px solid #ffcc00;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100%;
    /* Full width */
    margin: 0 auto;
    height: 45px;
    /* Smaller height */
    overflow-x: auto;
    /* Allow horizontal scroll */
    overflow-y: hidden;
    display: flex;
    align-items: center;
}

.nav-bar::-webkit-scrollbar {
    height: 3px;
    /* Hide scrollbar */
}

.nav-links {
    display: flex;
    list-style: none;
    justify-content: flex-start;
    padding: 0 15px;
    margin: 0;
    /* மெனுக்களுக்கு இடையில் இடைவெளி வர இதை சேர்த்துள்ளேன் */
    gap: 8px;
    white-space: nowrap;
    /* Prevent wrapping */
    height: 100%;
    align-items: center;
}

.nav-links li a {
    display: block;
    padding: 10px 15px;
    /* Reduced padding */
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    /* Slightly smaller font */
    transition: 0.3s ease;
    /* பார்டர் ரேடியஸ் கொடுத்தால் Hover செய்யும்போது அழகாக இருக்கும் */
    border-radius: 4px;
}

/* Active and Hover state */
.nav-home,
.nav-links a.active,
.nav-links li a:hover {
    background-color: #ffcc00;
    color: #000 !important;
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: bold;
}

/* --- Subcategory Dropdown Styling --- */
.has-dropdown {
    position: relative;
}

.dropdown {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
    width: 100%;
}

/* Show dropdown specifically when .show class is added (by JS) */
.dropdown.show {
    display: block;
}

.dropdown li a {
    padding: 12px 40px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555 !important;
    border-bottom: 1px solid #f5f5f5 !important;
    background: #fafafa;
}

.dropdown li a:hover {
    background-color: #fff0f0 !important;
    color: #800000 !important;
}

.dropdown-icon {
    font-size: 11px;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* Flex layout for mobile menu items */
.nav-link-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-link-wrapper a {
    flex-grow: 1;
}

.dropdown-toggle-btn {
    padding: 15px 25px;
    cursor: pointer;
    color: #800000;
    border-left: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Desktop override */
@media (min-width: 851px) {
    .dropdown-toggle-btn {
        display: none !important;
    }

    .nav-link-wrapper {
        display: block;
    }
}

/* Desktop Hover support (Optional, but good for UX) */
@media (min-width: 851px) {
    .has-dropdown:hover .dropdown {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 200px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        background: #fff;
    }

    .nav-bar {
        overflow-x: auto;
        overflow-y: hidden;
        /* Restore horizontal scrolling for many categories */
    }
}

/* Dark mode support */
body.dark-mode .dropdown {
    background-color: #222;
}

body.dark-mode .dropdown li a {
    color: #ccc !important;
    background: #1a1a1a;
    border-color: #333 !important;
}

body.dark-mode .dropdown li a:hover {
    background: #2a2a2a !important;
    color: #ff9f9f !important;
}

/* --- 11. Mobile Menu (Hamburger Animation) --- */
/* Logo-area kulla idhu irukardhala flex alignment mukkiyam */
.logo-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

.menu-toggle {
    display: none;
    /* Desktop-la hide aagum */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 2000;
    /* Menu drawer-kku mela irukka */
    padding: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #800000;
    /* Maroon color bars */
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Smooth bounce effect */
    border-radius: 5px;
}

/* 3 lines "X" mark-ah maara (Close animation) */
.menu-toggle.open .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.open .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
    /* Side-la slide aagi hide aagum */
}

.menu-toggle.open .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- 12. Mobile View Responsive (850px Breakpoint) --- */
@media (max-width: 850px) {
    .menu-toggle {
        display: flex;
        /* Mobile-la matum kaatum */
    }

    .nav-bar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 75%;
        height: 70vh;
        background-color: #111111;
        flex-direction: column;
        transition: 0.4s ease-in-out;
        box-shadow: 10px 0 20px rgba(0, 0, 0, 0.5);
        z-index: 1500;
        border: none;
    }

    /* JavaScript click pannumbodhu indha class drawer-a ulla kondu varum */

    .nav-bar.show {
        left: 0;
    }

    .nav-links {
        flex-direction: column;
        padding-top: 100px;
        justify-content: flex-start;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li a {
        color: #ffffff;
        padding: 18px 30px;
        width: 100%;
        flex-grow: 1;
    }

    .nav-links li a:hover,
    .nav-links li a.active {
        background-color: #8b0000 !important;
        color: #ffffff !important;
    }

    .nav-link-wrapper {
        border-bottom: 1px solid #2a2a2a;
        width: 100%;
        display: flex;
        align-items: center;
    }

    /* Custom fix for the last menu item */
    @media (max-width: 850px) {
        .nav-bar {
            height: 100vh !important;
            min-height: 100vh;
            display: flex !important;
            flex-direction: column;
            background-color: #111111 !important;
            overflow-y: auto !important;
            padding-bottom: 80px;
        }

        .nav-links {
            height: auto !important;
            display: flex !important;
            flex-direction: column !important;
            padding-bottom: 50px;
        }

        /* This makes sure the list item itself behaves correctly */
        .nav-links li {
            background-color: #111111;
            width: 100%;
        }
    }

    /* Light Mode Sidebar */
    body:not(.dark-mode) .nav-bar {
        background-color: #ffffff !important;
    }

    body:not(.dark-mode) .nav-bar.show {
        background-color: #ffffff !important;
    }

    body:not(.dark-mode) .nav-links li {
        background-color: #ffffff !important;
    }

    body:not(.dark-mode) .nav-links li a {
        color: #800000 !important;
        border-bottom-color: #f0f0f0 !important;
        background-color: transparent !important;
    }

    body:not(.dark-mode) .nav-links li a:hover,
    body:not(.dark-mode) .nav-links li a.active {
        background-color: #800000 !important;
        color: #ffffff !important;
    }

    body:not(.dark-mode) .nav-link-wrapper {
        border-bottom: 1px solid #f0f0f0;
    }

    body:not(.dark-mode) .dropdown {
        background-color: #ffffff !important;
    }

    body:not(.dark-mode) .dropdown li a {
        color: #800000 !important;
        background: #ffffff !important;
        border-bottom-color: #f0f0f0 !important;
    }

    body:not(.dark-mode) .dropdown li a:hover {
        background: #800000 !important;
        color: #ffffff !important;
    }

    /* Dark Mode Fixes */
    body.dark-mode .nav-bar {
        background-color: #111111 !important;
    }

    body.dark-mode .nav-links li a {
        color: #ffffff !important;
        border-bottom-color: #333 !important;
    }

    body.dark-mode .nav-links li a:hover,
    body.dark-mode .nav-links li a.active {
        background-color: #8b0000 !important;
        color: #ffffff !important;
    }

    body.dark-mode .nav-link-wrapper {
        border-bottom: 1px solid #2a2a2a;
    }

    body.dark-mode .dropdown-toggle-btn {
        color: #ffffff !important;
    }

    body.dark-mode .dropdown {
        background-color: #1a1a1a !important;
    }

    body.dark-mode .dropdown li a {
        color: #dddddd !important;
        border-bottom-color: #2a2a2a !important;
        background: #1a1a1a !important;
    }

    body.dark-mode .dropdown li a:hover {
        background: #8b0000 !important;
        color: #ffffff !important;
    }

    body.dark-mode .bar {
        background-color: #ffffff !important;
    }
}

/* NEWS SITE  */
/* Categories Navbar */
.categories-navbar {
    max-width: 100%;
    margin: 20px 0;
    padding: 0 20px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #800000 #f0f0f0;
}

.categories-navbar::-webkit-scrollbar {
    height: 6px;
}

.categories-navbar::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.categories-navbar::-webkit-scrollbar-thumb {
    background: #800000;
    border-radius: 10px;
}

.cat-item {
    display: inline-block;
    padding: 8px 20px;
    background: #ffffff;
    color: #800000;
    text-decoration: none;
    border: 2px solid #800000;
    border-radius: 25px;
    font-weight: bold;
    font-size: 14px;
    transition: 0.3s;
    flex-shrink: 0;
}

.cat-item:hover {
    background: #800000;
    color: #ffffff;
}

body.dark-mode .cat-item {
    background: #2d2d2d;
    color: #ff9f9f;
    border-color: #ff9f9f;
}

body.dark-mode .cat-item:hover {
    background: #ff9f9f;
    color: #1e1e1e;
}

.news_container {
    display: flex;
    gap: 20px;
    max-width: 100%;
    margin: 40px 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.main-news-card {
    flex: 2;
    position: relative;
    height: 400px;
    /* மொத்த உயரம் */
    border-radius: 12px;
    overflow: hidden;
}

.slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
    z-index: 0;
}

.slider-item.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.side-news-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* இரண்டு சிறிய செய்திகளுக்கு இடையே உள்ள இடைவெளி */
    height: 400px;
    /* பெரிய செய்தியின் அதே உயரம் */
}

.small-news-card {
    flex: 1;
    /* இரண்டு செய்திகளும் சம அளவு உயரத்தை எடுத்துக்கொள்ளும் */
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

/* Image styles */
.small-news-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlays */
.news-overlay,
.small-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(49, 2, 2, 0.9));
    color: white;
}

h2 {
    font-size: 22px;
    margin: 10px 0;
    line-height: 1.2;
}

h3 {
    font-size: 14px;
    margin: 5px 0;
    line-height: 1.3;
}

p {
    font-size: 12px;
    opacity: 0.9;
}

.meta-info,
.side-date {
    font-size: 11px;
    opacity: 0.7;
}

/* Responsive Update */
@media (max-width: 850px) {
    .news_container {
        flex-direction: column;
        gap: 15px;
        display: flex !important;
        padding: 0 10px;
    }

    .main-news-card {
        height: 260px;
        width: 100%;
        display: block !important;
        position: relative;
    }

    .slider-item {
        display: block !important;
        position: absolute;
        opacity: 0;
    }

    .slider-item.active {
        opacity: 1 !important;
    }

    .side-news-column {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 2 Column Grid */
        gap: 10px;
        height: auto;
    }

    .small-news-card {
        height: 180px;
    }

    /* மொபைலில் எழுத்துக்களைக் குறைத்தல் */
    h2 {
        font-size: 16px !important;
        /* பெரிய செய்தியின் தலைப்பு */
        margin: 5px 0 !important;
        line-height: 1.2;
    }

    h3 {
        font-size: 13px !important;
        /* சிறிய செய்தியின் தலைப்பு */
        margin: 4px 0 !important;
        line-height: 1.2;
    }

    p {
        font-size: 11px !important;
        /* செய்தி விவரம் */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        /* இரண்டு வரிகள் மட்டும் காட்டும் */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .meta-info,
    .side-date {
        font-size: 10px !important;
    }

    .tag {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    .news-overlay,
    .small-overlay {
        padding: 10px !important;
        /* அதிக இடைவெளியைக் குறைத்தல் */
    }

    .slider-summary {
        display: block !important;
        margin-top: 8px;
        color: rgba(255,255,255,0.95);
        max-height: 4.6rem;
    }

    .news-overlay {
        min-height: 120px;
    }
}

/* மிகச்சிறிய போன்களுக்கு (480px மற்றும் அதற்குக் கீழ்) */
@media (max-width: 480px) {
    .main-news-card {
        height: 220px;
    }

    .small-news-card {
        height: 160px;
    }

    h2 {
        font-size: 14px !important;
    }

    h3 {
        font-size: 11px !important;
    }
}

/* --- திருத்தப்பட்ட கீழ் பகுதி செய்திகளுக்கான CSS --- */
.bottom-news-layout {
    display: flex;
    gap: 30px;
    max-width: 100%;
    margin: 40px 0;
    padding: 0 20px;
    align-items: flex-start;
}

.search-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.search-page-container .bottom-news-layout {
    margin: 40px auto;
    padding: 0;
    max-width: 100%;
}

.search-page-container .news-left-container {
    width: 100%;
    margin: 0 auto;
}

.news-left-container {
    flex: 2;
    min-width: 0;
}

/* தலைப்பு டிசைன் */
.section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.section-header h2 {
    font-size: 18px;
    font-weight: bold;
    color: #a00b0b;
    margin: 0;
}

.title-line {
    height: 3px;
    width: 60px;
    background: linear-gradient(to right, #800000 50%, #ff8c00 100%);
    border-radius: 2px;
}

/* செய்திகள் கிரிட் */
.news-left-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

/* --- மெயின் கார்டு டிசைன் (Hover & Shadow) --- */
.custom-white-card {
    background: #ffffff;
    /* கார்டு வெள்ளை நிறம் */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    /* கிளிக் செய்யக்கூடிய உணர்வைத் தர */
    height: 100%;
}

/* மவுஸை கொண்டு செல்லும்போது (Hover Effect) */
.custom-white-card:hover {
    transform: translateY(-8px);
    /* கார்டு மேலே எழும்பும் */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    /* மென்மையான நிழல் */
    border-color: rgba(128, 0, 0, 0.2);
}

.card-img-box {
    height: 130px;
    /* 4-column layout-க்கு ஏற்ப உயரம் */
    width: 100%;
    overflow: hidden;
}

.card-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* ஹோவர் செய்யும்போது படம் லேசாக ஜூம் ஆகும் */
.custom-white-card:hover .card-img-box img {
    transform: scale(1.05);
}

.card-info {
    padding: 20px;
    flex-grow: 1;
}

.card-info h4 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #2c2c2c;
    line-height: 1.4;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ஹோவர் செய்யும்போது தலைப்பு நிறம் மாற */
.custom-white-card:hover h4 {
    color: #800000;
}

.card-info p {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* டெஸ்க்டாப் வியூவில் மட்டும் செய்தியின் சுருக்கம் தெரிய */
.desktop-news-content {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-news-content {
        display: block;
    }
}

.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    margin-top: auto;
    /* மெட்டா தகவலை எப்போதும் கீழே வைக்க */
}

/* டார்க் மோட் மாற்றங்கள் */
body.dark-mode .custom-white-card {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .custom-white-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

body.dark-mode .card-info h4 {
    color: #f0f0f0;
}

body.dark-mode .card-info p {
    color: #aaa;
}

/* வலது பக்கம்: சைடு பார் (3rd Column) */
.news-right-sidebar {
    flex: 1;
    width: 200px;
    min-width: 100px;
    margin-top: 55px;
}

/* --- சைடு பார் பாக்ஸ் --- */
.sidebar-box {
    background: #f0e9e9;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sidebar-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: #80000033;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-left: 5px solid #8B0000;
    padding-left: 12px;
}

.box-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- பிரபலமான தலைப்புகள் (Tag Pills) --- */
.popular-topics-box {
    background: #F2E8E8 !important;
    /* Light brownish background from image */
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.popular-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.tag-pill {
    background: #ffffff;
    color: #444;
    padding: 8px 18px;
    border-radius: 5px;
    /* Slightly rounded as in image */
    font-size: 13px;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    font-weight: 500;
    text-align: center;
    min-width: 120px;
    flex: 1 1 calc(50% - 10px);
    /* 2 per row mostly */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

/* Specific widths for some tags to match the image's layout if possible */
.tag-pill:nth-child(3),
.tag-pill:nth-child(4),
.tag-pill:nth-child(7) {
    flex: 1 1 100%;
    /* Full width for these rows */
}

.tag-pill:hover {
    background: #800000;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(128, 0, 0, 0.1);
}

body.dark-mode .popular-topics-box {
    background: #2d2424 !important;
}

body.dark-mode .tag-pill {
    background: #3d3d3d;
    color: #f0f0f0;
    border-color: rgba(255, 255, 255, 0.05);
}

.popular-title-item {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    transition: 0.3s;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.popular-title-item:hover {
    color: #800000;
    padding-left: 5px;
}

/* Sidebar Pagination */
.sidebar-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.sidebar-page-num {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 4px;
    background: #f0f0f0;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    transition: 0.3s;
}

.sidebar-page-num:hover,
.sidebar-page-num.active {
    background: #800000;
    color: white;
}

.sidebar-dots {
    color: #888;
    font-size: 12px;
}

/* --- மினி நியூஸ் லிஸ்ட் (Alignment Fix) --- */
.mini-news {
    display: flex;
    gap: 15px;
    align-items: center;
    /* தலைப்பு மற்றும் படம் நேர்கோட்டில் இருக்க */
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: 0.3s;
}

.mini-news:hover {
    transform: translateX(5px);
}

.mini-news:last-child {
    border-bottom: none;
}

.mini-img-wrapper {
    width: 80px;
    height: 65px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

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

.sidebar-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.sidebar-page-num {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #ddd;
    transition: 0.3s;
}

.sidebar-page-num:hover,
.sidebar-page-num.active {
    background: #800000;
    color: #ffffff;
    border-color: #800000;
}

.sidebar-dots {
    color: #888;
    padding: 0 5px;
}

body.dark-mode .sidebar-page-num {
    background: #3d3d3d;
    color: #f0f0f0;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .sidebar-page-num:hover,
body.dark-mode .sidebar-page-num.active {
    background: #ff9f9f;
    color: #1e1e1e;
}

.mini-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mini-details h6 {
    font-size: 13.5px;
    margin: 0 0 4px 0;
    line-height: 1.4;
    color: #333;
    font-weight: 600;
}

.mini-details p {
    font-size: 11px;
    color: #888;
    margin: 0;
}

/* --- மொபைல் வியூ (850px) --- */
@media (max-width: 850px) {
    .news-right-sidebar {
        width: 100%;
        margin-top: 20px;
    }

    .news-left-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .tag-item {
        flex-grow: 0;
    }
}

/* மொபைல் வியூ (850px) */
@media (max-width: 850px) {

    /* மெயின் லேஅவுட் வரிசை மாற்றம் */
    .bottom-news-layout {
        flex-direction: column;
        display: flex;
    }

    /* இடது பக்கம் உள்ள கிரிட் செய்திகள் முதலில் */
    .news-left-container {
        order: 1;
        width: 100%;
    }

    /* சைடு பார் செய்திகள் கிரிட்டிற்கு கீழே வர */
    .news-right-sidebar {
        order: 2;
        width: 100%;
        min-width: 100%;
        margin-top: 30px;
        /* மொபைலில் அதிக கேப் தேவையில்லை */
        display: block !important;
        /* மறைந்திருந்தால் தெரிய வைக்க */
    }

    /* சைடு பாரில் உள்ள பாக்ஸ்களின் வரிசையை மாற்ற (விருப்பமென்றால்) */
    .news-right-sidebar {
        display: flex;
        flex-direction: column;
    }

    .recent-news-box {
        order: 1;
    }

    /* சமீபத்திய செய்திகள் முதலில் */
    .trending-topics-box {
        order: 2;
    }

    /* பிரபலமான தலைப்புகள் அதற்கு கீழே */

    .tag-item {
        flex-grow: 1;
        /* மொபைலில் பட்டன்கள் அகலமாகத் தெரிய */
        text-align: center;
    }
}

/* 1. நிறங்களை வேரியபிளாக மாற்றவும் (Light Mode - Default) */
:root {
    --bg-box: #f0e9e9;
    /* சைடு பார் பாக்ஸ் நிறம் */
    --bg-card: #ffffff;
    /* கார்டு பின்னணி */
    --text-main: #333333;
    /* முக்கிய எழுத்து நிறம் */
    --text-secondary: #777777;
    /* துணை எழுத்து நிறம் */
    --border-color: rgba(0, 0, 0, 0.08);
    --tag-bg: #ffffff;
}

/* 2. டார்க் மோட் வரும்போது நிறங்களை மாற்றவும் */
/* உங்கள் பாடியில் .dark-mode கிளாஸ் இருந்தால் இது வேலை செய்யும் */
body.dark-mode {
    --bg-box: #2d2d2d;
    /* டார்க் மோட் பாக்ஸ் நிறம் */
    --bg-card: #1e1e1e;
    /* டார்க் மோட் கார்டு நிறம் */
    --text-main: #f0f0f0;
    --text-secondary: #aaaaaa;
    --border-color: rgba(255, 255, 255, 0.1);
    --tag-bg: #3d3d3d;
}

/* 3. இப்போது உங்கள் பழைய CSS-ல் இந்த வேரியபிள்களைப் பொருத்தவும் */

.sidebar-box {
    background: var(--bg-box);
    /* நிலையான நிறத்திற்கு பதில் இது வரும் */
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.custom-white-card {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.box-title,
.card-info h4,
.mini-details h6 {
    color: var(--text-main);
}

.mini-details p,
.card-info p {
    color: var(--text-secondary);
}

.tag-item {
    background: var(--tag-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

/* டார்க் மோடில் 'மேலும்' லிங்க் தெளிவாகத் தெரிய */
body.dark-mode .view-more,
body.dark-mode .view-more-link {
    color: #ff9f9f !important;
    /* லேசான பிங்க் அல்லது வெள்ளை நிறம் */
}

body.dark-mode .view-more i,
body.dark-mode .view-more-link i {
    color: #ff9f9f !important;
}

/* ஹோவர் செய்யும்போது நிறம் மாற */
body.dark-mode .view-more:hover,
body.dark-mode .view-more-link:hover {
    color: #ffffff !important;
}

/* 1. 'மேலும்' பட்டனில் உள்ள அண்டர்லைனை நீக்கி, அளவைக் குறைக்க */
.view-more-link,
.view-more {
    text-decoration: none !important;
    /* அண்டர்லைனை நீக்க */
    font-size: 11px !important;
    /* எழுத்தின் அளவைக் குறைக்க */
    display: flex;
    align-items: center;
    gap: 5px;
    color: #800000;
    transition: 0.3s;
}

/* டார்க் மோடிலும் இது வேலை செய்ய */
body.dark-mode .view-more-link,
body.dark-mode .view-more {
    text-decoration: none !important;
    font-size: 11px !important;
    color: #ff9f9f !important;
}

/* 2. தலைப்பிற்கும் செய்திகளுக்கும் இடையில் இடைவெளி (Gap) */
.sidebar-header {
    margin-bottom: 25px !important;
    /* செய்திகளுக்கு மேலதிக இடைவெளி */
}

/* 3. செய்திகளுக்கு இடையே உள்ள இடைவெளி (News to News Gap) */
.mini-news {
    margin-bottom: 20px !important;
    /* ஒவ்வொரு செய்திக்கும் இடையில் கேப் */
    padding-bottom: 12px;
}

.mini-news:last-child {
    margin-bottom: 0 !important;
}

/* --- மேலும் செய்திகள் செக்ஷன் --- */
.more-news-section {
    max-width: 100%;
    margin: 50px 0 0 0;
    padding: 0 20px;
    /* Added padding to align with other sections */
}

/* டெஸ்க்டாப்பில் முழு அகலம் மற்றும் இடதுபுறம் ஒழுங்குபடுத்துதல் */
.more-news-list {
    width: 70%;
    /* Changed from 70% to 100% */
    margin: 0;
    /* Removed auto margin */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.h-news-card {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(139, 0, 0, 0.15);
    /* Light maroon border */
    transition: all 0.3s ease;
    cursor: pointer;
    gap: 20px;
    padding: 8px;
    /* Inner padding for the card feel */
}

.h-news-card:hover {
    box-shadow: 0 12px 30px rgba(139, 0, 0, 0.1);
    transform: translateY(-3px);
    border-color: #800000;
}

.h-img-box {
    width: 240px;
    height: 160px;
    flex-shrink: 0;
    border-radius: 10px;
    /* Image itself rounded */
    overflow: hidden;
}

.h-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h-text-box {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 10px 0;
    flex: 1;
    position: relative;
}

.h-text-box h3 {
    font-size: 20px;
    margin: 0 0 10px 0;
    color: #222;
    line-height: 1.3;
    font-weight: 700;
}

.h-content {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.h-date {
    font-size: 13px;
    color: #888;
    margin-top: auto;
    /* Push to bottom */
    align-self: flex-start;
}

/* டார்க் மோட் பொருத்தம் */
body.dark-mode .h-news-card {
    background: #1e1e1e;
    border-color: #333;
}

body.dark-mode .h-text-box h3 {
    color: #f0f0f0;
}

body.dark-mode .h-date {
    color: #aaa;
}

/* மொபைல் வியூ - 90% அகலம் */
@media (max-width: 850px) {
    .more-news-list {
        width: 90%;
        margin: 0 auto;
    }

    .h-img-box {
        width: 120px;
        height: 90px;
    }

    .h-text-box {
        padding: 10px 15px;
    }

    .h-text-box h3 {
        font-size: 14px;
    }
}

/* மொபைல் நேவிகேஷன் பார் */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    display: none;
    /* டெஸ்க்டாப்பில் மறைக்க */
    grid-template-columns: repeat(4, 1fr);
    /* 4 சமமான பட்டன்கள் */
    padding: 8px 0;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    border-top: 2px solid #8b0000;
}

.nav-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #555;
    transition: 0.3s;
}

.nav-item i {
    font-size: 18px;
}

.nav-item span {
    font-size: 10px;
    font-weight: 600;
}

/* கிளிக் செய்யும் போது அல்லது ஆக்டிவ் ஆக இருக்கும் போது */
.nav-item:hover,
.nav-item.active {
    color: #800000;
}

/* டார்க் மோட் பொருத்தம் */
body.dark-mode .mobile-bottom-nav {
    background: #1e1e1e;
    border-top: 2px solid #ff4444;
}

body.dark-mode .nav-item {
    color: #aaa;
}

body.dark-mode .nav-item:hover {
    color: #ff9f9f;
}

/* மொபைல் வியூ (850px-க்கு கீழே) */
@media (max-width: 850px) {
    .mobile-bottom-nav {
        display: grid;
    }

    /* கன்டென்ட் மறைந்துவிடாமல் இருக்க பாடிக்கு கீழே கேப் */
    body {
        padding-bottom: 60px;
    }
}

/* --- மொபைல் மற்றும் பாக்ஸ் வியூ இறுதித் திருத்தம் --- */

/* 1. மெயின் பெட்டியைச் சரிசெய்து மொபைலில் வெள்ளை இடைவெளியை நீக்க */
.main-wrapper {
    max-width: 100% !important;
    /* Full screen */
    width: 100% !important;
    /* Full width */
    margin: 0 auto !important;
    /* Center the box */
    overflow-x: hidden !important;
    /* Prevent white space on right */
    box-sizing: border-box;
}

/* 2. பூட்டரை பாக்ஸ் அளவுக்குள் கச்சிதமாக வைக்க */
.maroon-footer-simple {
    background: #8b0000 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px 0;
    display: block !important;
    box-sizing: border-box;
}

/* 3. மொபைலில் பூட்டர் தகவல்கள் ஒன்றன் கீழ் ஒன்றாக வர */
@media (max-width: 850px) {
    .footer-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }

    .footer-left {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* மொபைல் பாட்டம் நேவிகேஷன் பூட்டரை மறைக்காமல் இருக்க */
    body {
        padding-bottom: 60px;
    }
}

/* 4. மற்ற எலெமெண்ட்கள் திரையை விட்டு வெளியே போவதைத் தடுக்க */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* --- இறுதித் திருத்தம் (Final Fix) --- */

/* 1. மொபைலில் பூட்டரை முழுமையாக மறைக்க */
@media (max-width: 850px) {
    .maroon-footer-simple {
        display: none !important;
    }
}

/* 2. டெஸ்க்டாப்பில் 1200px பாக்ஸ் அளவுக்குள் பூட்டரை நடுவில் வைக்க [cite: 2026-02-06] */
@media (min-width: 851px) {
    .maroon-footer-simple {
        background: #8b0000 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 0;
        color: white;
        display: block !important;
        box-sizing: border-box;
    }

    .footer-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
    }

    /* டெஸ்க்டாப் ஸ்டிக்கி பட்டன் (வலது ஓரத்தில் எப்போதும் இருக்கும்) */
    .sticky-btn {
        position: fixed;
        right: 30px;
        bottom: 30px;
        background: #8b0000;
        color: white;
        padding: 12px 25px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: 0.3s ease;
    }

    .sticky-btn:hover {
        background: #ffcc00;
        color: #8b0000;
        transform: translateY(-5px);
    }
}

/* 3. மொபைலில் ஸ்டிக்கி பட்டன் வேண்டாம் என்றால் */
@media (max-width: 850px) {
    .sticky-btn {
        display: none !important;
    }
}


/* Pagination Styling */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    /* 'flex-end' அல்லது 'flex-start' என்பதற்கு பதில் 'center' கொடுக்கவும் */
    margin: 30px 0 0 0;
    padding: 0 15px;
    width: 100%;
    /* முழு அகலத்தையும் எடுத்துக்கொள்ள */
}

/* பட்டன்களுக்கு இடையிலான இடைவெளி மற்றும் ஸ்டைல் */
.pagination-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-number,
.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    border-radius: 4px;
    background-color: #fff;
    transition: 0.3s;
}

.page-number.active,
.page-number:hover,
.page-btn:hover {
    background-color: #800000;
    /* மெரூன் கலர் */
    color: white;
    border-color: #800000;
}

.dots {
    color: #777;
    padding: 0 5px;
}

/* Dark Mode Support */
body.dark-mode .page-number,
body.dark-mode .page-btn {
    background-color: #222;
    border-color: #444;
    color: #eee;
}

body.dark-mode .page-number.active {
    background-color: #a00000;
    border-color: #a00000;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .pagination-wrapper {
        justify-content: center;
        /* மொபைலில் நடுவில் தெரிய */
    }

    .page-number,
    .page-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}

body.dark-mode .h-news-card {
    background: #1e1e1e;
    border-color: #333;
}

body.dark-mode .h-text-box h3 {
    color: #f0f0f0;
}

body.dark-mode .h-content {
    color: #aaa;
}

body.dark-mode .h-date {
    color: #888;
}

@media (max-width: 850px) {
    .more-news-list {
        width: 90%;
    }

    .h-news-card {
        padding: 15px;
    }

    .h-text-box h3 {
        font-size: 16px;
    }

    .h-content {
        font-size: 13px;
        -webkit-line-clamp: 3;
    }
}

/* --- All Categories List Page --- */
.all-categories-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.category-list-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 25px;
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 12px;
    text-decoration: none;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.category-list-card:hover {
    transform: translateX(8px);
    border-color: #800000;
    box-shadow: 0 5px 15px rgba(128, 0, 0, 0.05);
}

.cat-icon-box {
    width: 50px;
    height: 50px;
    background: #fff5f5;
    color: #800000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    flex-shrink: 0;
    transition: 0.3s;
}

.category-list-card:hover .cat-icon-box {
    background: #800000;
    color: #ffffff;
}

.cat-text-info {
    flex-grow: 1;
}

.cat-text-info h3 {
    margin: 0 0 4px 0;
    color: #333;
    font-size: 1.15rem;
    font-weight: 700;
}

.cat-text-info p {
    margin: 0;
    color: #888;
    font-size: 0.9rem;
    font-weight: 500;
}

.category-list-card .arrow-icon {
    color: #ccc;
    font-size: 14px;
    transition: 0.3s;
}

.category-list-card:hover .arrow-icon {
    color: #800000;
    transform: translateX(5px);
}

/* Dark Mode for Category List */
body.dark-mode .category-list-card {
    background: #1e1e1e;
    border-color: #333;
}

body.dark-mode .cat-text-info h3 {
    color: #f0f0f0;
}

body.dark-mode .cat-text-info p {
    color: #888;
}

body.dark-mode .cat-icon-box {
    background: #2a2a2a;
    color: #ff5e5e;
}

body.dark-mode .category-list-card:hover {
    border-color: #ff5e5e;
    box-shadow: 0 5px 15px rgba(255, 94, 94, 0.1);
}

body.dark-mode .category-list-card:hover .cat-icon-box {
    background: #ff5e5e;
    color: #1e1e1e;
}

body.dark-mode .category-list-card:hover .arrow-icon {
    color: #ff5e5e;
}

/* Mobile Tweaks */
@media (max-width: 600px) {
    .category-list-card {
        padding: 15px 20px;
        gap: 15px;
    }

    .cat-icon-box {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .cat-text-info h3 {
        font-size: 1.05rem;
    }
}

/* --- Footer Search Modal Styles --- */
.footer-search-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%) scale(0.9);
    width: 90%;
    max-width: 400px;
    background: #ffffff;
    z-index: 20000;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    visibility: hidden;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.footer-search-modal.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.footer-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.footer-search-header h3 {
    margin: 0;
    color: #800000;
}

#close-footer-search {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

/* --- Footer Search Overlay & Input Styling --- */
.footer-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 15000;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
}

.footer-search-overlay.show {
    opacity: 1;
    visibility: visible;
}

.footer-search-modal form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-search-input-wrapper {
    position: relative;
    width: 100%;
}

.footer-search-input-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.footer-search-modal input {
    width: 100%;
    padding: 12px 12px 12px 35px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
}

.footer-search-modal input:focus {
    border-color: #800000;
    box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.1);
}

.footer-search-btn {
    background: #800000;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

/* Dark Mode for Footer Modal */
body.dark-mode .footer-search-modal {
    background: #252525;
}

body.dark-mode .footer-search-header h3 {
    color: #ff5e5e;
}

body.dark-mode #close-footer-search {
    color: #eee;
}

body.dark-mode .footer-search-modal input {
    background: #1a1a1a;
    border-color: #3d3d3d;
    color: #fff;
}

body.dark-mode .footer-search-btn {
    background: #ff5e5e;
    color: #000;
}

/* --- Breaking News Label Styling --- */
.breaking-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff0000;
    color: #fff;
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 4px;
    z-index: 5;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(255, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.5px;
    pointer-events: none;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

.card-img-box,
.mini-img-wrapper,
.h-img-box,
.small-news-card {
    position: relative;
}

body.dark-mode .breaking-label {
    background: #ff4d4d;
    box-shadow: 0 3px 10px rgba(255, 77, 77, 0.4);
}

/* --- Position Images Mobile View --- */
.position-images-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.position-image-item {
    border-radius: 8px;
    overflow: hidden;
}

/* Mobile View - Show only first image */
@media (max-width: 850px) {
    .position-images-row {
        grid-template-columns: 1fr;
    }

    .position-image-item {
        display: none;
    }

    .position-image-item[data-image-index="0"] {
        display: block;
    }
}

/* --- Post Content Inline Image --- */
.post-inline-image {
    float: left;
    width: 280px;
    margin-right: 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.post-inline-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.post-inline-image .inline-caption {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin-top: 5px;
    font-style: italic;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .post-inline-image {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* --- Floating Contact Icon Styles --- */
.floating-contact {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8b0000 0%, #cc0000 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(139, 0, 0, 0.4);
    z-index: 10000;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: bounce-in 0.8s ease-out, pulse-glow 2s infinite;
}

.floating-contact:hover {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, #cc0000 0%, #ff0000 100%);
    box-shadow: 0 6px 20px rgba(139, 0, 0, 0.6);
    color: white;
}

.floating-contact .tooltip-text {
    position: absolute;
    right: 70px;
    background: #333;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    pointer-events: none;
}

.floating-contact:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
    right: 75px;
}

/* Animations */
@keyframes bounce-in {
    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 0, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(139, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(139, 0, 0, 0);
    }
}

/* Mobile Responsive Adjustments */
@media (max-width: 850px) {
    .floating-contact {
        display: none !important;
    }
}

/* Dark Mode Support */
body.dark-mode .floating-contact {
    background: linear-gradient(135deg, #ff4d4d 0%, #ff0000 100%);
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}

body.dark-mode .floating-contact .tooltip-text {
    background: #444;
}

/* --- Subcategories Filter UI (category.php) --- */
.subcategories-filter-box {
    margin-bottom: 25px;
    padding: 15px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.filter-label {
    font-size: 13px;
    font-weight: 700;
    color: #888;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

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

.filter-pill {
    display: inline-block;
    padding: 8px 18px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 50px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.filter-pill:hover {
    background: #fff0f0;
    border-color: #800000;
    color: #800000;
}

.filter-pill.active {
    background: #800000;
    border-color: #800000;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(128, 0, 0, 0.2);
}

/* Dark mode for filter box */
body.dark-mode .subcategories-filter-box {
    background: #1e1e1e;
    border-color: #333;
}

body.dark-mode .filter-pill {
    background: #2a2a2a;
    border-color: #444;
    color: #ccc;
}

body.dark-mode .filter-pill:hover {
    background: #333;
    border-color: #ff4d4d;
    color: #ff4d4d;
}

body.dark-mode .filter-pill.active {
    background: #ff4d4d;
    border-color: #ff4d4d;
    color: #fff !important;
}

/* Hide filter box on mobile as requested */
@media (max-width: 850px) {
    .subcategories-filter-box {
        display: none !important;
    }
}

/* --- Calendar Widget Styles --- */
.calendar-widget { padding: 10px 12px; transition: opacity 0.2s; }

.cal-year-nav, .cal-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cal-year-label {
    font-weight: 800;
    color: #800000;
    font-size: 14px;
}

.cal-month-label {
    font-weight: 800;
    color: #333;
    font-size: 13px;
}

.cal-nav-btn {
    background: none;
    border: none;
    color: #b00000;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.cal-nav-btn:hover { background: #fff0f0; }

.cal-nav-disabled {
    color: #ccc;
    font-weight: 700;
    font-size: 13px;
    cursor: not-allowed;
    padding: 4px 8px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.cal-dow {
    font-size: 10px;
    color: #666;
    font-weight: 700;
    padding: 4px 0;
}

.cal-day {
    background: #f6f6f6;
    color: #333;
    border: none;
    border-radius: 6px;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s, color 0.2s;
}

.cal-day:hover { background: #ffe0e0; color: #800000; }
.cal-today { background: #800000 !important; color: #fff !important; font-weight: 800; }
.cal-selected { background: #b00000 !important; color: #fff !important; font-weight: 800; }
.cal-has-news { background: #fff0f0; color: #800000; font-weight: 800; border: 1px solid #800000; }
.cal-future { background: #f0f0f0; color: #ccc; border-radius: 6px; padding: 8px 0; font-size: 12px; cursor: not-allowed; }

.cal-selected-label {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    text-align: center;
}

body.dark-mode .cal-day { background: #2a2a2a; color: #ddd; }
body.dark-mode .cal-day:hover { background: #3d1a1a; color: #ff9f9f; }
body.dark-mode .cal-today { background: #800000 !important; }
body.dark-mode .cal-selected { background: #b00000 !important; }
body.dark-mode .cal-has-news { background: #2d1a1a; color: #ff9f9f; border-color: #ff4d4d; }
body.dark-mode .cal-future { background: #1a1a1a; color: #444; }
body.dark-mode .cal-nav-btn { color: #ff9f9f; }
body.dark-mode .cal-nav-btn:hover { background: #2d1a1a; }
body.dark-mode .cal-year-label { color: #ff9f9f; }
body.dark-mode .cal-month-label { color: #ddd; }
body.dark-mode .cal-dow { color: #888; }

/* --- Mobile: Sidebar bottom-sheet style --- */
@media (max-width: 850px) {
    .news-right-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        margin-top: 20px;
        order: 2;
    }

    .cal-grid { gap: 3px; }
    .cal-day, .cal-future { padding: 7px 0; font-size: 11px; }
    .cal-dow { font-size: 9px; }
    .cal-nav-btn, .cal-nav-disabled { font-size: 12px; padding: 3px 6px; }
    .cal-year-label { font-size: 13px; }
    .cal-month-label { font-size: 12px; }
}

/* --- Sidebar Category Tabs --- */
.sidebar-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0e0e0;
}

.sidebar-tab-btn {
    background: #f6f6f6;
    border: 1px solid #e0e0e0;
    color: #555;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    font-family: inherit;
}

.sidebar-tab-btn:hover { background: #fff0f0; color: #800000; border-color: #800000; }
.sidebar-tab-btn.active { background: #800000; color: #fff; border-color: #800000; }

.sidebar-tab-panel { display: none; }
.sidebar-tab-panel.active { display: block; }

body.dark-mode .sidebar-cat-tabs { border-bottom-color: #333; }
body.dark-mode .sidebar-tab-btn { background: #2a2a2a; border-color: #444; color: #ccc; }
body.dark-mode .sidebar-tab-btn:hover { background: #3d1a1a; color: #ff9f9f; border-color: #ff4d4d; }
body.dark-mode .sidebar-tab-btn.active { background: #800000; color: #fff; border-color: #800000; }

/* --- Enhanced Slider Overlay --- */
.news-overlay {
    cursor: pointer;
}

.slider-cat-tag {
    display: inline-block;
    background: #800000;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.slider-summary {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
    margin: 6px 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slider-meta {
    display: flex;
    gap: 15px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

.slider-meta i { margin-right: 4px; }

/* Dots */
.slider-dots {
    position: absolute;
    bottom: 12px;
    right: 15px;
    display: flex;
    gap: 6px;
    z-index: 10;
}

.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.slider-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    opacity: 0;
}

.main-news-card:hover .slider-arrow { opacity: 1; }
.slider-arrow:hover { background: rgba(128,0,0,0.8); }
.slider-prev { left: 10px; }
.slider-next { right: 10px; }

@media (max-width: 850px) {
    .slider-arrow { opacity: 1; width: 28px; height: 28px; font-size: 11px; }
    .slider-meta { font-size: 10px; gap: 8px; }
}

/* --- RIP News Cards (Sidebar - index & post pages) --- */
.rip-card-link {
    text-decoration: none;
    display: block;
    margin-bottom: 12px;
}

.rip-card {
    background: #3d0000;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #8b0000;
}

.rip-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(139, 0, 0, 0.4);
}

.rip-card-header {
    background: #8b0000;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    padding: 7px 12px;
    letter-spacing: 0.5px;
}

.rip-card-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
}

.rip-card-text {
    flex: 1;
}

.rip-card-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 8px 0;
    font-family: 'Latha', sans-serif;
}

.rip-card-date {
    color: #a0b8cc;
    font-size: 11px;
    margin: 0;
}

.rip-card-date i {
    margin-right: 4px;
}

.rip-card-img-wrap {
    flex-shrink: 0;
}

.rip-card-img-wrap img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #e05c2a;
    display: block;
}

.rip-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-top: 1px solid #8b0000;
}

.rip-views {
    color: #a0b8cc;
    font-size: 11px;
}

.rip-views i {
    margin-right: 4px;
    color: #e05c2a;
}

.rip-read-btn {
    background: #22c55e;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
}

body.dark-mode .rip-card {
    background: #2a0000;
    border-color: #8b0000;
}

body.dark-mode .rip-card-header {
    background: #6b0000;
}

/* --- கண்ணீர் அஞ்சலி Static Cards --- */
.rip-static-card {
    background: #fff5f5;
    border: 1px solid #f5c6c6;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rip-static-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 0, 0, 0.12);
}

.rip-static-header {
    background: #8b0000;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 12px;
    letter-spacing: 0.5px;
}

.rip-static-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
}

.rip-static-text {
    flex: 1;
}

.rip-static-name {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 5px 0;
    font-family: 'Latha', sans-serif;
}

.rip-static-place {
    color: #666;
    font-size: 11px;
    margin: 0 0 6px 0;
}

.rip-static-place i {
    color: #8b0000;
    margin-right: 3px;
}

.rip-static-content {
    color: #444;
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
    font-family: 'Latha', sans-serif;
}

.rip-static-img-wrap {
    flex-shrink: 0;
}

.rip-static-img-wrap img {
    width: 85px;
    height: 95px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #e05c2a;
    display: block;
}

.rip-static-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-top: 1px solid #f5c6c6;
    background: #fff0f0;
}

.rip-static-condolences {
    color: #8b0000;
    font-size: 11px;
    font-weight: bold;
}

.rip-static-condolences i {
    color: #cc0000;
    margin-right: 4px;
}

.rip-static-btn {
    background: #22c55e;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
}

/* Dark mode */
body.dark-mode .rip-static-card {
    background: #2a1a1a;
    border-color: #5a2a2a;
}

body.dark-mode .rip-static-name {
    color: #f0f0f0;
}

body.dark-mode .rip-static-place,
body.dark-mode .rip-static-content {
    color: #bbb;
}

body.dark-mode .rip-static-footer {
    background: #1f1010;
    border-top-color: #5a2a2a;
}