/* ==================================================================================
   FILE: assets/css/style.css
   PURPOSE: Frontend Main Stylesheet - Professional Agriculture News Portal
   ================================================================================== */

/* ===================================================== */
/* VARIABLES & RESET */
/* ===================================================== */
:root {
    --bd-green: #006a4e;
    --agri-green: #2e7d32;
    --agri-light: #4caf50;
    --agri-dark: #1b5e20;
    --bd-red: #f42a41;
    --bd-gold: #006a4e;
    --agri-sky: #29b6f6;
    --agri-sun: #ff9800;
    --agri-earth: #795548;
    --light-bg: #f9fff9;
    --white: #ffffff;
    --text-dark: #1a3c34;
    --text-light: #5a7c72;
    --border-color: rgba(0, 106, 78, 0.1);
    --shadow-light: 0 4px 20px rgba(0, 106, 78, 0.08);
    --shadow-medium: 0 10px 30px rgba(0, 106, 78, 0.15);
    --header-height: 70px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Arial', 'Helvetica', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* ===================================================== */
/* PRELOADER */
/* ===================================================== */
.site-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-bg);
    transition: opacity 0.5s ease, visibility 0.5s ease;
    opacity: 1;
    visibility: visible;
}

.site-preloader.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 18px;
}

.preloader-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-logo {
    max-width: 160px;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.preloader-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--agri-green);
    letter-spacing: 0.5px;
}

.preloader-bar {
    width: 160px;
    height: 4px;
    border-radius: 4px;
    background: rgba(46, 125, 50, 0.12);
    overflow: hidden;
}

.preloader-bar-fill {
    height: 100%;
    width: 40%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--agri-green), var(--agri-light));
    animation: preloaderBarMove 1.2s ease-in-out infinite;
}

@keyframes preloaderBarMove {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(120%);
    }

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

@media (max-width: 576px) {
    .preloader-logo {
        max-width: 110px;
        max-height: 110px;
    }
}


.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===================================================== */
/* BACKGROUND ELEMENTS (Same as Admin Panel) */
/* ===================================================== */
.bg-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    /* এই কন্টেইনারটাকে একটা "পাত্র" বানানো হলো — এর ভেতরের গ্রাফিকগুলো
       ভিউপোর্ট নয়, বরং এই পাত্রের প্রকৃত প্রস্থ/উচ্চতা অনুযায়ী আকার নেবে (container query units) */
    container-type: size;
    container-name: bgElements;
}

/* সূর্য — দিগন্তের ওপরে ডান কোণে, যেন ভোরের আলো ক্ষেতের ওপর পড়ছে */
.bg-sun {
    position: absolute;
    top: 6%;
    right: 8%;
    width: clamp(80px, 20cqi, 180px);
    aspect-ratio: 1 / 1;
    opacity: 0.10;
    z-index: -3;
    animation: slowFloat 10s ease-in-out infinite;
}

.bg-sun svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* দূর আকাশে উড়ন্ত বকের সারি */
.bg-birds {
    position: absolute;
    top: 13%;
    left: 8%;
    width: clamp(140px, 30cqi, 320px);
    opacity: 0.12;
    z-index: -3;
    animation: birdsDrift 18s ease-in-out infinite alternate;
}

.bg-birds svg {
    width: 100%;
    height: auto;
    display: block;
}

/* দিগন্তজুড়ে গ্রামীণ কৃষি দৃশ্য — ঘর, গাছ, কৃষক, ক্ষেত, নদী — সবসময় নিচে আটকানো, একটানা প্যানোরামা।
   কন্টেইনারের অনুপাত আর্টওয়ার্কের নিজস্ব viewBox অনুপাতের (1600:320 = 5:1) সাথে হুবহু মিলিয়ে রাখা
   হয়েছে। এর ফলে গাণিতিকভাবেই —
     ১) কোনো max-width ক্যাপ নেই, তাই width 100% থাকায় পাত্র (ভিউপোর্ট) যত চওড়াই হোক (৩২ ইঞ্চি
        মনিটরেও) দৃশ্যটা edge-to-edge পুরো প্রস্থ জুড়ে থাকবে, কোথাও সাদা/ফাঁকা জায়গা থাকবে না।
     ২) অনুপাত মিলে যাওয়ায় preserveAspectRatio="xMidYMax meet" (header.php) কোনো অংশ ক্রপ করবে
        না — গাছের মাথা/পাতাসহ পুরো দৃশ্যটা সবসময় সম্পূর্ণ দেখা যাবে, শুধু আনুপাতিকভাবে ছোট-বড় হবে।
   অর্থাৎ ঠিক পানির মতো — যে পাত্রেই রাখা হোক, নিজের আকৃতি (অনুপাত) অক্ষুণ্ণ রেখে পুরো পাত্র ভরে
   ফেলে, কখনো উপচেও পড়ে না (ক্রপ হয় না), কখনো ফাঁকাও থাকে না। */
.bg-village-scene {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    aspect-ratio: 1600 / 320;
    overflow: hidden;
    opacity: 0.08;
    z-index: -3;
}

.bg-village-scene svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* container-query সাপোর্ট না থাকলে (পুরনো ব্রাউজার) vw ফলব্যাক — তবুও স্ক্রিন অনুযায়ী রেস্পন্সিভ থাকবে */
@supports not (container-type: size) {
    .bg-sun {
        width: clamp(80px, 20vw, 180px);
    }

    .bg-birds {
        width: clamp(140px, 30vw, 320px);
    }
}

/* খুব ছোট স্ক্রিনে (পাত্র খুব সরু হলে) দৃশ্যটা একটু কমিয়ে রাখা, যাতে কন্টেন্টের সাথে না বাধে */
@media (max-width: 480px) {
    .bg-village-scene {
        opacity: 0.16;
    }

    .bg-birds {
        opacity: 0.22;
    }

    .bg-sun {
        opacity: 0.22;
    }
}

@keyframes slowFloat {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    50% {
        transform: translateY(-6px) translateX(2px) rotate(0.5deg);
    }

    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
}

@keyframes birdsDrift {
    0% {
        transform: translateX(0) translateY(0);
    }

    100% {
        transform: translateX(18px) translateY(-6px);
    }
}

/* ===================================================== */
/* TOP BAR */
/* ===================================================== */
.top-bar {
    background: linear-gradient(135deg, #004d3a, #006a4e);
    color: var(--white);
    padding: 6px 0;
    font-size: 12px;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.top-bar-left .date-time i {
    margin-right: 5px;
}

.top-bar-right .social-icons {
    display: flex;
    gap: 15px;
}

.top-bar-right .social-icons a {
    color: var(--white);
    transition: all 0.3s;
}

.top-bar-right .social-icons a:hover {
    color: var(--bd-gold);
    transform: translateY(-2px);
}

/* ===================================================== */
/* MAIN HEADER */
/* ===================================================== */
.main-header {
    background: var(--white);
    padding: 20px 0;
    box-shadow: var(--shadow-light);
    position: relative;
    z-index: 10;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.logo-area a {
    display: block;
}

.logo-area img {
    width: auto;
    height: auto;
    object-fit: contain;
}

.logo-area h1 {
    font-size: 1.8rem;
    color: var(--bd-green);
}

.header-ad {
    max-width: 728px;
}

/* ===================================================== */
/* BREAKING NEWS TICKER */
/* ===================================================== */
.breaking-news {
    background: linear-gradient(135deg, #c62828, #b71c1c);
    color: var(--white);
    padding: 10px 0;
    position: relative;
    z-index: 9;
}

.breaking-news .container {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.breaking-label {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 15px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.breaking-label i {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.breaking-ticker {
    flex: 1;
    overflow: hidden;
}

.ticker-wrapper {
    overflow: hidden;
    white-space: nowrap;
}

.ticker-list {
    display: inline-flex;
    animation: tickerScroll 30s linear infinite;
}

.ticker-item {
    padding: 0 30px;
}

.ticker-item a {
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
}

.ticker-item a:hover {
    text-decoration: underline;
}

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }

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

/* ===================================================== */
/* MAIN NAVIGATION */
/* ===================================================== */
.main-nav {
    background: var(--white);
    border-bottom: 3px solid var(--bd-green);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.main-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0;
}

.nav-menu li {
    position: relative;
}

.nav-menu li a {
    display: block;
    padding: 15px 20px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
}

.nav-menu li a i {
    font-size: 11px;
    margin-left: 5px;
}

.nav-menu li a:hover,
.nav-menu li a.active {
    background: var(--bd-green);
    color: var(--white);
}

/* Dropdown Menu */
.nav-menu li.has-dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    min-width: 220px;
    box-shadow: var(--shadow-medium);
    border-radius: 0 0 8px 8px;
    display: none;
    z-index: 100;
    list-style: none;
    border-top: 3px solid var(--bd-green);
}

.dropdown-menu li a {
    padding: 10px 20px;
    font-weight: normal;
    border-bottom: 1px solid var(--border-color);
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu li a:hover {
    background: #f8f9fa;
    color: var(--bd-green);
}

/* Navigation Search */
.nav-search {
    position: relative;
}

.search-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-dark);
    padding: 15px 10px;
    transition: all 0.3s;
}

.search-toggle:hover {
    color: var(--bd-green);
}

.search-form {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--white);
    box-shadow: var(--shadow-medium);
    border-radius: 8px;
    display: none;
    width: 280px;
    padding: 10px;
    z-index: 100;
}

.search-form.active {
    display: flex;
    gap: 10px;
}

.search-form input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: inherit;
}

.search-form button {
    background: var(--bd-green);
    border: none;
    padding: 0 15px;
    border-radius: 5px;
    color: var(--white);
    cursor: pointer;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--bd-green);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    background: var(--white);
    z-index: 1000;
    transition: left 0.3s ease;
    box-shadow: var(--shadow-medium);
    overflow-y: auto;
}

.mobile-nav-overlay.open {
    left: 0;
}

.mobile-nav-header {
    padding: 20px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}

.close-mobile-nav {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--bd-green);
}

.mobile-nav-menu {
    list-style: none;
    padding: 20px;
}

.mobile-nav-menu li {
    border-bottom: 1px solid var(--border-color);
}

.mobile-nav-menu li a {
    display: block;
    padding: 12px 0;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
}

.mobile-nav-menu li a .dropdown-arrow {
    float: right;
    transition: transform 0.3s;
}

.mobile-nav-menu li.mobile-has-dropdown.open .mobile-dropdown {
    display: block;
}

.mobile-nav-menu li.mobile-has-dropdown.open>a .dropdown-arrow {
    transform: rotate(90deg);
}

.mobile-dropdown {
    display: none;
    padding-left: 20px;
    list-style: none;
}

.mobile-dropdown li {
    border-bottom: none;
}

.mobile-dropdown li a {
    padding: 8px 0;
    font-size: 13px;
}

/* ===================================================== */
/* MAIN CONTENT LAYOUT */
/* ===================================================== */
.main-content {
    padding: 40px 0;
    min-height: 500px;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
}

.content-left {
    width: 100%;
}

.content-right {
    width: 100%;
}

/* ===================================================== */
/* SIDEBAR STYLES */
/* ===================================================== */
.sidebar-widget {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bd-green);
    position: relative;
}

.widget-title:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--agri-light);
}

/* Popular Posts */
.popular-post-item {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.popular-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.popular-post-img {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
}

.popular-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.popular-post-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}

.popular-post-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.popular-post-info h4 a:hover {
    color: var(--bd-green);
}

.popular-post-info .post-date {
    font-size: 0.7rem;
    color: var(--text-light);
}

/* Sidebar Ad */
.sidebar-ad {
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    margin-bottom: 30px;
}

/* ===================================================== */
/* NEWS GRID & CARD STYLES */
/* ===================================================== */
.featured-news {
    margin-bottom: 40px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

.section-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bd-green);
}

.section-header a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.section-header a:hover {
    color: var(--bd-green);
}

/* Featured Slider */
.featured-slider {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.featured-main {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.featured-main img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.featured-main .featured-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 30px 20px 20px;
    color: var(--white);
}

.featured-main .category-tag {
    background: var(--bd-green);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.featured-main h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.featured-main h2 a {
    color: var(--white);
    text-decoration: none;
}

.featured-main .post-meta {
    font-size: 0.7rem;
    opacity: 0.8;
}

.featured-side {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.featured-side-item {
    display: flex;
    gap: 15px;
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.featured-side-item img {
    width: 100px;
    height: 80px;
    object-fit: cover;
}

.featured-side-item h3 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.4;
}

.featured-side-item h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

.featured-side-item .post-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

/* Latest News Grid */
.latest-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.news-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: transform 0.3s;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.news-card-img {
    position: relative;
    height: 180px;
    overflow: hidden;
}

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

.news-card:hover .news-card-img img {
    transform: scale(1.05);
}

.news-card-img .category-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--bd-green);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
}

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

.news-card-content h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.news-card-content h3 a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.news-card-content h3 a:hover {
    color: var(--bd-green);
}

.news-card-content .post-meta {
    font-size: 0.65rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.news-card-content p {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* ===================================================== */
/* CATEGORY WISE SECTION (Grid/List/Carousel) */
/* ===================================================== */
.category-section {
    margin-bottom: 40px;
}

.category-section .section-header {
    border-bottom-color: var(--bd-green);
}

/* Grid Layout */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.category-grid .news-card {
    margin-bottom: 0;
}

/* List Layout */
.category-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.category-list .news-card {
    display: flex;
    flex-direction: row;
}

.category-list .news-card-img {
    width: 200px;
    height: 120px;
    flex-shrink: 0;
}

.category-list .news-card-content {
    flex: 1;
}

/* Carousel Layout */
.category-carousel {
    position: relative;
    overflow: hidden;
}

.carousel-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 20px;
    padding: 10px 0;
}

.carousel-container::-webkit-scrollbar {
    height: 8px;
}

.carousel-container::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 10px;
}

.carousel-container::-webkit-scrollbar-thumb {
    background: var(--bd-green);
    border-radius: 10px;
}

.carousel-container .news-card {
    min-width: 280px;
    scroll-snap-align: start;
}

.carousel-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.carousel-prev,
.carousel-next {
    background: var(--bd-green);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: var(--agri-dark);
    transform: scale(1.05);
}

/* ===================================================== */
/* PHOTO GALLERY SECTION */
/* ===================================================== */
.photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.photo-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.photo-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.5s;
}

.photo-item:hover img {
    transform: scale(1.05);
}

.photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.photo-item:hover .photo-overlay {
    opacity: 1;
}

.photo-overlay h4 {
    font-size: 0.75rem;
    color: var(--white);
}

/* ===================================================== */
/* VIDEO SECTION */
/* ===================================================== */
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.video-item {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
}

.video-thumb {
    position: relative;
    height: 180px;
    overflow: hidden;
}

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

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.2rem;
    transition: all 0.3s;
}

.video-item:hover .play-icon {
    background: var(--bd-red);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-info {
    padding: 15px;
}

.video-info h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.video-info h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

/* ===================================================== */
/* OPINION SECTION */
/* ===================================================== */
.opinion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.opinion-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow-light);
    border-left: 4px solid var(--bd-green);
}

.opinion-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.opinion-card h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

.opinion-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.opinion-author .author-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bd-green);
}

/* ===================================================== */
/* POLL WIDGET */
/* ===================================================== */
.poll-widget {
    background: linear-gradient(135deg, #f8f9fa, #fff);
}

.poll-question {
    font-weight: 600;
    margin-bottom: 15px;
}

.poll-option {
    margin-bottom: 12px;
}

.poll-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.poll-option input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.poll-vote-btn {
    background: var(--bd-green);
    color: var(--white);
    border: none;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s;
}

.poll-vote-btn:hover {
    background: var(--agri-dark);
}

.poll-results {
    margin-top: 15px;
}

.poll-result-bar {
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin: 8px 0;
}

.poll-result-fill {
    background: var(--bd-green);
    height: 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    color: var(--white);
    font-size: 0.7rem;
}

/* ===================================================== */
/* SUBMISSIONS SECTION */
/* ===================================================== */
.submission-card {
    background: var(--white);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
}

.submission-card h4 {
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.submission-card h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.submission-meta {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.submission-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: 600;
}

.submission-badge.news {
    background: #e3f2fd;
    color: #1976d2;
}

.submission-badge.photo {
    background: #e8f5e9;
    color: #2e7d32;
}

.submission-badge.video {
    background: #fff3e0;
    color: #f57c00;
}

/* ===================================================== */
/* BETWEEN NEWS AD */
/* ===================================================== */
.between-news-ad {
    text-align: center;
    padding: 20px 0;
    margin: 20px 0;
}

/* ===================================================== */
/* RESPONSIVE DESIGN */
/* ===================================================== */
@media (max-width: 1024px) {
    .featured-slider {
        grid-template-columns: 1fr;
    }

    .featured-main img {
        height: 350px;
    }

    .latest-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .photo-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
    }

    .content-wrapper {
        grid-template-columns: 1fr;
    }

    .latest-news-grid {
        grid-template-columns: 1fr;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-list .news-card {
        flex-direction: column;
    }

    .category-list .news-card-img {
        width: 100%;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .opinion-grid {
        grid-template-columns: 1fr;
    }

    .photo-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-main h2 {
        font-size: 1.2rem;
    }

    .featured-main img {
        height: 250px;
    }

    .header-inner {
        flex-direction: column;
        text-align: center;
    }

    .breaking-news .container {
        flex-direction: column;
        text-align: center;
    }

    .top-bar .container {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .category-grid {
        grid-template-columns: 1fr;
    }

    .photo-gallery-grid {
        grid-template-columns: 1fr;
    }

    .featured-side-item {
        flex-direction: column;
    }

    .featured-side-item img {
        width: 100%;
        height: 150px;
    }

    .container {
        padding: 0 15px;
    }

    .main-content {
        padding: 25px 0;
    }
}

/* ===================================================== */
/* HEADER (header.php) - COMPONENT STYLES                */
/* Moved from header.php inline <style> block            */
/* NOTE: Conflicting class names renamed with hdr- prefix */
/* ===================================================== */

/* ===================================================== */
/* CSS VARIABLES */
/* ===================================================== */
:root {
    --bd-green: #006a4e;
    --agri-green: #2e7d32;
    --agri-light: #4caf50;
    --agri-dark: #1b5e20;
    --bd-red: #f42a41;
    --bd-gold: #006a4e;
    --light-bg: #f9fff9;
    --white: #ffffff;
    --text-dark: #1a3c34;
    --text-light: #5a7c72;
    --border-color: rgba(0, 106, 78, 0.1);
    --shadow-light: 0 4px 20px rgba(0, 106, 78, 0.08);
    --shadow-medium: 0 10px 30px rgba(0, 106, 78, 0.15);
}

/* ===================================================== */
/* HEADER TOP AD */
/* ===================================================== */
.header-top-ad {
    background: transparent;
    text-align: center;
    padding: 15px 0;
    margin-bottom: 10px;
}

.header-top-ad img {
    max-width: 100%;
    height: auto;
}

/* ===================================================== */
/* MAIN HEADER */
/* ===================================================== */
.main-header {
    background: var(--white);
    padding: 20px 0;
    box-shadow: var(--shadow-light);
    position: relative;
    z-index: 10;
}

.hdr-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.header-date {
    font-size: 0.8rem;
    color: var(--text-light);
    min-width: 420px;
}

.header-date i {
    color: var(--bd-green);
    margin-right: 5px;
}

.header-date .fa-map-marker-alt {
    margin-right: 5px;
}

.header-date .separator {
    color: var(--bd-green);
    margin: 0 5px;
}

.header-date .bangla-date {
    font-weight: 500;
    color: var(--bd-green);
    margin-left: 5px;
}

.hdr-logo-area {
    text-align: center;
}

.hdr-logo-area a {
    display: block;
}

.hdr-logo-area img {
    width: auto;
    height: auto;
    object-fit: contain;
}

.hdr-logo-area h1 {
    font-size: 1.8rem;
    color: var(--bd-green);
}

.header-social {
    display: flex;
    gap: 12px;
    min-width: 200px;
    justify-content: flex-end;
}

.header-social .social-icon {
    width: 36px;
    height: 36px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bd-green);
    text-decoration: none;
    transition: all 0.3s;
}

.header-social .social-icon:hover {
    background: var(--bd-green);
    color: white;
    transform: translateY(-2px);
}

/* ===================================================== */
/* MAIN NAVIGATION - COMPLETE */
/* ===================================================== */
.hdr-main-nav {
    background: var(--white);
    position: relative; /* JS .sticky class দিয়ে fixed হবে — CSS sticky সরানো হয়েছে */
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.hdr-main-nav .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
}

/* Desktop Navigation Menu */
.hdr-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.hdr-nav-menu li {
    position: relative;
}

.hdr-nav-menu li a {
    display: block;
    padding: 15px 18px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.hdr-nav-menu li a i {
    font-size: 0.7rem;
    margin-left: 5px;
}

.hdr-nav-menu li a:hover,
.hdr-nav-menu li a.active {
    color: var(--bd-green);
    background: rgba(0, 106, 78, 0.05);
}

/* Dropdown Menu */
.hdr-nav-menu li.has-dropdown:hover>.hdr-dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.hdr-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    min-width: 220px;
    box-shadow: var(--shadow-medium);
    border-radius: 0 0 8px 8px;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 100;
    list-style: none;
    border-top: 3px solid var(--bd-green);
}

.hdr-dropdown-menu li {
    border-bottom: 1px solid var(--border-color);
}

.hdr-dropdown-menu li:last-child {
    border-bottom: none;
}

.hdr-dropdown-menu li a {
    color: var(--text-dark);
    padding: 10px 18px;
    font-size: 0.8rem;
    font-weight: 500;
}

.hdr-dropdown-menu li a:hover {
    background: #f8f9fa;
    color: var(--bd-green);
}

/* Submenu (Third Level) */
.hdr-dropdown-menu li.has-submenu {
    position: relative;
}

.hdr-dropdown-menu li.has-submenu>a i {
    float: right;
    margin-top: 3px;
}

.hdr-dropdown-menu li.has-submenu:hover>.submenu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.submenu {
    position: absolute;
    top: 0;
    left: 100%;
    background: var(--white);
    min-width: 200px;
    box-shadow: var(--shadow-medium);
    border-radius: 8px;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 100;
    list-style: none;
    border-left: 3px solid var(--bd-green);
}

.submenu li a {
    padding: 8px 15px;
}

/* Navigation Icons - Mobile Only */
.nav-icons {
    display: none;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.nav-toggle-btn {
    background: none;
    border: none;
    color: var(--text-dark);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 10px 12px;
    transition: all 0.3s;
    border-radius: 8px;
}

.nav-toggle-btn:hover {
    color: var(--bd-green);
    background: rgba(0, 106, 78, 0.05);
}

/* Search Link - সরাসরি লিংক */
.search-link {
    background: none;
    border: none;
    color: var(--text-dark);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 10px 12px;
    transition: all 0.3s;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.search-link:hover {
    color: var(--bd-green);
    background: rgba(0, 106, 78, 0.05);
}

.hdr-nav-search {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Sticky Logo - Desktop (left side) */
.nav-logo-sticky {
    display: none;
    flex-shrink: 0;
}

.nav-logo-sticky a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo-sticky img {
    max-height: 40px;
    width: auto;
}

.nav-logo-sticky .logo-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bd-green);
}

/* ===================================================== */
/* DESKTOP STICKY NAVIGATION */
/* ===================================================== */
@media (min-width: 769px) {
    /* nav আসলে sticky হওয়ার মুহূর্তে JS থেকে .sticky class যোগ হয়,
       তখন position:fixed করে viewport-এর top:0 তে আটকে দেওয়া হয় */
    .hdr-main-nav.sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: var(--white);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
        border-top: none;
    }

    .hdr-main-nav.sticky .nav-logo-sticky {
        display: block !important; /* base display:none কে নির্ভরযোগ্যভাবে override */
        position: static;
        transform: none;
        margin-right: 20px;
    }

    .hdr-main-nav.sticky .nav-wrapper {
        justify-content: flex-start;
    }

    .hdr-main-nav.sticky .hdr-nav-search {
        margin-left: auto;
    }
}

/* ===================================================== */
/* MOBILE STICKY NAVIGATION - CORRECT ORDER */
/* ===================================================== */
@media (max-width: 768px) {

    /* Hide desktop menu on mobile */
    .hdr-nav-menu {
        display: none;
    }

    /* Show mobile menu icon ONLY on mobile */
    .nav-icons {
        display: flex;
    }

    /* Normal state - hide sticky logo */
    .hdr-main-nav:not(.sticky) .nav-logo-sticky {
        display: none;
    }

    /* Sticky state */
    .hdr-main-nav.sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: var(--white);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Sticky nav-wrapper - three columns layout */
    .hdr-main-nav.sticky .nav-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 8px 0;
        gap: 0;
    }

    /* Left column - Menu icon */
    .hdr-main-nav.sticky .nav-icons {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 50px;
        margin: 0;
    }

    /* Center column - Logo */
    .hdr-main-nav.sticky .nav-logo-sticky {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 1;
        background: transparent;
        padding: 0;
        height: auto;
    }

    .hdr-main-nav.sticky .nav-logo-sticky a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .hdr-main-nav.sticky .nav-logo-sticky img {
        max-height: 35px;
        width: auto;
        display: block;
    }

    .hdr-main-nav.sticky .nav-logo-sticky .logo-text {
        font-size: 1rem;
        font-weight: 700;
        white-space: nowrap;
        color: var(--bd-green);
    }

    /* Right column - Search icon */
    .hdr-main-nav.sticky .hdr-nav-search {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 50px;
    }

    /* Hide regular logo in sticky mode */
    .hdr-main-nav.sticky .hdr-logo-area {
        display: none;
    }
}

/* ===================================================== */
/* EXTRA SMALL DEVICES (max 480px) */
/* ===================================================== */
@media (max-width: 480px) {
    .header-date {
        min-width: auto;
        font-size: 0.7rem;
    }

    .hdr-main-nav.sticky .nav-logo-sticky img {
        max-height: 30px;
    }

    .hdr-main-nav.sticky .nav-logo-sticky .logo-text {
        font-size: 0.85rem;
    }

    .hdr-main-nav.sticky .nav-icons {
        width: 40px;
    }

    .hdr-main-nav.sticky .hdr-nav-search {
        width: 40px;
    }

    .hdr-main-nav.sticky .nav-toggle-btn,
    .hdr-main-nav.sticky .search-link {
        padding: 6px 8px;
        font-size: 1rem;
    }
}

/* ===================================================== */
/* MOBILE NAVIGATION OVERLAY */
/* ===================================================== */
.hdr-mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: var(--white);
    z-index: 1001;
    transition: left 0.3s ease;
    box-shadow: var(--shadow-medium);
    overflow-y: auto;
}

.hdr-mobile-nav-overlay.open {
    left: 0;
}

.hdr-mobile-nav-header {
    padding: 18px 20px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 10;
}

.hdr-close-mobile-nav {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--text-dark);
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hdr-close-mobile-nav:hover {
    background: var(--bd-red);
    color: white;
    transform: rotate(90deg);
}

.hdr-mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hdr-mobile-nav-menu>li {
    border-bottom: 1px solid var(--border-color);
}

.hdr-mobile-nav-menu>li {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.hdr-mobile-nav-menu>li>a {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 14px 20px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.hdr-mobile-nav-menu>li>.hdr-mobile-dropdown {
    flex: 0 0 100%;
}

.hdr-mobile-nav-menu>li>a:hover {
    background: rgba(0, 106, 78, 0.05);
    color: var(--bd-green);
}

/* Toggle বাটন — শুধু ড্রপডাউন খোলার জন্য */
.hdr-mobile-dropdown-toggle,
.hdr-mobile-submenu-toggle {
    background: none;
    border: none;
    border-left: 1px solid var(--border-color);
    padding: 0 16px;
    cursor: pointer;
    color: var(--text-light);
    font-size: 0.75rem;
    transition: all 0.3s;
    flex-shrink: 0;
}

.hdr-mobile-dropdown-toggle:hover,
.hdr-mobile-submenu-toggle:hover {
    background: rgba(0, 106, 78, 0.08);
    color: var(--bd-green);
}

.hdr-mobile-dropdown-toggle i,
.hdr-mobile-submenu-toggle i {
    transition: transform 0.3s;
    display: block;
}

.hdr-mobile-dropdown-toggle.open i {
    transform: rotate(180deg);
}

.hdr-mobile-submenu-toggle.open i {
    transform: rotate(90deg);
}

/* সাবমেনু আইটেমের লেআউট */
.hdr-mobile-dropdown li {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.hdr-mobile-dropdown li>a {
    flex: 1;
}

.hdr-mobile-dropdown li>.hdr-mobile-submenu-toggle {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.hdr-mobile-dropdown li>.mobile-submenu {
    flex: 0 0 100%;
}

.hdr-mobile-dropdown {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f8f9fa;
}

.hdr-mobile-dropdown.show {
    display: block;
}

.hdr-mobile-dropdown li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.hdr-mobile-dropdown li:last-child {
    border-bottom: none;
}

.hdr-mobile-dropdown li a {
    display: block;
    padding: 12px 20px 12px 35px;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.hdr-mobile-dropdown li a:hover {
    background: rgba(0, 106, 78, 0.05);
    color: var(--bd-green);
    padding-left: 40px;
}

.mobile-submenu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f0f0f0;
}

.mobile-submenu.show {
    display: block;
}

.mobile-submenu li a {
    padding: 10px 20px 10px 50px;
    font-size: 0.8rem;
}

/* ===================================================== */
/* BREAKING NEWS SECTION */
/* ===================================================== */
.breaking-news-section {
    background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%);
    position: relative;
    z-index: 9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.breaking-news-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 0;
}

.hdr-breaking-label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 16px;
    border-radius: 40px;
    white-space: nowrap;
}

.breaking-icon i {
    font-size: 0.9rem;
    animation: pulse 1.2s infinite;
}

.breaking-text {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.breaking-ticker-container {
    flex: 1;
    overflow: hidden;
}

.breaking-ticker-wrapper {
    overflow: hidden;
    white-space: nowrap;
}

.breaking-ticker-list {
    display: inline-flex;
    animation: tickerScroll 25s linear infinite;
}

.breaking-ticker-item {
    padding: 0 35px;
}

.breaking-ticker-item a {
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s;
}

.breaking-ticker-item a:hover {
    text-decoration: underline;
    opacity: 0.9;
}

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }

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

.breaking-controls {
    display: flex;
    gap: 5px;
}

.breaking-pause,
.breaking-play {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breaking-pause:hover,
.breaking-play:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.breaking-ticker-list.paused {
    animation-play-state: paused;
}

/* ===================================================== */
/* HEADER BOTTOM AD */
/* ===================================================== */
.header-bottom-ad {
    background: transparent;
    text-align: center;
    padding: 20px 0;
    margin: 15px 0 25px;
}

.header-bottom-ad img {
    max-width: 100%;
    height: auto;
}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */
@media (max-width: 1024px) {
    .header-date {
        min-width: 350px;
        font-size: 0.75rem;
    }

    .header-social {
        min-width: 150px;
    }

    .hdr-nav-menu li a {
        padding: 15px 12px;
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .hdr-header-inner {
        flex-direction: column;
        text-align: center;
    }

    .header-date {
        min-width: auto;
        font-size: 0.7rem;
    }

    .header-social {
        min-width: auto;
        justify-content: center;
    }

    .breaking-news-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .hdr-breaking-label {
        padding: 4px 12px;
    }

    .breaking-text {
        font-size: 0.7rem;
    }

    .breaking-ticker-item a {
        font-size: 0.75rem;
    }

    .breaking-controls {
        display: none;
    }

    .header-bottom-ad {
        margin: 10px 0 20px;
        padding: 15px 0;
    }

    .header-top-ad {
        padding: 10px 0;
    }
}

@media (max-width: 576px) {
    .header-date {
        font-size: 0.65rem;
    }

    .hdr-breaking-label {
        padding: 3px 10px;
    }

    .breaking-icon i {
        font-size: 0.75rem;
    }

    .breaking-text {
        font-size: 0.65rem;
    }

    .breaking-ticker-item a {
        font-size: 0.7rem;
    }

    .header-social .social-icon {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .hdr-mobile-nav-overlay {
        width: 280px;
        left: -280px;
    }
}

/* ===================================================== */
/* FOOTER (footer.php) - COMPONENT STYLES               */
/* Moved from footer.php inline <style> block           */
/* NOTE: Conflicting class names renamed with ftr- prefix */
/* ===================================================== */

/* ===================================================== */
/* FOOTER TOP AD - Transparent Background */
/* ===================================================== */
.ftr-footer-top-ad {
    background: transparent !important;
    text-align: center;
    padding: 20px 0;
    margin-bottom: 10px;
}

.ftr-footer-top-ad img {
    max-width: 100%;
    height: auto;
}

/* ===================================================== */
/* MAIN FOOTER - Bangladesh Flag Green Background */
/* ===================================================== */
.ftr-main-footer {
    background: #006a4e;
    background: linear-gradient(135deg, #006a4e 0%, #004d36 100%);
    color: #ffffff;
    padding: 50px 0 20px;
    margin-top: 40px;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.ftr-footer-widget .widget-title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
}

.ftr-footer-widget .widget-title:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: #FFFFFF;
}

.widget-content {
    line-height: 1.7;
    font-size: 0.85rem;
    color: #ffffff;
}

.widget-content p {
    color: #ffffff;
}

.widget-content a {
    color: #ffffff;
    text-decoration: none;
}

.widget-content a:hover {
    color: #ffcc00;
    text-decoration: underline;
}

/* Footer Links */
.ftr-footer-links {
    list-style: none;
}

.ftr-footer-links li {
    margin-bottom: 10px;
}

.ftr-footer-links li a {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
}

.ftr-footer-links li a:hover {
    color: #ffcc00;
    transform: translateX(5px);
}

.ftr-footer-links li a i {
    font-size: 0.75rem;
    margin-right: 5px;
}

/* Contact Info */
.ftr-contact-info p {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #ffffff;
}

.ftr-contact-info p i {
    color: #ffffff;
    margin-top: 3px;
    min-width: 18px;
}

.ftr-contact-info p a {
    color: #ffffff;
    text-decoration: none;
}

.ftr-contact-info p a:hover {
    color: #ffcc00;
}

/* HR Styling - Above and Below Social & App */
.footer-hr {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 0 20px 0;
}

.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin-bottom: 20px;
}

/* Social Media Icons - Left Side */
.ftr-footer-social {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.ftr-footer-social .social-icon {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 1rem;
}

.ftr-footer-social .social-icon:hover {
    background: #ffcc00;
    color: #1b5e20;
    transform: translateY(-3px);
}

/* App Download Links - Right Side (Text always visible) */
.footer-app-download {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.app-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 16px;
    border-radius: 30px;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 0.85rem;
    font-weight: 500;
}

.app-btn i {
    font-size: 1.1rem;
    color: #ffffff;
}

.app-text {
    display: inline-block;
}

.app-btn.android:hover {
    background: #3ddc84;
    color: #000000;
}

.app-btn.android:hover i {
    color: #000000;
}

.app-btn.android:hover .app-text {
    color: #000000;
}

.app-btn.ios:hover {
    background: #ffffff;
    color: #000000;
}

.app-btn.ios:hover i {
    color: #000000;
}

.app-btn.ios:hover .app-text {
    color: #000000;
}

/* Copyright Section */
.ftr-footer-copyright {
    text-align: center;
    font-size: 0.75rem;
    opacity: 0.8;
    padding: 15px 0 0;
    color: #ffffff;
}

.ftr-footer-copyright a {
    color: #ffffff;
    text-decoration: none;
}

.ftr-footer-copyright a:hover {
    color: #ffcc00;
    text-decoration: underline;
}

/* ===================================================== */
/* FOOTER BOTTOM AD - Transparent Background */
/* ===================================================== */
.ftr-footer-bottom-ad {
    background: transparent !important;
    text-align: center;
    padding: 20px 0;
    margin-top: 10px;
}

.ftr-footer-bottom-ad img {
    max-width: 100%;
    height: auto;
}

/* ===================================================== */
/* BACK TO TOP BUTTON (উপরে ফিরে যাওয়ার বাটন) */
/* ===================================================== */
.ftr-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: #006a4e;
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 99;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
}

.ftr-back-to-top.show {
    display: flex;
}

.ftr-back-to-top:hover {
    background: #2e7d32;
    color: #ffffff;
    transform: translateY(-3px);
}

/* ===================================================== */
/* GO TO BOTTOM BUTTON (নিচে ফিরে যাওয়ার বাটন) */
/* ===================================================== */
.go-to-bottom {
    position: fixed;
    bottom: 30px;
    right: 90px;
    width: 45px;
    height: 45px;
    background: #006a4e;
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 99;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
}

.go-to-bottom.show {
    display: flex;
}

.go-to-bottom:hover {
    background: #2e7d32;
    color: #ffffff;
    transform: translateY(-3px);
}

/* ===================================================== */
/* RESPONSIVE - Text always visible on mobile */
/* ===================================================== */
@media (max-width: 768px) {
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom-bar {
        flex-direction: column;
        text-align: center;
    }

    .ftr-footer-social {
        justify-content: center;
    }

    .footer-app-download {
        justify-content: center;
    }

    /* App buttons - text remains visible on mobile */
    .app-btn {
        padding: 8px 16px;
    }

    .app-text {
        display: inline-block;
        font-size: 0.8rem;
    }

    .ftr-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }

    .go-to-bottom {
        bottom: 20px;
        right: 70px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 576px) {

    /* App buttons - text remains visible even on very small screens */
    .app-btn {
        padding: 6px 12px;
    }

    .app-text {
        display: inline-block;
        font-size: 0.7rem;
    }

    .app-btn i {
        font-size: 0.9rem;
    }

    .ftr-back-to-top {
        bottom: 15px;
        right: 15px;
        width: 38px;
        height: 38px;
    }

    .go-to-bottom {
        bottom: 15px;
        right: 60px;
        width: 38px;
        height: 38px;
    }
}

/* ===================================================== */
/* INDEX.PHP (index.php) - COMPONENT STYLES             */
/* Moved from index.php inline <style> block            */
/* NOTE: Conflicting class names renamed with idx- prefix */
/* ===================================================== */

/* ===================================================== */
/* VARIABLES & RESET */
/* ===================================================== */
:root {
    --bd-green: #006a4e;
    --agri-green: #2e7d32;
    --agri-light: #4caf50;
    --agri-dark: #1b5e20;
    --bd-red: #f42a41;
    --bd-gold: #006a4e;
    --light-bg: #f9fff9;
    --white: #ffffff;
    --text-dark: #1a3c34;
    --text-light: #5a7c72;
    --border-color: rgba(0, 106, 78, 0.1);
    --shadow-light: 0 4px 20px rgba(0, 106, 78, 0.08);
    --shadow-medium: 0 10px 30px rgba(0, 106, 78, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', 'Hind Siliguri', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.idx-content-wrapper {
    display: flex;
    gap: 30px;
}

.idx-content-left {
    flex: 1;
    width: calc(100% - 350px);
}

.idx-content-right {
    width: 320px;
    flex-shrink: 0;
}

/* ===================================================== */
/* CAROUSEL - Hide Scrollbar */
/* ===================================================== */
.idx-carousel-container {
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    display: flex;
    gap: 20px;
    padding: 10px 0;
}

.idx-carousel-container::-webkit-scrollbar {
    display: none;
}

.idx-carousel-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ===================================================== */
/* AD ALIGNMENT - Center & Transparent Background */
/* ===================================================== */
.idx-sidebar-ad,
.idx-between-news-ad,
.homepage-featured-ad {
    background: transparent !important;
    text-align: center;
    margin-bottom: 30px;
}

.idx-sidebar-ad img,
.idx-between-news-ad img,
.homepage-featured-ad img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.idx-sidebar-ad div,
.idx-sidebar-ad a,
.idx-between-news-ad div,
.idx-between-news-ad a,
.homepage-featured-ad div,
.homepage-featured-ad a {
    text-align: center;
}

/* ===================================================== */
/* WIDGET HEADER WITH LINK */
/* ===================================================== */
.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bd-green);
    position: relative;
}

.widget-header .idx-widget-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.widget-header .widget-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.widget-link {
    font-size: 0.7rem;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
}

.widget-link:hover {
    color: var(--bd-green);
}

.widget-link i {
    font-size: 0.6rem;
}

/* ===================================================== */
/* SECTION HEADER */
/* ===================================================== */
.idx-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

.idx-section-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bd-green);
}

.idx-section-header a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.idx-section-header a:hover {
    color: var(--bd-green);
}

/* ===================================================== */
/* FEATURED NEWS */
/* ===================================================== */
.featured-news {
    margin-bottom: 40px;
}

.featured-slider {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.idx-featured-main {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.idx-featured-main img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.featured-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 30px 20px 20px;
    color: white;
}

.category-tag {
    background: var(--bd-green);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.idx-featured-main h2 {
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.idx-featured-main h2 a {
    color: white;
    text-decoration: none;
}

.post-meta {
    font-size: 0.7rem;
    opacity: 0.8;
}

.idx-featured-side {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.idx-featured-side-item {
    display: flex;
    gap: 15px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.idx-featured-side-item img {
    width: 100px;
    height: 80px;
    object-fit: cover;
}

.featured-side-info {
    padding: 8px 0;
}

.featured-side-info h3 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.4;
}

.featured-side-info h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

.featured-side-info h3 a:hover {
    color: var(--bd-green);
}

.post-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

/* ===================================================== */
/* CATEGORY SECTIONS */
/* ===================================================== */
.idx-category-section {
    margin-bottom: 40px;
}

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

.idx-category-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.idx-category-list .idx-news-card {
    display: flex;
    flex-direction: row;
}

.idx-category-list .idx-news-card-img {
    width: 200px;
    height: 120px;
    flex-shrink: 0;
}

.idx-category-list .idx-news-card-content {
    flex: 1;
}

.carousel-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.idx-carousel-prev,
.carousel-next {
    background: var(--bd-green);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}

.idx-carousel-prev:hover,
.carousel-next:hover {
    background: var(--agri-dark);
    transform: scale(1.05);
}

/* ===================================================== */
/* NEWS CARD */
/* ===================================================== */
.idx-news-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: transform 0.3s;
}

.idx-news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.idx-news-card-img {
    position: relative;
    height: 180px;
    overflow: hidden;
}

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

.idx-news-card:hover .idx-news-card-img img {
    transform: scale(1.05);
}

.idx-news-card-img .category-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    margin: 0;
}

.idx-news-card-content {
    padding: 15px;
}

.idx-news-card-content h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.idx-news-card-content h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

.idx-news-card-content h3 a:hover {
    color: var(--bd-green);
}

/* ===================================================== */
/* OPINION SECTION */
/* ===================================================== */
.opinion-section {
    margin-bottom: 40px;
}

.idx-opinion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.idx-opinion-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s;
}

.idx-opinion-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.opinion-quote-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: rgba(0, 106, 78, 0.1);
}

.idx-opinion-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
    padding-right: 30px;
}

.idx-opinion-card h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

.idx-opinion-card h3 a:hover {
    color: var(--bd-green);
}

.opinion-author-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.opinion-author-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.opinion-author-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
}

.opinion-author-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-dark);
}

.opinion-author-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

/* ===================================================== */
/* SUBMISSIONS SECTION */
/* ===================================================== */
.submissions-section {
    margin-bottom: 40px;
}

.submissions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.idx-submission-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.idx-submission-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.submission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.idx-submission-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
}

.submission-badge-news {
    background: #e3f2fd;
    color: #1976d2;
}

.submission-badge-photo {
    background: #e8f5e9;
    color: #2e7d32;
}

.submission-badge-video {
    background: #fff3e0;
    color: #f57c00;
}

.submission-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

.idx-submission-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
}

.idx-submission-card h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.idx-submission-card h4 a:hover {
    color: var(--bd-green);
}

.submission-author {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 8px;
}

.submission-author i {
    margin-right: 4px;
}

.submission-cta {
    text-align: center;
    margin-top: 10px;
}

.btn-submit-your-story {
    display: inline-block;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    padding: 10px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-submit-your-story:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 106, 78, 0.3);
}

/* ===================================================== */
/* PHOTO GALLERY SECTION */
/* ===================================================== */
.photo-gallery {
    margin-bottom: 40px;
}

.idx-photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.idx-photo-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: transform 0.3s;
}

.idx-photo-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.idx-photo-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.5s;
}

.idx-photo-item:hover img {
    transform: scale(1.05);
}

.idx-photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 106, 78, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.idx-photo-item:hover .idx-photo-overlay {
    opacity: 1;
}

.idx-photo-overlay i {
    color: white;
    font-size: 2rem;
}

.photo-info {
    padding: 12px;
    background: white;
}

.photo-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.4;
}

.photo-title a {
    color: var(--text-dark);
    text-decoration: none;
}

.photo-title a:hover {
    color: var(--bd-green);
}

.photo-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

.photo-date i {
    margin-right: 3px;
}

/* ===================================================== */
/* VIDEO SECTION */
/* ===================================================== */
.video-section {
    margin-bottom: 40px;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.idx-video-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all 0.3s;
}

.idx-video-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.idx-video-item a {
    text-decoration: none;
}

.idx-video-thumb {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.idx-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.idx-video-item:hover .idx-video-thumb img {
    transform: scale(1.05);
}

.idx-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.idx-video-item:hover .idx-play-icon {
    background: var(--bd-red);
    transform: translate(-50%, -50%) scale(1.1);
}

.idx-video-info {
    padding: 15px;
}

.idx-video-info h3 {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}

.idx-video-info h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

.idx-video-info h3 a:hover {
    color: var(--bd-green);
}

.video-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

.video-date i {
    margin-right: 3px;
}

/* ===================================================== */
/* SIDEBAR WIDGETS */
/* ===================================================== */
.idx-sidebar-widget {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.idx-widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bd-green);
    position: relative;
}

.sidebar-latest-posts {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-latest-item {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-latest-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-latest-img {
    width: 70px;
    height: 55px;
    flex-shrink: 0;
}

.sidebar-latest-img img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.sidebar-latest-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

.sidebar-latest-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.sidebar-latest-info h4 a:hover {
    color: var(--bd-green);
}

.idx-popular-post-item {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.idx-popular-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.idx-popular-post-img {
    position: relative;
    width: 65px;
    height: 55px;
    flex-shrink: 0;
}

.idx-popular-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.popular-rank {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 22px;
    height: 22px;
    background: var(--bd-red);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
}

.idx-popular-post-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

.idx-popular-post-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

/* ===================================================== */
/* POLL WIDGET */
/* ===================================================== */
.poll-question {
    font-weight: 600;
    margin-bottom: 15px;
}

.poll-option {
    margin-bottom: 12px;
}

.poll-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.poll-option input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.idx-poll-vote-btn {
    background: var(--bd-green);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s;
}

.idx-poll-vote-btn:hover {
    background: var(--agri-dark);
}

/* Poll Results Styles */
.poll-result-item {
    margin-bottom: 15px;
}

.idx-poll-result-bar {
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.idx-poll-result-fill {
    background: #006a4e;
    height: 28px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    color: white;
    font-size: 0.7rem;
    transition: width 0.5s ease;
}

/* Alert Styles */
.alert-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 10px;
}

.alert-error {
    background: #fdecea;
    color: #d32f2f;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 10px;
}

/* ===================================================== */
/* NEWSLETTER WIDGET */
/* ===================================================== */
.newsletter-widget {
    background: linear-gradient(135deg, #f8f9fa, #fff);
}

.newsletter-widget p {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 15px;
    text-align: center;
}

.newsletter-input-group {
    position: relative;
    margin-bottom: 12px;
}

.newsletter-input-group i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bd-green);
}

.newsletter-input-group input {
    width: 100%;
    padding: 12px 12px 12px 38px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
}

.newsletter-input-group input:focus {
    outline: none;
    border-color: var(--bd-green);
}

.newsletter-widget button {
    width: 100%;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.newsletter-note {
    font-size: 0.65rem !important;
    margin-top: 12px !important;
}

/* ===================================================== */
/* CTA WIDGET */
/* ===================================================== */
.cta-widget {
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    text-align: center;
    padding: 25px 20px !important;
}

.cta-widget .cta-content i {
    font-size: 2.5rem;
    margin-bottom: 10px;
    display: block;
}

.cta-widget h3 {
    color: white;
    border-bottom: none;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.cta-widget p {
    font-size: 0.85rem;
    margin-bottom: 15px;
    opacity: 0.9;
}



/* ===================================================== */
/* RESPONSIVE DESIGN */
/* ===================================================== */
@media (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }

    .idx-featured-main img {
        height: 350px;
    }

    .idx-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .idx-content-wrapper {
        flex-direction: column;
    }

    .idx-content-left {
        width: 100%;
    }

    .idx-content-right {
        width: 100%;
    }

    .featured-slider {
        grid-template-columns: 1fr;
    }

    .idx-featured-side {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 20px;
    }

    .idx-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .idx-opinion-grid {
        grid-template-columns: 1fr;
    }

    .submissions-grid {
        grid-template-columns: 1fr;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .idx-photo-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .idx-featured-main h2 {
        font-size: 1.1rem;
    }

    .idx-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

}

@media (max-width: 576px) {
    .idx-featured-main img {
        height: 220px;
    }

    .idx-featured-side {
        grid-template-columns: 1fr;
    }

    .idx-category-grid {
        grid-template-columns: 1fr;
    }

    .idx-photo-gallery-grid {
        grid-template-columns: 1fr;
    }

    .idx-news-card-img {
        height: 160px;
    }

    .idx-category-list .idx-news-card {
        flex-direction: column;
    }

    .idx-category-list .idx-news-card-img {
        width: 100%;
        height: 160px;
    }

    .idx-popular-post-item {
        flex-direction: column;
    }

    .idx-popular-post-img {
        width: 100%;
        height: 80px;
    }

    .idx-opinion-card {
        padding: 18px;
    }

    .idx-opinion-card h3 {
        font-size: 1rem;
    }

    .photo-info {
        padding: 8px;
    }

    .photo-title {
        font-size: 0.7rem;
    }
}


/* ================================================================= */
/* INDEX.PHP - Page-specific overrides                               */
/* Scoped under #index-page to avoid conflict with global style.css  */
/* ================================================================= */

#index-page .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

#index-page .content-wrapper {
    display: flex;
    gap: 30px;
}

#index-page .content-left {
    flex: 1;
    width: calc(100% - 350px);
}

#index-page .content-right {
    width: 320px;
    flex-shrink: 0;
}

/* ===================================================== */
/* #INDEX-PAGE CAROUSEL - Hide Scrollbar */
/* ===================================================== */
#index-page .carousel-container {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    display: flex;
    gap: 20px;
    padding: 10px 0;
}

#index-page .carousel-container::-webkit-scrollbar {
    display: none;
}

#index-page .carousel-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ===================================================== */
/* #INDEX-PAGE AD ALIGNMENT - Center & Transparent Background */
/* ===================================================== */
#index-page .sidebar-ad,
#index-page .between-news-ad,
#index-page .homepage-featured-ad {
    background: transparent !important;
    text-align: center;
    margin-bottom: 30px;
}

#index-page .sidebar-ad img,
#index-page .between-news-ad img,
#index-page .homepage-featured-ad img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

#index-page .sidebar-ad div,
#index-page .sidebar-ad a,
#index-page .between-news-ad div,
#index-page .between-news-ad a,
#index-page .homepage-featured-ad div,
#index-page .homepage-featured-ad a {
    text-align: center;
}

#index-page .widget-header .widget-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ===================================================== */
/* #INDEX-PAGE SECTION HEADER */
/* ===================================================== */
#index-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

#index-page .section-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bd-green);
}

#index-page .section-header a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s;
}

#index-page .section-header a:hover {
    color: var(--bd-green);
}

#index-page .category-tag {
    background: var(--bd-green);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 10px;
}

#index-page .post-meta {
    font-size: 0.7rem;
    opacity: 0.8;
}

#index-page .post-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

/* ===================================================== */
/* #INDEX-PAGE CATEGORY SECTIONS */
/* ===================================================== */
#index-page .category-section {
    margin-bottom: 40px;
}

#index-page .category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

#index-page .category-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#index-page .category-list .news-card {
    display: flex;
    flex-direction: row;
}

#index-page .category-list .news-card-img {
    width: 200px;
    height: 120px;
    flex-shrink: 0;
}

#index-page .category-list .news-card-content {
    flex: 1;
}

#index-page .carousel-prev,
#index-page .carousel-next {
    background: var(--bd-green);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}

#index-page .carousel-prev:hover,
#index-page .carousel-next:hover {
    background: var(--agri-dark);
    transform: scale(1.05);
}

/* ===================================================== */
/* #INDEX-PAGE NEWS CARD */
/* ===================================================== */
#index-page .news-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: transform 0.3s;
}

#index-page .news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

#index-page .news-card-img {
    position: relative;
    height: 180px;
    overflow: hidden;
}

#index-page .news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

#index-page .news-card:hover .news-card-img img {
    transform: scale(1.05);
}

#index-page .news-card-img .category-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    margin: 0;
}

#index-page .news-card-content {
    padding: 15px;
    box-sizing: border-box;
    min-width: 0;
}

#index-page .news-card-content h3 {
    font-size: clamp(0.82rem, 2.5vw, 1rem);
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
}

#index-page .news-card-content h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

#index-page .news-card-content h3 a:hover {
    color: var(--bd-green);
}

#index-page .opinion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

#index-page .opinion-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s;
}

#index-page .opinion-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

#index-page .opinion-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
    padding-right: 30px;
}

#index-page .opinion-card h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

#index-page .opinion-card h3 a:hover {
    color: var(--bd-green);
}

#index-page .submission-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

#index-page .submission-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

#index-page .submission-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
}

#index-page .submission-badge-news {
    background: #e3f2fd;
    color: #1976d2;
}

#index-page .submission-badge-photo {
    background: #e8f5e9;
    color: #2e7d32;
}

#index-page .submission-badge-video {
    background: #fff3e0;
    color: #f57c00;
}

#index-page .submission-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
}

#index-page .submission-card h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

#index-page .submission-card h4 a:hover {
    color: var(--bd-green);
}

#index-page .photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

#index-page .photo-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: transform 0.3s;
}

#index-page .photo-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

#index-page .photo-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.5s;
}

#index-page .photo-item:hover img {
    transform: scale(1.05);
}

#index-page .photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 106, 78, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

#index-page .photo-item:hover .photo-overlay {
    opacity: 1;
}

#index-page .photo-overlay i {
    color: white;
    font-size: 2rem;
}

#index-page .video-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all 0.3s;
}

#index-page .video-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

#index-page .video-item a {
    text-decoration: none;
}

#index-page .video-thumb {
    position: relative;
    height: 180px;
    overflow: hidden;
}

#index-page .video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

#index-page .video-item:hover .video-thumb img {
    transform: scale(1.05);
}

#index-page .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transition: all 0.3s;
}

#index-page .video-item:hover .play-icon {
    background: var(--bd-red);
    transform: translate(-50%, -50%) scale(1.1);
}

#index-page .video-info {
    padding: 15px;
}

#index-page .video-info h3 {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}

#index-page .video-info h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

#index-page .video-info h3 a:hover {
    color: var(--bd-green);
}

/* ===================================================== */
/* #INDEX-PAGE SIDEBAR WIDGETS */
/* ===================================================== */
#index-page .sidebar-widget {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

#index-page .widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bd-green);
    position: relative;
}

#index-page .popular-post-item {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

#index-page .popular-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#index-page .popular-post-img {
    position: relative;
    width: 65px;
    height: 55px;
    flex-shrink: 0;
}

#index-page .popular-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

#index-page .popular-post-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

#index-page .popular-post-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

#index-page .poll-vote-btn {
    background: var(--bd-green);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s;
}

#index-page .poll-vote-btn:hover {
    background: var(--agri-dark);
}

#index-page .poll-result-bar {
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

#index-page .poll-result-fill {
    background: #006a4e;
    height: 28px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    color: white;
    font-size: 0.7rem;
    transition: width 0.5s ease;
}

@media (max-width: 768px) {
    #index-page .content-wrapper {
        flex-direction: column;
    }

    #index-page .content-left {
        width: 100%;
    }

    #index-page .content-right {
        width: 100%;
    }

    #index-page .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #index-page .opinion-grid {
        grid-template-columns: 1fr;
    }

    #index-page .photo-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #index-page .section-header {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
}

@media (max-width: 576px) {
    #index-page .category-grid {
        grid-template-columns: repeat(2, 1fr); /* grid = ২ কলাম, list থেকে আলাদা */
        gap: 12px;
    }

    #index-page .category-grid .news-card-img {
        height: 120px; /* grid: ছোট স্ক্রিনে ছোট ছবি */
    }

    #index-page .photo-gallery-grid {
        grid-template-columns: 1fr;
    }

    #index-page .category-list .news-card {
        flex-direction: row; /* মোবাইলেও horizontal রাখুন, grid থেকে আলাদা দেখাবে */
    }

    #index-page .category-list .news-card-img {
        width: 160px;
        height: 130px; /* list: category tag-এর জন্য বড় ছবি */
        flex-shrink: 0;
    }

    #index-page .popular-post-item {
        flex-direction: row;
    }

    #index-page .popular-post-img {
        width: 65px;
        height: 55px;
    }

    #index-page .opinion-card {
        padding: 18px;
    }

    #index-page .opinion-card h3 {
        font-size: 1rem;
    }

    #index-page .sidebar-latest-item {
        flex-direction: column;
    }

    #index-page .sidebar-latest-img {
        width: 100%;
        height: 120px;
    }

    #index-page .photo-info {
        padding: 8px;
    }

    #index-page .photo-title {
        font-size: 0.7rem;
    }
}

/* ===================================================== */
/* #INDEX-PAGE WIDGET HEADER WITH LINK */
/* ===================================================== */
#index-page .widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bd-green);
    position: relative;
}

#index-page .widget-header .widget-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

#index-page .widget-link {
    font-size: 0.7rem;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
}

#index-page .widget-link:hover {
    color: var(--bd-green);
}

#index-page .widget-link i {
    font-size: 0.6rem;
}

/* ===================================================== */
/* #INDEX-PAGE SIDEBAR LATEST POSTS */
/* ===================================================== */
#index-page .sidebar-latest-posts {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#index-page .sidebar-latest-item {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

#index-page .sidebar-latest-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#index-page .sidebar-latest-img {
    width: 70px;
    height: 55px;
    flex-shrink: 0;
}

#index-page .sidebar-latest-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

#index-page .sidebar-latest-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

#index-page .sidebar-latest-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

#index-page .sidebar-latest-info h4 a:hover {
    color: var(--bd-green);
}

#index-page .post-time {
    font-size: 0.65rem;
    color: var(--text-light);
}

/* ===================================================== */
/* #INDEX-PAGE POPULAR RANK & INFO */
/* ===================================================== */
#index-page .popular-rank {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 22px;
    height: 22px;
    background: var(--bd-red);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
}

#index-page .popular-post-info h4 a:hover {
    color: var(--bd-green);
}

/* ===================================================== */
/* #INDEX-PAGE POLL WIDGET */
/* ===================================================== */
#index-page .poll-question {
    font-weight: 600;
    margin-bottom: 15px;
}

#index-page .poll-option {
    margin-bottom: 12px;
}

#index-page .poll-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

#index-page .poll-option input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#index-page .poll-result-item {
    margin-bottom: 15px;
}

/* ===================================================== */
/* #INDEX-PAGE ALERT STYLES */
/* ===================================================== */
#index-page .alert-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 10px;
}

#index-page .alert-error {
    background: #fdecea;
    color: #d32f2f;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 10px;
}

/* ===================================================== */
/* #INDEX-PAGE NEWSLETTER WIDGET */
/* ===================================================== */
#index-page .newsletter-widget {
    background: linear-gradient(135deg, #f8f9fa, #fff);
}

#index-page .newsletter-widget p {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 15px;
    text-align: center;
}

#index-page .newsletter-input-group {
    position: relative;
    margin-bottom: 12px;
}

#index-page .newsletter-input-group i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bd-green);
}

#index-page .newsletter-input-group input {
    width: 100%;
    padding: 12px 12px 12px 38px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
}

#index-page .newsletter-input-group input:focus {
    outline: none;
    border-color: var(--bd-green);
}

#index-page .newsletter-widget button {
    width: 100%;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

#index-page .newsletter-note {
    font-size: 0.65rem !important;
    margin-top: 12px !important;
}

/* ===================================================== */
/* #INDEX-PAGE CTA WIDGET */
/* ===================================================== */
#index-page .cta-widget {
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    text-align: center;
    padding: 25px 20px !important;
}

#index-page .cta-widget .cta-content i {
    font-size: 2.5rem;
    margin-bottom: 10px;
    display: block;
}

#index-page .cta-widget h3 {
    color: white;
    border-bottom: none;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

#index-page .cta-widget p {
    font-size: 0.85rem;
    margin-bottom: 15px;
    opacity: 0.9;
}

.cta-types {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
}

.cta-types span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: white;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 14px 18px;
    min-width: 72px;
}

.cta-types span i {
    font-size: 1.6rem;
    display: block;
    margin: 0;
}

.cta-button {
    display: inline-block;
    background: #ffcc00;
    color: var(--bd-green);
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.cta-button:hover {
    background: white;
    transform: translateY(-2px);
}

/* ===================================================== */
/* #INDEX-PAGE OPINION SECTION */
/* ===================================================== */
#index-page .opinion-section {
    margin-bottom: 40px;
}

#index-page .opinion-quote-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: rgba(0, 106, 78, 0.1);
}

#index-page .opinion-author-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

#index-page .opinion-author-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

#index-page .opinion-author-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
}

#index-page .opinion-author-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#index-page .opinion-author-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-dark);
}

#index-page .opinion-author-date {
    font-size: 0.65rem;
    color: var(--text-light);
    white-space: nowrap;
}

/* ===================================================== */
/* #INDEX-PAGE SUBMISSIONS SECTION */
/* ===================================================== */
#index-page .submissions-section {
    margin-bottom: 40px;
}

#index-page .submissions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

#index-page .submission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

#index-page .submission-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

#index-page .submission-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
}

#index-page .submission-card h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

#index-page .submission-card h4 a:hover {
    color: var(--bd-green);
}

#index-page .submission-author {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 8px;
}

#index-page .submission-author i {
    margin-right: 4px;
}

#index-page .submission-cta {
    text-align: center;
    margin-top: 10px;
}

#index-page .btn-submit-your-story {
    display: inline-block;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    padding: 10px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
}

#index-page .btn-submit-your-story:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 106, 78, 0.3);
}

/* ===================================================== */
/* #INDEX-PAGE PHOTO GALLERY SECTION */
/* ===================================================== */
#index-page .photo-gallery {
    margin-bottom: 40px;
}

#index-page .photo-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: transform 0.3s;
}

#index-page .photo-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

#index-page .photo-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.5s;
}

#index-page .photo-item:hover img {
    transform: scale(1.05);
}

#index-page .photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 106, 78, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

#index-page .photo-item:hover .photo-overlay {
    opacity: 1;
}

#index-page .photo-overlay i {
    color: white;
    font-size: 2rem;
}

#index-page .photo-info {
    padding: 12px;
    background: white;
}

#index-page .photo-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.4;
}

#index-page .photo-title a {
    color: var(--text-dark);
    text-decoration: none;
}

#index-page .photo-title a:hover {
    color: var(--bd-green);
}

#index-page .photo-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

#index-page .photo-date i {
    margin-right: 3px;
}

/* ===================================================== */
/* #INDEX-PAGE VIDEO SECTION */
/* ===================================================== */
#index-page .video-section {
    margin-bottom: 40px;
}

#index-page .video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

#index-page .video-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all 0.3s;
}

#index-page .video-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

#index-page .video-item a {
    text-decoration: none;
}

#index-page .video-thumb {
    position: relative;
    height: 180px;
    overflow: hidden;
}

#index-page .video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

#index-page .video-item:hover .video-thumb img {
    transform: scale(1.05);
}

#index-page .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transition: all 0.3s;
}

#index-page .video-item:hover .play-icon {
    background: var(--bd-red);
    transform: translate(-50%, -50%) scale(1.1);
}

#index-page .video-info {
    padding: 15px;
}

#index-page .video-info h3 {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}

#index-page .video-info h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

#index-page .video-info h3 a:hover {
    color: var(--bd-green);
}

#index-page .video-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

#index-page .video-date i {
    margin-right: 3px;
}

/* ===================================================== */
/* #INDEX-PAGE RESPONSIVE - 1024px */
/* ===================================================== */
@media (max-width: 1024px) {
    #index-page .container {
        padding: 0 15px;
    }

    #index-page .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===================================================== */
/* #INDEX-PAGE RESPONSIVE - 768px (additional) */
/* ===================================================== */
@media (max-width: 768px) {
    #index-page .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #index-page .submissions-grid {
        grid-template-columns: 1fr;
    }

    #index-page .video-grid {
        grid-template-columns: 1fr;
    }

    #index-page .widget-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
}

/* ===================================================== */
/* #INDEX-PAGE RESPONSIVE - 576px */
/* ===================================================== */
@media (max-width: 576px) {
    #index-page .category-grid {
        grid-template-columns: repeat(2, 1fr); /* grid = ২ কলাম, list থেকে আলাদা */
        gap: 12px;
    }

    #index-page .category-grid .news-card-img {
        height: 120px;
    }
}

/* ===================================================== */
/* NEWS PAGE STYLES (news.php) - Auto-migrated           */
/* ===================================================== */
/* ===================================================== */
/* SINGLE NEWS PAGE STYLES */
/* ===================================================== */
.single-news {
    background: var(--white);
    border-radius: 15px;
    padding: 35px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.news-breadcrumb {
    margin-bottom: 20px;
    font-size: 0.8rem;
}

.news-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
}

.news-breadcrumb a:hover {
    color: var(--bd-green);
}

.news-breadcrumb i {
    margin: 0 8px;
    font-size: 0.7rem;
    color: var(--text-light);
}

.news-category-tag {
    margin-bottom: 15px;
}

.news-category-tag a {
    display: inline-block;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
}

.news-category-tag a:hover {
    background: linear-gradient(135deg, #004d3a, #1b5e20);
}

.news-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}

.news-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 20px;
    border-left: 4px solid var(--bd-green);
    padding-left: 15px;
    font-style: italic;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}

.author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

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

.author-avatar-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.author-details {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1rem;
}

.author-designation {
    font-size: 0.7rem;
    color: var(--bd-green);
}

.meta-right {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.meta-right div {
    font-size: 0.75rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 5px;
}

.meta-right div i {
    color: var(--bd-green);
}

.update-date {
    background: #fff3e0;
    padding: 3px 10px;
    border-radius: 20px;
}

.news-featured-image {
    margin-bottom: 30px;
}

.news-featured-image img {
    width: 100%;
    border-radius: 12px;
}

.image-caption {
    font-size: 0.75rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 8px;
}

.news-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-dark);
}

.news-content img {
    max-width: 100%;
    height: auto;
    margin: 25px 0;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
}

.news-content h1,
.news-content h2,
.news-content h3,
.news-content h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--bd-green);
    font-weight: 700;
}

.news-content h2 {
    font-size: 1.6rem;
}

.news-content h3 {
    font-size: 1.4rem;
}

.news-content h4 {
    font-size: 1.2rem;
}

.news-content p {
    margin-bottom: 18px;
}

.news-content ul,
.news-content ol {
    margin: 15px 0 15px 25px;
}

.news-content li {
    margin-bottom: 8px;
}

.news-content blockquote {
    border-left: 4px solid var(--bd-green);
    padding: 15px 20px;
    margin: 20px 0;
    background: #f8f9fa;
    font-style: italic;
    border-radius: 0 10px 10px 0;
}

.news-share {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.share-label {
    font-weight: 600;
    color: var(--text-dark);
}

.share-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.share-buttons a,
.share-copy {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.share-buttons a:hover,
.share-copy:hover {
    transform: translateY(-3px);
}

.share-fb {
    background: #1877f2;
}

.share-twitter {
    background: #1da1f2;
}

.share-linkedin {
    background: #0077b5;
}

.share-wa {
    background: #25d366;
}

.share-copy {
    background: #6c757d;
}

/* Related News */
.related-news {
    background: var(--white);
    border-radius: 15px;
    padding: 25px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.related-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--bd-green);
}

.related-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.related-title {
    flex: 1;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.related-view-all {
    font-size: 0.75rem;
    color: var(--bd-green);
    text-decoration: none;
    font-weight: 500;
}

.related-view-all:hover {
    color: var(--agri-dark);
}

.related-news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.related-news-card {
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.related-news-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.related-news-img {
    position: relative;
    height: 140px;
    overflow: hidden;
}

.related-news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.related-news-card:hover .related-news-img img {
    transform: scale(1.05);
}

.related-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 106, 78, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.related-news-card:hover .related-img-overlay {
    opacity: 1;
}

.related-img-overlay i {
    color: white;
    font-size: 1.5rem;
}

.related-news-content {
    padding: 12px;
}

.related-news-content h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
}

.related-news-content h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.related-news-content h4 a:hover {
    color: var(--bd-green);
}

.related-news-meta {
    font-size: 0.65rem;
    color: var(--text-light);
}

/* ===================================================== */
/* SIDEBAR WIDGET STYLES - Exactly like search.php */
/* ===================================================== */
.sidebar-widget {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.widget-link {
    font-size: 0.7rem;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
}

.widget-link:hover {
    color: var(--bd-green);
}

.sidebar-latest-posts {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-latest-item {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-latest-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-latest-img {
    width: 70px;
    height: 55px;
    flex-shrink: 0;
}

.sidebar-latest-img img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.sidebar-latest-info {
    flex: 1;
}

.sidebar-latest-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

.sidebar-latest-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.sidebar-latest-info h4 a:hover {
    color: var(--bd-green);
}

.post-time {
    font-size: 0.65rem;
    color: var(--text-light);
}

.post-time i {
    margin-right: 3px;
}

.news-sidebar-ad {
    text-align: center;
    margin-bottom: 30px;
}

.news-sidebar-ad img {
    max-width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .single-news {
        padding: 20px;
    }

    .news-title {
        font-size: 1.4rem;
    }

    .news-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .related-news-grid {
        grid-template-columns: 1fr;
    }

    .related-header {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .single-news {
        padding: 15px;
    }

    .news-title {
        font-size: 1.2rem;
    }

    .author-avatar,
    .author-avatar-placeholder {
        width: 40px;
        height: 40px;
    }

    .share-buttons a,
    .share-copy {
        width: 35px;
        height: 35px;
    }

}

/* ===================================================== */
/* CATEGORY PAGE STYLES (category.php) - Auto-migrated  */
/* ===================================================== */
/* ===================================================== */
/* CATEGORY PAGE STYLES */
/* ===================================================== */

/* Category Header */
.category-header {
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
}

.category-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.category-info {
    flex: 1;
}

.category-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.category-parent {
    margin-bottom: 8px;
}

.category-parent a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.category-parent a:hover {
    color: white;
    text-decoration: underline;
}

.category-parent i {
    margin-right: 5px;
}

.category-count {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Sub-categories Section */
.subcategories-section {
    background: var(--white);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.subcategories-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bd-green);
    color: var(--text-dark);
}

.subcategories-title i {
    color: var(--bd-green);
    margin-right: 8px;
}

.subcategories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
}

.subcategory-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid var(--border-color);
}

.subcategory-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
    border-color: var(--bd-green);
}

.subcategory-card img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 8px;
}

.subcategory-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: white;
    font-size: 1.2rem;
}

.subcategory-card span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-dark);
    display: block;
}

/* Category News Grid */
.category-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

.category-news-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.category-news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.category-news-img {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.category-news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.category-news-card:hover .category-news-img img {
    transform: scale(1.05);
}

.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 106, 78, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.category-news-card:hover .img-overlay {
    opacity: 1;
}

.img-overlay i {
    color: white;
    font-size: 1.8rem;
}

.category-news-content {
    padding: 18px;
}

.category-news-content h2 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
}

.category-news-content h2 a {
    color: var(--text-dark);
    text-decoration: none;
}

.category-news-content h2 a:hover {
    color: var(--bd-green);
}

.cat-news-meta {
    margin-bottom: 12px;
    font-size: 0.7rem;
    color: var(--text-light);
}

.cat-news-meta i {
    margin-right: 5px;
    color: var(--bd-green);
}

/* No News */
.no-news {
    text-align: center;
    padding: 60px 20px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-light);
}

.no-news i {
    color: var(--bd-green);
    margin-bottom: 20px;
}

.no-news h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.no-news p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.btn-home {
    display: inline-block;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 106, 78, 0.3);
}

/* Sidebar Widgets */
.sidebar-widget {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bd-green);
}

.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-dark);
}

.widget-link {
    font-size: 0.7rem;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
}

.widget-link:hover {
    color: var(--bd-green);
}

.sidebar-latest-posts {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-latest-item {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-latest-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-latest-info {
    flex: 1;
}

.sidebar-latest-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

.sidebar-latest-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.sidebar-latest-info h4 a:hover {
    color: var(--bd-green);
}

.post-time {
    font-size: 0.65rem;
    color: var(--text-light);
}

.post-time i {
    margin-right: 3px;
}

.news-sidebar-ad {
    text-align: center;
    margin-bottom: 30px;
}

.news-sidebar-ad img {
    max-width: 100%;
    height: auto;
}

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

@media (max-width: 768px) {
    .category-header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .category-title {
        font-size: 1.4rem;
    }

    .category-news-grid {
        grid-template-columns: 1fr;
    }

    .subcategories-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media (max-width: 576px) {
    .category-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .category-title {
        font-size: 1.2rem;
    }

    .subcategories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================================== */
/* PHOTO PAGE STYLES (photo.php) - Auto-migrated        */
/* NOTE: Renamed classes to avoid conflicts:            */
/*   .photo-title      → .pho-page-title               */
/*   .related-img-overlay → .pho-related-img-overlay   */
/* ===================================================== */

/* ===================================================== */
/* SINGLE PHOTO PAGE STYLES */
/* ===================================================== */
.single-photo {
    background: var(--white);
    border-radius: 15px;
    padding: 35px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.photo-breadcrumb {
    margin-bottom: 20px;
    font-size: 0.8rem;
}

.photo-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
}

.photo-breadcrumb a:hover {
    color: var(--bd-green);
}

.photo-breadcrumb i {
    margin: 0 8px;
    font-size: 0.7rem;
    color: var(--text-light);
}

.photo-category-tag {
    margin-bottom: 15px;
}

.photo-category-tag a {
    display: inline-block;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
}

.photo-category-tag a i {
    margin-right: 5px;
}

.photo-category-tag a:hover {
    background: linear-gradient(135deg, #004d3a, #1b5e20);
}

/* RENAMED: .photo-title → .pho-page-title (conflict: style.css has .photo-title with different properties) */
.pho-page-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}

.photo-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}

/* Main Photo */
.photo-main {
    margin-bottom: 30px;
}

.photo-main-container {
    position: relative;
    text-align: center;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
}

.photo-main-container img {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 8px;
}

.photo-caption {
    margin-top: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: center;
    border-left: 3px solid var(--bd-green);
}

.photo-caption i {
    color: var(--bd-green);
    margin-right: 5px;
}

/* Photo Content */
.photo-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: 30px;
}

.photo-content img {
    max-width: 100%;
    height: auto;
    margin: 25px 0;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
}

.photo-content p {
    margin-bottom: 18px;
}

/* Gallery Section */
.photo-gallery-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bd-green);
}

.gallery-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.gallery-header h3 i {
    color: var(--bd-green);
    margin-right: 8px;
}

.gallery-header span {
    font-size: 0.75rem;
    color: var(--text-light);
}

.gallery-main {
    position: relative;
    text-align: center;
    margin-bottom: 15px;
}

.gallery-main img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
}

.gallery-main-caption {
    margin-top: 12px;
    padding: 10px 15px;
    background: white;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: center;
    border-left: 3px solid var(--bd-green);
}

.gallery-main-caption i {
    color: var(--bd-green);
    margin-right: 5px;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}

.gallery-nav:hover {
    background: var(--bd-green);
}

.gallery-nav.prev {
    left: 10px;
}

.gallery-nav.next {
    right: 10px;
}

.gallery-thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 0;
}

.gallery-thumbnails::-webkit-scrollbar {
    height: 6px;
}

.gallery-thumbnails::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 10px;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
    background: var(--bd-green);
    border-radius: 10px;
}

.gallery-thumb {
    flex-shrink: 0;
    width: 100px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
}

.gallery-thumb.active {
    border-color: var(--bd-green);
    transform: scale(1.02);
}

.gallery-thumb img {
    width: 100%;
    height: 70px;
    object-fit: cover;
}

/* Share Buttons */
.photo-share {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

/* .share-label, .share-buttons, .share-fb etc. are shared with news.php → already in style.css */
/* photo.php adds extra rule for .share-label i: */
.photo-share .share-label i {
    color: var(--bd-green);
    margin-right: 5px;
}

/* Related Photos */
.related-photos {
    background: var(--white);
    border-radius: 15px;
    padding: 25px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

/* .related-header, .related-icon, .related-title, .related-view-all */
/* are shared with news.php → already in style.css. Extra rules for photo: */
.related-view-all i {
    transition: transform 0.3s;
}

.related-view-all:hover i {
    transform: translateX(3px);
}

.related-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.related-photo-card {
    background: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
}

.related-photo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.related-photo-card a {
    text-decoration: none;
}

.related-photo-img {
    position: relative;
    height: 150px;
    overflow: hidden;
}

.related-photo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.related-photo-card:hover .related-photo-img img {
    transform: scale(1.05);
}

/* RENAMED: .related-img-overlay → .pho-related-img-overlay */
/* (conflict: style.css has .related-img-overlay with background: rgba(0,106,78,0.7), photo.php uses rgba(0,106,78,0.6)) */
.pho-related-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 106, 78, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.related-photo-card:hover .pho-related-img-overlay {
    opacity: 1;
}

.pho-related-img-overlay i {
    color: white;
    font-size: 1.5rem;
}

.related-photo-content {
    padding: 12px;
}

.related-photo-content h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
    color: var(--text-dark);
}

.related-photo-meta {
    font-size: 0.65rem;
    color: var(--text-light);
}

.related-photo-meta i {
    margin-right: 3px;
}

/* ===================================================== */
/* PHOTO PAGE SIDEBAR */
/* sidebar-widget, widget-header, widget-title, widget-link,  */
/* sidebar-latest-item, sidebar-latest-info, post-time        */
/* → already in style.css (shared). Photo-specific below:    */
/* ===================================================== */
.sidebar-latest-photos {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* .sidebar-latest-img in photo.php has overflow:hidden + border-radius:8px on the div.
   style.css (news page) puts border-radius on the img, not the div.
   Using pho- prefix to stay safe: */
.pho-sidebar-latest-img {
    width: 70px;
    height: 55px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
}

.pho-sidebar-latest-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* sidebar-ad: already in style.css (shared) */

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */
@media (max-width: 1024px) {
    .single-photo {
        padding: 25px;
    }

    .pho-page-title {
        font-size: 1.7rem;
    }

    .related-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .single-photo {
        padding: 20px;
    }

    .pho-page-title {
        font-size: 1.4rem;
    }

    .photo-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .meta-right {
        flex-wrap: wrap;
    }

    .gallery-nav {
        width: 30px;
        height: 30px;
    }

    .gallery-thumb {
        width: 70px;
    }

    .gallery-thumb img {
        height: 50px;
    }

    .related-photos-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 576px) {
    .single-photo {
        padding: 15px;
    }

    .pho-page-title {
        font-size: 1.2rem;
    }

    .author-avatar,
    .author-avatar-placeholder {
        width: 40px;
        height: 40px;
    }

    .share-buttons a,
    .share-copy {
        width: 35px;
        height: 35px;
        font-size: 0.85rem;
    }

    .photo-main-container img {
        max-height: 300px;
    }

    .gallery-main img {
        max-height: 250px;
    }

    .gallery-thumbnails {
        gap: 8px;
    }

    .gallery-thumb {
        width: 60px;
    }
}

/* ===================================================== */
/* ===================================================== */
/* PHOTO CATEGORY PAGE (photo-category.php)             */
/* NOTE: Renamed classes to avoid conflicts:            */
/*   .photo-gallery-grid → .phcat-gallery-grid         */
/*   .photo-meta         → .phcat-photo-meta           */
/* Sidebar uses shared photo.php classes:               */
/*   sidebar-widget, sidebar-ad, sidebar-latest-item,  */
/*   pho-sidebar-latest-img, sidebar-latest-info       */
/* ===================================================== */

/* ===================================================== */
/* PHOTO GALLERY GRID                                    */
/* RENAMED: .photo-gallery-grid → .phcat-gallery-grid   */
/* (conflict: style.css has 4col/gap:15px;              */
/*  photo-category needs 3col/gap:25px/mb:30px)         */
/* ===================================================== */
.phcat-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

/* ===================================================== */
/* PHOTO CARD (new - not in style.css)                  */
/* ===================================================== */
.photo-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.photo-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.photo-card-img {
    position: relative;
    height: 200px;
    overflow: hidden;
}

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

.photo-card:hover .photo-card-img img {
    transform: scale(1.05);
}

.photo-card:hover .img-overlay {
    opacity: 1;
}

.photo-card-content {
    padding: 15px;
}

.photo-card-content h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.photo-card-content h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

.photo-card-content h3 a:hover {
    color: var(--bd-green);
}

/* ===================================================== */
/* PHOTO META (category page version)                   */
/* RENAMED: .photo-meta → .phcat-photo-meta             */
/* (conflict: style.css has flex layout;                */
/*  photo-category uses font-size/color only)           */
/* ===================================================== */
.phcat-photo-meta {
    font-size: 0.7rem;
    color: var(--text-light);
}

.phcat-photo-meta i {
    margin-right: 5px;
    color: var(--bd-green);
}

/* ===================================================== */
/* NO PHOTOS (new - not in style.css)                   */
/* ===================================================== */
.no-photos {
    text-align: center;
    padding: 60px 20px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-light);
}

.no-photos i {
    color: var(--bd-green);
    margin-bottom: 20px;
}

.no-photos h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.no-photos p {
    color: var(--text-light);
    margin-bottom: 20px;
}

/* sidebar-widget, sidebar-ad, sidebar-latest-item, pho-sidebar-latest-img
   → shared with photo.php — already defined earlier in this file */

/* ===================================================== */
/* RESPONSIVE                                           */
/* NOTE: Shared classes (category-header, category-title*/
/* category-icon, subcategories-grid, pagination) are  */
/* already covered by category.php responsive blocks.  */
/* Only photo-category-specific classes listed here.   */
/* ===================================================== */
@media (max-width: 1024px) {
    .phcat-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .phcat-gallery-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .photo-card-img {
        height: 180px;
    }
}


/* ============================================================ */
/* VIDEO PAGE STYLES (video.php)                                */
/* ============================================================ */

/* ----- Single Video ----- */
.single-video {
    background: var(--white);
    border-radius: 15px;
    padding: 35px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.video-breadcrumb {
    margin-bottom: 20px;
    font-size: 0.8rem;
}

.video-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
}

.video-breadcrumb a:hover {
    color: var(--bd-green);
}

.video-breadcrumb i {
    margin: 0 8px;
    font-size: 0.7rem;
    color: var(--text-light);
}

.video-category-tag {
    margin-bottom: 15px;
}

.video-category-tag a {
    display: inline-block;
    background: linear-gradient(135deg, #c62828, #d32f2f);
    color: white;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
}

.video-category-tag a:hover {
    background: linear-gradient(135deg, #b71c1c, #c62828);
}

.video-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}

.video-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}

/* ----- Scoped overrides: different from global style.css ----- */
#video-page .author-avatar-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c62828, #d32f2f);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

#video-page .author-designation {
    font-size: 0.7rem;
    color: #d32f2f;
}

#video-page .meta-right div i {
    color: #d32f2f;
}

/* ----- Video Player ----- */
.video-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 25px;
    background: #000;
}

.video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-player-error {
    background: #f5f5f5;
    text-align: center;
    padding: 60px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.video-player-error i {
    color: #d32f2f;
    margin-bottom: 15px;
}

.video-player-error p {
    color: var(--text-light);
}

/* ----- Video Description ----- */
.video-description {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: 30px;
}

.video-description img {
    max-width: 100%;
    height: auto;
    margin: 25px 0;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
}

.video-description h1,
.video-description h2,
.video-description h3,
.video-description h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #d32f2f;
    font-weight: 700;
}

.video-description h2 {
    font-size: 1.6rem;
}

.video-description h3 {
    font-size: 1.4rem;
}

.video-description h4 {
    font-size: 1.2rem;
}

.video-description p {
    margin-bottom: 18px;
}

.video-description ul,
.video-description ol {
    margin: 15px 0 15px 25px;
}

.video-description li {
    margin-bottom: 8px;
}

.video-description blockquote {
    border-left: 4px solid #d32f2f;
    padding: 15px 20px;
    margin: 20px 0;
    background: #f8f9fa;
    font-style: italic;
    border-radius: 0 10px 10px 0;
}

/* ----- Share Buttons (video page) ----- */
.video-share {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

/* ----- Related Videos ----- */
.related-videos {
    background: var(--white);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

#video-page .related-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #d32f2f;
}

#video-page .related-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #c62828, #d32f2f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

#video-page .related-view-all {
    font-size: 0.75rem;
    color: #d32f2f;
    text-decoration: none;
    font-weight: 500;
}

#video-page .related-view-all:hover {
    color: #c62828;
}

.related-view-all i {
    transition: transform 0.3s;
}

.related-view-all:hover i {
    transform: translateX(3px);
}

.related-videos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.related-video-card {
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.related-video-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.related-video-img {
    position: relative;
    height: 140px;
    overflow: hidden;
}

.related-video-img a {
    display: block;
    height: 100%;
}

.related-video-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.related-video-card:hover .related-video-img img {
    transform: scale(1.05);
}

.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.related-video-card:hover .play-icon-overlay {
    background: #d32f2f;
    transform: translate(-50%, -50%) scale(1.1);
}

.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
}

.related-video-content {
    padding: 12px;
}

.related-video-content h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
}

.related-video-content h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.related-video-content h4 a:hover {
    color: #d32f2f;
}

/* ----- Sidebar Widget (video page) ----- */
.sidebar-widget {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

#video-page .widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #d32f2f;
}

#video-page .widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

#video-page .widget-link:hover {
    color: #d32f2f;
}

.sidebar-latest-videos {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-video-item {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-video-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-video-img {
    position: relative;
    width: 90px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.sidebar-video-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-icon-small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
}

.sidebar-video-info {
    flex: 1;
}

.sidebar-video-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

.sidebar-video-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.sidebar-video-info h4 a:hover {
    color: #d32f2f;
}

.video-time {
    font-size: 0.65rem;
    color: var(--text-light);
}

.video-time i {
    margin-right: 3px;
}

.sidebar-ad {
    text-align: center;
    margin-bottom: 30px;
}

.sidebar-ad img {
    max-width: 100%;
    height: auto;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .single-video {
        padding: 20px;
    }

    .video-title {
        font-size: 1.4rem;
    }

    .video-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .related-videos-grid {
        grid-template-columns: 1fr;
    }

    #video-page .related-header {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .single-video {
        padding: 15px;
    }

    .video-title {
        font-size: 1.2rem;
    }

    .author-avatar,
    #video-page .author-avatar-placeholder {
        width: 40px;
        height: 40px;
    }

    .share-buttons a,
    .share-copy {
        width: 35px;
        height: 35px;
        font-size: 0.85rem;
    }

    .related-video-img {
        height: 120px;
    }

    .play-icon-overlay {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

/* ==================================================================================
   VIDEO CATEGORY PAGE — style from video-category.php
   All conflict classes scoped under #video-category-page to override style.css
   without changing any existing rule. New classes added globally.
   ================================================================================== */

/* =====================================================
   NEW CLASSES (not in style.css at all)
   ===================================================== */

.videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

.video-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.video-card:hover .video-thumb img {
    transform: scale(1.05);
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(198, 40, 40, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.play-overlay i {
    color: white;
    font-size: 1.5rem;
}

.video-card:hover .play-overlay {
    transform: translate(-50%, -50%) scale(1.1);
    background: #c62828;
}

.duration-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.video-meta i {
    margin-right: 4px;
    color: #c62828;
}

.video-excerpt {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 12px;
}

.watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #c62828;
    color: white;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.watch-btn:hover {
    background: #b71c1c;
    transform: translateY(-2px);
}

.no-videos {
    text-align: center;
    padding: 60px 20px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-light);
}

.no-videos i {
    color: #c62828;
    margin-bottom: 20px;
}

.no-videos h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.no-videos p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.sidebar-video-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    background: rgba(198, 40, 40, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.sidebar-video-img:hover .sidebar-play-icon {
    opacity: 1;
}

.sidebar-play-icon i {
    color: white;
    font-size: 0.6rem;
}

/* =====================================================
   CONFLICT CLASSES — scoped under #video-category-page
   so existing style.css rules are NOT affected
   ===================================================== */

#video-category-page .category-header {
    background: linear-gradient(135deg, #c62828, #b71c1c);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
}

#video-category-page .subcategories-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #c62828;
    color: var(--text-dark);
}

#video-category-page .subcategories-title i {
    color: #c62828;
    margin-right: 8px;
}

#video-category-page .subcategory-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
    border-color: #c62828;
}

#video-category-page .subcategory-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #c62828, #b71c1c);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: white;
    font-size: 1.2rem;
}

#video-category-page .video-thumb {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: #000;
}

#video-category-page .video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
    opacity: 0.9;
}

.video-card-content {
    padding: 15px;
}

.video-card-content h2 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}

.video-card-content h2 a {
    color: var(--text-dark);
    text-decoration: none;
}

.video-card-content h2 a:hover {
    color: #c62828;
}

.vcat-video-meta {
    font-size: 0.7rem;
    color: var(--text-light);
}

.vcat-video-meta i {
    margin-right: 4px;
    color: #c62828;
}

#video-category-page .widget-header {
    border-bottom: 2px solid #d32f2f;
}

#video-category-page .widget-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

#video-category-page .widget-link:hover {
    color: #d32f2f;
}

#video-category-page .sidebar-video-info h4 a:hover {
    color: #d32f2f;
}

#video-category-page .btn-home {
    display: inline-block;
    background: linear-gradient(135deg, #c62828, #b71c1c);
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s;
}

#video-category-page .btn-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.3);
}

/* ===================================================== */
/* LOAD MORE BUTTON - video-category red theme           */
/* ===================================================== */
#video-category-page .vcat-load-more-btn {
    background: linear-gradient(135deg, #c62828, #b71c1c);
}

#video-category-page .vcat-load-more-btn:hover {
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.35);
}

#video-category-page .sidebar-widget {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

#video-category-page .sidebar-ad {
    text-align: center;
    margin-bottom: 30px;
}

/* =====================================================
   RESPONSIVE — VIDEO CATEGORY PAGE
   ===================================================== */

@media (max-width: 1024px) {
    .videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #video-category-page .category-header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    #video-category-page .category-title {
        font-size: 1.4rem;
    }

    .videos-grid {
        grid-template-columns: 1fr;
    }

    #video-category-page .subcategories-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media (max-width: 576px) {
    #video-category-page .category-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    #video-category-page .category-title {
        font-size: 1.2rem;
    }

    #video-category-page .subcategories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #video-category-page .video-thumb {
        height: 160px;
    }

    .play-overlay {
        width: 40px;
        height: 40px;
    }

    .play-overlay i {
        font-size: 1.2rem;
    }
}

/* ===================================================== */
/* OPINION PAGE (opinion.php) - COMPONENT STYLES        */
/* Moved from opinion.php inline <style> block          */
/* NOTE: Conflicting class names renamed with opn- prefix */
/* ===================================================== */

/* ===================================================== */
/* SINGLE OPINION PAGE STYLES */
/* ===================================================== */
.single-opinion {
    background: var(--white);
    border-radius: 15px;
    padding: 35px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.opinion-breadcrumb {
    margin-bottom: 20px;
    font-size: 0.8rem;
}

.opinion-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
}

.opinion-breadcrumb a:hover {
    color: var(--bd-green);
}

.opinion-breadcrumb i {
    margin: 0 8px;
    font-size: 0.7rem;
    color: var(--text-light);
}

.opinion-category-tag {
    margin-bottom: 15px;
}

.opinion-category-tag a {
    display: inline-block;
    background: linear-gradient(135deg, #e65100, #f57c00);
    color: white;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
}

.opinion-category-tag a:hover {
    background: linear-gradient(135deg, #bf360c, #e65100);
}

.opinion-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}

.opinion-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 20px;
    border-left: 4px solid #f57c00;
    padding-left: 15px;
    font-style: italic;
}

.opinion-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}

/* RENAMED: .author-avatar-placeholder → .opn-author-avatar-placeholder
   (conflict: style.css uses green gradient #006a4e/#2e7d32,
    opinion.php uses orange gradient #e65100/#f57c00) */
.opn-author-avatar-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e65100, #f57c00);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

/* RENAMED: .author-designation → .opn-author-designation
   (conflict: style.css uses color: var(--bd-green),
    opinion.php uses color: #f57c00) */
.opn-author-designation {
    font-size: 0.7rem;
    color: #f57c00;
}

/* opinion-page scoped: .meta-right div i uses #f57c00
   (conflict: style.css uses color: var(--bd-green)) */
.single-opinion .meta-right div i {
    color: #f57c00;
}

.opinion-featured-image {
    margin-bottom: 30px;
}

.opinion-featured-image img {
    width: 100%;
    border-radius: 12px;
}

.opinion-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-dark);
}

.opinion-content img {
    max-width: 100%;
    height: auto;
    margin: 25px 0;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
}

.opinion-content h1,
.opinion-content h2,
.opinion-content h3,
.opinion-content h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #f57c00;
    font-weight: 700;
}

.opinion-content h2 {
    font-size: 1.6rem;
}

.opinion-content h3 {
    font-size: 1.4rem;
}

.opinion-content h4 {
    font-size: 1.2rem;
}

.opinion-content p {
    margin-bottom: 18px;
}

.opinion-content ul,
.opinion-content ol {
    margin: 15px 0 15px 25px;
}

.opinion-content li {
    margin-bottom: 8px;
}

.opinion-content blockquote {
    border-left: 4px solid #f57c00;
    padding: 15px 20px;
    margin: 20px 0;
    background: #f8f9fa;
    font-style: italic;
    border-radius: 0 10px 10px 0;
}

.opinion-share {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

/* ===================================================== */
/* RELATED OPINIONS SECTION */
/* ===================================================== */
.related-opinions {
    background: var(--white);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

/* RENAMED: .related-header → .opn-related-header
   (conflict: style.css border-bottom: 2px solid var(--bd-green),
    opinion.php border-bottom: 2px solid #f57c00) */
.opn-related-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f57c00;
}

/* RENAMED: .related-icon → .opn-related-icon
   (conflict: style.css background: linear-gradient(135deg, #006a4e, #2e7d32),
    opinion.php background: linear-gradient(135deg, #e65100, #f57c00)) */
.opn-related-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #e65100, #f57c00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.opn-related-title {
    flex: 1;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.opn-related-view-all {
    font-size: 0.75rem;
    color: #f57c00;
    text-decoration: none;
    font-weight: 500;
}

.opn-related-view-all:hover {
    color: #e65100;
}

.opn-related-view-all i {
    transition: transform 0.3s;
}

.opn-related-view-all:hover i {
    transform: translateX(3px);
}

.related-opinions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.related-opinion-card {
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.related-opinion-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.related-opinion-img {
    position: relative;
    height: 140px;
    overflow: hidden;
}

.related-opinion-img a {
    display: block;
    height: 100%;
}

.related-opinion-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.related-opinion-card:hover .related-opinion-img img {
    transform: scale(1.05);
}

/* RENAMED: .related-img-overlay → .opn-related-img-overlay
   (conflict: style.css background: rgba(0,106,78,0.7),
    opinion.php background: rgba(230,81,0,0.7)) */
.opn-related-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(230, 81, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.related-opinion-card:hover .opn-related-img-overlay {
    opacity: 1;
}

.opn-related-img-overlay i {
    color: white;
    font-size: 1.5rem;
}

.related-opinion-content {
    padding: 12px;
}

.related-opinion-content h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
}

.related-opinion-content h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.related-opinion-content h4 a:hover {
    color: #f57c00;
}

.related-opinion-meta {
    font-size: 0.65rem;
    color: var(--text-light);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.related-opinion-meta i {
    margin-right: 3px;
}

/* ===================================================== */
/* SIDEBAR WIDGET STYLES (opinion-scoped)               */
/* ===================================================== */

/* RENAMED: .widget-header → .opn-widget-header
   (conflict: style.css border-bottom: 2px solid var(--bd-green) + position:relative,
    opinion.php border-bottom: 2px solid #f57c00 + no position:relative) */
.opn-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f57c00;
}

.opn-widget-header .widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* RENAMED: .widget-link → .opn-widget-link
   (conflict: style.css .widget-link:hover color: var(--bd-green),
    opinion.php .widget-link:hover color: #f57c00) */
.opn-widget-link {
    font-size: 0.7rem;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
}

.opn-widget-link:hover {
    color: #f57c00;
}

/* RENAMED: .sidebar-latest-info → .opn-sidebar-latest-info
   (conflict: .sidebar-latest-info h4 a:hover color: var(--bd-green) in style.css,
    opinion.php uses color: #f57c00) */
.opn-sidebar-latest-info {
    flex: 1;
}

.opn-sidebar-latest-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

.opn-sidebar-latest-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.opn-sidebar-latest-info h4 a:hover {
    color: #f57c00;
}

/* opinion-scoped .post-time: adds display:flex + gap + flex-wrap
   (style.css .post-time only sets font-size + color, these additions
    are scoped so they don't affect other pages) */
.single-opinion~.related-opinions .related-opinion-meta,
.opn-sidebar-latest-info .post-time {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===================================================== */
/* RESPONSIVE - OPINION PAGE */
/* ===================================================== */
@media (max-width: 768px) {
    .single-opinion {
        padding: 20px;
    }

    .opinion-title {
        font-size: 1.4rem;
    }

    .opinion-subtitle {
        font-size: 0.95rem;
    }

    .opinion-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .related-opinions-grid {
        grid-template-columns: 1fr;
    }

    .opn-related-header {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .single-opinion {
        padding: 15px;
    }

    .opinion-title {
        font-size: 1.2rem;
    }

    .opn-author-avatar-placeholder {
        width: 40px;
        height: 40px;
    }

    .related-opinion-img {
        height: 120px;
    }
}

/* ===================================================== */
/* OPINION CATEGORY PAGE (opinion-category.php) STYLES  */
/* Moved from opinion-category.php inline <style> block */
/* NOTE: Conflicting class names renamed with opcat- prefix */
/* ===================================================== */

/* ===================================================== */
/* CATEGORY HEADER */
/* ===================================================== */

/* RENAMED: .category-header → .opcat-category-header
   (conflict: style.css bg: green gradient #006a4e/#2e7d32,
    opinion-category.php bg: orange gradient #e65100/#f57c00) */
.opcat-category-header {
    background: linear-gradient(135deg, #e65100, #f57c00);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
}

/* ===================================================== */
/* SUB-CATEGORIES SECTION */
/* ===================================================== */

/* RENAMED: .subcategories-title → .opcat-subcategories-title
   (conflict: style.css border-bottom/icon color: var(--bd-green),
    opinion-category.php border-bottom/icon color: #f57c00) */
.opcat-subcategories-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f57c00;
    color: var(--text-dark);
}

.opcat-subcategories-title i {
    color: #f57c00;
    margin-right: 8px;
}

/* RENAMED: .subcategory-card (hover+icon) → .opcat-subcategory-card
   (conflict: style.css .subcategory-card:hover border-color: var(--bd-green),
    opinion-category.php border-color: #f57c00) */
.opcat-subcategory-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid var(--border-color);
}

.opcat-subcategory-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
    border-color: #f57c00;
}

.opcat-subcategory-card img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 8px;
}

/* RENAMED: .subcategory-icon → .opcat-subcategory-icon
   (conflict: style.css bg: linear-gradient(135deg, #006a4e, #2e7d32),
    opinion-category.php bg: linear-gradient(135deg, #e65100, #f57c00)) */
.opcat-subcategory-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #e65100, #f57c00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: white;
    font-size: 1.2rem;
}

.opcat-subcategory-card span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-dark);
    display: block;
}

/* ===================================================== */
/* OPINIONS GRID */
/* ===================================================== */
/* ===================================================== */
/* NO OPINIONS STATE */
/* ===================================================== */
.no-opinions {
    text-align: center;
    padding: 60px 20px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-light);
}

.no-opinions i {
    color: #f57c00;
    margin-bottom: 20px;
}

.no-opinions h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.no-opinions p {
    color: var(--text-light);
    margin-bottom: 20px;
}

/* RENAMED: .btn-home → .opcat-btn-home
   (conflict: style.css bg: green gradient linear-gradient(135deg,#006a4e,#2e7d32) + box-shadow: rgba(0,106,78,0.3),
    opinion-category.php bg: orange gradient linear-gradient(135deg,#e65100,#f57c00) + box-shadow: rgba(230,81,0,0.3)) */
.opcat-btn-home {
    display: inline-block;
    background: linear-gradient(135deg, #e65100, #f57c00);
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s;
}

.opcat-btn-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(230, 81, 0, 0.3);
}

/* ===================================================== */
/* LOAD MORE BUTTON - opinion-category orange theme     */
/* ===================================================== */
#opinion-category-page .opinion-load-more-btn {
    background: linear-gradient(135deg, #e65100, #f57c00);
}

#opinion-category-page .opinion-load-more-btn:hover {
    box-shadow: 0 4px 12px rgba(230, 81, 0, 0.35);
}

#opinion-category-page .opinion-load-more-end {
    color: #f57c00;
}

/* ===================================================== */
/* OPINION GRID & CARD - opinion-category scoped       */
/* (matches index.php style, scoped to avoid conflict) */
/* ===================================================== */
#opinion-category-page .opinion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

#opinion-category-page .opinion-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s;
}

#opinion-category-page .opinion-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

#opinion-category-page .opinion-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
    padding-right: 30px;
}

#opinion-category-page .opinion-card h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

#opinion-category-page .opinion-card h3 a:hover {
    color: var(--bd-green);
}

/* ===================================================== */
/* RESPONSIVE - OPINION CATEGORY PAGE */
/* ===================================================== */
@media (max-width: 1024px) {
    #opinion-category-page .opinion-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .opcat-category-header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .category-title {
        font-size: 1.4rem;
    }

    #opinion-category-page .opinion-grid {
        grid-template-columns: 1fr;
    }

    .subcategories-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media (max-width: 576px) {
    .category-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .category-title {
        font-size: 1.2rem;
    }

    .subcategories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #opinion-category-page .opinion-card {
        padding: 18px;
    }

    #opinion-category-page .opinion-card h3 {
        font-size: 1rem;
    }

}


/* ===================================================== */
/* SINGLE SUBMISSION PAGE STYLES                         */
/* FILE: submission.php                                  */
/* ===================================================== */

/* ---- Article wrapper ---- */
.single-submission {
    background: var(--white);
    border-radius: 15px;
    padding: 35px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

/* ---- Breadcrumb ---- */
.submission-breadcrumb {
    margin-bottom: 20px;
    font-size: 0.8rem;
}

.submission-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
}

.submission-breadcrumb a:hover {
    color: var(--bd-green);
}

.submission-breadcrumb i {
    margin: 0 8px;
    font-size: 0.7rem;
    color: var(--text-light);
}

/* ---- Type Badge ---- */
.submission-type-badge {
    margin-bottom: 15px;
}

.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-news {
    background: #e3f2fd;
    color: #1976d2;
}

.badge-photo {
    background: #e8f5e9;
    color: #2e7d32;
}

.badge-video {
    background: #fff3e0;
    color: #f57c00;
}

/* ---- Title ---- */
.submission-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.3;
}

/* ---- Meta Info
   CONFLICT: .submission-meta already exists in style.css with different props.
   Scoped under .single-submission to override without affecting other pages. ---- */
.single-submission .submission-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}

/* .author-info, .author-details, .author-name, .meta-right, .meta-right div,
   .meta-right div i, .image-caption, .share-label, .share-buttons,
   .share-buttons a/.share-copy, .share-fb/twitter/linkedin/wa/copy
   — 100% identical to style.css definitions → no repeat needed */

.author-icon {
    width: 45px;
    height: 45px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--bd-green);
}

.author-location {
    font-size: 0.7rem;
    color: var(--text-light);
}

.author-location i {
    margin-right: 3px;
}

/* ---- Featured Image with Popup ---- */
.submission-featured-image {
    margin-bottom: 30px;
    position: relative;
}

.submission-featured-image a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.submission-featured-image img {
    width: 100%;
    transition: transform 0.5s;
}

.submission-featured-image a:hover img {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 106, 78, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.submission-featured-image a:hover .image-overlay {
    opacity: 1;
}

.image-overlay i {
    color: white;
    font-size: 2rem;
}

/* ---- Gallery ---- */
.submission-gallery {
    margin-bottom: 30px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.gallery-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.gallery-item a {
    display: block;
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.5s;
}

.gallery-item a:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 106, 78, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.gallery-item a:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay i {
    color: white;
    font-size: 2rem;
}

.gallery-caption {
    padding: 10px;
    font-size: 0.75rem;
    color: var(--text-light);
    text-align: center;
    background: #f8f9fa;
}

/* ---- Video Container ---- */
.submission-video {
    margin-bottom: 30px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

/* ---- Content ---- */
.submission-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-dark);
}

.submission-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--bd-green);
}

.submission-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 10px;
}

.submission-content p {
    margin-bottom: 18px;
}

/* ---- Author Card ---- */
.author-card {
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
}

.author-card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.author-card-info {
    flex: 1;
}

.author-card-info h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.author-card-info p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.author-card-info p i {
    width: 20px;
    color: var(--bd-green);
    margin-right: 8px;
}

/* ---- Share Buttons ---- */
.submission-share {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

/* ---- Sidebar latest badge & mini-badge ---- */
.sidebar-latest-badge {
    flex-shrink: 0;
}

.mini-badge {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.mini-badge.badge-news {
    background: #e3f2fd;
    color: #1976d2;
}

.mini-badge.badge-photo {
    background: #e8f5e9;
    color: #2e7d32;
}

.mini-badge.badge-video {
    background: #fff3e0;
    color: #f57c00;
}

/* ---- post-time flex layout in submission sidebar
   CONFLICT: style.css .post-time has font-size+color only; adding flex globally
   would affect other pages. Scoped here to avoid that. ---- */
.sidebar-latest-badge~.sidebar-latest-info .post-time {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---- CTA Widget background fix
   ROOT CAUSE: style.css has multiple .sidebar-widget { background: white } rules
   at lines 544, 5605, 6038, 7239. Since .sidebar-widget and .cta-widget have
   equal specificity (0,1,0), the LAST .sidebar-widget declaration (line 7239)
   was overriding .cta-widget's green gradient.
   FIX: Re-declare .cta-widget background here (after all .sidebar-widget rules)
   so cascade order restores the correct green gradient. ---- */
.cta-widget {
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    text-align: center;
    padding: 25px 20px !important;
}

/* ---- Magnific Popup Custom Styles ---- */
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

.mfp-title {
    font-size: 14px;
    text-align: center;
    padding: 10px;
}



/* ===================================================== */
/* SUBMISSIONS LIST PAGE (submissions.php)               */
/* ===================================================== */

/* Page Header */
.submissions-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 30px 20px;
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.submissions-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.submissions-title i {
    color: var(--bd-green);
    margin-right: 10px;
}

.submissions-description {
    color: var(--text-light);
    font-size: 0.95rem;
    max-width: 600px;
    margin: 0 auto 20px;
}

.submissions-cta {
    margin-top: 5px;
}

.btn-submit-story {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    padding: 12px 30px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-submit-story:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 106, 78, 0.3);
}

/* Statistics Bar */
.submissions-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
    padding: 20px;
    background: white;
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.stat-item {
    text-align: center;
    min-width: 80px;
}

.stat-icon {
    font-size: 1.5rem;
    color: var(--bd-green);
    display: block;
    margin-bottom: 8px;
}

.stat-count {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    display: block;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-light);
}

/* Featured Submission */
/* NOTE: .featured-content conflict → renamed .subs-featured-content */
.featured-submission {
    background: linear-gradient(135deg, #fff8f0, #fff3e0);
    border-radius: 15px;
    margin-bottom: 30px;
    overflow: hidden;
    border: 1px solid #ffe0b2;
}

.featured-inner {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.featured-img {
    position: relative;
    width: 250px;
    flex-shrink: 0;
}

.featured-img img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
}

.featured-type {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.6rem;
    font-weight: 600;
    color: white;
}

.featured-type.news {
    background: #1976d2;
}

.featured-type.photo {
    background: #2e7d32;
}

.featured-type.video {
    background: #f57c00;
}

.featured-type i {
    margin-right: 3px;
}

/* RENAMED from .featured-content → .subs-featured-content */
/* (conflict: style.css .featured-content is position:absolute gradient overlay) */
.subs-featured-content {
    flex: 1;
}

.featured-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.featured-label {
    display: inline-block;
    background: linear-gradient(135deg, #f57c00, #e65100);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.featured-label i {
    margin-right: 5px;
}

.subs-featured-content h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.subs-featured-content h2 a {
    color: var(--text-dark);
    text-decoration: none;
}

.subs-featured-content h2 a:hover {
    color: var(--bd-green);
}

.featured-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 0.7rem;
    color: var(--text-light);
}

.featured-meta i {
    margin-right: 3px;
}

.featured-excerpt {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 12px;
    max-height: 100px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--bd-green);
    text-decoration: none;
    font-weight: 500;
}

.read-more-btn:hover {
    gap: 8px;
}

/* Filter Bar */
.filter-bar {
    margin-bottom: 30px;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.filter-group {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 40px;
    overflow: hidden;
    flex: 1;
    max-width: 300px;
}

.filter-search {
    flex: 1;
    padding: 10px 15px;
    border: none;
    outline: none;
    font-size: 0.85rem;
}

.filter-btn {
    background: var(--bd-green);
    border: none;
    padding: 10px 15px;
    color: white;
    cursor: pointer;
}

.filter-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.8rem;
    color: var(--text-dark);
    transition: all 0.3s;
}

.filter-tab:hover,
.filter-tab.active {
    background: var(--bd-green);
    border-color: var(--bd-green);
    color: white;
}

.filter-tab .count {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Submissions Grid */
/* RENAMED from .submissions-grid → .subs-page-grid */
/* (conflict: style.css uses repeat(2,1fr)/gap:20px/mb:25px; */
/*  submissions.php uses repeat(3,1fr)/gap:25px/mb:30px)    */
.subs-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

/* Submission Card */
/* RENAMED from .submission-card → .subs-page-card */
/* (conflict: style.css has padding:15px/margin-bottom:15px/no overflow/no box-shadow/no transition) */
.subs-page-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.subs-page-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

/* Submission Image */
.subs-page-card .submission-img {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.subs-page-card .submission-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.subs-page-card:hover .submission-img img {
    transform: scale(1.05);
}

.submission-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 106, 78, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.subs-page-card:hover .submission-overlay {
    opacity: 1;
}

.submission-overlay i {
    color: white;
    font-size: 1.5rem;
}

/* Submission Badge (card version) */
/* RENAMED from .submission-badge → .subs-page-badge */
/* (conflict: style.css .submission-badge has different padding/radius/no position:absolute) */
.subs-page-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
}

.subs-page-badge.badge-news {
    background: #1976d2;
}

.subs-page-badge.badge-photo {
    background: #2e7d32;
}

.subs-page-badge.badge-video {
    background: #f57c00;
}

.subs-page-badge i {
    margin-right: 4px;
}

/* Submission Card Content */
/* RENAMED from .submission-content → .subs-page-content */
/* (conflict: style.css .submission-content is for single-submission page: font-size:1rem/line-height:1.8) */
.subs-page-content {
    padding: 15px;
}

.subs-page-content h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.subs-page-content h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

.subs-page-content h3 a:hover {
    color: var(--bd-green);
}

/* Submission Meta (card version) */
/* RENAMED from .submission-meta → .subs-page-meta */
/* (conflict: style.css .submission-meta is for single-submission page: flex/justify-content:space-between/gap:20px/border-bottom) */
.subs-page-meta {
    display: flex;
    gap: 12px;
    font-size: 0.65rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.subs-page-meta i {
    margin-right: 3px;
}

.submission-excerpt {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 12px;
    max-height: 80px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.submission-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

.read-more {
    font-size: 0.7rem;
    color: var(--bd-green);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.read-more:hover {
    gap: 8px;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 50px;
    background: white;
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.no-results i {
    color: var(--bd-green);
    margin-bottom: 20px;
}

.no-results h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.no-results p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.btn-reset,
.btn-submit-first {
    display: inline-block;
    background: var(--bd-green);
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
}

.btn-submit-first i {
    margin-right: 8px;
}

/* Popular Submissions Widget */
.popular-submissions-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.popular-submission-item {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.popular-submission-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Widget Title (submissions page) */
/* RENAMED from .widget-title → .subs-widget-title */
/* (conflict: style.css .widget-title font-size:1.1rem/margin-bottom:20px/position:relative + ::after pseudo) */
.subs-widget-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bd-green);
}

/* Popular Rank (submissions page) */
/* RENAMED from .popular-rank → .subs-popular-rank */
/* (conflict: style.css .popular-rank is position:absolute/border-radius:50%/background:var(--bd-red)) */
.subs-popular-rank {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #e65100, #f57c00);
    color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.popular-submission-info {
    flex: 1;
}

.popular-submission-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}

.popular-submission-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.popular-submission-info h4 a:hover {
    color: #f57c00;
}

.popular-submission-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    color: var(--text-light);
    flex-wrap: wrap;
}

/* Type Badge (submissions sidebar) */
/* RENAMED from .type-badge → .subs-type-badge */
/* (conflict: style.css .type-badge has padding:6px 16px/border-radius:30px/gap:8px — a tag-style badge) */
.subs-type-badge {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.6rem;
}

.subs-type-badge.news {
    background: #1976d2;
}

.subs-type-badge.photo {
    background: #2e7d32;
}

.subs-type-badge.video {
    background: #f57c00;
}

.popular-submission-meta i {
    margin-right: 2px;
}

/* ===================================================== */
/* SUBMISSIONS PAGE — RESPONSIVE                         */
/* ===================================================== */
@media (max-width: 1024px) {
    .subs-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .submissions-header {
        padding: 20px;
    }

    .submissions-title {
        font-size: 1.5rem;
    }

    .featured-inner {
        flex-direction: column;
    }

    .featured-img {
        width: 100%;
    }

    .featured-img img {
        height: 180px;
    }

    .featured-header {
        justify-content: flex-start;
        margin-top: 10px;
    }

    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        max-width: 100%;
    }

    .filter-tabs {
        justify-content: center;
    }

    .subs-page-grid {
        grid-template-columns: 1fr;
    }

    .submissions-stats {
        gap: 10px;
    }

    .stat-item {
        min-width: 70px;
    }
}

@media (max-width: 576px) {
    .submissions-title {
        font-size: 1.3rem;
    }

    .stat-count {
        font-size: 1.2rem;
    }

    .stat-icon {
        font-size: 1.2rem;
    }

    .filter-tab {
        padding: 5px 12px;
        font-size: 0.7rem;
    }

    .featured-label {
        position: static;
        display: inline-block;
        margin-bottom: 10px;
    }

    .featured-inner {
        padding: 15px;
    }

}


/* ===================================================== */
/* SUBMISSION PAGE STYLES (add-submission.php)           */
/* ===================================================== */

/* ===================================================== */
/* SUBMISSION PAGE STYLES (including CAPTCHA) */
/* ===================================================== */

.sub-submission-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

.sub-submission-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--bd-green);
    margin-bottom: 15px;
}

.sub-submission-title i {
    margin-right: 10px;
}

.submission-description {
    color: var(--text-light);
    font-size: 0.95rem;
    max-width: 700px;
    margin: 0 auto;
}

.guidelines-card {
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}

.guidelines-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--bd-green);
}

.guidelines-card h3 i {
    margin-right: 8px;
}

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

.guideline-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.guideline-icon {
    color: var(--bd-green);
    font-size: 1rem;
    margin-top: 2px;
}

.guideline-text strong {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 3px;
    color: var(--text-dark);
}

.guideline-text p {
    font-size: 0.75rem;
    color: var(--text-light);
    margin: 0;
}

.submission-form-card {
    background: var(--white);
    border-radius: 15px;
    padding: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.submission-form-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--bd-green);
    color: var(--text-dark);
}

.submission-form-card h3 i {
    color: var(--bd-green);
    margin-right: 8px;
}

.type-selector {
    margin-bottom: 25px;
}

.type-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.type-btn {
    flex: 1;
    padding: 12px 20px;
    background: #f8f9fa;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.type-btn i {
    font-size: 1.1rem;
}

.type-btn:hover {
    border-color: var(--bd-green);
    background: rgba(0, 106, 78, 0.05);
}

.type-btn.active {
    background: var(--bd-green);
    border-color: var(--bd-green);
    color: white;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-dark);
    font-size: 0.85rem;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--bd-green);
    box-shadow: 0 0 0 3px rgba(0, 106, 78, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.form-hint {
    display: block;
    margin-top: 5px;
    font-size: 0.7rem;
    color: var(--text-light);
}

.form-hint i {
    margin-right: 3px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.file-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.file-upload-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.file-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white !important;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.file-upload-label i {
    color: white !important;
}

.file-upload-label:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 106, 78, 0.3);
}

.file-name {
    color: var(--text-light);
    font-size: 0.85rem;
    background: #f5f5f5;
    padding: 8px 15px;
    border-radius: 8px;
}

.gallery-row {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
}

.gallery-preview {
    margin: 10px 0;
    position: relative;
    display: inline-block;
}

.gallery-preview img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--bd-green);
}

.remove-preview {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: #d32f2f;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-caption-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 10px 0;
    font-size: 0.85rem;
}

.gallery-caption-input:focus {
    outline: none;
    border-color: var(--bd-green);
}

.remove-gallery-btn {
    background: #d32f2f;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.75rem;
}

.btn-add-gallery {
    background: none;
    border: 2px dashed var(--border-color);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--bd-green);
    font-weight: 500;
    transition: all 0.3s;
    width: 100%;
}

.btn-add-gallery:hover {
    border-color: var(--bd-green);
    background: rgba(0, 106, 78, 0.05);
}

.youtube-preview {
    margin-top: 10px;
}

.youtube-preview img {
    max-width: 200px;
    border-radius: 8px;
    border: 2px solid var(--bd-green);
}

/* CAPTCHA Styles */
.captcha-row {
    margin: 20px 0;
}

.captcha-box {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    background: #f0f7f0;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid #c8e6c9;
}

.captcha-text {
    font-size: 1.2rem;
    font-weight: 700;
    background: white;
    padding: 8px 16px;
    border-radius: 30px;
    color: #2e7d32;
    border: 1px dashed #2e7d32;
    font-family: monospace;
}

.captcha-input {
    width: 120px;
    text-align: center;
}

.captcha-refresh {
    background: #006a4e;
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
}

.captcha-refresh:hover {
    background: #004d3a;
    transform: rotate(180deg);
}

.alert {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.85rem;
}

.sub-alert-error {
    background: #fdecea;
    color: #d32f2f;
    border: 1px solid #f5c6cb;
}

.sub-alert-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.form-actions {
    margin-top: 30px;
    text-align: center;
}

.btn-submit {
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    border: none;
    padding: 14px 40px;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 106, 78, 0.3);
}

.sub-sidebar-widget {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.sub-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bd-green);
}

.sub-widget-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-dark);
}

.sub-widget-title i {
    color: var(--bd-green);
    margin-right: 6px;
}

.widget-link {
    font-size: 0.7rem;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
}

.widget-link:hover {
    color: var(--bd-green);
}

.sidebar-latest-posts {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-latest-item {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-latest-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sub-sidebar-latest-img {
    width: 70px;
    height: 55px;
    flex-shrink: 0;
}

.sub-sidebar-latest-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.sub-sidebar-latest-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

.sub-sidebar-latest-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.sub-sidebar-latest-info h4 a:hover {
    color: var(--bd-green);
}

.sub-post-time {
    font-size: 0.65rem;
    color: var(--text-light);
}

.sub-post-time i {
    margin-right: 3px;
}

.info-widget {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}

.info-content p {
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--text-dark);
}

.info-content i {
    color: var(--bd-green);
    margin-right: 8px;
}

.sub-sidebar-ad {
    text-align: center;
    margin-bottom: 30px;
}

.plain-textarea {
    font-family: 'Poppins', 'Hind Siliguri', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .submission-form-card {
        padding: 20px;
    }

    .guidelines-grid {
        grid-template-columns: 1fr;
    }

    .type-buttons {
        flex-direction: column;
    }

    .form-row {
        flex-direction: column;
    }

    .form-row .form-group {
        width: 100%;
    }

    .sub-submission-title {
        font-size: 1.5rem;
    }

    .captcha-box {
        flex-direction: column;
        align-items: stretch;
    }

    .captcha-input {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .submission-form-card {
        padding: 15px;
    }

    .file-upload-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .file-upload-label {
        justify-content: center;
    }
}


/* ===================================================== */
/* POLLS PAGE STYLES (polls.php)                         */
/* ===================================================== */

/* Polls Header */
.polls-header {
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    border-radius: 15px;
    padding: clamp(20px, 4vw, 35px) clamp(15px, 4vw, 30px);
    margin-bottom: 30px;
    color: white;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

.polls-title {
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    font-weight: 800;
    margin-bottom: 15px;
}

.polls-title i {
    margin-right: 10px;
}

.polls-description {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Section Title */
.section-title {
    font-size: clamp(1.1rem, 3.5vw, 1.4rem);
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bd-green);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.section-title i {
    color: var(--bd-green);
    margin-right: 8px;
}

.section-badge {
    font-size: 0.75rem;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
    white-space: nowrap;
}

/* Polls Grid */
.polls-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
}

/* Poll Card */
.poll-card {
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s;
    width: 100%;
    box-sizing: border-box;
}

.poll-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.poll-card-header {
    padding: clamp(12px, 3vw, 15px) clamp(15px, 4vw, 25px);
    background: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
}

.poll-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.status-badge.active {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.active i {
    font-size: 0.6rem;
    animation: pulse 1.5s infinite;
}

.status-badge.completed {
    background: #e3f2fd;
    color: #1976d2;
}

.poll-deadline {
    font-size: 0.7rem;
    color: #f57c00;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.poll-deadline.expired {
    color: #d32f2f;
}

.poll-deadline.permanent {
    color: #1976d2;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.poll-card-body {
    padding: clamp(15px, 4vw, 25px);
    box-sizing: border-box;
}

/* RENAMED: .poll-question → .plls-poll-question (CONFLICT with style.css) */
.plls-poll-question {
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.4;
    word-break: break-word;
}

.poll-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

.poll-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: clamp(8px, 2.5vw, 10px) clamp(12px, 3vw, 15px);
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s;
    width: 100%;
    box-sizing: border-box;
}

.poll-option-label:hover {
    background: #e8f5e9;
}

.poll-option-label input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--bd-green);
}

.poll-option-text {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    color: var(--text-dark);
    word-break: break-word;
}

/* RENAMED: .poll-vote-btn → .plls-poll-vote-btn (CONFLICT with style.css) */
.plls-poll-vote-btn {
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
}

.plls-poll-vote-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 106, 78, 0.3);
}

.plls-poll-vote-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.poll-card-footer {
    padding: clamp(12px, 3vw, 15px) clamp(15px, 4vw, 25px);
    background: #f8f9fa;
    border-top: 1px solid var(--border-color);
    box-sizing: border-box;
}

.poll-stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.poll-stats-item {
    font-size: 0.75rem;
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* Poll Results with Percentage Bars */
.poll-results-container {
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
}

.result-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
    margin-bottom: 5px;
    color: var(--text-dark);
    gap: 8px;
    flex-wrap: nowrap;
}

.result-label > span:first-child {
    word-break: break-word;
    min-width: 0;
}

.result-percentage {
    font-weight: 600;
    color: var(--bd-green);
    white-space: nowrap;
    flex-shrink: 0;
}

.result-bar {
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    height: 25px;
    width: 100%;
}

.result-fill {
    background: linear-gradient(90deg, #006a4e, #2e7d32);
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 8px;
}

/* Completed Polls */
.completed-polls {
    margin-top: 40px;
    width: 100%;
    box-sizing: border-box;
}

.completed-polls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.completed-poll-card {
    background: var(--white);
    border-radius: 12px;
    padding: clamp(15px, 3.5vw, 20px);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.completed-poll-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: nowrap;
    gap: 10px;
}

.poll-completed-date {
    font-size: 0.75rem;
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.completed-poll-question {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.4;
    word-break: break-word;
}

.completed-poll-results {
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

.completed-poll-result-item {
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
}

.completed-poll-footer {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.total-votes {
    font-size: 0.75rem;
    color: var(--text-light);
}

.total-votes i {
    margin-right: 5px;
}

/* No Polls */
.no-polls {
    text-align: center;
    padding: clamp(30px, 6vw, 50px);
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    box-sizing: border-box;
    width: 100%;
}

.no-polls i {
    color: var(--bd-green);
    margin-bottom: 15px;
}

.no-polls h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.no-polls p {
    color: var(--text-light);
}

/* RENAMED: .sidebar-latest-img → .plls-sidebar-latest-img (CONFLICT with style.css) */
.plls-sidebar-latest-img {
    width: 70px;
    height: 55px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
}

.plls-sidebar-latest-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Polls Page Responsive — desktop layout preserved on all screen sizes */

/* ===================================================== */
/* SINGLE STATIC PAGE (page.php) STYLES                  */
/* ===================================================== */
/* =====================================================
   SINGLE STATIC PAGE — Professional Agriculture News
   ===================================================== */

/* Outer article wrapper */
.single-page {
    background: var(--white);
    border-radius: 4px;
    margin-bottom: 30px;
    box-shadow: 0 2px 16px rgba(0, 106, 78, 0.07);
    border: 1px solid rgba(0, 106, 78, 0.10);
    overflow: hidden;
}

/* ── Page Title Banner ── */
.page-title-banner {
    background: linear-gradient(135deg, #004d3a 0%, #006a4e 60%, #00875a 100%);
    padding: 32px 36px 28px;
    position: relative;
    overflow: hidden;
}

/* subtle leaf watermark behind title */
.page-title-banner::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 180px;
    height: 180px;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5c0 1.78.94 4.11 4 5.81 1.86 1.03 4.5 1.69 7 1.25 1.96-.35 3.5-1.58 4.5-3.12 1.37-2.08 1.88-4.72 1.5-7.94z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.page-title-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bd-gold) 0%, rgba(255, 204, 0, 0.3) 100%);
}

/* breadcrumb strip inside banner */
.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.page-breadcrumb a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s;
}

.page-breadcrumb a:hover {
    color: var(--bd-gold);
}

.page-breadcrumb i {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
}

/* Page Title */
.page-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.35;
    margin: 0;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* decorative gold accent line under title */
.page-title-accent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.page-title-accent span {
    display: inline-block;
    height: 3px;
    background: var(--bd-gold);
    border-radius: 2px;
}

.page-title-accent span:first-child {
    width: 40px;
}

.page-title-accent span:nth-child(2) {
    width: 12px;
    opacity: .6;
}

.page-title-accent span:nth-child(3) {
    width: 6px;
    opacity: .35;
}

/* ── Body area (image + content) ── */
.page-body {
    padding: 32px 36px 36px;
}

/* ── Featured Image ── */
.page-featured-image {
    margin-bottom: 28px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 106, 78, 0.12);
    box-shadow: 0 4px 18px rgba(0, 106, 78, 0.10);
    position: relative;
}

.page-featured-image img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.page-featured-image:hover img {
    transform: scale(1.015);
}

/* gold bottom bar on image */
.page-featured-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--bd-green), var(--bd-gold));
}

/* ── divider before content ── */
.page-content-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.page-content-divider::before,
.page-content-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 106, 78, 0.12);
}

.page-content-divider i {
    color: var(--bd-green);
    font-size: 13px;
    opacity: 0.6;
}

/* ── Page Content ── */
.page-content {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #1e2e28;
    text-align: justify;
}

.page-content>p:first-child {
    font-size: 1.12rem;
    color: #2a4a3e;
    font-weight: 500;
    line-height: 1.85;
}

.page-content p {
    margin-bottom: 18px;
}

.page-content img {
    max-width: 100%;
    height: auto;
    margin: 22px 0;
    border-radius: 6px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(0, 106, 78, 0.10);
    display: block;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    margin-top: 32px;
    margin-bottom: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-dark);
}

.page-content h1 {
    font-size: 1.75rem;
    border-bottom: 2px solid rgba(0, 106, 78, 0.15);
    padding-bottom: 8px;
}

.page-content h2 {
    font-size: 1.5rem;
    border-left: 4px solid var(--bd-green);
    padding-left: 14px;
}

.page-content h3 {
    font-size: 1.25rem;
    color: var(--bd-green);
}

.page-content h4 {
    font-size: 1.1rem;
}

.page-content h5,
.page-content h6 {
    font-size: 1rem;
}

.page-content ul,
.page-content ol {
    margin: 14px 0 18px 26px;
}

.page-content li {
    margin-bottom: 8px;
    line-height: 1.75;
}

.page-content ul li::marker {
    color: var(--bd-green);
}

.page-content blockquote {
    border-left: 4px solid var(--bd-green);
    padding: 16px 22px;
    margin: 24px 0;
    background: linear-gradient(to right, #f0faf6, #f9fff9);
    font-style: italic;
    color: #2a4a3e;
    border-radius: 0 8px 8px 0;
    font-size: 1.05rem;
    line-height: 1.8;
    position: relative;
}

.page-content blockquote::before {
    content: '\201C';
    font-size: 3rem;
    color: var(--bd-green);
    opacity: 0.2;
    position: absolute;
    top: -4px;
    left: 14px;
    font-family: Georgia, serif;
    line-height: 1;
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 0.95rem;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.page-content th {
    background: var(--bd-green);
    color: #fff;
    padding: 11px 14px;
    font-weight: 600;
    text-align: left;
    font-size: 0.9rem;
}

.page-content td {
    border-bottom: 1px solid rgba(0, 106, 78, 0.10);
    padding: 10px 14px;
    text-align: left;
}

.page-content tr:nth-child(even) td {
    background: #f4fbf7;
}

.page-content tr:hover td {
    background: #edf7f2;
}

.page-content a {
    color: var(--bd-green);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.page-content a:hover {
    color: var(--agri-dark);
}

.page-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 106, 78, 0.25), transparent);
    margin: 28px 0;
}

/* Alert Styles */
.alert-warning {
    background: #fff8e1;
    color: #b06000;
    border: 1px solid #ffe082;
    border-left: 4px solid var(--agri-sun);
    border-radius: 0 8px 8px 0;
    padding: 18px 22px;
    text-align: center;
    font-size: 0.95rem;
}

.alert-warning i {
    margin-right: 8px;
    font-size: 1.1rem;
}

/* Responsive — Single Page */
@media (max-width: 768px) {
    .page-title-banner {
        padding: 24px 22px 20px;
    }

    .page-title {
        font-size: 1.4rem;
    }

    .page-body {
        padding: 22px 18px 26px;
    }
}

@media (max-width: 576px) {
    .page-title-banner {
        padding: 20px 16px 18px;
    }

    .page-title {
        font-size: 1.2rem;
    }

    .page-body {
        padding: 16px 14px 20px;
    }

    .page-content {
        font-size: 0.97rem;
    }

    .page-content h2 {
        font-size: 1.3rem;
    }

    .page-content h3 {
        font-size: 1.15rem;
    }
}

/* ===================================================== */
/* SEARCH PAGE STYLES (search.php) - Auto-migrated      */
/* NOTE: .read-more class removed (button not needed)   */
/* ===================================================== */

/* ===================================================== */
/* SEARCH PAGE STYLES */
/* ===================================================== */
.search-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

.search-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.search-title i {
    color: var(--bd-green);
    margin-right: 10px;
}

.search-stats {
    color: var(--text-light);
    font-size: 0.85rem;
}

/* Search Form */
.search-form-container {
    margin-bottom: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.search-form-large {
    flex: 1;
    min-width: 250px;
}

.search-input-group {
    display: flex;
    align-items: center;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    overflow: hidden;
    transition: all 0.3s;
}

.search-input-group:focus-within {
    border-color: var(--bd-green);
    box-shadow: 0 0 0 3px rgba(0, 106, 78, 0.1);
}

.search-input-group i {
    padding: 0 15px;
    color: var(--text-light);
}

.search-input-group input {
    flex: 1;
    padding: 15px 0;
    border: none;
    outline: none;
    font-size: 1rem;
    font-family: inherit;
}

.search-input-group button {
    background: var(--bd-green);
    color: white;
    border: none;
    padding: 15px 30px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.search-input-group button:hover {
    background: var(--agri-dark);
}

.reset-btn-container {
    flex-shrink: 0;
}

.reset-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.reset-btn:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

/* Search Results */
.search-results {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.search-result-item {
    display: flex;
    gap: 20px;
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: all 0.3s;
    position: relative;
}

.search-result-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.search-result-img {
    position: relative;
    width: 180px;
    height: 120px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
}

.search-result-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.search-result-item:hover .search-result-img img {
    transform: scale(1.05);
}

.content-type-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.type-news .content-type-badge {
    background: #1976d2;
}

.type-photo .content-type-badge {
    background: #2e7d32;
}

.type-video .content-type-badge {
    background: #f57c00;
}

.type-opinion .content-type-badge {
    background: #6a1b9a;
}

.type-submission .content-type-badge {
    background: #00897b;
}

.search-result-content {
    flex: 1;
}

.search-result-content h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.search-result-content h2 a {
    color: var(--text-dark);
    text-decoration: none;
}

.search-result-content h2 a:hover {
    color: var(--bd-green);
}

.search-result-content h2 mark {
    background: #fff3e0;
    color: #f57c00;
    padding: 0;
    border-radius: 3px;
    display: inline;
}

.search-result-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 0.7rem;
    color: var(--text-light);
    flex-wrap: wrap;
}

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

.search-result-excerpt {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 10px;
}

.search-result-excerpt mark {
    background: #fff3e0;
    color: #f57c00;
    padding: 0;
    border-radius: 3px;
    display: inline;
}

/* Load More Button */
.load-more-container {
    text-align: center;
    margin-top: 30px;
}

.load-more-btn {
    background: linear-gradient(135deg, #006a4e, #2e7d32);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 40px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 106, 78, 0.3);
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.load-more-loading,
.load-more-end {
    padding: 20px;
    color: var(--text-light);
}

.load-more-loading i,
.load-more-end i {
    margin-right: 8px;
}

.load-more-end {
    color: var(--bd-green);
}

/* No Results */
.no-results,
.search-prompt {
    text-align: center;
    padding: 50px 20px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
}

.no-results i,
.search-prompt i {
    color: var(--bd-green);
    margin-bottom: 20px;
}

.no-results h3,
.search-prompt h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.no-results p,
.search-prompt p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.suggestions {
    text-align: left;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.suggestions h4 {
    margin-bottom: 10px;
    color: var(--text-dark);
}

.suggestions ul {
    margin-left: 20px;
}

.suggestions li {
    margin-bottom: 5px;
    color: var(--text-light);
}




/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */
@media (max-width: 768px) {
    .search-result-item {
        flex-direction: column;
    }

    .search-result-img {
        width: 100%;
        height: 150px;
    }

    .search-form-container {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-group {
        border-radius: 12px;
    }

    .search-input-group i {
        display: none;
    }

    .search-input-group input {
        padding: 12px 15px;
    }

    .search-input-group button {
        padding: 12px 20px;
    }

    .reset-btn-container {
        text-align: center;
    }

    .reset-btn {
        padding: 12px 25px;
    }

}

@media (max-width: 576px) {
    .search-title {
        font-size: 1.2rem;
    }

    .search-input-group button,
    .reset-btn {
        padding: 10px 15px;
        font-size: 0.85rem;
    }

}


/* ══════════════════════════════════════════════════════════════
   NEWS.PHP — PDF DOWNLOAD BUTTON & PDF PAGE LAYOUT
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════
   PRINT PDF BUTTON
══════════════════════════════════════════ */
.share-print {
    background: #e53935;
}

.share-print:hover {
    background: #c62828;
}

.share-print:disabled {
    opacity: .68;
    cursor: not-allowed;
    transform: none;
}

/* ══════════════════════════════════════════
   PDF PAGE LAYOUT  (794 px = A4 @ 96 dpi)
══════════════════════════════════════════ */
#pdf-render-root,
#pdf-render-root * {
    box-sizing: border-box;
}

.pdfp {
    width: 794px;
    min-height: 1123px;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', Arial, sans-serif;
}

/* ── Top gold stripe (ওয়েবসাইটের top-bar মতো) ── */
.pdfp-topbar {
    height: 6px;
    background: linear-gradient(90deg, #004d3a 0%, #006a4e 50%, #004d3a 100%);
    flex-shrink: 0;
}

/* ── Header — ওয়েবসাইটের main-header: সাদা ব্যাকগ্রাউন্ড, সবুজ বর্ডার ── */
.pdfp-header {
    background: #ffffff;
    border-bottom: 3px solid #006a4e;
    box-shadow: 0 4px 20px rgba(0, 106, 78, 0.08);
    padding: 16px 40px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.pdfp-logo img {
    max-height: 50px;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

.pdfp-logo-txt {
    color: #006a4e;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;
    font-family: inherit;
}

.pdfp-hdr-right {
    text-align: right;
}

.pdfp-hdr-tag {
    display: inline-block;
    background: rgba(0, 106, 78, 0.08);
    border: 1px solid rgba(0, 106, 78, 0.20);
    color: #006a4e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 2px;
    margin-bottom: 5px;
    font-family: inherit;
}

.pdfp-hdr-date {
    color: #5a7c72;
    font-size: 11px;
    font-family: inherit;
}

/* ── Gold rule under header ── */
.pdfp-goldrule {
    height: 3px;
    background: linear-gradient(90deg, #006a4e, #006a4e, #006a4e);
    flex-shrink: 0;
}

/* ── Main body — পেজ break সমস্যা ঠিক করতে padding দেওয়া হয়েছে ── */
.pdfp-body {
    flex: 1;
    padding: 32px 44px 44px;
    /* bottom padding বাড়ানো হয়েছে */
}

/* Category badge */
.pdfp-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #006a4e;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 13px 3px 10px;
    border-radius: 2px;
    margin-bottom: 14px;
    font-family: inherit;
    letter-spacing: .5px;
}

.pdfp-cat::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #006a4e;
    border-radius: 50%;
}

/* Title */
.pdfp-title {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    line-height: 1.42;
    margin-bottom: 12px;
    font-family: inherit;
}

/* Subtitle */
.pdfp-subtitle {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 12px;
    padding: 9px 16px;
    border-left: 4px solid #006a4e;
    background: #f0faf6;
    border-radius: 0 4px 4px 0;
    font-family: inherit;
}

/* Decorative rule */
.pdfp-rule {
    height: 2px;
    background: linear-gradient(90deg, #006a4e 0%, #006a4e 45%, #f0faf6 100%);
    margin-bottom: 14px;
    border-radius: 2px;
}

/* Meta bar */
.pdfp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f8f4;
    border: 1px solid rgba(0, 106, 78, 0.15);
    border-left: 4px solid #006a4e;
    border-radius: 0 5px 5px 0;
    padding: 9px 16px;
    margin-bottom: 20px;
    font-family: inherit;
}

.pdfp-meta-author {
    font-size: 12px;
    color: #006a4e;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
}

.pdfp-meta-author em {
    color: #555;
    font-weight: 400;
    font-style: normal;
    margin-left: 4px;
    font-size: 11px;
}

.pdfp-author-pic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #006a4e;
    flex-shrink: 0;
}

.pdfp-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #006a4e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pdfp-meta-date {
    font-size: 11px;
    color: #666;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pdfp-cal-icon {
    width: 13px;
    height: 13px;
    fill: #006a4e;
    flex-shrink: 0;
}

/* News image */
.pdfp-img-wrap {
    margin-bottom: 0;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(0, 106, 78, 0.15);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
}

.pdfp-img-wrap img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    display: block;
}

.pdfp-caption {
    background: #f0faf6;
    border-top: 1px solid rgba(0, 106, 78, 0.15);
    padding: 6px 14px;
    font-size: 11px;
    color: #555;
    font-style: italic;
    font-family: inherit;
}

/* Content — সম্পূর্ণ HTML ট্যাগ সাপোর্ট */
.pdfp-content {
    font-size: 13px;
    color: #1e1e1e;
    line-height: 1.9;
    text-align: justify;
    margin-top: 20px;
    font-family: inherit;
}

.pdfp-content p {
    margin: 0 0 11px 0;
}

.pdfp-content h1,
.pdfp-content h2,
.pdfp-content h3,
.pdfp-content h4,
.pdfp-content h5,
.pdfp-content h6 {
    margin: 16px 0 8px;
    font-weight: 700;
    color: #1a3c34;
    line-height: 1.4;
}

.pdfp-content h1 {
    font-size: 20px;
}

.pdfp-content h2 {
    font-size: 18px;
}

.pdfp-content h3 {
    font-size: 16px;
}

.pdfp-content h4 {
    font-size: 14px;
}

.pdfp-content h5,
.pdfp-content h6 {
    font-size: 13px;
}

.pdfp-content ul,
.pdfp-content ol {
    margin: 8px 0 11px 24px;
}

.pdfp-content li {
    margin-bottom: 5px;
}

.pdfp-content blockquote {
    border-left: 4px solid #006a4e;
    margin: 12px 0;
    padding: 8px 16px;
    background: #f0faf6;
    color: #444;
    font-style: italic;
}

.pdfp-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 12px;
}

.pdfp-content th {
    background: #006a4e;
    color: #fff;
    padding: 7px 10px;
    text-align: left;
}

.pdfp-content td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0, 106, 78, 0.12);
}

.pdfp-content tr:nth-child(even) td {
    background: #f0faf6;
}

.pdfp-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 8px 0;
}

.pdfp-content a {
    color: #006a4e;
    text-decoration: underline;
}

.pdfp-content strong,
.pdfp-content b {
    font-weight: 700;
}

.pdfp-content em,
.pdfp-content i {
    font-style: italic;
}

.pdfp-content hr {
    border: none;
    border-top: 1px solid rgba(0, 106, 78, 0.15);
    margin: 14px 0;
}

/* Divider before QR */
.pdfp-divider {
    height: 1px;
    background: linear-gradient(90deg, #006a4e 0%, #006a4e 50%, #f0faf6 100%);
    margin: 28px 0 18px;
    /* উপরে margin বাড়ানো */
}

/* QR + link section */
.pdfp-qr-row {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: #f4f8f4;
    border: 1px solid rgba(0, 106, 78, 0.15);
    border-radius: 6px;
    padding: 16px 18px;
}

.pdfp-qr-cell {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pdfp-qr-img-box {
    width: 116px;
    height: 116px;
    background: #fff;
    border: 2px solid #006a4e;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pdfp-qr-img-box img {
    width: 108px;
    height: 108px;
    display: block;
}

.pdfp-qr-lbl {
    font-size: 10px;
    font-weight: 700;
    color: #006a4e;
    text-align: center;
    font-family: inherit;
    line-height: 1.4;
}

.pdfp-qr-lbl small {
    display: block;
    color: #888;
    font-weight: 400;
    font-size: 9px;
}

.pdfp-link-cell {
    flex: 1;
}

.pdfp-link-heading {
    font-size: 12px;
    font-weight: 800;
    color: #006a4e;
    margin-bottom: 7px;
    font-family: inherit;
}

.pdfp-link-url {
    display: block;
    font-size: 10.5px;
    color: #1a237e;
    word-break: break-all;
    font-family: 'Courier New', monospace;
    background: #fff;
    padding: 7px 10px;
    border: 1px solid rgba(0, 106, 78, 0.15);
    border-radius: 4px;
    margin-bottom: 9px;
    line-height: 1.5;
}

.pdfp-link-note {
    font-size: 11px;
    color: #555;
    line-height: 1.65;
    font-family: inherit;
}

/* ── Background decorative layer (style.css / header.php pattern) ── */
.pdfp-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* সূর্য — উপরে ডান কোণে */
.pdfp-bg-sun {
    position: absolute;
    top: 3%;
    right: 5%;
    width: 140px;
    height: 140px;
    opacity: 0.14;
}

.pdfp-bg-sun svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* পাখির ঝাঁক — উপরে বাঁ দিকে */
.pdfp-bg-birds {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 240px;
    opacity: 0.18;
}

.pdfp-bg-birds svg {
    width: 100%;
    height: auto;
    display: block;
}

/* গ্রামীণ village scene — নিচে পুরো প্রস্থ জুড়ে */
.pdfp-bg-village {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    aspect-ratio: 1600 / 320;
    overflow: hidden;
    opacity: 0.10;
}

.pdfp-bg-village svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* সব content element bg layer-এর উপরে থাকবে */
.pdfp-topbar,
.pdfp-header,
.pdfp-goldrule,
.pdfp-body,
.pdfp-footer,
.pdfp-botbar {
    position: relative;
    z-index: 1;
}

/* ── Footer — ওয়েবসাইটের ftr-main-footer মতো: সবুজ গ্র্যাডিয়েন্ট ── */
.pdfp-footer {
    background: #006a4e;
    background: linear-gradient(135deg, #006a4e 0%, #00875a 100%);
    border-top: 3px solid #006a4e;
    padding: 12px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.pdfp-footer-copy {
    color: #ffffff;
    font-size: 10.5px;
    font-family: inherit;
    text-align: center;
    opacity: 0.90;
}

/* ── Bottom stripe (ওয়েবসাইটের top-bar মতো) ── */
.pdfp-botbar {
    height: 5px;
    background: linear-gradient(90deg, #004d3a 0%, #006a4e 50%, #004d3a 100%);
    flex-shrink: 0;
}

/* ===================================================== */
/* FEATURED PHOTO GALLERY - Homepage Combined Layout     */
/* Left: Featured Slider | Right: Recent Photos Grid     */
/* ===================================================== */

/* Combined wrapper */
.photo-gallery-combined {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}

/* ─── Column Labels ─── */
.photo-featured-label,
.photo-recent-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bd-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.photo-featured-label i { color: var(--bd-gold); }
.photo-recent-label  i { color: var(--agri-light); }

/* ─── Featured Column ─── */
.photo-featured-col {
    display: flex;
    flex-direction: column;
}

/* Slider Container */
.photo-featured-slider {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #0a1628;
    box-shadow: var(--shadow-medium);
}

/* Individual Slide */
.photo-featured-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
    transform: scale(1.03);
    pointer-events: none;
}

.photo-featured-slide.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.photo-featured-slide a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.photo-featured-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay gradient + text */
.photo-featured-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
    padding: 28px 22px 18px;
    color: #fff;
}

.photo-featured-cat {
    display: inline-block;
    background: var(--bd-green);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.photo-featured-overlay h3 {
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 6px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.photo-featured-caption {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.80);
    margin-bottom: 6px;
    line-height: 1.4;
}

.photo-featured-caption i { margin-right: 4px; }

.photo-featured-meta {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.65);
}

.photo-featured-meta i { margin-right: 3px; }

/* ─── Slider Controls ─── */
.photo-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.photo-slider-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--bd-green);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
    box-shadow: 0 2px 8px rgba(0,106,78,0.25);
    flex-shrink: 0;
}

.photo-slider-btn:hover {
    background: var(--agri-dark);
    transform: scale(1.08);
}

.photo-slider-dots {
    display: flex;
    gap: 7px;
    align-items: center;
}

.photo-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid var(--border-color);
}

.photo-slider-dot.active {
    background: var(--bd-green);
    border-color: var(--bd-green);
    width: 22px;
    border-radius: 4px;
}

/* ─── Recent Column ─── */
.photo-recent-col {
    display: flex;
    flex-direction: column;
}

/* Recent Grid — 2 columns */
.photo-recent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Recent Photo Item */
.photo-recent-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: transform 0.3s, box-shadow 0.3s;
}

.photo-recent-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.photo-recent-item > a {
    display: block;
    position: relative;
    overflow: hidden;
}

.photo-recent-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
    transition: transform 0.45s;
}

.photo-recent-item:hover img {
    transform: scale(1.07);
}

.photo-recent-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,106,78,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    color: #fff;
    font-size: 1.2rem;
}

.photo-recent-item:hover .photo-recent-overlay {
    opacity: 1;
}

.photo-recent-info {
    padding: 8px 8px 6px;
}

.photo-recent-info h4 {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 4px;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.photo-recent-info h4 a {
    color: inherit;
    text-decoration: none;
}

.photo-recent-info h4 a:hover { color: var(--bd-green); }

.photo-recent-date {
    font-size: 0.6rem;
    color: var(--text-light);
}

.photo-recent-date i { margin-right: 3px; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .photo-gallery-combined {
        grid-template-columns: 1fr 280px;
    }
    .photo-recent-item img { height: 85px; }
}

@media (max-width: 768px) {
    .photo-gallery-combined {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .photo-featured-slider {
        aspect-ratio: 16 / 9;
    }
    .photo-featured-overlay h3 { font-size: 1rem; }
    .photo-recent-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .photo-recent-item img { height: 90px; }
}

@media (max-width: 576px) {
    .photo-recent-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .photo-featured-overlay h3 { font-size: 0.9rem; }
    .photo-featured-overlay { padding: 18px 14px 12px; }
    .photo-slider-btn { width: 28px; height: 28px; font-size: 0.75rem; }
}


/* ===================================================== */
/* #INDEX-PAGE FEATURED NEWS - Editorial Layout         */
/* ===================================================== */
.featured-news-layout {
    display: block;
}

/* ─── Main Story ─── */
.fn-main-story {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.fn-main-img {
    position: relative;
    display: block;
    overflow: hidden;
}

.fn-main-img img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.fn-main-story:hover .fn-main-img img {
    transform: scale(1.04);
}

.fn-category-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--bd-gold);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.fn-main-content {
    padding: 20px 24px 22px;
    border-top: 3px double var(--bd-green);
}

.fn-main-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.fn-main-title a {
    color: inherit;
    text-decoration: none;
}

.fn-main-title a:hover {
    color: var(--bd-green);
}

.fn-main-meta {
    font-size: 0.78rem;
    color: var(--text-light);
}

.fn-main-meta i { margin-right: 4px; color: var(--bd-green); }

/* ─── Secondary Stories ─── */
.fn-secondary-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 18px;
}

.fn-secondary-item {
    display: flex;
    gap: 12px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-light);
    transition: transform 0.3s, box-shadow 0.3s;
}

.fn-secondary-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.fn-secondary-img {
    flex-shrink: 0;
    width: 110px;
    height: 92px;
    display: block;
    overflow: hidden;
}

.fn-secondary-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s;
}

.fn-secondary-item:hover .fn-secondary-img img {
    transform: scale(1.08);
}

.fn-secondary-content {
    padding: 10px 12px 8px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.fn-secondary-cat {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--bd-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.fn-secondary-content h3 {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 5px;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fn-secondary-content h3 a {
    color: inherit;
    text-decoration: none;
}

.fn-secondary-content h3 a:hover {
    color: var(--bd-green);
}

.fn-secondary-meta {
    font-size: 0.65rem;
    color: var(--text-light);
}

.fn-secondary-meta i { margin-right: 3px; }

/* ─── Secondary Row (নিচের ৪টি — একই সারিতে) ─── */
.fn-secondary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 18px;
}

.fn-secondary-row .fn-secondary-item {
    flex-direction: column;
    gap: 0;
}

.fn-secondary-row .fn-secondary-img {
    width: 100%;
    height: 140px;
}

.fn-secondary-row .fn-secondary-content {
    padding: 10px 12px 10px 12px;
}

/* ─── Recent News - Editorial List ─── */
.fn-recent-col {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-light);
    padding: 18px 20px;
}

.fn-recent-heading {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 3px double var(--bd-green);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fn-recent-see-all {
    font-family: 'Arial', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-light);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.3s;
    white-space: nowrap;
}

.fn-recent-see-all:hover {
    color: var(--bd-green);
}

.fn-recent-heading i { color: var(--bd-gold); margin-right: 8px; }

.fn-recent-list {
    display: flex;
    flex-direction: column;
}

.fn-recent-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border-color);
}

.fn-recent-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fn-recent-number {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bd-gold);
    line-height: 1;
    flex-shrink: 0;
    min-width: 26px;
    text-align: center;
}

.fn-recent-content h4 {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 6px;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fn-recent-content h4 a {
    color: inherit;
    text-decoration: none;
}

.fn-recent-content h4 a:hover {
    color: var(--bd-green);
}

.fn-recent-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.fn-recent-cat {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--bd-green);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.fn-recent-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

.fn-recent-date i { margin-right: 3px; }

/* ─── Responsive ─── */

/* Desktop: wrapper = simple block, featured-news-layout = grid (main + recent side by side) */
.featured-news-mobile-wrapper {
    display: block;
}

/* Desktop: featured-news-layout = main story বামে + recent ডানে */
.featured-news-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

/* Desktop: secondary row নিচে পুরো প্রস্থ জুড়ে */
.fn-secondary-row-mobile-order {
    margin-top: 18px;
}

/* Desktop: wrapper direct child fn-recent-col লুকানো (desktop-এ featured-news-layout এর ভেতরেরটা দেখাবে) */
.featured-news-mobile-wrapper > .fn-recent-col {
    display: none;
}

/* Desktop: featured-news-layout এর ভেতরে fn-recent-desktop দেখাবে */
.fn-recent-desktop {
    display: block;
}

@media (max-width: 1024px) {
    .featured-news-layout {
        grid-template-columns: 1fr 280px;
    }
    .fn-main-img img { height: 320px; }
}

/* মোবাইলে: wrapper flex column → ① main → ② secondary 4 → ③ সাম্প্রতিক খবর */
@media (max-width: 768px) {
    .featured-news-mobile-wrapper {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .featured-news-mobile-wrapper .featured-news-layout {
        order: 1;
        display: block; /* grid বন্ধ — শুধু main story */
    }
    /* Desktop এর fn-recent-desktop লুকানো */
    .fn-recent-desktop {
        display: none;
    }
    .featured-news-mobile-wrapper .fn-secondary-row-mobile-order {
        order: 2;
        margin-top: 0;
    }
    /* Mobile wrapper direct child fn-recent-col দেখানো */
    .featured-news-mobile-wrapper > .fn-recent-col {
        display: block;
        order: 3;
    }
    .fn-main-title { font-size: 1.3rem; }
}

@media (max-width: 576px) {
    .fn-main-img img { height: 220px; }
    .fn-main-content { padding: 16px 18px 18px; }
    .fn-main-title { font-size: 1.1rem; }
    .fn-secondary-list {
        grid-template-columns: 1fr;
    }
    .fn-secondary-img { width: 95px; height: 80px; }
    .fn-category-badge { font-size: 0.65rem; padding: 4px 10px; }
    .fn-secondary-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .fn-secondary-row .fn-secondary-img { height: 110px; }
}


/* FEATURED VIDEO SECTION - Homepage Combined Layout     */
/* Left: Featured Slider | Right: Recent Videos List     */
/* ===================================================== */

/* Combined wrapper — same grid as photo gallery */
.video-combined {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}

/* ─── Column Labels ─── */
.video-featured-label,
.video-recent-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #c62828;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.video-featured-label i { color: var(--bd-gold); }
.video-recent-label  i  { color: #ef9a9a; }

/* ─── Featured Column ─── */
.video-featured-col {
    display: flex;
    flex-direction: column;
}

/* Slider Container */
.video-featured-slider {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #0a0a0a;
    box-shadow: var(--shadow-medium);
}

/* Individual Slide */
.video-featured-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
    transform: scale(1.03);
    pointer-events: none;
}

.video-featured-slide.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.video-featured-slide > a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
}

.video-featured-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* YouTube-style play button */
.video-featured-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(198, 40, 40, 0.88);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    z-index: 2;
}

.video-featured-slide:hover .video-featured-play {
    background: #c62828;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Overlay gradient + text */
.video-featured-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.50) 55%, transparent 100%);
    padding: 28px 22px 18px;
    color: #fff;
    z-index: 3;
}

.video-featured-cat {
    display: inline-block;
    background: #c62828;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.video-featured-overlay h3 {
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 6px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.video-featured-meta {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.65);
}

.video-featured-meta i { margin-right: 3px; }

/* ─── Slider Controls ─── */
.video-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.video-slider-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #c62828;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
    box-shadow: 0 2px 8px rgba(198,40,40,0.3);
    flex-shrink: 0;
}

.video-slider-btn:hover {
    background: #b71c1c;
    transform: scale(1.08);
}

.video-slider-dots {
    display: flex;
    gap: 7px;
    align-items: center;
}

.video-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid var(--border-color);
}

.video-slider-dot.active {
    background: #c62828;
    border-color: #c62828;
    width: 22px;
    border-radius: 4px;
}

/* ─── Recent Column ─── */
.video-recent-col {
    display: flex;
    flex-direction: column;
}

/* Recent List */
.video-recent-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Recent Video Item */
.video-recent-item {
    display: flex;
    gap: 10px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-light);
    transition: transform 0.3s, box-shadow 0.3s;
}

.video-recent-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* Thumbnail */
.video-recent-thumb {
    position: relative;
    flex-shrink: 0;
    width: 110px;
    height: 70px;
    display: block;
    overflow: hidden;
}

.video-recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.video-recent-item:hover .video-recent-thumb img {
    transform: scale(1.07);
}

.video-recent-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.42);
    color: #fff;
    font-size: 1.1rem;
    transition: background 0.3s;
}

.video-recent-item:hover .video-recent-play {
    background: rgba(198,40,40,0.75);
}

/* Info */
.video-recent-info {
    flex: 1;
    padding: 8px 10px 8px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.video-recent-info h4 {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 5px;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-recent-info h4 a {
    color: inherit;
    text-decoration: none;
}

.video-recent-info h4 a:hover { color: #c62828; }

.video-recent-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.62rem;
    color: var(--text-light);
    align-items: center;
}

.video-recent-cat {
    background: #fdecea;
    color: #c62828;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
}

.video-recent-meta i { margin-right: 2px; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .video-combined {
        grid-template-columns: 1fr 280px;
    }
    .video-recent-thumb { width: 90px; height: 60px; }
}

@media (max-width: 768px) {
    .video-combined {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .video-featured-slider { aspect-ratio: 16 / 9; }
    .video-featured-overlay h3 { font-size: 1rem; }
    .video-recent-thumb { width: 90px; height: 60px; }
}

@media (max-width: 576px) {
    .video-featured-overlay h3 { font-size: 0.9rem; }
    .video-featured-overlay { padding: 18px 14px 12px; }
    .video-featured-play { width: 48px; height: 48px; font-size: 1.3rem; }
    .video-slider-btn { width: 28px; height: 28px; font-size: 0.75rem; }
}


/* ==================================================================================
   404 PAGE
   FILE: 404.php
================================================================================== */

/* ── Main box ────────────────────────────────────────── */
.page-404-box {
    padding: 30px 20px 40px;
    background:
        radial-gradient(ellipse at 15% 85%, rgba(165, 214, 167, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 10%, rgba(255, 249, 196, 0.20) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(232, 245, 233, 0.55) 0%, transparent 80%),
        linear-gradient(160deg, #f0faf1 0%, #fafffe 40%, #f5fcf5 100%);
    border-radius: 16px;
    border: 1px solid rgba(0, 106, 78, 0.08);
    box-shadow: 0 4px 32px rgba(0, 106, 78, 0.07), 0 1px 4px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}

/* Decorative corner leaves */
.page-404-box::before,
.page-404-box::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23006a4e'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5c0 1.78.94 4.11 4 5.81 1.86 1.03 4.5 1.69 7 1.25 1.96-.35 3.5-1.58 4.5-3.12 1.37-2.08 1.88-4.72 1.5-7.94z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.06;
    pointer-events: none;
}
.page-404-box::before {
    top: -16px;
    left: -16px;
    transform: rotate(20deg);
}
.page-404-box::after {
    bottom: -16px;
    right: -16px;
    transform: rotate(200deg);
}

/* ── Illustration ────────────────────────────────────── */
.p404-illustration {
    text-align: center;
    margin-bottom: 10px;
}
.p404-illustration svg {
    width: 100%;
    max-width: 460px;
    height: auto;
    filter: drop-shadow(0 6px 24px rgba(0,106,78,0.10));
}

/* ── Message ─────────────────────────────────────────── */
.p404-message {
    text-align: center;
    margin-bottom: 28px;
}
.p404-code {
    font-size: 5.5rem;
    font-weight: 900;
    color: #006a4e;
    letter-spacing: 6px;
    margin: 0 0 4px;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0,106,78,0.15);
}
.p404-title {
    font-size: 1.55rem;
    color: #1a3c34;
    font-weight: 700;
    margin: 0 0 14px;
}
.p404-title i {
    color: #006a4e;
    margin-left: 6px;
}
.p404-desc {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.85;
    margin: 0;
}

/* ── Buttons ─────────────────────────────────────────── */
.p404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
}
.p404-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, transform .15s, box-shadow .2s;
}
.p404-btn-primary {
    background: #006a4e;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,106,78,0.22);
}
.p404-btn-primary:hover {
    background: #004d38;
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(0,106,78,0.28);
    color: #fff;
}
.p404-btn-outline {
    background: #fff;
    color: #006a4e;
    border: 1.5px solid #a5d6a7;
}
.p404-btn-outline:hover {
    background: #e8f5e9;
    transform: translateY(-2px);
    color: #006a4e;
}

/* ── Category tags ───────────────────────────────────── */
.p404-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}
.p404-cats-label {
    font-size: 0.85rem;
    color: #666;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}
.p404-cats-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
}
.p404-cat-tag {
    background: #f1f8e9;
    border: 1px solid #a5d6a7;
    color: #006a4e;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s, color .2s, transform .15s;
}
.p404-cat-tag:hover {
    background: #006a4e;
    color: #fff;
    border-color: #006a4e;
    transform: translateY(-1px);
}