/* --- Global Color Palette (Using your current colors) --- */
:root {
    --primary-blue: #007bff; /* Color for active elements (from your current active category/search button) */
    --primary-green: #38a54d; /* Color for buttons (View Details) */
    --hover-green: #2c8c40;
    --light-bg: #f8f9fa; 
}

/* ------------------------------------------- */
/* --- 1. Sidebar Styling (From your provided code) --- */
/* ------------------------------------------- */
.sidebar {
    padding: 20px;
    /* Updated background color for a cleaner look */
    background-color: #f0f3c4; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Added a subtle shadow */
}
.category-filter h4 {
    font-weight: bold;
    color: #333;
}
.category-link {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #555;
    border-radius: 5px;
    margin-bottom: 5px;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 500;
}
.category-link:hover {
    background-color: #e9ecef;
}
.category-link.active {
    /* Used the blue color seen in your screenshots */
    background-color: #00b449;
    color: #fff;
    font-weight: bold;
}

/* ------------------------------------------------ */
/* --- 2. Search & Sort Bar (CRITICAL FIXES) --- */
/* ------------------------------------------------ */

/* Container for the whole bar - ensures white background and shadow */
.row.align-items-center.mb-4 {
    background-color: #ffffff;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px !important;
}

/* FIX: Align Search/Sort Controls Horizontally and Prevent Wrapping */
.col-md-6.d-flex.justify-content-end {
    display: flex;
    align-items: center; /* Vertical alignment */
    flex-wrap: nowrap; /* CRITICAL: Prevents controls from stacking on smaller screens */
    gap: 10px; /* Space between search form and sort form */
}

/* Ensure the Search Form itself is aligned with the button */
.col-md-6.d-flex.justify-content-end form:first-child {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* Style for input/select to maintain consistent height */
.form-control, .form-select, .btn {
    height: 40px; 
    font-size: 14px;
    box-shadow: none !important;
}

/* Search Input/Button borders */
.form-control[name="search"] {
    border-radius: 8px 0 0 8px;
    border-color: #ddd;
}
.btn-primary[type="submit"] {
    border-radius: 0 8px 8px 0;
    padding: 0 20px;
    background-color: #00b449; /* Blue search button */
    border-color: #00b449;
    white-space: nowrap;
}

/* Sort Dropdown borders */
.form-select[name="sort_by"] {
    border-radius: 8px;
    min-width: 150px;
    border-color: #ddd;
}

/* FIX: Remove the unwanted second icon/dropdown arrow */
/* This is a common fix if two arrows are showing up due to conflicting styles */
.form-select::-ms-expand {
    display: none;
}
.form-select {
    /* If you still see two arrows, try hiding the default Bootstrap one: */
    /* appearance: none; */
}


/* ------------------------------------------- */
/* --- 3. Product Card Styling (From your provided code) --- */
/* ------------------------------------------- */
.product-grid {
    padding: 0 15px;
}
.product-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    max-width: 250px;
    width: 100%;
    margin: 0 auto;
    height: 100%; /* Ensures all cards in a row are the same height */
    display: flex;
    flex-direction: column;
}
.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.product-thumb {
    padding: 15px;
    background-color: #fff;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-image {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.product-content {
    padding: 15px;
    text-align: center;
    flex-grow: 1; /* Allows content to expand to fill space */
    display: flex;
    flex-direction: column;
}
.product-title {
    font-size: 1.1rem;
    margin-bottom: 5px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
}
.product-title a {
    color: #333;
    text-decoration: none;
    word-wrap: break-word;
}
.product-title a:hover {
    color: var(--primary-green); /* Changed to green theme */
}
.product-price {
    font-size: 1rem;
    color: var(--primary-green); /* Changed to green theme */
    font-weight: bold;
    margin-bottom: 10px;
}
.bd-fill__btn {
    width: 100%;
    /* Button styles using the green theme */
    background-color: #6a983e;
    color: #fff;
    padding: 10px 15px; 
    border-radius: 8px; 
    text-decoration: none;
    transition: background-color 0.3s;
}
.bd-fill__btn:hover {
    background-color: var(--hover-green);
}

/* ------------------------------------------- */
/* --- 4. Pagination Styling (CRITICAL FIX) --- */
/* ------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
}
.pagination .page-item {
    margin: 0 5px;
}
.pagination .page-link {
    display: block;
    width: 40px;
    height: 40px;
    /* FIX: Make it a perfect circle */
    border-radius: 50%;
    
    line-height: 40px; /* Centers the number vertically */
    text-align: center;
    color: #555;
    background-color: #f8f9fa;
    border: 1px solid #ddd; /* Added border for definition */
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    font-weight: bold;
    padding: 0; /* Remove default padding */
}
.pagination .page-link:hover {
    background-color: #e9ecef;
}
.pagination .page-item.active .page-link {
    /* Used the blue color seen in your active pagination */
    background-color:#f0f3c4;
    color: #000;
    border-color: #f0f3c4
}

/* ---------------------------------------------------- */
/* --- 5. MOBILE RESPONSIVENESS (Max Width 767px) --- */
/* (మీరు అడిగిన విధంగా కేవలం మొబైల్ వ్యూ సెట్టింగ్‌లు) */
/* ---------------------------------------------------- */
@media (max-width: 767px) {
    .shop-page-area {
        padding: 30px 0; /* మొబైల్‌లో padding తగ్గిస్తుంది */
    }

    /* --- Sidebar Mobile Fix --- */
    /* Sidebar ను పైన (1వ స్థానంలో) మరియు Product Grid ను కింద (2వ స్థానంలో) ఉంచుతుంది */
    .col-lg-3 {
        order: 1;
        margin-bottom: 20px;
        width: 100%; /* పూర్తి వెడల్పు తీసుకుంటుంది */
    }
    .col-lg-9 {
        order: 2;
        width: 100%; /* పూర్తి వెడల్పు తీసుకుంటుంది */
    }
    .sidebar {
        width: 100%; /* Sidebar పూర్తి వెడల్పు తీసుకుంటుంది */
    }

    /* --- Search/Sort Bar Mobile Fix (Stacking) --- */
    .row.align-items-center.mb-4 {
        flex-direction: column; /* మొత్తం Search/Sort Bar ను నిలువుగా మారుస్తుంది */
        padding: 15px;
    }

    /* Full width for header and count text */
    .row.align-items-center.mb-4 > .col-md-6 {
        width: 100%;
        padding: 0;
        margin-bottom: 15px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Search and Sort controls ను నిలువుగా మారుస్తుంది */
    .d-flex.justify-content-end {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
    }
    
    /* Search Form ను పూర్తి వెడల్పుగా మారుస్తుంది */
    .col-md-6.d-flex.justify-content-end form:first-child,
    .d-flex.justify-content-end form:last-child {
        width: 100%;
    }
    .input-group {
        width: 100%;
    }
    
    /* --- Product Grid Mobile Fix (Two Columns) --- */
    .product-grid {
        padding: 0;
    }
    /* ప్రతి Product item ను 50% వెడల్పుగా సెట్ చేసి, ఒక వరుసలో రెండు వచ్చేలా చేస్తుంది */
    .product-grid .row > [class*="col-"] {
        /* Bootstrap class లేనప్పటికీ, CSS తో బలవంతంగా 2 columns సెట్ చేస్తుంది */
        width: 50%;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .product-item {
        max-width: 100%;
    }
    .product-thumb {
        height: 150px; /* Image size తగ్గిస్తుంది */
    }

    /* --- Pagination Mobile Fix --- */
    .pagination .page-item {
        margin: 0 2px;
    }
    .pagination .page-link {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 0.9rem;
    }
}