/* Custom Category Colors */

/* Category: Photography */
.category-photography {
    background-color: #E0F7FA; /* Light Blue */
    color: #00796B; /* Teal */
    border: 1px solid #00BCD4;
}

/* Category: Travel */
.category-travel {
    background-color: #FFF3E0; /* Light Orange */
    color: #E65100; /* Dark Orange */
    border: 1px solid #FF9800;
}

/* Category: Food */
.category-food {
    background-color: #FCE4EC; /* Light Pink */
    color: #C2185B; /* Dark Pink */
    border: 1px solid #E91E63;
}

/* Category: Technology */
.category-technology {
    background-color: #EDE7F6; /* Light Purple */
    color: #512DA8; /* Dark Purple */
    border: 1px solid #9C27B0;
}

/* Category: Fashion */
.category-fashion {
    background-color: #E8F5E9; /* Light Green */
    color: #388E3C; /* Dark Green */
    border: 1px solid #4CAF50;
}

/* You can add more custom categories here following the same pattern */

/* Example of how to style a specific element within a custom category */
/* If you have a post title or a specific link *inside* a category, you can target it like this */
.category-photography .post-title {
    font-weight: bold;
    font-size: 1.2em;
}

.category-travel a {
    text-decoration: underline;
    color: #E65100; /* Use the category's main color for links */
}

/* General Custom Category Styling (if applicable to all custom categories) */
/* This is useful if you have a common "tag" or "pill" style for all your custom categories */
.category-tag { /* Assuming you use a class like 'category-tag' on your category display elements */
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px; /* Add some space around tags */
    display: inline-block; /* Allows side-by-side display */
    font-size: 0.9em;
    font-weight: 600; /* Slightly bolder text */
    text-transform: uppercase; /* Make text uppercase for a tag-like feel */
}

/* Hover effects for custom categories/tags */
/* Apply this to the element that holds the category class, e.g., .category-tag or directly .category-photography */
.category-tag:hover {
    opacity: 0.8;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow on hover */
    transform: translateY(-1px); /* Slight lift effect */
    transition: all 0.3s ease-in-out; /* Smooth transition for all changes */
}

/* Example for specific category hover (if you want different hover effects) */
.category-photography:hover {
    background-color: #B3E5FC; /* Lighter blue on hover */
}

/* If you want tight list item spacing within category descriptions where custom categories are used */
.term-description ul li {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.4em !important; /* Try a slightly tighter line height for list items */
}

/* --- NEW/MERGED STYLES FOR READ MORE AND FILTER VISIBILITY --- */

/* Styling for the Read More button */
.ozwide-read-more-toggle {
    display: inline-block !important; /* Ensure it respects width/margin */
    margin: 15px 0 0 0 !important; /* Align to left */
    padding: 10px 20px !important;
    background-color: #5098B7 !important; /* Desired blue color */
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important; /* Added border-radius for rounded edges */
    cursor: pointer;
    font-size: 16px !important;
    transition: background-color 0.3s ease;
    text-align: center; /* Ensures text inside is centered */
    text-decoration: none; /* Remove any default link underlines if it were an <a> */
}

.ozwide-read-more-toggle:hover {
    background-color: #1f809e !important; /* Darker blue on hover */
}

/* Ensure the target wrapper has appropriate spacing if needed */
.ozwide-read-more-target {
    margin-bottom: 20px; /* Space below the entire read more section */
}

/* Basic styling for filter visibility button */
#toggle-filters-button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: #5098B7; /* Light blue, match your existing filter styles if possible */
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px; /* Space below the button */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#toggle-filters-button:hover {
    background-color: #1f809e; /* Darker blue on hover */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Hide filters on mobile by default, will be toggled by JS */
@media (max-width: 768px) {
    .woocommerce-sidebar ul.product-categories {
        display: none !important; /* Important to override theme styles */
    }
    /* Ensure the button is visible on mobile */
    #toggle-filters-button {
        display: block;
    }
}

/* Hide the toggle button on desktop */
@media (min-width: 769px) {
    #toggle-filters-button {
        display: none !important; /* Hide button on larger screens */
    }
}