.wppro_widget_faq_accordion {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    background-color: #fff;
}

.wppro_widget_faq_item + .wppro_widget_faq_item {
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.wppro_widget_faq_button {
    background-color: var(--faq-bg, #f8f9fa);
    color: var(--faq-text, #212529);
    padding: 1rem;
    font-size: 1rem;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 0;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease;
    border-left: 0.25rem solid transparent;
}

.wppro_widget_faq_button:hover
{
    background-color: #e2e6ea;


}
.wppro_widget_faq_button:focus-visible {
    outline: none; /* remove default */
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.3); /* blue glow */
    border-radius: 4px;
    z-index: 3;
    position: relative;
}
.wppro_widget_faq_button::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease;
}

.wppro_widget_faq_button[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg);
}

.wppro_widget_faq_button.is-expanded {
    background-color: var(--faq-active-bg, #e7f1ff);
    /*border-left-color: var(--faq-active-border, #0d6efd);*/

    font-weight: 500;
}

.wppro_widget_faq_panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 1rem;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    background-color: #fff;
}

.wppro_widget_faq_panel.is-open {
    max-height: fit-content;
    opacity: 1;
    padding: 1rem;
}

.wppro_widget_faq_answer {
    font-size: 0.95rem;
    color: #212529;
}





/* lines of code that fixes an issue with the FAQ widget in the WordPress plugin, ensuring that the FAQ items are styled correctly and that the button states are visually distinct when expanded or collapsed. If this code is not present the selected colors of the FAQ widget will not be applied correctly and inherit colors from the theme rather than the specified colors in the CSS. */
.wppro_widget_faq_item .wppro_widget_faq_button {
  background-color: var(--faq-bg, #f8f9fa) !important;
  color: var(--faq-text, #212529) !important;
  border-color: var(--faq-border, #ccc) !important;
  border-left-color: var(--faq-border, #ccc) !important;
}

.wppro_widget_faq_item .wppro_widget_faq_button.is-expanded,
.wppro_widget_faq_item .wppro_widget_faq_button[aria-expanded="true"] {
  background-color: var(--faq-active-bg, var(--faq-bg)) !important;
  border-color: var(--faq-active-border, var(--faq-border)) !important;
  border-left-color: var(--faq-active-border, var(--faq-border)) !important;
}

.wppro_widget_faq_item .wppro_widget_faq_panel {

  border-left-color: var(--faq-border, transparent) !important;
}

.wppro_widget_faq_item .wppro_widget_faq_panel.is-open {
 
  border-left-color: var(--faq-active-border, var(--faq-border, transparent)) !important;
}
/* lines of code that fixes an issue with the FAQ widget in the WordPress plugin, ensuring that the FAQ items are styled correctly and that the button states are visually distinct when expanded or collapsed. If this code is not present the selected colors of the FAQ widget will not be applied correctly and inherit colors from the theme rather than the specified colors in the CSS. */