/* faq-style.css - Original with Minimal Toggle Fixes & Filter-Proof Backgrounds */

/* Optional: Enqueue 'DM Sans' via PHP if not already loaded by your theme
    wp_enqueue_style('my-faq-google-fonts', 'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap', array(), null);
*/

/* General container styling */
.my-faq-plugin-container {
    font-family: 'DM Sans', sans-serif; /* Apply font here if enqueued */
    height: 50vh; /* Set fixed height */
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack children vertically */
    overflow: hidden; /* Contain children within fixed height */
    padding: 0; /* Ensure no padding on all sides */
    margin: 0; /* Ensure no margin on all sides */
    box-sizing: border-box; /* Include padding and border in width/height calculations */
    position: relative; /* Ensure the container is the reference for the pseudo-element */
}

/* Fade effect for the main container */
.my-faq-plugin-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.5vw; /* Adjust height of the blur effect */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none; /* Ensure it doesn't block interactions */
    z-index: 15; /* Place it above the sticky question and scrollable content */
}

/* Search bar container */
.my-faq-plugin-container .my-faq-search-bar-container {
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Space out the search bar and toggle */
    border-bottom: 1px solid #E0E0E0; /* Light separator line below search/configure */
    background-color: transparent; /* Make the search bar container transparent */
    padding: 0px 10px 15px 0px;
    margin-bottom: 0; /* Remove margin below the search bar */
    flex-shrink: 0; /* Prevent search bar from shrinking */
    /* z-index: 1; /* Optional: ensure search bar is above default content, below main fade if it ever overlapped */
}

/* Search bar input */
.my-faq-plugin-container .my-faq-search-bar {
    flex-grow: 1; /* Allow search to take space */
    margin-right: 15px; /* Space it from the toggle */
}

.my-faq-plugin-container .my-faq-search-bar input {
    width: 100%;
    border: none; /* Remove all borders */
    font-size: 16px;
    padding: 0; /* No padding */
    outline: none;
    background: transparent; /* Transparent background */
    box-sizing: border-box;
}

/* Toggle switch container - Kept one version */
.my-faq-toggle-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    width: auto; /* Allow width to adjust */
    white-space: nowrap; /* Prevent wrapping */
}

/* Style for the slider - Kept one version */
.my-faq-slider {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 20px;
    margin-left: 10px;
    transition: background-color 0.3s;
    flex-shrink: 0; /* Prevent slider from shrinking */
}

/* Slider circle - Kept one version */
.my-faq-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s; /* This is the key transition for the slide */
}

.my-faq-slider.active {
    background-color: #0E2D41; /* User's preferred active color */
}

.my-faq-slider.active::before {
    transform: translateX(20px); /* This makes it slide */
}

/* FAQ section */
.my-faq-plugin-container .my-faq-section {
    overflow-y: scroll !important; /* Always show the vertical scrollbar (user preference) */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    flex-grow: 1; /* Allow section to take remaining vertical space */
    position: relative; /* For potential future ::before/::after if needed for other effects */
    padding: 0px; /* Horizontal padding */
    padding-bottom: calc(2.5vw + 15px); /* Add bottom padding: fade height + some extra space */
    /* clip-path: inset(0 0 calc(2.5vw + 10px) 0); /* Alternative to padding if issues */
}

/* *** REMOVED: .my-faq-plugin-container .my-faq-section::after to avoid duplicate/conflicting fade effect *** */

/* FAQ items */
.my-faq-plugin-container .my-faq-item {
    margin: 0; /* Ensure no extra margin between items */
    padding: 0; /* Ensure no extra padding between items */
    border-radius: 5px; /* Add rounded corners to FAQ items */
    /* Background color will be handled by JS-added classes */
}

/* JS-controlled alternating backgrounds on VISIBLE items */
.my-faq-item.faq-item-visible-odd {
    background-color: #FFFFFF; /* White background */
}

.my-faq-item.faq-item-visible-even {
    background-color: #F5F3EE; /* Theme background color */
}

.my-faq-plugin-container .my-faq-item.open {
    /* background-color: inherit; */ /* Inherit will now correctly pick up from .faq-item-visible-odd/even */
}

/* Question styling */
.my-faq-plugin-container .my-faq-question {
    font-size: 16px;
    font-weight: 400; /* Regular font weight */
    color: #0E2D41;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5px 15px 5px;  
    background-color: inherit; /* Match the background color of the parent .my-faq-item */
    border: none; /* Remove all borders */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

.my-faq-item.alt-bg { /* Note: This class is likely unused if JS isn't adding it */
    background-color: #F5F3EE; /* Example alternating color */
}

/* Active question styling (Sticky) */
.my-faq-plugin-container .my-faq-item.open .my-faq-question {
    position: sticky; /* Make the active question stick to the top */
    top: 0; /* Stick to the top of the container */
    z-index: 5; /* Above normal content within its scroll parent, but below the main container's fade effect */
    background-color: inherit; /* Keep the background color from the parent .my-faq-item */
    border: none; /* Remove all borders for the active question */
    /* Remove the bottom border when sticky to separate it visually */
    /* border-bottom: 1px solid #E0E0E0; */ 
    /* margin-bottom: -1px; */ /* Counteract the border height if needed */
}

/* Arrow indicator */
.my-faq-plugin-container .my-faq-question::after {
    content: '';
    display: inline-block;
    width: 6px; /* Thinner arrow */
    height: 6px;
    border-right: 1px solid #333; /* Create the arrow using borders */
    border-bottom: 1px solid #333;
    transform: rotate(45deg); /* Rotate to form a downward arrow */
    margin-left: 10px;
    transition: transform 0.3s ease;
}

/* Rotate arrow for open questions */
.my-faq-plugin-container .my-faq-item.open .my-faq-question::after {
    transform: rotate(-135deg);
}

/* Answer styling */
.my-faq-plugin-container .my-faq-answer {
    display: none; /* Hide answers by default */
    font-size: 14px;
    color: #333333;
    padding: 0px 5px 0px 5px;
    line-height: 1.6; /* Slightly tighter line spacing */
    max-height: 0; /* Initially collapsed */
    opacity: 0; /* Initially invisible */
    overflow: hidden; /* Prevent content overflow */
    background-color: inherit; /* Match the background color of the parent .my-faq-item */
    transition: max-height 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

/* Expanded answer */
.my-faq-plugin-container .my-faq-item.open .my-faq-answer {
    display: block; /* Show answers when the parent has the 'open' class */
    max-height: 300px; /* Adjust max height for smoother expansion */
    opacity: 1; /* Fully visible */
    padding-bottom: 15px;
}

/* Class for JS to hide items during search */
.my-faq-item.hidden {
    display: none;
}