/* Expandable Cards Widget 1046 — v1.5.0 */

.ec1046-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: flex-start;
}

/* Card base */
.ec1046-card {
    position: relative;
    display: block;          /* block so absolute children work cleanly */
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    transition: height 350ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color 300ms ease,
                border-radius 300ms ease,
                box-shadow 300ms ease;
    will-change: height;
    flex: 0 0 32%;
    max-width: 32%;
    min-width: 0;
    box-sizing: border-box;
}

/* ── Header: absolutely centered in collapsed state ── */
.ec1046-card-header {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    box-sizing: border-box;
    transition: top 300ms ease, transform 300ms ease, position 0ms;
    z-index: 1;
}

/* Icon — rightmost in RTL (order 1) */
.ec1046-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    order: 1;
}

/* Title — middle, takes remaining space */
.ec1046-card-title {
    font-weight: 600;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    order: 2;
    white-space: normal;
    word-break: break-word;
}

/* Arrow — leftmost (order 3), hidden until expanded */
.ec1046-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    order: 3;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 250ms ease, transform 250ms ease;
    pointer-events: none;
}

/* ── Expanded state ── */
.ec1046-card.is-expanded .ec1046-card-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    padding: 0;          /* padding comes from card padding */
}

.ec1046-card.is-expanded .ec1046-card-arrow {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Description — hidden by default, shown on expand */
.ec1046-card-desc {
    opacity: 0;
    pointer-events: none;
    line-height: 1.6;
    text-align: right;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

/* ── Animation classes ── */
.ec1046-card-desc.anim-fade {
    animation: ec1046FadeIn var(--ec1046-anim-dur, 400ms) ease forwards;
}
.ec1046-card-desc.anim-slide-up {
    animation: ec1046SlideUp var(--ec1046-anim-dur, 400ms) ease forwards;
}
.ec1046-card-desc.anim-slide-down {
    animation: ec1046SlideDown var(--ec1046-anim-dur, 400ms) ease forwards;
}
.ec1046-card-desc.anim-zoom {
    animation: ec1046ZoomIn var(--ec1046-anim-dur, 400ms) ease forwards;
}

@keyframes ec1046FadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ec1046SlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ec1046SlideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ec1046ZoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* Editor preview — keep arrow slightly visible */
.elementor-editor-active .ec1046-card-arrow {
    opacity: 0.35;
    transform: translateX(0);
}