/* ===== BASE ===== */
.luark-workflow {
    --luark-icon-zone: 120px;
    --luark-icon-label-gap: 10px;
    --luark-label-center: 17px;

    --luark-arrow-offset: 0px;

    --luark-arrow-y: calc(
        var(--luark-icon-zone) +
        var(--luark-icon-label-gap) +
        var(--luark-label-center) +
        var(--luark-arrow-offset)
    );

    --luark-connector-height: 170px;

    width: 100%;
}

.luark-workflow * {
    box-sizing: border-box;
}

/* ===== DESKTOP ===== */
.luark-workflow-desktop {
    width: 100%;
    min-height: 0;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding: 10px 20px 25px;

    overflow-x: hidden;
}

/* ===== STAGE ===== */
.luark-workflow-stage {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: 0;

    width: max-content;
    max-width: 100%;
}

/* ===== NODE ===== */
.luark-node {
    flex: 0 0 auto;

    width: auto;
    min-width: 130px;

    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

/* ===== ICON ===== */
.luark-node-icon {
    height: var(--luark-icon-zone);
    min-height: var(--luark-icon-zone);

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: var(--luark-icon-label-gap);

    opacity: 0.2;

    transition: opacity 0.3s ease;
}

.luark-node-icon img {
    width: 100%;
    max-width: 120px;

    height: auto;

    object-fit: contain;
}

.luark-node.is-icon-active .luark-node-icon {
    opacity: 1;
}

/* ===== LABEL ===== */
.luark-node-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: 320px;

    margin-bottom: 4px;

    padding: 4px 12px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;

    text-align: center;

    white-space: normal;

    opacity: 0.2;

    transform: translateY(6px);

    transition: all 0.3s ease;
}

.luark-node.is-label-active .luark-node-label {
    opacity: 1;
    transform: translateY(0);
}

/* ===== LABEL STYLES ===== */
.luark-style-blue {
    border: 2px solid var(--luark-blue);

    color: var(--luark-blue);

    border-radius: 4px;

    background: transparent;
}

.luark-style-red {
    background: var(--luark-red);

    border: 2px solid var(--luark-red);

    border-radius: 999px;

    color: #fff !important;
}

.luark-style-underline {
    border-bottom: 3px solid var(--luark-red);

    color: var(--luark-red);

    padding-left: 6px;
    padding-right: 6px;
}

.luark-style-boldbox {
    border: 3px solid var(--luark-red);

    color: #E40520 !important;

    border-radius: 8px;

    background: transparent;

    padding: 6px 18px;

    font-weight: 700;

    line-height: 1.1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;

    min-width: unset;

    max-width: 320px;

    white-space: normal;
}

/* ===== DESCRIPTION ===== */
.luark-node-desc {
    max-width: 280px;

    margin-top: 0;

    font-size: 13px;
    line-height: 1.28;

    text-align: center;

    opacity: 0;

    transform: translateY(8px);

    transition: all 0.3s ease;
}

.luark-node.is-text-active .luark-node-desc {
    opacity: 1;
    transform: translateY(0);
}

/* ===== CONNECTOR ===== */
.luark-connector {
    position: relative;

    flex: 0 0 auto;

    width: 24px;
    min-width: 24px;
    margin-right: 20px;

    height: var(--luark-connector-height);
}

/* ===== SEPARADOR ===== */
.luark-arrow {
    position: absolute;

    top: calc(var(--luark-arrow-y) + var(--luark-arrow-y-extra, 0px));
    left: calc(50% + var(--luark-arrow-x, 0px));

    transform: translate(-50%, -50%);

    font-size: 56px;
    line-height: 1;
    font-weight: 700;

    color: var(--luark-red);

    transition: all 0.25s ease;
}

.luark-connector.is-arrow-active .luark-arrow {
    color: var(--luark-blue);
    transform: translate(-50%, -50%) scale(1.15);
}

.luark-connector.is-complete .luark-arrow {
    color: var(--luark-red);
    transform: translate(-50%, -50%) scale(1);
}

.luark-arrow svg,
.luark-arrow i {
    width: 1em;
    height: 1em;

    display: block;

    fill: currentColor;
    color: currentColor;
}

/* ===== STATES ===== */
.luark-connector.is-arrow-active .luark-arrow {
    color: var(--luark-blue);

    transform: translate(-50%, -50%) scale(1.15);
}

.luark-connector.is-complete .luark-arrow {
    color: var(--luark-red);

    transform: translate(-50%, -50%) scale(1);
}

/* ===== MOBILE ===== */
.luark-workflow-mobile {
    display: none;
}

.luark-workflow-mobile img {
    width: 100%;
    height: auto;

    display: block;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {

    .luark-workflow-desktop {
        display: none;
    }

    .luark-workflow-mobile {
        display: block;
    }
}

/* ===== ELEMENTOR EDITOR PREVIEW ===== */
body.elementor-editor-active .luark-workflow-desktop {
    display: flex !important;

    align-items: flex-start !important;
    justify-content: center !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 10px 20px 25px !important;
}

body.elementor-editor-active .luark-workflow-stage {
    display: grid !important;

    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;

    align-items: start !important;

    justify-content: start !important;

    width: max-content !important;
    max-width: none !important;

    gap: 18px !important;
}

body.elementor-editor-active .luark-node {
    width: 110px !important;
    min-width: 110px !important;

    text-align: center !important;
}

body.elementor-editor-active .luark-connector {
    width: 40px !important;
    min-width: 40px !important;
}

body.elementor-editor-active .luark-node-desc {
    white-space: normal !important;

    overflow-wrap: normal !important;

    word-break: normal !important;
}