/* ═══════════════════════════════════════════════════════
   Website Design Steps — Frontend Styles v3.3
   BULLETPROOF: No hidden-by-default. Everything visible.
   Animation is additive only (fade-up on slide change).
   ═══════════════════════════════════════════════════════ */

/* ── Force visibility against any theme interference ── */
.wds-tl,
.wds-tl * {
    visibility: visible !important;
}

.wds-tl {
    padding: var(--aw-sp, 60px) 0 !important;
    font-family: 'IBM Plex Sans Condensed', sans-serif !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    /* Block Flatsome/theme parallax from moving timeline off-screen */
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    will-change: auto !important;
    animation: none !important;
    --_g1: var(--aw-g1, #FB733F);
    --_g2: var(--aw-g2, #FFA42D);
}

.wds-tl *, .wds-tl *::before, .wds-tl *::after {
    box-sizing: border-box !important;
}

/* ── Progress Line ────────────────────────────── */
.wds-tl-progress {
    position: relative !important;
    display: block !important;
    height: 2px !important;
    background: #e8e8e8 !important;
    margin: 0 40px calc(var(--aw-ns, 50px) / 2 * -1 - 1px) 40px !important;
    z-index: 0 !important;
    top: calc(var(--aw-ns, 50px) / 2 + 1px) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

.wds-tl-progress-bar {
    height: 100% !important;
    background: linear-gradient(to right, var(--_g1), var(--_g2)) !important;
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 2px !important;
}

/* ── Viewport ─────────────────────────────────── */
.wds-tl-viewport {
    overflow: hidden !important;
    padding: 0 40px !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
}

.wds-tl-track {
    display: flex !important;
    transition: transform 0.5s ease;
    will-change: transform;
    opacity: 1 !important;
    /* Width set by JS: (totalSteps / perView) * 100% */
}

/* ── Step — ALWAYS VISIBLE by default ─────────── */
.wds-tl-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 10px !important;
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.4s ease, transform 0.4s ease;
    /* flex-basis and max-width set by JS */
}

/* JS animation: only when slider is ready and step is changing */
.wds-tl-step.wds-entering {
    opacity: 0;
    transform: translateY(12px);
}
.wds-tl-step.wds-entered {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ── Node ─────────────────────────────────────── */
.wds-tl-node {
    width: var(--aw-ns, 50px) !important;
    height: var(--aw-ns, 50px) !important;
    border-radius: 50% !important;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--_g1), var(--_g2)) border-box !important;
    border: 2px solid transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    z-index: 2 !important;
    position: relative !important;
}

.wds-tl-step:hover .wds-tl-node {
    background:
        linear-gradient(135deg, var(--_g1), var(--_g2)) padding-box,
        linear-gradient(135deg, var(--_g1), var(--_g2)) border-box !important;
    box-shadow: 0 0 0 6px rgba(251, 115, 63, 0.12);
}

.wds-tl-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--_g1), var(--_g2)) !important;
    transition: background 0.3s ease;
    display: block !important;
}

.wds-tl-step:hover .wds-tl-dot { background: #fff !important; }

/* ── Card ─────────────────────────────────────── */
.wds-tl-card {
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: var(--aw-cp, 24px) calc(var(--aw-cp, 24px) - 4px) !important;
    width: 100% !important;
    text-align: left !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    background: transparent;
    display: block !important;
    opacity: 1 !important;
}

.wds-tl-step:hover .wds-tl-card {
    border-color: transparent !important;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--_g1), var(--_g2)) border-box !important;
    box-shadow: 0 6px 28px rgba(251, 115, 63, 0.13);
}

/* ── Typography ───────────────────────────────── */
.wds-tl-num {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    background: linear-gradient(135deg, var(--_g1), var(--_g2)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    letter-spacing: 3px !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.wds-tl-title {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-weight: 600 !important;
    font-size: var(--aw-hs, 20px) !important;
    color: var(--aw-hc, #1a1a1a) !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.35 !important;
    opacity: 1 !important;
}

.wds-tl-desc {
    font-family: 'IBM Plex Sans Condensed', sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--aw-bs, 16px) !important;
    color: var(--aw-bc, #666666) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════
   ARROWS
   ══════════════════════════════════════════════ */
.wds-tl-arrow {
    position: absolute !important;
    top: calc(var(--aw-sp, 60px) + var(--aw-ns, 50px) / 2 - 18px) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 2px solid #ddd !important;
    background: #fff !important;
    color: #333 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease;
    z-index: 10 !important;
    padding: 0 !important;
    outline: none !important;
    opacity: 1 !important;
}

.wds-tl-arrow:hover {
    border-color: var(--_g1) !important;
    color: var(--_g1) !important;
    box-shadow: 0 2px 12px rgba(251, 115, 63, 0.18);
}

.wds-tl-arrow:disabled {
    opacity: 0.3 !important;
    cursor: default !important;
}

.wds-tl-prev { left: 0 !important; }
.wds-tl-next { right: 0 !important; }

/* ══════════════════════════════════════════════
   DOTS
   ══════════════════════════════════════════════ */
.wds-tl-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 28px !important;
    opacity: 1 !important;
}

.wds-tl-dots button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #ddd !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.3s ease;
    outline: none !important;
    display: inline-block !important;
}

.wds-tl-dots button:hover { background: #bbb !important; }

.wds-tl-dots button.active {
    width: 28px !important;
    border-radius: 5px !important;
    background: linear-gradient(135deg, var(--_g1), var(--_g2)) !important;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — only layout adjustments
   ══════════════════════════════════════════════ */
@media (max-width: 680px) {
    .wds-tl-viewport { padding: 0 30px !important; }
    .wds-tl-arrow { width: 30px !important; height: 30px !important; }
    .wds-tl-progress { margin-left: 30px !important; margin-right: 30px !important; }
}