* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* এটি লেআউটকে স্থিতিশীল করে */
}

html, body {
    height: 100%;
}

body {
    /* Sticky Footer-এর জন্য */
    display: flex; 
    flex-direction: column;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0px;
    background-color: #f4f4f4;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* -------------------- ২. সার্চ ও ফিল্টার এরিয়া -------------------- */
/* -------------------- ৩. সার্চ ও ফিল্টার এরিয়া -------------------- */
.search-filter-area {
    max-width: 800px;
    margin: auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}
#search_term{
	padding-left:10px;
}

/* সকল ফিল্টার গ্রুপকে ফ্লেক্স করা হলো যাতে ভেতরের উপাদান পাশাপাশি থাকতে পারে */
.filter-group {
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    margin-bottom: 15px; /* দুটি filter-group-এর মধ্যে ফাঁকা স্থান */
}

/* ডেস্কটপে search_term এবং type কে পাশাপাশি রাখার জন্য */
.filter-group.top-row .full-width-search {
    flex: 2; /* সার্চ ইনপুট টাইপের চেয়ে বেশি জায়গা নেবে */
    min-width: 50%;
    margin-bottom: 0; /* যেহেতু এটি ফ্লেক্স আইটেম */
}

.filter-group.top-row #category {
    flex: 1; /* টাইপ তুলনামূলকভাবে কম জায়গা নেবে */
    min-width: 150px;
}

/* ডেস্কটপে country এবং state কে পাশাপাশি রাখার জন্য */
.filter-group.bottom-row #country,
.filter-group.bottom-row #state {
    flex: 1 1 calc(50% - 5px); /* দুটি কলামে 50% করে প্রস্থ নেবে */
    min-width: 150px;
}


/* সাধারণ সিলেক্ট বক্স স্টাইল */
.filter-group select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    appearance: none; 
    background-color: #f9f9f9;
}

/* -------------------- ৩. ডেটা কন্টেইনার স্টাইল -------------------- */
#data-container {
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}

.loading-message {
    text-align: center;
    color: #888;
    padding: 50px;
    font-size: 1.2em;
}

/* -------------------- ৪. মোবাইল রেসপনসিভনেস -------------------- */

@media (max-width: 600px) {
    
    /* 600px এর নিচে স্ক্রিনে, ফিল্টার গ্রুপ উপাদানগুলো পুরো প্রস্থ নেবে */
    .filter-group {
        flex-direction: column; /* উপাদানগুলো উপর নিচে সাজানো */
        gap: 15px;
    }
    
    /* প্রতিটি সিলেক্ট বক্স 100% প্রস্থ নেবে */
    .filter-group select {
        width: 100%; 
        min-width: 100%;
    }
}

@media (max-width: 400px) {
    /* অতিরিক্ত ছোট স্ক্রিনে প্যাডিং কমানো */
    .search-filter-area {
        padding: 10px;
    }
}












/* --- Product Card Styles --- */
.product-card {
    display: flex;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 15px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.product-images img {
    width: 150px; /* ছবির ফিক্সড সাইজ */
    height: 150px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 4px;
}
@media (min-width: 440px) {
    
   
    
}
.product-details {
    flex-grow: 1;
}

.product-details h3 {
    margin-top: 0;
    color: #3f51b5;
}

/* --- Pagination Styles --- */
.pagination {
    text-align: center;
    margin-top: 30px;
    padding: 10px 0;
}

.pagination a, .pagination span {
    margin: 0 4px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #4a69bd;
    border-radius: 4px;
    transition: background-color 0.3s;
    display: inline-block;
}

.pagination a:hover {
    background-color: #e6e6e6;
}

.pagination a.active {
    background-color: #4a69bd;
    color: white;
    border-color: #4a69bd;
    pointer-events: none; /* অ্যাকটিভ পেজে ক্লিক করা বন্ধ */
}

.pagination .ellipsis {
    border: none;
    padding: 8px 0;
}

/* --- Message Styles --- */
.loading-message, .no-data-found, .error-message {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
    color: #777;
}







body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        /* -------------------- ১. প্রধান লেআউট (বিজ্ঞাপনের স্থান সহ) -------------------- */


.main-content-wrapper {
    flex: 1; /* এটি স্ক্রিনের সমস্ত অতিরিক্ত উল্লম্ব জায়গা দখল করবে */
    width: 100%;
}



       .main-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; 
    display: flex;
    justify-content: space-between;
    gap: 20px;
    /* Push Down Effect-এর জন্য ট্রানজিশন যোগ করা হলো */
    transition: margin-top 0.3s ease-out; /* padding-top-এর বদলে margin-top ব্যবহার করা হলো */
	
}

        .ad-sidebar {
            width: 25%;
            flex-shrink: 0;
            background-color: #f0f0f0;
            border: 1px dashed #ccc;
            text-align: center;
            padding: 10px 0;
            display: flex;
           
    
        }

        .main-content {
            flex-grow: 1; 
            min-width: 300px;
        }

        /* -------------------- ২. প্রোডাক্ট কার্ড স্টাইল (হলুদ বক্স) -------------------- */

        .product-card {
            width: 100%; 
            background-color: #fffacd; /* হালকা হলুদ */
            border: 1px solid #ffcc00;
            padding: 5px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 
            transition: transform 0.2s;
        }

        .product-card:hover {
            transform: scale(1.01);
			border-bottom: 2px solid #28a745;
   
        }

        .product-link-wrapper {
            text-decoration: none;
            color: inherit;
            display: flex; 
            align-items: flex-start; /* উপাদানগুলি উপরে অ্যালাইন করা */
            gap: 15px; 
            width: 100%; 
        }

        /* -------------------- ৩. প্রোডাক্ট ইমেজ স্টাইল (বামে ৩০% ফিক্সড হাইট) -------------------- */
        .product-images {
            /* **ছবি 30% প্রস্থ নেবে** */
            width: 100px; 
            
            /* ছবির কন্টেইনারের উচ্চতা নির্দিষ্ট করে দেওয়া হলো */
            height: 100px; 
            padding-right:15px;
            flex-shrink: 0; 
            overflow: hidden;
            border-radius: 4px;
        }

        .product-images img {
            width: 100%; 
            height: 100%;
            object-fit: cover; /* ক্রপ করে ফিট করা */
            display: block;
        }

        /* -------------------- ৪. প্রোডাক্ট ডিটেলস স্টাইল (ডানে ৭০%) -------------------- */
       .product-details {
    /* **বিবরণ 70% প্রস্থ নেবে** */
    width: 70%; 
    flex-grow: 1;
    text-align: left;
}

/* **সংশোধন: এই নতুন ক্লাসটি h3 এবং post-time-কে একই লাইনে নিয়ে আসবে** */
.product-header-line {
    display: flex; /* ফ্লেক্সবক্স লেআউট */
    justify-content: space-between; /* নাম বামে, সময় ডানে */
    align-items: center; /* উল্লম্বভাবে মাঝখানে অ্যালাইনমেন্ট */
    margin-bottom: 5px; /* নিচের কন্টেন্ট থেকে সামান্য ফাঁকা স্থান */
}


.product-details h3 {
    font-size: 1em;
    color: #333;
    margin: 0; /* মার্জিন রিসেট করা হলো */
    flex-shrink: 1; /* প্রয়োজনে ছোট হতে পারে */
    min-width: 0; /* Flexbox-এর একটি ট্রিক */
}

/* পোস্ট টাইম স্টাইল */
.product-details .post-time {
    font-size: 0.8em !important;
    color: #888 !important;
    margin: 0;
    white-space: nowrap; /* সময় যাতে না ভাঙে */
    flex-shrink: 0; /* স্থির প্রস্থ বজায় রাখবে */
}

.product-details p {
    font-size: 0.8em;
    color: #666;
    margin: 4px 0;
}

        .product-details p:nth-child(2) {
            font-size: .8em;
            color: #e44d26;
            font-weight: bold;
        }

        /* -------------------- ৫. মোবাইল রেসপনসিভনেস -------------------- */

       
    
        
 

@media (max-width: 900px) {
    .main-layout {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    
    .main-content-area {
        width: 100%;
        padding: 0 15px; /* কন্টেন্ট এর জন্য বাম-ডান প্যাডিং */
    }
	
	 .ad-sidebar {
         
            display: none;
           
    
        }
	
}








/* -------------------- ১. বেসিক স্টাইল ও রিসেট -------------------- */
       a {
            text-decoration: none;
            color: inherit;
        }

        /* -------------------- ২. নেভিগেশন বার স্টাইল -------------------- */
.navbar {
	margin-bottom:15px;
    background-color: #fff;
    padding: 15px 30px;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* ছোট স্ক্রিনে লোগো এবং টগলারকে এক লাইনে রাখবে, মেনুকে নিচে নামাবে */
    flex-wrap: wrap; 
}

.logo {
    color:#333;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
}

/* --- নেভিগেশন টগলার স্টাইল --- */
.nav-toggler {

    background: none;
    border: none;
    color: #333;
    font-size: 1.5rem;
    cursor: pointer;
    display: none; /* ডিফল্টভাবে বড় স্ক্রিনে লুকানো থাকবে */
}

.nav-links {
    display: flex; /* লগইন এবং সাইন আপ লিঙ্কগুলিকে এক লাইনে রাখে */
    gap: 20px; /* লিঙ্কগুলির মধ্যে দূরত্ব তৈরি করে */
}

.nav-link {
    color: #333;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-weight: 400;
}

.nav-link:hover {
    background-color: #555;
	color: #fff;
}
@media (max-width: 768px) {
	
    
    /* টগলার আইকন দেখানো হবে */
    .nav-toggler {
        display: block;
        order: 2; /* ডান দিকে রাখার জন্য (লোগো অর্ডার 1) */
    }
    
    /* নেভিগেশন লিঙ্কগুলি ছোট স্ক্রিনে বাই ডিফল্ট লুকানো থাকবে */
.nav-links {
    /* (পূর্বের স্টাইলগুলি ঠিক থাকবে) */
    display: flex; /* ছোট স্ক্রিনে ফ্লেক্স লেআউট বজায় থাকবে */
    flex-direction: column;
    width: 100%; 
    background-color: #fff; 
	
    position: absolute; 
    top: 60px; 
    left: 0;
    padding: 0; /* ডিফল্টভাবে প্যাডিং 0, যাতে উচ্চতা গণনা করা যায় */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 999;
    
    /* ***** অ্যানিমেশনের জন্য মূল পরিবর্তন ***** */
    max-height: 0; /* ডিফল্টভাবে উচ্চতা শূন্য */
    overflow: hidden; /* ভেতরের কন্টেন্ট লুকিয়ে রাখা */
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; /* অ্যানিমেশন যোগ করা */
}

    /* যখন 'active' ক্লাস যুক্ত হবে, তখন মেনুটি দেখানো হবে */
    .nav-links.active {
     /* কন্টেন্টের সম্পূর্ণ উচ্চতা দেখানোর জন্য একটি বড় মান সেট করা হলো */
    max-height: 300px; /* এই মানটি আপনার মেনুর সর্বোচ্চ উচ্চতা অনুযায়ী সেট করতে হবে */
    padding: 10px 0; /* মেনু দৃশ্যমান হলে প্যাডিং যুক্ত করা হলো */
    }

    /* নেভিগেশন লিঙ্কগুলির ভেতরের আইটেম স্টাইল */
    .nav-link {
        width: 100%; /* প্রতিটি লিঙ্ক পুরো প্রস্থ নেবে */
        padding: 10px 30px;
        text-align: left;
        border-radius: 0;
		
    }

    .nav-link:hover {
        background-color: #666;
    }
}





/* --- রেসপনসিভনেস (ছোট স্ক্রিন) --- */
/* যখন স্ক্রিনের প্রস্থ 600px বা তার কম হবে */


       
        
        
        /* -------------------- ৪. ফিক্সড বাটন স্টাইল (স্ক্রল করার পর এবং মোবাইলে) -------------------- */
       .fixed-ad-button {
    /* টেক্সট অনুযায়ী সাইজ নেওয়ার জন্য 'display: inline-block;' নিশ্চিত করা হয়েছে */
    display: inline-block; 
    
    position: fixed; 
    z-index: 1001; 
    
    /* ডেস্কটপ ডিফল্ট পজিশন */
    bottom: 20px; 
    right: 20px;
    left: auto; 
    top: auto; 
    
    cursor: grab; 
    opacity: 1; 
    visibility: visible;
    transition: opacity 0.3s, visibility 0.3s;
}

.fixed-ad-button.show {
    /* আপনার মূল কোডে এটি অপাসিটি 0 ছিল, কিন্তু "show" ক্লাস সাধারণত দৃশ্যমান করার জন্য ব্যবহার হয়। 
       আমি আপনার মূল কোড বজায় রাখছি, তবে এটি সম্ভবত লজিক্যালি বিপরীত। */
    opacity: 0; 
    visibility: hidden; /* আপনার কোড অনুযায়ী অদৃশ্য */
}

.fixed-ad-button a {
    background-color: #f0ad4e; /* কমলা বাটন */
    color: #333;
    padding: 10px 15px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* **বাটনটিকে ডিসপ্লে ব্লক এর বদলে ইনলাইন-ব্লক করা হয়েছে**
       কারণ এর প্যারেন্ট `.fixed-ad-button` এখন inline-block, তাই `a` কে ব্লক না করে বাটন এর ভিতরে কন্টেন্ট হিসাবে রাখা হলো। */
    display: inline-block; 
    text-align: center;
    font-weight: bold;
    white-space: nowrap; /* টেক্সট যাতে না ভাঙে */
}

/* -------------------- ৫. ডেস্কটপ লেআউট (769px এবং উপরে) -------------------- */
@media (min-width: 769px) {
    .fixed-ad-button {
        /* ডান-নিচে পজিশন বজায় রাখবে, প্রস্থ কন্টেন্ট অনুযায়ী */
        bottom: 20px; 
        right: 20px;
        width: auto; /* অতিরিক্ত নিশ্চিতকরণ */
    }
}

/* -------------------- ৬. মোবাইল/ট্যাবলেট রেসপনসিভনেস (768px এবং নিচে) -------------------- */
@media (max-width: 768px) {
    
    /* **মোবাইল/ট্যাবলেটে ফিক্সড বাটন স্টাইল (নিচে মাঝখানে)** */
    .fixed-ad-button {
        opacity: 1; 
        visibility: visible;
       
    
        bottom: 15px;
        /* `inline-block` বা `block` যেকোনোটিই কাজ করবে যেহেতু এখানে নির্দিষ্ট প্রস্থ দেওয়া হয়েছে, তবে 'display: block' ব্যবহার করা ভালো। */
        display: block; 
    }
    
    .fixed-ad-button a {
       
        display: block; 
        font-size: 0.8em;
    }
}		
		
		
		
		



/* 900px এর চেয়ে ছোট স্ক্রিনে (বিজ্ঞাপন লুকানো) */




.contact-group { display: flex; gap: 10px; }
        .contact-group .form-group { flex: 1; }
        .contact-group .phone-code-input { flex: 0 0 30%; /* কোডের জন্য ছোট জায়গা */ }
        .contact-group .contact-number-input { flex: 0 0 70%; /* নম্বরের জন্য বড় জায়গা */ }

        @media (max-width: 600px) {
            .container { padding: 15px; margin: 0; border-radius: 0; }
            body { padding: 0; }
            .contact-group { flex-direction: column; gap: 0; }
        }



/* **৬০০ পিক্সেল (600px) এবং নিচে - ফিল্টার রো পরিবর্তন** */
@media (max-width: 600px) {
    /* 1. রো ১: search_term ও type কে পাশাপাশি আনা */
    .filter-group.top-row {
        flex-direction: row; 
        flex-wrap: nowrap; /* যাতে পাশাপাশি থাকে */
    }

    .filter-group.top-row .full-width-search {
        flex: 2; /* search_term বেশি জায়গা নেবে */
        min-width: 60%;
    }

    .filter-group.top-row #category {
        flex: 1; /* type কম জায়গা নেবে */
        min-width: 30%;
    }


    /* 2. রো ২: country ও state কে পাশাপাশি আনা */
    .filter-group.bottom-row {
        flex-direction: row;
        flex-wrap: nowrap; /* যাতে পাশাপাশি থাকে */
    }

    .filter-group.bottom-row #country,
    .filter-group.bottom-row #state {
        flex: 1 1 50%; /* দুটি সমান অংশে ভাগ হবে */
        min-width: 45%;
    }
  

    
	
}

/* 400px এবং নিচে */
@media (max-width: 400px) {
    .search-filter-area {
        padding: 10px;
    }
    body {
      
    }
}


/* বুস্ট করা কার্ডের স্টাইল */
.product-card {
    position: relative;
    border: 1px solid #eee;
    background: #fff;
    transition: 0.3s ease;
}

.boosted-card {
    border: 1px solid #28a745; !important; /* গোল্ডেন বর্ডার */
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.2);
}

/* বুস্ট ব্যাজ ডিজাইন */




/* কার্ডের ভেতরের কন্টেন্ট ফিক্স করা */
.product-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}



*/





/* পণ্যের কার্ডকে রিলেটিভ পজিশন দেওয়া */
.product-card {
    position: relative;
    overflow: hidden;
}

/* Featured Logo: উপরে বাম পাশে */
.featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(45deg, #ff9800, #ff5722);
    color: #000;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.badges-wrapper {
    position: absolute;
    top: 0px;
    right: 0px;
    display: flex; /* পাশাপাশি রাখার জন্য */
    gap: 6px;      /* দুটি ব্যাজের মাঝের ফাঁকা জায়গা */
    z-index: 100;  /* ছবির উপরে দেখানোর জন্য */
}






/* TopAd Badge: ছবির ডান পাশে নিচে */
.topad-batch-logo {
  background: #28a745 !important;
    color: white;
    padding: 4px 8px;
    font-size: 12px; /* ইমোজির জন্য সাইজ কিছুটা বড় */
    font-weight: bold;
    border-top-right-radius: 5px !important;
	border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}



/* Featured Card Special Border and Structure */
/* Featured Special Card এর উইডথ ফিক্স করা */
.featured-special-card {
	position: relative !important; /* এটি খুবই জরুরি */
    background: #fff;
    border: 2px solid #ff9800; 
    border-radius: 12px;
    margin-bottom: 20px; /* বাকি কার্ডের সমান মার্জিন */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.2);
    width: 100%; /* এটি নিশ্চিত করবে যেন উইডথ মেইন কন্টেইনারের সমান হয় */
    display: block;
}

.featured-label {
    background: #ff9800;
    color: #fff;
    padding: 5px 15px;
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
    border-bottom-right-radius: 10px;
}

.featured-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px; /* গ্যাপ কিছুটা কমানো হয়েছে */
    padding: 5px;
}

.featured-image-grid .f-img {
    width: 100%;
    height: 120px; /* হাইট কিছুটা কমিয়ে অ্যাডজাস্ট করা হয়েছে */
    object-fit: cover;
    border-radius: 4px;
}

.featured-info { padding: 5px; }
.featured-info h3 { font-size: 1em; margin-bottom: 5px; color: #333; }
.f-price { color: #28a745; font-weight: bold; font-size: .9em; }
.f-desc { color: #666; font-size: 0.8em; margin: 10px 0; }
.f-footer { display: flex; justify-content: space-between; font-size: 0.8em; color: #888; border-top: 1px solid #f0f0f0; padding-top: 10px; }

@media (max-width: 600px) {
    .featured-image-grid { grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
    .featured-image-grid .f-img {
        height: 80px; /* মোবাইলে ছবির সাইজ */
}

/* Featured Card Badges Container */
.featured-badges-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}



/* লোগো বা ব্যাজ স্টাইল */



/* ৩য় ছবির জন্য বিশেষ পজিশনিং */
.f-img-wrapper {
    position: relative;
    width: 100%;
    height: 120px;
}

.f-img-wrapper .f-img {
    height: 100% !important;
}

/* Top Ad লোগোর পজিশন Featured কার্ডে */
.f-img-wrapper .topad-batch-logo {
    bottom: 5px;
    right: 5px;
    font-size: 10px;
    padding: 2px 8px;
}



@media (max-width: 600px) {
    .f-img-wrapper {
        height: 80px; /* মোবাইলে হাইট অ্যাডজাস্টমেন্ট */
    }
}



/* এক্সপায়ারি মেসেজ বক্স - কার্ডের বাইরে বা উপরে সেট করার জন্য */
.expiry-alert-box {
    background: #fff3cd;
    color: #856404;
    padding: 10px;
    border-radius: 6px;
    margin: 10px 15px 0 15px; /* কার্ডের ভেতরে মার্জিন */
    font-size: 13px;
    border: 1px solid #ffeeba;
    display: block;
    clear: both;
}

/* বাটন পজিশন ঠিক রাখা */
.status-badge-container {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 8px;
}

.my-status-btn {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    color: #fff !important;
}

.bg-active { background-color: #28a745; }
.bg-renew { background-color: #007bff; }