/* ---------------------------- accordion section --------------------------- */
#Wrapper .wso-section-accordion {
--accordion-title-mb: 1.92rem;
--wrap-content-mb: 4.32rem;
}
#Wrapper .wso-section-accordion .wso-wrap-content {
text-align: center;
}
#Wrapper .wso-section-accordion .wso-wrap-content:not(:last-child) {
margin-bottom: var(--wrap-content-mb) !important;
}
#Wrapper .wso-section-accordion .wso-wrap-content .wso-title {
margin-bottom: var(--accordion-title-mb) !important;
}
#Wrapper .wso-section-accordion .wso-wrap-content .wso-subtitle {
width: 50%;
margin: 0 auto;
}
/* ----------------------------- accordion-item ----------------------------- */
#Wrapper .wso-accordion-wrapper .wso-accordion-item {
border: none;
border-bottom: 2px solid var(--color-1) !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-header:has([aria-expanded=false]) + .wso-accordion-content {
display: none;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
gap: 0.5rem;
padding: 0 !important;
background-color: transparent;
margin: 0 !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button::after {
content: "";
display: block !important;
width: 1.75rem !important;
height: 0.85rem !important;
position: absolute !important;
left: unset !important;
right: 0 !important;
top: 50% !important;
background-color: var(--color-1);
-webkit-mask: url('data:image/svg+xml,') no-repeat center;
mask: url('data:image/svg+xml,') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
opacity: 1;
transform: translateY(-50%);
transition: var(--transition-normal) ease-in-out;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button[aria-expanded=true]::after {
transform: translateY(-50%) rotate(180deg);
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button > span {
transition: all 0.2s ease-in-out !important;
color: var(--color-black) !important;
padding: 2.3rem 3rem 2.3rem 0 !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button > span i {
transition: all 0.2s ease-in-out !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button > span i {
font-family: var(--font-1) !important;
color: var(--color-black) !important;
font-size: var(--h3-font-size) !important;
line-height: var(--h3-line-height) !important;
font-weight: var(--h3-font-weight) !important;
letter-spacing: var(--h3-letter-spacing) !important;
text-transform: var(--h3-text-transform) !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button > span span:not(.wso-accordion-icon-wrapper) {
font-family: var(--font-1) !important;
text-transform: uppercase !important;
font-weight: 400 !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-icon-wrapper {
position: relative;
display: block;
width: 3.5rem;
height: 3.5rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-icon-wrapper img {
height: 100% !important;
-o-object-fit: contain;
object-fit: contain;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item:first-child {
border-top: 2px solid var(--color-1) !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item.active:after {
display: none !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button > span,
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-content {
box-shadow: none !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button > span i {
width: auto !important;
height: auto !important;
top: 50% !important;
left: auto !important;
right: 0;
transform: translate(0, -50%);
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item.active .wso-accordion-button > span i {
color: var(--color-1) !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button > span > .acc-icon-plus:before {
content: "\e868";
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button > span > .acc-icon-minus:before {
content: "\e946";
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-content {
padding: 2rem 0 3rem !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-content .section .mcb-section-inner {
max-width: 100% !important;
}
/* -------------------------- section in accordion -------------------------- */
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-content .section {
padding: 0 !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-content .section + .section {
padding-top: 2rem !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-content .section .one.wrap .one.column {
width: 100%;
margin-left: 0;
margin-right: 0;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-content .section .one.wrap .one.column .column_attr ul {
width: 100% !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-content .section.equal-height-wrap .wrap[style="height: 0px;"] {
height: auto !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-content .section.wso-align-left .column_attr {
align-items: flex-start !important;
text-align: left !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-content .section.wso-align-right .column_attr {
align-items: flex-end !important;
text-align: right !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item .wso-accordion-button > span > .acc-icon-minus {
display: none !important;
}
#Wrapper .wso-accordion-wrapper .wso-accordion-item.active .wso-accordion-button > span > .acc-icon-plus {
transform-origin: 50% 25% !important;
display: block;
transform: rotate(-180deg);
}
/* ----------------------------- open close icon ---------------------------- */
@media only screen and (max-width: 1023px) {
#Wrapper .wso-section-accordion {
--accordion-title-mb: 2.37rem;
--wrap-content-mb: 5.33rem;
}
#Wrapper .wso-section-accordion .wso-wrap-content .wso-subtitle {
width: 100%;
}
.wso-accordion-wrapper .wso-accordion-item .wso-accordion-button {
gap: 1rem;
}
.wso-accordion-wrapper .wso-accordion-item .wso-accordion-button::after {
width: 1.97rem !important;
height: 0.96rem !important;
}
.wso-accordion-wrapper .wso-accordion-item .wso-accordion-button > span {
text-align: left;
white-space: break-spaces;
padding: 1rem 2rem 1rem 0 !important;
flex-basis: 79.27%;
}
.wso-accordion-wrapper .wso-accordion-item .wso-accordion-button > span i {
font-size: var(--h6-font-size) !important;
line-height: var(--h6-line-height) !important;
font-weight: var(--h6-font-weight) !important;
letter-spacing: var(--h6-letter-spacing) !important;
text-transform: var(--h6-text-transform) !important;
}
.wso-accordion-wrapper .wso-accordion-item .wso-accordion-icon-wrapper {
flex-basis: 10.21%;
width: 3rem;
height: 3rem;
}
}
/* ========================================================================== */
/* FAQ ACCORDION (wso-section-faq / mfn-acc markup) */
/* ========================================================================== */
/* Styles the FAQ markup that uses the native Betheme accordion structure
(.mfn-acc > .question > .title / .answer) plus the wso-faq-* wrappers.
Written without #Wrapper so it works inside and outside the page wrapper.
Open/close and load-more visibility stay with the theme JS: no display or
visibility rules on .question or .answer anywhere in this section. */
/* ----------------------------- var ----------------------------- */
.wso-section-faq {
/* item */
--faq-item-border: 2px solid var(--color-1);
/* title row */
--faq-title-gap: 0.5rem;
--faq-title-padding: 2.3rem 3rem 2.3rem 0;
--faq-title-font-size: var(--h3-font-size);
--faq-title-line-height: var(--h3-line-height);
--faq-title-font-weight: var(--h3-font-weight);
--faq-title-letter-spacing: var(--h3-letter-spacing);
--faq-title-text-transform: var(--h3-text-transform);
/* chevron */
--faq-chevron-width: 1.75rem;
--faq-chevron-height: 0.85rem;
/* answer */
--faq-answer-padding: 2rem 0 3rem;
--faq-answer-p-gap: 1rem;
/* source links */
--faq-source-mt: 1.5rem;
--faq-source-gap: 1rem;
/* load more */
--faq-load-more-mt: 3rem;
--faq-load-more-padding: 1.2rem 2.4rem;
}
.style-simple .wso-section-faq .accordion .question:after {
display: none !important;
}
/* -------------------------- faq item (question) -------------------------- */
.wso-section-faq .mfn-acc .question {
border: none !important;
border-bottom: var(--faq-item-border) !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.wso-section-faq .mfn-acc .question:first-child {
border-top: var(--faq-item-border) !important;
}
/* ----------------------------- title (button) ---------------------------- */
.wso-section-faq .mfn-acc .question > .title {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
gap: var(--faq-title-gap);
margin: 0 !important;
padding: var(--faq-title-padding) !important;
font-family: var(--h3-font-family) !important;
font-size: var(--faq-title-font-size) !important;
line-height: var(--faq-title-line-height) !important;
font-weight: var(--faq-title-font-weight) !important;
letter-spacing: var(--faq-title-letter-spacing) !important;
text-transform: var(--faq-title-text-transform) !important;
text-align: left;
color: var(--color-black) !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
cursor: pointer;
transition: all 0.2s ease-in-out !important;
}
.wso-section-faq .mfn-acc .question > .title:focus-visible {
outline: 2px solid var(--color-1);
outline-offset: 0.2rem;
}
/* ------------------------------ chevron icon ----------------------------- */
/* The Betheme plus/minus glyphs are decorative only here and are replaced by
the gold chevron below. They carry no inline style, so hiding them does not
interfere with the theme JS. */
.wso-section-faq .mfn-acc .question > .title > .acc-icon-plus,
.wso-section-faq .mfn-acc .question > .title > .acc-icon-minus {
display: none !important;
}
.wso-section-faq .mfn-acc .question > .title::after {
content: "";
display: block;
width: var(--faq-chevron-width);
height: var(--faq-chevron-height);
position: absolute;
left: unset;
right: 0;
top: 50%;
background-color: var(--color-1);
-webkit-mask: url('data:image/svg+xml,') no-repeat center;
mask: url('data:image/svg+xml,') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
opacity: 1;
transform: translateY(-50%);
transition: var(--transition-normal) ease-in-out;
}
/* The open item keeps aria-expanded="false" in this markup, so the state hook
is the .active class the theme JS sets, not [aria-expanded]. */
.wso-section-faq .mfn-acc .question.active > .title::after {
transform: translateY(-50%) rotate(180deg);
}
/* --------------------------- answer (no display) -------------------------- */
.wso-section-faq .mfn-acc .question > .answer {
padding: var(--faq-answer-padding) !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.wso-section-faq .wso-faq-answer p:last-child {
margin-bottom: 0;
}
.wso-section-faq .wso-faq-answer p + p {
margin-top: var(--faq-answer-p-gap);
}
/* ------------------------------ source links ----------------------------- */
.wso-section-faq .wso-faq-source {
display: flex;
flex-wrap: wrap;
gap: var(--faq-source-gap);
margin-top: var(--faq-source-mt);
}
.wso-section-faq .wso-faq-source .wso-faq-source-button {
font-family: var(--font-1);
color: var(--color-1);
text-decoration: none;
border-bottom: 1px solid var(--color-1);
transition: var(--transition-short) ease-in-out;
}
.wso-section-faq .wso-faq-source .wso-faq-source-button:hover,
.wso-section-faq .wso-faq-source .wso-faq-source-button:focus-visible {
color: var(--color-black);
border-bottom-color: var(--color-black);
}
/* -------------------------------- load more ------------------------------- */
/* display stays free of !important so an inline display:none from the
load-more JS keeps winning once all items are shown. */
.wso-section-faq .wso-faq-load-more .wso-faq-load-more__button {
display: block;
margin: var(--faq-load-more-mt) auto 0;
padding: var(--faq-load-more-padding);
font-family: var(--font-1);
text-transform: uppercase;
font-weight: 400;
color: var(--color-1);
background-color: transparent;
border: 1px solid var(--color-1);
cursor: pointer;
transition: var(--transition-short) ease-in-out;
}
.wso-section-faq .wso-faq-load-more .wso-faq-load-more__button:hover,
.wso-section-faq .wso-faq-load-more .wso-faq-load-more__button:focus-visible {
color: var(--color-white);
background-color: var(--color-1);
}
/* ----------------------------- faq responsive ---------------------------- */
@media only screen and (max-width: 1023px) {
.wso-section-faq {
/* title row */
--faq-title-gap: 1rem;
--faq-title-padding: 1rem 2rem 1rem 0;
--faq-title-font-size: var(--h6-font-size);
--faq-title-line-height: var(--h6-line-height);
--faq-title-font-weight: var(--h6-font-weight);
--faq-title-letter-spacing: var(--h6-letter-spacing);
--faq-title-text-transform: var(--h6-text-transform);
/* chevron */
--faq-chevron-width: 1.97rem;
--faq-chevron-height: 0.96rem;
/* answer */
--faq-answer-padding: 1rem 0 2rem;
/* load more */
--faq-load-more-mt: 2.5rem;
}
.wso-section-faq .mfn-acc .question > .title {
white-space: break-spaces;
}
}