/* Base styles for the page container */
.gypfor-search-page-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    padding: 0 1rem;
}

/* Styles for the search filter container */
.search-filter-container {
    flex: 1 1 25%; /* 1/4 width for desktop */
    box-sizing: border-box; /* Include padding and border in width calculation */
    padding: 2rem;
    background-color: #f5f5f5; /* Light grey background for sidebar */
}

/* Styles for the search results container */
.search-results-container {
    flex: 3 1 75%; /* 3/4 width for desktop */
    box-sizing: border-box;
    padding: 0 20px;
    background-color: #ffffff; /* White background for results */
}

.filter-options {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-direction: column;
    flex-wrap: wrap;
}

/* Hide filter toggle button by default */
.filter-toggle {
    display: none;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 1rem; 
}

.filter-toggle-button {
    display: none; /* Use flexbox layout for the button */
    flex: 0 0 100%;
    justify-content: center; /* Space between text and icon */
    align-items: center; /* Center items vertically */
    padding: 10px;
}


.results-count {
    margin-bottom: 1rem;
    font-weight: bold;
}

/* Individual filter sections styling */
.filter-section {
    margin-bottom: 15px; /* Space between sections */
    display: flex;
    flex-direction: column;
}

.section-toggle-button {
    display: flex; /* Use flexbox layout for the button */
    flex: 0 0 100%;
    justify-content: space-between; /* Space between text and icon */
    align-items: center; /* Center items vertically */
    padding: 10px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}

.section-toggle-button .choices {
    padding: 0 1rem;
    font-size: 10px;
}

.section-toggle-button i {
    margin-left: 8px; /* Space between the button text and icon */
    font-size: 16px;  /* Adjust icon size if needed */
}

.section-content {
    display: none; /* Initially hide section content */
    padding: 10px;
    background-color: #f0f0f0; /* Slightly different grey for section content */
    /* Flex styles */
    flex-direction: column; /* Default direction for flex items */
    gap: 10px; /* Space between flex items */
}

.section-content label {
    display: block; /* Make each label block-level for better spacing */
    font-size: 14px; /* Font size for readability */
}

.section-content input[type="checkbox"] {
    margin-right: 5px; /* Space between checkbox and label text */
}

.section-content input[type="number"]:focus {
    background-color: #f2faff;
    border-color: #1966bf;
}

.grid-table {
    display: grid;  
    width: 100%;
    border: 1px solid #1966bf;
	font-size: 12px;
}

.grid-table.search {
	grid-template-columns: 14% 14% 20% 14% 14% 16% 8%;
}

.grid-row {
    display: contents;
}

.grid-row.header .grid-cell {
    padding: 10px;
    font-weight: bold;
    text-align: center;
    border-top: 1px solid #1966bf;
    border-bottom: 1px solid #1966bf;
    background-color: #f5f5f5;
}

.grid-row.body .grid-cell {
    display: flex;
    align-items: center; 
    justify-content: center;
    padding: 0.5rem;
    border-top: 1px solid #1966bf;
    border-bottom: 1px solid #1966bf;
}

.grid-row.body.show {
    display: contents;
    animation: slide-right .5s ease-out;
    -webkit-animation: slide-right .5s ease-out;
    -moz-animation: slide-right .5s ease-out;
}

.grid-row.body.hide {
    display: none;
    animation: slide-left 1s ease-out;
    -webkit-animation: slide-left 1s ease-out;
    -moz-animation: slide-left 1s ease-out;
}

.viewmore-btn {
    padding: 0.5rem;
}

    .mobile-label {
        display: none;
        font-weight: bold;
        padding-right: 0.5rem;
    }

/* Responsive styles for mobile devices */
@media (max-width: 1000px) {
    .gypfor-search-page-container {
        flex-direction: column; /* Stack items vertically on mobile */
    }

    /* Hide the filter options initially on mobile */
    .search-filter-container .filter-options {
        display: none;
    }

    .search-filter-container {
        flex: 1 1 100%; /* Full width on mobile */
        order: 1; /* Keep it on top */
    }

    .search-results-container {
        flex: 1 1 100%; /* Full width on mobile */
        order: 2; /* Keep it below the filter */
    }

    .filter-toggle,
    .filter-toggle-button {
        display: flex; /* Use flexbox layout for the button */
    }



    /* Styles for expanded filter options */
    .search-filter-container.expanded .filter-options {
        display: block;
        background-color: #f5f5f5;
    }

    .section-content label {
        display: inline-block;
        margin-right: 1.5rem;
    }
}

@media (max-width: 768px) {
    .grid-row.header {
        display: none;
    }

    .grid-row.body.show {
        display: flex;
    }

    .grid-row.body .grid-cell {
        border: none;        
    }

    .grid-table.search {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        width: 100%; /* Ensure full width */
        border: none; /* Remove borders to clean up appearance */
    }


    .product-card-container {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #1966bf;
        margin-bottom: 10px;
        padding: 10px;
        justify-content: space-around;
    }


    .product-card-image, 
    .product-card-viewmore {
        width: 50%;
        display: flex;
        justify-content: center; /* Center the content */
        align-items: center;
    }

    /* Ensure remaining elements stack below */
    .product-card-reference,
    .product-card-system,
    .product-card-plate,
    .product-card-thickness,
    .product-card-fogo {
        display: flex;
        justify-content: flex-start; /* Align text to the left */
        padding: 5px 0;
        border-top: none; /* Remove top border */
        border-bottom: none; /* Remove bottom border */
    }

    .mobile-label {
        display: flex;
    }

    /* Adjust text alignment for consistency */
    .grid-cell {
        text-align: left;
    }
}