/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

/* ============================================================
   TSW PROGRESS BAR — Global Stylesheet
   Works on every page (Elementor + FunnelKit)
   Paste into: Elementor → Site Settings → Custom CSS
============================================================ */

/* Wrapper that controls max width and spacing */
.tsw-progress-wrapper {
    max-width: 900px;
    margin: 0 auto 28px auto;
    padding: 0 10px;
    font-family: "Proxima Nova", sans-serif;
}

/* Horizontal bar container */
.tsw-progress-bars {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* gap between each bar */
    margin-bottom: 14px;
}

/* Each step's bar */
.tsw-progress-step {
    flex: 1;
    height: 15px;
    border-radius: 10px;
    background: #d7d7d7; /* inactive bar color */
    transition: background 0.25s ease;
}

/* ============================================================
   STEP COLORS — Completed (Blue) + Active (Orange)
   These conditions rely on the "data-step" attribute.
   data-step = current step (1–4)
============================================================ */

/* COMPLETE: Step 1 */
.tsw-progress-wrapper[data-step="1"] .tsw-progress-step:nth-child(1),
/* COMPLETE: Steps 1–2 */
.tsw-progress-wrapper[data-step="2"] .tsw-progress-step:nth-child(-n+2),
/* COMPLETE: Steps 1–3 */
.tsw-progress-wrapper[data-step="3"] .tsw-progress-step:nth-child(-n+3),
/* COMPLETE: All */
.tsw-progress-wrapper[data-step="4"] .tsw-progress-step:nth-child(-n+4) {
    background: #6699CC; /* brand blue */
}

/* ACTIVE (last completed segment becomes orange) */
.tsw-progress-wrapper[data-step="1"] .tsw-progress-step:nth-child(1),
.tsw-progress-wrapper[data-step="2"] .tsw-progress-step:nth-child(2),
.tsw-progress-wrapper[data-step="3"] .tsw-progress-step:nth-child(3),
.tsw-progress-wrapper[data-step="4"] .tsw-progress-step:nth-child(4) {
    background: #F89838; /* brand orange */
}

/* ============================================================
   Labels under bars
============================================================ */

.tsw-progress-labels {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #444;
    line-height: 1.3;
}

.tsw-progress-labels div {
    flex: 1; /* evenly spaced */
}

/* ============================================================
   Mobile responsiveness
============================================================ */

@media (max-width: 768px) {
    .tsw-progress-labels {
        font-size: 15px;
        flex-direction: column;
        gap: 10px;
    }

    .tsw-progress-bars {
        gap: 10px;
    }
}

/* ============================================================
   FIX: Center icons/images while keeping copy left
   Scoped to Initiator template ID 12586
============================================================ */

/* Keep body copy left-aligned */
.elementor-12586 .elementor-icon-box-wrapper,
[data-elementor-id="12586"] .elementor-icon-box-wrapper,
.elementor-12586 .elementor-image-box-wrapper,
[data-elementor-id="12586"] .elementor-image-box-wrapper {
    text-align: left !important;
}

.elementor-12586 .elementor-icon-box-content,
[data-elementor-id="12586"] .elementor-icon-box-content,
.elementor-12586 .elementor-image-box-content,
[data-elementor-id="12586"] .elementor-image-box-content {
    text-align: left !important;
}

/* Center icon glyph over left-aligned text */
.elementor-12586 .elementor-icon-box-icon,
[data-elementor-id="12586"] .elementor-icon-box-icon {
    width: 100%;
    text-align: center !important;
}

/* Center image over left-aligned text */
.elementor-12586 .elementor-image-box-wrapper .elementor-image-box-img,
[data-elementor-id="12586"] .elementor-image-box-wrapper .elementor-image-box-img {
    width: 100%;
    text-align: center !important;
}