* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', sans-serif; background: var(--bg-light); padding-bottom: 70px; }

/* LANGUAGE BAR */
.top-bar {
    background: #fff;
    padding: 5px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.lang-btn {
    text-decoration: none;
    font-size: 11px;
    color: #666;
    padding: 2px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.lang-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* HEADER */
.header {
    background: #fff;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--accent);
    position: sticky;
    top: 0; z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.logo-img { width: 180px; height: 85px; object-fit: contain; }

/* MAIN LAYOUT */
.main-container {
    max-width: 1250px; margin: 20px auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    padding: 0 15px;
}
    .custom-badge { background-color: #a5aab0; color: white; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; display: inline-flex; align-items: center; text-transform: uppercase; }
    .verified-seller-badge { color: #56fa05; font-size: 12px; font-weight: bold; text-transform: uppercase; display: inline-flex; align-items: center; margin-left: 10px; }
      
      .shield-badge-img {
    height: 16px; /* சிறிய உயரம் */
    width: auto;
    display: inline-block;
    vertical-align: middle;
    /* படத்தைச் சுருக்கும்போது ஏற்படும் மங்கலைத் தவிர்க்க */
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: crisp-edges;
}
/* SIDEBAR */
.sidebar { background: #fff; padding: 20px; border-radius: 12px; height: fit-content; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
./* சைடுபார் லிங்க் நிறத்தை மாற்ற */
.cat-list a, .sub-cat-list a {
    color: #444 !important; /* உங்களுக்குப் பிடித்த நிறம் (கருப்பு அல்லது சாம்பல்) */
    text-decoration: none;
}

/* மவுஸை மேலே கொண்டு செல்லும்போது நிறம் மாற */
.cat-list a:hover, .sub-cat-list a:hover {
    color: #034a03 !important; /* பச்சை அல்லது உங்கள் பிராண்ட் நிறம் */
}

/* சப்-கேட்டகிரி லிங்க் ஸ்டைல் */
.sub-cat-list a {
    color: #666 !important;
    font-size: 14px;
}

/* CARD STYLES */
.ad-card-link { text-decoration: none !important; color: inherit !important; }
.ad-card-link:hover .card { box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; }

/* Pagination பெட்டியை மையப்படுத்த */
.pagination {
    display: flex !important;
    justify-content: center !important;
    list-style: none; /* புள்ளி இல்லாமல் இருக்க */
    padding: 0;
}

/* மொபைல் மற்றும் PC இரண்டிற்கும் பொருந்தும் வகையில் */
nav[aria-label="Page navigation"] {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* தேடல் பெட்டியை அடக்க உதவும் கண்டெய்னர் */
.search-box {
    display: flex;
    max-width: 400px;
    margin: 20px auto; /* சென்டர் செய்ய */
    border: 2px solid #ddd;
    border-radius: 50px; /* வட்டமான ஓரங்கள் */
    overflow: hidden;
    background: #fff;
    transition: 0.3s;
}

/* மவுஸை மேலே கொண்டு சென்றால் நிறம் மாறும் */
.search-box:focus-within {
    border-color: #ba770d; /* உங்கள் விருப்பமான நிறம் */
    box-shadow: 0 0 8px rgba(186, 119, 13, 0.3); /* அதே நிறத்தின் வெளிச்சம் (Shadow) */
}

/* டெக்ஸ்ட் இன்புட் */
.search-box input[type="text"] {
    flex: 1;
    border: none;
    padding: 10px 20px;
    outline: none;
    font-size: 16px;
}

/* பட்டன் ஸ்டைல் */
.search-box button {
    background: var(--accent); color: #000;
    color: #fffff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.search-box button:hover {
    background: #ba770d;
}

/* poup */

/* Modal Container */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 30px; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }

/* நீளமான மோடல் பெட்டி */
.modal-content { 
    background: white; 
    width: 90%; 
    max-width: 650px; 
    margin: 30px auto; 
    padding: 25px; 
    border-radius: 15px; 
    max-height: 85vh; /* திரையில் 85% உயரத்தை எடுக்கும் */
    overflow-y: auto; /* நீளமாக இருந்தால் ஸ்க்ரோல் ஆகும் */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Accordion Styles */
.filter-group { border-bottom: 1px solid #eee; padding: 15px 0; }
.filter-title { cursor: pointer; font-size: 12px; color: #333; margin: 0; }
.filter-section { display: none; padding-top: 10px; }
.modal-select { width: 100%; padding: 12px; margin-top: 10px; border-radius: 6px; border: 1px solid #ccc; }
.apply-btn { width: 100%; padding: 15px; background: #009688; color: white; border: none; border-radius: 8px; font-weight: bold; margin-top: 20px; }

@media (max-width: 600px) {
    .modal-content {
        width: 85%; /* மொபைலில் அகலத்தை சற்று கூட்டிக் கொள்கிறோம் */
        margin: 30px auto; /* மேல் பகுதியில் இடைவெளியைக் குறைக்கிறோம் */
        padding: 15px; /* உட்புற இடைவெளியை மொபைலுக்கு ஏற்ப மாற்றுகிறோம் */
        border-radius: 20px; /* ஓரங்களை இன்னும் வளைவாக மாற்றலாம் */
    }

    .filter-title {
        font-size: 12px; /* மொபைலில் எழுத்து அளவு */
        padding: 12px 0;
    }
    .modal-select { 
        width: 100%; 
        padding: 10px; /* அளவு சற்று குறைப்பு */
        margin-top: 8px; 
        border-radius: 6px; 
        border: 1px solid #ccc; 
        font-size: 10px;
    }
    
    .apply-btn {
        padding: 14px; /* பட்டனை பெரியதாக வைத்தால் கிளிக் செய்ய வசதி */
        font-size: 12px;
    }
    
    /* Close button-ஐ மொபைலில் சற்றுப் பெரியதாகத் தெரிய */
    .close {
    font-size: 32px;
    padding: 5px;
    color: #f50a0a;
    cursor: pointer;
    line-height: 1;
    margin-left: auto; /* இது பட்டனை தானாக வலது பக்கம் தள்ளும் */
}
}

.check-item {
    display: inline-flex;
    align-items: center;
    background-color: #f0f0f0; /* டீபால்ட்டாக ஒரு சாம்பல் நிறம் */
    color: #333;
    padding: 4px 10px;      /* உட்புற இடைவெளி குறைக்கப்பட்டுள்ளது */
    border-radius: 4px;     /* சிறிய வளைவு */
    font-size: 12px;        /* எழுத்து அளவு குறைக்கப்பட்டுள்ளது */
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s;
    margin: 3px;            /* பட்டன்களுக்கு இடையிலான இடைவெளி */
    border: 1px solid #ddd;
}

/* தேர்வு செய்தவுடன் (Checked) நிறம் மாற */
.check-item:has(input:checked) {
    background-color: #e63946;
    color: white;
    border-color: #e63946;
}

/* ஒரிஜினல் செக்‌ஸ்பாக்ஸை மறைக்க */
.check-item input {
    display: none; 
}

/* அடிப்படை ஸ்டைல் */
.filter-select, .refine-btn {
    color: #009688;
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid #ced4da;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease; /* நிறம் மாறும்போது ஸ்மூத்தாக இருக்க */
}

/* Refine பட்டன் சிறப்பு ஸ்டைல் */
.refine-btn {
    border-color: #009688;
    font-weight: bold;
}

/* ACTIVE நிலை (நீங்கள் கேட்ட பச்சை நிறம்) */
.filter-select.active, 
.refine-btn.active {
    background-color: #d1e7dd !important; /* லேசான பச்சை பின்னணி */
    color: #0f5132 !important;            /* அடர் பச்சை எழுத்து */
    border-color: #badbcc !important;      /* அடர் பச்சை பார்டர் */
}

/* Hover ஸ்டைல் (மவுஸ் மேலே செல்லும்போது) */
.filter-select:hover, .refine-btn:hover {
    background-color: #f8f9fa;
    border-color: #009688;
}

.filter-bar {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #f8f9fa;
    align-items: center;
    flex-wrap: wrap; 
    justify-content: center;
}

.filter-bar {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #f8f9fa;
    align-items: center;
    /* மொபைலுக்காக சேர்க்க வேண்டியவை */
    flex-wrap: wrap; 
    justify-content: center; /* மொபைலில் சென்டர் செய்ய */

}