/* =====================================================
   Collapsible Icon List for Elementor — All Viewports
   Only activates on widgets with the CSS class: cil-collapsible
   ===================================================== */

/* Make the widget a flex column so the button stacks above the list */
.elementor-widget-icon-list.cil-collapsible {
    display: flex;
    flex-direction: column;
}

/* Wrapper injected by JS */
.elementor-widget-icon-list.cil-collapsible .cil-wrapper {
    position: relative;
}

/* Collapsed by default */
.elementor-widget-icon-list.cil-collapsible .elementor-icon-list-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease;
    opacity: 0;
}

/* Expanded state */
.elementor-widget-icon-list.cil-collapsible .cil-wrapper.is-expanded .elementor-icon-list-items {
    max-height: 2000px;
    opacity: 1;
}

/* Toggle button */
.elementor-widget-icon-list.cil-collapsible .cil-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 8px 0;
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.4em;
    color: inherit;
    text-align: left;
    text-decoration: none;
    text-transform: inherit;
    letter-spacing: inherit;
}

.elementor-widget-icon-list.cil-collapsible .cil-toggle-btn:hover {
    opacity: 0.8;
}

/* Label text — no underline */
.elementor-widget-icon-list.cil-collapsible .cil-btn-label {
    text-decoration: none;
}

/* Chevron arrow */
.elementor-widget-icon-list.cil-collapsible .cil-btn-chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Chevron rotates when expanded */
.elementor-widget-icon-list.cil-collapsible .cil-toggle-btn[aria-expanded="true"] .cil-btn-chevron {
    transform: rotate(180deg);
}