/**
 * Z Addons for Elementor — Vertical process steps widget styles.
 *
 * Structure only + neutral defaults: every color, size, spacing and
 * offset is controlled from the Elementor panel through CSS custom
 * properties (--zae-line-width, --zae-icon-size, --zae-icon-offset,
 * --zae-text-offset) and {{WRAPPER}} selectors. The scroll-driven
 * progress value (--zae-progress: 0..1) and the measured line geometry
 * (--zae-track-x/-top/-height) are written by process-bar.js.
 *
 * RTL-ready: the icon column and text column are laid out with flex (the
 * document direction mirrors them automatically) and the line is
 * positioned with the logical inset-inline-start property.
 */

.zae-process {
        position: relative;
        --zae-line-width: 3px;
        --zae-icon-size: 56px;
        --zae-icon-offset: 0px;
        --zae-text-offset: 0px;
        /* CSS-only fallbacks for the JS-measured line geometry. */
        --zae-track-x: calc(var(--zae-icon-size) / 2);
        --zae-track-top: 0px;
        --zae-track-height: 100%;
        --zae-progress: 0;
}

.zae-process *,
.zae-process *::before,
.zae-process *::after {
        box-sizing: border-box;
}

.zae-process__notice {
        padding: 14px 18px;
        border: 1px dashed #c00;
        color: #c00;
        background: #fff;
}

/* ---------- Height modes ---------- */

/* "Container height" mode: the widget fills its parent (or the
   "stretch" switcher / "min height" control provide the height) and the
   steps share it equally. */
.zae-process--h-fill {
        height: 100%;
}

/* ---------- Steps list ---------- */

.zae-process__steps {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
}

.zae-process--h-auto .zae-process__steps {
        height: auto;
}

.zae-process__step {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 24px;
        flex: 1 1 0; /* Even distribution across the container height. */
}

.zae-process--h-auto .zae-process__step {
        flex: 0 0 auto;
}

.zae-process--icon-end .zae-process__step {
        flex-direction: row-reverse;
}

/* ---------- The vertical line (track + fill) ---------- */

.zae-process__track {
        position: absolute;
        z-index: 0;
        inset-inline-start: calc(var(--zae-track-x) - var(--zae-line-width) / 2);
        top: var(--zae-track-top);
        height: var(--zae-track-height);
        width: var(--zae-line-width);
        background-color: #e4e7ec;
}

.zae-process__fill {
        width: 100%;
        height: calc(var(--zae-progress) * 100%);
        background-color: #f2b705;
        transition: height 0.3s linear;
}

/* ---------- Step icons on the line ---------- */

.zae-process__marker {
        flex: 0 0 auto;
        inline-size: var(--zae-icon-size);
        block-size: var(--zae-icon-size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        border: 0 solid transparent;
        border-radius: 50%;
        transform: translateY(var(--zae-icon-offset));
        transition: background-color 0.35s ease, border-color 0.35s ease;
}

.zae-process__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: calc(var(--zae-icon-size) * 0.45);
        line-height: 1;
        color: #f2b705;
        transition: color 0.35s ease;
}

.zae-process__icon i {
        line-height: 1;
}

.zae-process__icon svg,
.zae-process__icon .e-font-icon-svg {
        width: 1em;
        height: 1em;
        fill: currentColor;
}

.zae-process__img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: inherit;
}

/* Reached by the fill's tip -> active look. Colors are overridable from
   the "حالت فعال" controls; the values here mirror the panel defaults. */
.zae-process__step--active .zae-process__marker {
        background-color: #f2b705;
}

.zae-process__step--active .zae-process__icon {
        color: #1a1a1a;
}

/* ---------- Text column ---------- */

.zae-process__body {
        flex: 1 1 auto;
        min-width: 0;
        transform: translateY(var(--zae-text-offset));
}

.zae-process__label {
        margin: 0 0 6px;
        font-size: 14px;
        line-height: 1.8;
        color: #f2b705;
}

.zae-process__title {
        margin: 0 0 6px;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.5;
}

.zae-process__desc {
        margin: 0;
        font-size: 15px;
        line-height: 2;
        opacity: 0.85;
}