/* ===================================
    Accordion (Expand/Collapse) Css
====================================== */
.evs-accordion {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #fff;
}

.evs-accordion__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
}

.evs-accordion__handle {
    flex: none;
    color: #888;
    font-weight: 700;
}

.evs-accordion__handle::before {
    content: '\22EE';  /* ⋮ vertical ellipsis */
}

.evs-accordion__title {
    flex: 1;
    font-weight: 600;
}

.evs-accordion__toggle {
    flex: none;
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;
    line-height: 1;
}

.evs-accordion__toggle::before {
    content: '\25BE';  /* ▾ down-pointing triangle */
    display: inline-block;
    transition: transform 0.2s;
}

.evs-accordion.is-open .evs-accordion__toggle::before {
    transform: rotate(-180deg);
}

.evs-accordion__body {
    display: none;
    padding: 0 16px 12px;
}

.evs-accordion.is-open > .evs-accordion__body {
    display: block;
}

/* In edit mode (data-page-id has a non-empty value when Model.Mode == "edit";
   on live the attribute renders as data-page-id="" so we exclude that):
   body is always shown, summary is inert (no toggle), so use default cursor. */
body[data-page-id]:not([data-page-id=""]) .evs-accordion__body {
    display: block;
}

body[data-page-id]:not([data-page-id=""]) .evs-accordion__summary,
body[data-page-id]:not([data-page-id=""]) .evs-accordion__toggle {
    cursor: default;
}