/* ==================================================
   WEBBO FAQ CARD
   Native Elementor Nested Accordion enhancement
================================================== */

/*
 * Elementor styles the Nested Accordion summary and nested content container
 * as separate surfaces. Card Style moves the visual surface to the parent
 * <details> item so the title and content read as one continuous card.
 *
 * Keep selectors scoped to the direct accordion owned by this widget. This
 * avoids leaking the card reset into another Nested Accordion placed inside
 * an FAQ answer.
 */
.elementor-widget-n-accordion.webbo-faq-card-yes > .e-n-accordion > .e-n-accordion-item,
.elementor-widget-n-accordion.webbo-faq-card-yes > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item {
    overflow: hidden;
    transition: background-color 180ms ease, border-color 180ms ease;
}

/* The title is now part of the parent card, not a separately painted box. */
.elementor-widget-n-accordion.webbo-faq-card-yes > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title,
.elementor-widget-n-accordion.webbo-faq-card-yes > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/*
 * The first nested container is Elementor's structural content surface for
 * the accordion item. Make only that structural surface transparent and
 * borderless. Widgets and any containers nested inside it keep their own
 * styling untouched.
 */
.elementor-widget-n-accordion.webbo-faq-card-yes > .e-n-accordion > .e-n-accordion-item > .e-con,
.elementor-widget-n-accordion.webbo-faq-card-yes > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-con {
    background-color: transparent !important;
    background-image: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-radius: 0 !important;
}

/* ==================================================
   WEBBO FAQ ICON MOTION
   One closed-state icon morphs into the open state
================================================== */

/*
 * Elementor normally swaps between .e-closed and .e-opened icons. The Webbo
 * rotate treatment deliberately keeps the closed icon as the single visual
 * element so a Plus can rotate continuously into an X instead of snapping
 * between two separate SVGs.
 */
.elementor-widget-n-accordion.webbo-faq-card-yes.webbo-faq-icon-rotate-to-close {
    --webbo-faq-icon-duration: 280ms;
    --webbo-faq-icon-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor-widget-n-accordion.webbo-faq-card-yes.webbo-faq-icon-rotate-to-close > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title .e-n-accordion-item-title-icon > .e-opened,
.elementor-widget-n-accordion.webbo-faq-card-yes.webbo-faq-icon-rotate-to-close > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title .e-n-accordion-item-title-icon > .e-opened {
    display: none !important;
}

.elementor-widget-n-accordion.webbo-faq-card-yes.webbo-faq-icon-rotate-to-close > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title .e-n-accordion-item-title-icon > .e-closed,
.elementor-widget-n-accordion.webbo-faq-card-yes.webbo-faq-icon-rotate-to-close > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title .e-n-accordion-item-title-icon > .e-closed {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform var(--webbo-faq-icon-duration) var(--webbo-faq-icon-easing);
}

.elementor-widget-n-accordion.webbo-faq-card-yes.webbo-faq-icon-rotate-to-close > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon > .e-closed,
.elementor-widget-n-accordion.webbo-faq-card-yes.webbo-faq-icon-rotate-to-close > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon > .e-closed {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .elementor-widget-n-accordion.webbo-faq-card-yes.webbo-faq-icon-rotate-to-close .e-n-accordion-item-title-icon > .e-closed {
        transition-duration: 0.01ms !important;
    }
}