/* General Dark Mode Variables & Base */
:root {
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #222222;
    --dark-card-bg: #282828;
    --dark-border-color: #333;
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    --dark-text-muted: #888;
    --dark-accent-green: #58d68d;
    --dark-accent-green-hover: #4ac77c;
    --dark-input-bg: #282828;
    --dark-input-border: #444;
    --dark-input-placeholder: #888;
    --dark-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    --dark-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --dark-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* --- NEW STYLES FOR PRODUCT TAGS/PILLS --- */

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Space between the tags */
    margin-top: 0.5rem; /* Space above the tags, below other product info */
    justify-content: flex-start; /* Align tags to the left */
}

.product-tag {
    /* Inherit pill/tag styles from existing .tag or .gender-option for consistency */
    background-color: #2f6f35; /* Darker green for general tags */
    color: white;
    border-radius: 20px; /* Pill shape */
    padding: 0.4rem 0.8rem; /* Smaller padding for more compact tags */
    font-size: 0.85rem; /* Slightly smaller font size */
    font-weight: 500;
    white-space: nowrap; /* Prevent text from wrapping inside the tag */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}

.product-tag:hover {
    background-color: #3a8a3a; /* Lighter green on hover */
}

/* Optional: Specific colors for different tag types if desired */
.material-tag {
    /* Use the main accent green for materials */
    background-color: var(--dark-accent-green);
    color: var(--dark-bg-primary); /* Dark text on bright green */
}

.material-tag:hover {
    background-color: var(--dark-accent-green-hover);
}

.broad-type-tag {
    /* A slightly different shade or the secondary text color for broad type */
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border-color);
}

.broad-type-tag:hover {
    background-color: #3a3a3a;
}

.specific-type-tag {
    /* Another distinct color, perhaps muted text or a different accent */
    background-color: var(--dark-card-bg);
    color: var(--dark-text-secondary);
    border: 1px solid var(--dark-border-color);
}

.specific-type-tag:hover {
    background-color: #3a3a3a;
}


/* Optional: if you added a label above the gender options */
.gender-label {
    font-size: 0.9rem;
    color: var(--dark-text-secondary, #b0b0b0);
    margin-bottom: 0.5rem;
    text-align: center; /* Or left */
}

/* 1. Body & Global Background/Text */
html, body { /* Ensure html also has dark background */
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

h1, h2, h3, h4 {
    color: var(--dark-text-primary) !important;
}

/* In compare-dark-mode.css */
main a { /* Apply general link styles only to links within the <main> element */
    color: var(--dark-accent-green) !important;
}

main a:hover { /* Same for hover state */
    color: var(--dark-accent-green-hover) !important;
}

/* 2. Header & Navigation */
.navbar {
    background: var(--dark-bg-secondary) !important;
    border-bottom: 1px solid var(--dark-border-color) !important;
    box-shadow: var(--dark-shadow) !important;
}

.navbar-logo { /* Specific to compare.html's simple header */
    color: var(--dark-accent-green) !important;
}

.navbar-logo img { /* Ensure logo height is consistent if not loading full header component */
    height: 60px !important; /* Adjust if your logo is larger/smaller */
}


.navbar-links a {
    color: var(--dark-text-secondary) !important;
}

.navbar-links a:hover {
    background-color: #2f6f35 !important;
    color: white !important;
}

.nav { /* from index.css, if used on other pages */
    background-color: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border-color) !important;
    border-bottom: 1px solid var(--dark-border-color) !important;
}

.nav-item {
    background-color: var(--dark-card-bg) !important;
    border: 1px solid var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

.nav-item:hover {
    background-color: var(--dark-accent-green) !important;
    color: var(--dark-bg-primary) !important;
    border-color: var(--dark-accent-green) !important;
}

.nav-item.selected {
    background-color: var(--dark-accent-green) !important;
    color: var(--dark-bg-primary) !important;
    border-color: var(--dark-accent-green) !important;
}

/* 3. Headings & Main Wrapper (common to many pages) */
main { /* Main wrapper on compare.html */
    background-color: var(--dark-bg-primary) !important;
}

.wrapper { /* Used on channel.html */
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 2rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.channel-header { /* Used on compare.html and channel.html */
    text-align: center !important;
    width: 100% !important;
    max-width: 1200px !important; /* To center the heading itself */
    margin: 40px auto 24px auto !important;
    padding: 0 20px !important;
}

.channel-header h1 { /* Specifically for "Compare Products" heading on compare.html */
    color: var(--dark-accent-green) !important;
    font-size: 2rem !important; /* Ensure consistent font size */
    text-align: center !important;
    margin-bottom: 2rem !important;
}


#channelName { /* Specific to channel.html */
    font-family: 'Merriweather', serif !important;
    font-size: 2.2rem !important;
    color: var(--dark-accent-green) !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto 1rem auto !important;
}

.page-heading,
.main-heading,
.channel-header h1,
.channel-header h2 { /* General headings - ensure consistent green color */
    color: var(--dark-accent-green) !important;
    text-align: center !important; /* Always center */
}

.sub-heading,
.channel-header p {
    color: var(--dark-text-secondary) !important;
}

#status { /* For "No products found." message */
    color: var(--dark-text-secondary) !important;
}

/* 5. Pagination Buttons (Load Next Page, Previous Page) */
#paginationButtons {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin: 1.5rem 0 !important;
}

#paginationButtons button {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
}

#prevPageBtn {
    background-color: var(--dark-card-bg) !important; /* Dark background for prev */
    color: var(--dark-text-primary) !important; /* Light text */
    border: 1px solid var(--dark-border-color) !important;
}

#prevPageBtn:hover:not(:disabled) {
    background-color: #3a3a3a !important; /* Lighter dark on hover */
}

#loadMoreBtn {
    background-color: var(--dark-accent-green) !important; /* Your vibrant green */
    color: var(--dark-bg-primary) !important; /* Dark text on green */
}

#loadMoreBtn:hover:not(:disabled) {
    background-color: var(--dark-accent-green-hover) !important;
}

/* Common disabled button style */
#paginationButtons button:disabled {
    background-color: #2f6f35 !important;
    color: var(--dark-text-muted) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}


/* 6. Product Comparison Grid */
.compare-products {
    background-color: var(--dark-bg-primary) !important; /* Match body background for seamless look */
    border-radius: 12px !important;
    padding: 2rem !important;
    display: grid !important; /* Keep grid layout */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; /* Keep responsive columns */
    gap: 2rem !important;
}

.compare-products h2 { /* Vendor headings like "COMPASSIONATECLOSET" */
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--dark-text-secondary) !important; /* Lighter grey for these headings */
    border-bottom: 1px solid var(--dark-border-color) !important; /* Darker border */
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    text-align: center !important;
}

/* Product Card */
.product-card {
    background: var(--dark-card-bg) !important; /* Dark card background */
    border-radius: 16px !important;
    box-shadow: var(--dark-card-shadow) !important;
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    transition: all 0.3s ease !important;
}

.product-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--dark-hover-shadow) !important;
}

.product-card img {
    width: 100% !important; /* Ensure image takes full width of card */
    max-height: 240px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background-color: #2f2f2f !important; /* Darker background for image placeholder */
}

.product-title {
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: var(--dark-accent-green) !important; /* Green for product title */
    text-decoration: none !important;
}

.product-title:hover,
.product-title:focus {
    color: var(--dark-accent-green-hover) !important;
}

.product-price,
.product-summary {
    font-size: 0.95rem !important;
    color: var(--dark-text-secondary) !important; /* Light grey for price and summary */
    margin: 4px 0 !important;
}


/* Common elements from other pages, ensure they apply consistently */
.video-card { /* Main container for each video + info section (from channel.html) */
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    gap: 24px !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto 0 !important;
    padding: 1rem 24px !important;
    background-color: var(--dark-card-bg) !important;
    border-radius: 12px !important;
    box-shadow: var(--dark-card-shadow) !important;
    align-items: flex-start !important;
    transition: all 0.3s ease !important;
}

.video-card:hover {
    box-shadow: var(--dark-hover-shadow) !important;
}

.video-section, .info-section { /* Direct children of .video-card */
    flex: 1 1 0 !important;
    min-width: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: none !important;
}

.video-section iframe {
    background-color: #000 !important;
}

.summary {
    color: var(--dark-text-secondary) !important;
}

.summary strong {
    color: var(--dark-accent-green) !important;
}

.tags {
    margin-top: 16px !important;
}

.tag {
    background-color: #2f6f35 !important;
    color: white !important;
}

.tag:hover {
    background-color: #3a8a3a !important;
    color: white !important;
}

details {
    background-color: var(--dark-card-bg) !important;
    border: 1px solid var(--dark-border-color) !important;
    box-shadow: none !important; /* Removed redundant shadow */
}

summary {
    color: var(--dark-accent-green) !important;
}

summary::-webkit-details-marker,
summary::marker {
    display: none !important;
    content: none !important;
}

.ingredients-heading {
    color: var(--dark-accent-green) !important;
}

.scrollable-list {
    color: var(--dark-text-secondary) !important;
}

.scrollable-list ul {
    list-style-type: disc !important;
}

.scrollable-list li {
    color: var(--dark-text-secondary) !important;
}

.scrollable-list li::marker {
    color: var(--dark-accent-green) !important;
}

.product-section h4, .device-section h4 {
    color: var(--dark-text-primary) !important;
}

.ingredient-scroll ul, .device-list {
    list-style: none !important;
}

.ingredient-scroll li, .device-list li {
    background-color: var(--dark-card-bg) !important;
    border: 1px solid var(--dark-border-color) !important;
    border-radius: 8px !important; /* Adjust if needed */
    font-size: 0.9rem !important;
    color: var(--dark-text-primary) !important;
}

/* General button styles for dark mode consistency */
/* General button styles for MAIN CONTENT in dark mode consistency */
main button { /* <<<< CHANGED: Now only targets buttons INSIDE <main> */
    background-color: var(--dark-accent-green) !important;
    color: var(--dark-bg-primary) !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

main button:hover:not(:disabled) { /* <<<< CHANGED */
    background-color: var(--dark-accent-green-hover) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

main button:disabled { /* <<<< CHANGED */
    background-color: #2f6f35 !important;
    color: var(--dark-text-muted) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

main form#searchForm button {
    background-color: var(--dark-accent-green) !important;
    color: var(--dark-bg-primary) !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

main form#searchForm button:hover:not(:disabled) {
    background-color: var(--dark-accent-green-hover) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Style for pagination buttons, if they should also have this green style */
main #paginationButtons button {
    background-color: var(--dark-accent-green) !important;
    color: var(--dark-bg-primary) !important;
    border: none !important;
    /* ... add other necessary !important properties from your original rule ... */
}

main #paginationButtons button:hover:not(:disabled) {
    background-color: var(--dark-accent-green-hover) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    /* ... add other necessary !important properties ... */
}


/* Loader (Spinner) */
.loader {
    border-color: var(--dark-border-color) !important;
    border-top-color: var(--dark-accent-green) !important;
}

/* Empty state */
.empty-state {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text-primary) !important;
    border: 1px dashed var(--dark-accent-green) !important;
}

/* Focus Styles for Accessibility */
input:focus,
select:focus,
button:focus,
details summary:focus {
    outline: 3px solid rgba(88, 214, 141, 0.4) !important;
    outline-offset: 2px !important;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .video-card {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
        padding: 1rem !important;
    }

    .video-section, .info-section {
        padding: 0 !important;
    }

    .video-section iframe {
        height: 200px !important;
    }

    .summary {
        font-size: 0.9rem !important;
        margin-top: 1rem !important;
    }

    .tags {
        margin-top: 1rem !important;
    }

    .ingredients-heading {
        font-size: 1.2rem !important;
    }

    .scrollable-list {
        padding: 0.3rem !important;
        font-size: 0.9rem !important;
    }

    .scrollable-list ul {
        padding-left: 1em !important;
    }

    .scrollable-list li {
        font-size: 0.9rem !important;
    }

    .pagination-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }

    .search-bar {
        display: flex;
        flex-direction: column; /* This stacks the .query-submit-group above .gender-selection-area */
        align-items: center; /* Centers the groups horizontally within the form */
        gap: 1rem; /* Space between the query/submit group and the gender selection area */
        width: 100%; /* Make the form take available width */
        max-width: 700px; /* Or your preferred max width for the whole search area */
        margin: 0 auto 2rem auto; /* Center the form on the page and add some bottom margin */
    }

    /* This creates the main container "card" that the carousel lives inside. */
    .item-carousel-section {
        position: relative;
        width: 90%;
        margin: 40px auto;
        padding: 30px 20px;
        border: 2px solid var(--dark-border-color);
        border-radius: 16px;
        background-color: var(--dark-bg-secondary);
        box-shadow: var(--dark-shadow);
    }

    /* This handles the overflow for the scrolling area inside the card. */
    .carousel-content-wrapper {
        overflow-x: hidden;
    }

    /* These rules position the arrow buttons just outside the container card. */
    .item-carousel-section .scroll-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;

        /* Styling for the buttons themselves */
        font-size: 24px;
        padding: 12px 16px; /* This may not be exact if icon size dictates button size */
        background-color: var(--dark-accent-green);
        color: var(--dark-bg-primary);
        border: none;
        border-radius: 50%;
        height: 48px; /* Set a fixed height */
        width: 48px; /* Set a fixed width */
        cursor: pointer;
        box-shadow: var(--dark-card-shadow);
        transition: background-color 0.3s;

        /* Flex properties to perfectly center the icon */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .item-carousel-section .scroll-button.left {
        left: -24px; /* Positioned just off the left edge of the card */
    }

    .item-carousel-section .scroll-button.right {
        right: -24px; /* Positioned just off the right edge of the card */
    }

    .item-carousel-section .scroll-button:hover {
        background-color: var(--dark-accent-green-hover);
        box-shadow: var(--dark-hover-shadow);
    }

    #mainSearchButton { /* Or use: form#searchForm button[type="submit"] */
        /* Your existing styles for the search button should remain. For example: */
        padding: 0.75rem 1.25rem !important; /* From your existing CSS */
        font-size: 1rem !important;
        cursor: pointer !important;
        background-color: var(--dark-accent-green) !important;
        border: none !important;
        color: var(--dark-bg-primary) !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
        white-space: nowrap; /* Prevents text like "Search" from wrapping */
    }

    /* Hover styles for the search button also need to be maintained */
    #mainSearchButton:hover { /* Or form#searchForm button[type="submit"]:hover */
        background-color: var(--dark-accent-green-hover) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    }


    /* Styles for .gender-selection-area and .gender-selector can remain as previously defined */
    .gender-selection-area {
        display: flex;
        flex-direction: column; /* Stacks label (if any) above gender-selector */
        align-items: center; /* Centers the gender buttons group */
        width: 100%; /* Take full width available from .search-bar */
        /* gap: 0.5rem; if you had a label and the selector */
    }

    .gender-selector {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        /* margin-bottom is likely handled by the gap in .search-bar now */
    }

    #searchBox + button {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.9rem !important;
    }

    .channel-header {
        margin: 20px auto 16px auto !important;
    }

    #channelName {
        font-size: 1.8rem !important;
        margin-bottom: 0.8rem !important;
    }
}

/* This is the key change for the search form on compare.html */
@media (max-width: 600px) {
    /* Changed from 900px to 600px */
    form#searchForm {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }

    form#searchForm button[type="submit"] {
        width: 100% !important;
        max-width: 300px !important;
    }
}

@media (max-width: 480px) {
    .video-card {
        padding: 0.8rem !important;
    }

    .video-section iframe {
        height: 180px !important;
    }

    .summary {
        font-size: 0.85rem !important;
    }

    .tag {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }

    .ingredients-heading {
        font-size: 1.1rem !important;
    }

    .scrollable-list {
        font-size: 0.85rem !important;
    }

    .scrollable-list ul {
        padding-left: 0.8em !important;
    }

    .pagination-btn {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.85rem !important;
    }
}