/* Container for the FAQ list */
.nps-faq-list {
font-family: Arial, sans-serif;
max-width: 900px;
margin: 20px auto;
}

/* Individual FAQ Item Container */
.nps-faq-item {
border: 1px solid #e0e0e0;
margin-bottom: 10px;
background-color: #f4f4f4; /* Grey background for closed state */
transition: background-color 0.3s ease;
}

/* Question Button Styling */
.nps-faq-question {
width: 100%;
padding: 18px 20px;
border: none;
background: none;
text-align: left;
font-weight: bold;
font-size: 13px;
color: #444;
text-transform: uppercase; /* Matches the style in the image */
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
outline: none;
}

/* The circle icon on the right */
.nps-faq-icon {
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
background-color: #d1d1d1; /* Grey circle */
color: #fff;
border-radius: 50%;
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s ease;
}

/* Initial “+” sign */
.nps-faq-icon::before {
content: ‘+’;
}

/* The answer panel (hidden by default) */
.nps-faq-answer {
max-height: 0;
overflow: hidden;
background-color: #fff; /* White background for open answer */
padding: 0 20px;
font-size: 14px;
color: #666;
line-height: 1.6;
transition: all 0.3s ease-out;
}

/* — OPEN (Active) STATE STYLES — */

.nps-faq-item.active {
background-color: #fff; /* Item turns white when open */
}

.nps-faq-item.active .nps-faq-icon {
background-color: #ccc; /* Icon changes color */
color: transparent;
}

.nps-faq-item.active .nps-faq-icon::before {
content: ”; /* Remove ‘+’ when open */
}

.nps-faq-item.active .nps-faq-answer {
max-height: 600px; /* Large enough for content */
padding-bottom: 25px;
padding-top: 5px;
}

// Script to handle toggle functionality
const faqButtons = document.querySelectorAll(‘.nps-faq-question’);

faqButtons.forEach(button => {
button.addEventListener(‘click’, function() {
const faqItem = this.parentElement;

// Close other items for a true accordion effect (optional)
document.querySelectorAll(‘.nps-faq-item’).forEach(item => {
if (item !== faqItem) {
item.classList.remove(‘active’);
}
});

// Toggle the ‘active’ class on the clicked item
faqItem.classList.toggle(‘active’);
});
});