.eceens-faq-pills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    /* Use full column width — a narrow parent (e.g. inner bubble column) forces one pill per row */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Elementor/Theme often makes links display:flex + width:100%; that stacks pills vertically */
.eceens-faq-pills .eceens-faq-pill {
    flex: 0 1 auto !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.eceens-faq-pill {
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    background: #fff;
    border: 1px solid currentColor;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: transform 180ms ease, box-shadow 180ms ease, opacity .2s;
}

.eceens-faq-pill:hover {
    opacity: .85;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

/* Global Elementor anchor-button hover lift */
a.elementor-button {
    transition: transform 180ms ease, box-shadow 180ms ease, opacity .2s;
}
a.elementor-button[href]:not([href=""]):not([href="#"]):not([href^="#"]):not([href^="javascript:"]):hover,
a.elementor-button[href]:not([href=""]):not([href="#"]):not([href^="#"]):not([href^="javascript:"]):focus {
    transform: translateY(-3px);
}

.eceens-category-pills {
    display: contents;
}

.eceens-category-label {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    background: #fff !important;
    border: 1px solid currentColor;
}

/* Category color utility classes — work with --eceens-cat-color / --eceens-cat-text */
.eceens-cat-bg,
.eceens-cat-bg * {
    color: var(--eceens-cat-text) !important;
}
.eceens-cat-bg {
    /* White fill with category-colored border/text */
    background: #fff !important;
    border-color: var(--eceens-cat-color) !important;
}
.eceens-cat-bg .elementor-button:hover,
.eceens-cat-bg .elementor-button-link:hover,
.eceens-cat-bg .elementor-widget-button .elementor-button:hover {
    /* Keep category border/text stable; add inner shadow instead of changing colors. */
    background: #fff !important;
    color: var(--eceens-cat-text) !important;
    border-color: var(--eceens-cat-color) !important;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18) !important;
}
.eceens-cat-text,
.eceens-cat-text * { color: var(--eceens-cat-color) !important; }
.eceens-cat-border { border-color: var(--eceens-cat-color) !important; }
.eceens-cat-border.elementor-button,
button.eceens-cat-border,
input.eceens-cat-border[type="button"],
input.eceens-cat-border[type="submit"],
input.eceens-cat-border[type="reset"] {
    border-color: var(--eceens-cat-color) !important;
}
.eceens-cat-border .elementor-button {
    border-color: var(--eceens-cat-color) !important;
}

/* Categoriebeschrijving — goed te stylen via class of Custom CSS */
.eceens-current-category-description {
    margin: 0;
    line-height: 1.55;
    font-size: 1rem;
    color: inherit;
}

.eceens-current-category-description p:first-child { margin-top: 0; }
.eceens-current-category-description p:last-child { margin-bottom: 0; }

/* Category loop — vaste HTML, zoals voorbeeld: pill links, beschrijving + Lees meer rechts */
.eceens-category-loop {
    display: grid;
    width: 100%;
}

.eceens-loop-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    padding: 20px 20px 18px;
    background: #fff;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 4px solid var(--eceens-cat-color, #2A50FF);
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.eceens-loop-card:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.eceens-loop-card:hover {
    color: inherit;
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2) !important;
}

.eceens-loop-card .eceens-loop-pill {
    flex: 0 0 auto;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    /* Let the shortcode inline style provide the tinted background. */
    background: #fff;
    border: 1px solid currentColor;
    width: max-content;
    max-width: 100%;
}

.eceens-loop-card .eceens-loop-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.eceens-loop-card .eceens-loop-description,
.eceens-loop-card .eceens-loop-description * {
    margin: 0;
    line-height: 1.55;
    font-size: 15px;
    color: #444 !important;
}

.eceens-loop-card .eceens-loop-more {
    font-size: 14px;
    font-weight: 500;
    color: var(--eceens-cat-color, #2A50FF) !important;
    margin-top: auto;
    align-self: flex-start;
}

/* Subcategorieën onder hoofdcategorie: visuele indent */
.eceens-loop-subcard {
    padding-left: 24px;
    border-left: 3px solid var(--eceens-cat-color, #2A50FF);
    margin-left: 12px;
}

/* Speech bubble: add "eceens-bubble" to any Elementor container.
   Two stacked CSS-border triangles: outer (border color) + inner (fill color).
   When no border: both use background color → same size, solid arrow.
*/
.eceens-bubble {
    position: relative;
}

.eceens-bubble::after,
.eceens-bubble::before {
    content: '' !important;
    position: absolute !important;
    display: block !important;
    top: auto !important;
    right: auto !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    background: none !important;
    pointer-events: none;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    border-radius: 0 !important;
}

/* Outer triangle — border color, full size */
.eceens-bubble::after {
    bottom: -21px !important;
    left: 60px !important;
    border-width: 20px 40px 0 0 !important;
    border-color: var(--eceens-bubble-color, currentColor) transparent transparent transparent !important;
    z-index: 1 !important;
}

/* Inner triangle — fill color, uniform border thickness on all edges */
.eceens-bubble::before {
    bottom: calc(-20px + var(--eceens-bubble-width, 0px) * 1.618) !important;
    left: calc(60px + var(--eceens-bubble-width, 0px)) !important;
    border-width: calc(22px - var(--eceens-bubble-width, 0px) * 1.618) calc(40px - var(--eceens-bubble-width, 0px) * 3.236) 0 0 !important;
    border-color: var(--eceens-bubble-fill, #fff) transparent transparent transparent !important;
    z-index: 2 !important;
}

/* Center position */
.eceens-bubble-center::after { left: 50% !important; }
.eceens-bubble-center::before { left: calc(50% + var(--eceens-bubble-width, 0px)) !important; }

/* Right position (mirrored) */
.eceens-bubble-right::after {
    left: auto !important;
    right: 60px !important;
    border-width: 20px 0 0 40px !important;
}

.eceens-bubble-right::before {
    left: auto !important;
    right: calc(60px + var(--eceens-bubble-width, 0px)) !important;
    border-width: calc(22px - var(--eceens-bubble-width, 0px) * 1.618) 0 0 calc(40px - var(--eceens-bubble-width, 0px) * 3.236) !important;
}

/* Loop Grid: om-en-om blauw/groen + staart links/rechts. Class "eceens-bubble-loop" op de Loop Grid.
   Kleur/staart worden in JS gezet; .eceens-bubble-alt-left forceert staart links (voor even items). */
.eceens-bubble-loop .eceens-bubble {
    border-color: var(--eceens-bubble-color) !important;
}
/* In loops: default staart rechts (oneven items). */
.eceens-bubble-loop .eceens-bubble::after {
    left: auto !important;
    right: 60px !important;
    border-width: 20px 0 0 40px !important;
    border-color: var(--eceens-bubble-color, #119FCD) transparent transparent transparent !important;
}
.eceens-bubble-loop .eceens-bubble::before {
    left: auto !important;
    right: calc(60px + var(--eceens-bubble-width, 0px)) !important;
    border-width: calc(22px - var(--eceens-bubble-width, 0px) * 1.618) 0 0 calc(40px - var(--eceens-bubble-width, 0px) * 3.236) !important;
    border-color: var(--eceens-bubble-fill, #fff) transparent transparent transparent !important;
}
/* Even items (2e, 4e, …): staart links i.p.v. rechts */
.eceens-bubble.eceens-bubble-alt-left::after {
    left: 60px !important;
    right: auto !important;
    border-width: 20px 40px 0 0 !important;
    border-color: var(--eceens-bubble-color, #4BAB44) transparent transparent transparent !important;
}
.eceens-bubble.eceens-bubble-alt-left::before {
    left: calc(60px + var(--eceens-bubble-width, 0px)) !important;
    right: auto !important;
    border-width: calc(22px - var(--eceens-bubble-width, 0px) * 1.618) calc(40px - var(--eceens-bubble-width, 0px) * 3.236) 0 0 !important;
    border-color: var(--eceens-bubble-fill, #fff) transparent transparent transparent !important;
}