/* ==========================================
   ULTRAKIT PROCESS / STEPS FLOW — Premium
   5 Layouts × 5 Markers × 6 Connectors × States × Reveal
   ========================================== */

.ultrakit-stp-wrapper {
    --stp-accent: #6c5ce7;
    --stp-accent2: #fd79a8;
    --stp-m: 64px;
    --stp-line: 3px;
    --stp-ls: solid;
    --stp-cols: 3;
    --stp-muted: #d9d9e6;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.ultrakit-stp-wrapper *, .ultrakit-stp-wrapper *::before, .ultrakit-stp-wrapper *::after { box-sizing: border-box; }
.stp-line-dashed { --stp-ls: dashed; }
.stp-line-dotted { --stp-ls: dotted; }

.ultrakit-stp-head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.ultrakit-stp-heading { margin: 0 0 8px; font-size: 30px; font-weight: 800; line-height: 1.2; color: #1a1a2e; }
.ultrakit-stp-subheading { margin: 0; font-size: 16px; line-height: 1.6; color: #5b5b70; }

.ultrakit-stp-list { list-style: none; margin: 0; padding: 0; display: flex; }
.ultrakit-stp-step { position: relative; --lc: color-mix(in srgb, var(--stp-accent) 50%, transparent); }
.ultrakit-stp-step.is-done { --lc: var(--stp-accent); }
.ultrakit-stp-step.is-current, .ultrakit-stp-step.is-todo { --lc: var(--stp-muted); }

/* ---------- Marker ---------- */
.ultrakit-stp-marker {
    position: relative; z-index: 2; flex: 0 0 auto;
    width: var(--stp-m); height: var(--stp-m);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--stp-accent), var(--stp-accent2));
    color: #ffffff; font-size: calc(var(--stp-m) * 0.36); font-weight: 800; line-height: 1;
    border-radius: 50%;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--stp-accent) 35%, transparent);
    transition: transform 0.3s ease;
}
.ultrakit-stp-step:hover .ultrakit-stp-marker { transform: scale(1.08); }
.ultrakit-stp-icon { display: inline-flex; align-items: center; justify-content: center; }
.ultrakit-stp-icon i { font-size: calc(var(--stp-m) * 0.38); line-height: 1; }
.ultrakit-stp-icon svg { width: calc(var(--stp-m) * 0.4) !important; height: calc(var(--stp-m) * 0.4) !important; fill: currentColor; flex-shrink: 0; }
.ultrakit-stp-check { width: calc(var(--stp-m) * 0.42) !important; height: calc(var(--stp-m) * 0.42) !important; flex-shrink: 0; }

.stp-shape-rounded .ultrakit-stp-marker { border-radius: 22%; }
.stp-shape-hexagon .ultrakit-stp-marker { border-radius: 0; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); box-shadow: none; }
.stp-shape-diamond .ultrakit-stp-marker { border-radius: 16%; transform: rotate(45deg) scale(0.82); }
.stp-shape-diamond .ultrakit-stp-step:hover .ultrakit-stp-marker { transform: rotate(45deg) scale(0.9); }
.stp-shape-diamond .ultrakit-stp-marker > * { transform: rotate(-45deg); }
.stp-shape-ring .ultrakit-stp-marker { background: #ffffff; color: var(--stp-accent); border: 3px solid var(--stp-accent); box-shadow: none; }

.is-done .ultrakit-stp-marker { background: var(--stp-accent); }
.is-current .ultrakit-stp-marker { animation: ultrakit-stp-pulse 2s ease-out infinite; }
.is-todo .ultrakit-stp-marker { background: #e8e8f1; color: #9a9ab2; box-shadow: none; }
.stp-shape-ring .is-todo .ultrakit-stp-marker { background: #ffffff; border-color: var(--stp-muted); }
.stp-shape-ring .is-done .ultrakit-stp-marker { background: var(--stp-accent); color: #ffffff; }
@keyframes ultrakit-stp-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stp-accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 16px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Body ---------- */
.ultrakit-stp-body { min-width: 0; }
.ultrakit-stp-badge { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 30px; background: color-mix(in srgb, var(--stp-accent) 14%, transparent); color: var(--stp-accent); font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
.ultrakit-stp-title { margin: 0 0 8px; font-size: 19px; font-weight: 800; line-height: 1.3; color: #1a1a2e; }
.ultrakit-stp-text { margin: 0; font-size: 14.5px; line-height: 1.65; color: #5b5b70; }
.ultrakit-stp-link { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--stp-accent) !important; text-decoration: none !important; }
.ultrakit-stp-link:hover { text-decoration: underline !important; }
.is-todo .ultrakit-stp-title, .is-todo .ultrakit-stp-text { opacity: 0.55; }

.stp-card-card .ultrakit-stp-body    { background: #ffffff; padding: 20px 22px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.07); }
.stp-card-outline .ultrakit-stp-body { padding: 20px 22px; border-radius: 16px; border: 2px solid #e4e4ee; }
.stp-card-tinted .ultrakit-stp-body  { padding: 20px 22px; border-radius: 16px; background: color-mix(in srgb, var(--stp-accent) 8%, #ffffff); }

/* ============================================================
   HORIZONTAL
   ============================================================ */
.stp-layout-horizontal .ultrakit-stp-list { align-items: flex-start; }
.stp-layout-horizontal .ultrakit-stp-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 0 12px; }
.stp-layout-horizontal .ultrakit-stp-body { margin-top: 18px; text-align: center; }
.stp-layout-horizontal .ultrakit-stp-step:not(:last-child)::after {
    content: ''; position: absolute; z-index: 1;
    top: calc(var(--stp-m) / 2 - var(--stp-line) / 2);
    left: calc(50% + var(--stp-m) / 2 + 12px);
    width: calc(100% - var(--stp-m) - 24px);
    height: 0; border-top: var(--stp-line) var(--stp-ls) var(--lc);
    transform-origin: left center;
}
.stp-layout-horizontal.stp-line-gradient .ultrakit-stp-step:not(:last-child)::after { height: var(--stp-line); border-top: none; background: linear-gradient(90deg, var(--stp-accent), var(--stp-accent2)); opacity: 0.7; }
.stp-layout-horizontal.stp-line-none .ultrakit-stp-step::after { display: none; }
.stp-layout-horizontal.stp-line-arrow .ultrakit-stp-step:not(:last-child)::before {
    content: ''; position: absolute; z-index: 1; width: 10px; height: 10px;
    top: calc(var(--stp-m) / 2 - 5px);
    left: calc(150% - var(--stp-m) / 2 - 24px);
    border-top: var(--stp-line) solid var(--lc); border-right: var(--stp-line) solid var(--lc);
    transform: rotate(45deg);
}

/* ============================================================
   VERTICAL  (also the mobile fallback for horizontal / zig-zag / cards)
   ============================================================ */
.stp-layout-vertical .ultrakit-stp-list { flex-direction: column; }
.stp-layout-vertical .ultrakit-stp-step { display: flex; align-items: flex-start; gap: 24px; padding-bottom: 38px; }
.stp-layout-vertical .ultrakit-stp-step:last-child { padding-bottom: 0; }
.stp-layout-vertical .ultrakit-stp-body { flex: 1; padding-top: calc(var(--stp-m) / 2 - 16px); text-align: left; }
.stp-layout-vertical .ultrakit-stp-step:not(:last-child)::after {
    content: ''; position: absolute; z-index: 1;
    left: calc(var(--stp-m) / 2 - var(--stp-line) / 2); top: calc(var(--stp-m) + 8px); bottom: 8px;
    width: 0; border-left: var(--stp-line) var(--stp-ls) var(--lc);
    transform-origin: top center;
}
.stp-layout-vertical.stp-line-gradient .ultrakit-stp-step:not(:last-child)::after { width: var(--stp-line); border-left: none; background: linear-gradient(180deg, var(--stp-accent), var(--stp-accent2)); opacity: 0.7; }
.stp-layout-vertical.stp-line-none .ultrakit-stp-step::after { display: none; }
.stp-layout-vertical.stp-line-arrow .ultrakit-stp-step:not(:last-child)::before {
    content: ''; position: absolute; z-index: 1; width: 10px; height: 10px;
    left: calc(var(--stp-m) / 2 - 5px); bottom: 6px;
    border-right: var(--stp-line) solid var(--lc); border-bottom: var(--stp-line) solid var(--lc);
    transform: rotate(45deg);
}
.stp-layout-vertical.stp-card-card .ultrakit-stp-body,
.stp-layout-vertical.stp-card-outline .ultrakit-stp-body,
.stp-layout-vertical.stp-card-tinted .ultrakit-stp-body { padding-top: 20px; margin-top: calc(var(--stp-m) / 2 - 40px); }

/* ============================================================
   ZIG-ZAG
   ============================================================ */
.stp-layout-zigzag .ultrakit-stp-list { flex-direction: column; }
.stp-layout-zigzag .ultrakit-stp-step { display: grid; grid-template-columns: 1fr var(--stp-m) 1fr; column-gap: 30px; align-items: start; padding-bottom: 42px; }
.stp-layout-zigzag .ultrakit-stp-step:last-child { padding-bottom: 0; }
.stp-layout-zigzag .ultrakit-stp-marker { grid-column: 2; grid-row: 1; }
.stp-layout-zigzag .ultrakit-stp-step:nth-child(odd)  .ultrakit-stp-body { grid-column: 1; grid-row: 1; text-align: right; }
.stp-layout-zigzag .ultrakit-stp-step:nth-child(even) .ultrakit-stp-body { grid-column: 3; grid-row: 1; text-align: left; }
.stp-layout-zigzag .ultrakit-stp-body { padding-top: calc(var(--stp-m) / 2 - 16px); }
.stp-layout-zigzag .ultrakit-stp-step:not(:last-child)::after {
    content: ''; position: absolute; z-index: 1;
    left: calc(50% - var(--stp-line) / 2); top: calc(var(--stp-m) + 8px); bottom: 8px;
    width: 0; border-left: var(--stp-line) var(--stp-ls) var(--lc); transform-origin: top center;
}
.stp-layout-zigzag.stp-line-gradient .ultrakit-stp-step:not(:last-child)::after { width: var(--stp-line); border-left: none; background: linear-gradient(180deg, var(--stp-accent), var(--stp-accent2)); opacity: 0.7; }
.stp-layout-zigzag.stp-line-none .ultrakit-stp-step::after { display: none; }
.stp-layout-zigzag.stp-line-arrow .ultrakit-stp-step:not(:last-child)::before {
    content: ''; position: absolute; z-index: 1; width: 10px; height: 10px; left: calc(50% - 5px); bottom: 6px;
    border-right: var(--stp-line) solid var(--lc); border-bottom: var(--stp-line) solid var(--lc); transform: rotate(45deg);
}
.stp-layout-zigzag.stp-card-card .ultrakit-stp-body, .stp-layout-zigzag.stp-card-outline .ultrakit-stp-body, .stp-layout-zigzag.stp-card-tinted .ultrakit-stp-body { padding-top: 20px; }

/* ============================================================
   CARD GRID
   ============================================================ */
.stp-cols-2 { --stp-cols: 2; }
.stp-cols-3 { --stp-cols: 3; }
.stp-cols-4 { --stp-cols: 4; }
.stp-layout-cards .ultrakit-stp-list { display: grid; grid-template-columns: repeat(var(--stp-cols), minmax(0, 1fr)); gap: calc(var(--stp-m) / 2 + 34px) 40px; padding-top: calc(var(--stp-m) / 2); }
.stp-layout-cards .ultrakit-stp-step { background: #ffffff; border-radius: 20px; padding: calc(var(--stp-m) / 2 + 22px) 26px 28px; box-shadow: 0 12px 36px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.stp-layout-cards .ultrakit-stp-step:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,0.12); }
.stp-layout-cards .ultrakit-stp-marker { position: absolute; top: calc(var(--stp-m) / -2); left: 24px; }
.stp-layout-cards .ultrakit-stp-body { text-align: center; }
.stp-layout-cards .ultrakit-stp-body { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
.stp-layout-cards .ultrakit-stp-step:not(:last-child)::after {
    content: ''; position: absolute; top: 50%; right: -27px; width: 12px; height: 12px;
    border-top: 3px solid var(--lc); border-right: 3px solid var(--lc); transform: translateY(-50%) rotate(45deg);
}
.stp-layout-cards.stp-cols-2 .ultrakit-stp-step:nth-child(2n)::after,
.stp-layout-cards.stp-cols-3 .ultrakit-stp-step:nth-child(3n)::after,
.stp-layout-cards.stp-cols-4 .ultrakit-stp-step:nth-child(4n)::after,
.stp-layout-cards.stp-line-none .ultrakit-stp-step::after { display: none; }

/* ============================================================
   STAIRCASE
   ============================================================ */
.stp-layout-stairs .ultrakit-stp-list { flex-direction: column; gap: 18px; }
.stp-layout-stairs .ultrakit-stp-step { display: flex; align-items: center; gap: 20px; margin-left: calc(var(--i) * 40px); max-width: calc(100% - var(--i) * 40px); }
.stp-layout-stairs .ultrakit-stp-body { flex: 1; padding: 16px 22px; background: #ffffff; border-radius: 14px; border-left: 5px solid var(--stp-accent); box-shadow: 0 8px 26px rgba(0,0,0,0.07); text-align: left; }
.stp-layout-stairs .is-todo .ultrakit-stp-body { border-left-color: var(--stp-muted); }
.stp-layout-stairs .ultrakit-stp-title { margin-bottom: 4px; }

/* ============================================================
   REVEAL ANIMATIONS (only once JS has flagged the wrapper)
   ============================================================ */
.stp-js.stp-anim-fade-up .ultrakit-stp-step,
.stp-js.stp-anim-zoom .ultrakit-stp-step,
.stp-js.stp-anim-slide .ultrakit-stp-step { opacity: 0; transition: opacity 0.6s ease calc(var(--i) * 130ms), transform 0.6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 130ms); }
.stp-js.stp-anim-fade-up .ultrakit-stp-step { transform: translateY(28px); }
.stp-js.stp-anim-zoom .ultrakit-stp-step { transform: scale(0.85); }
.stp-js.stp-anim-slide .ultrakit-stp-step { transform: translateX(-34px); }
.stp-js.stp-anim-slide.stp-layout-zigzag .ultrakit-stp-step:nth-child(even) { transform: translateX(34px); }
.stp-js.is-in .ultrakit-stp-step { opacity: 1; transform: none; }
.stp-js.is-in.stp-layout-cards .ultrakit-stp-step:hover { transform: translateY(-6px); }

@media (max-width: 860px) {
    .stp-layout-cards .ultrakit-stp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stp-layout-cards .ultrakit-stp-step::after { display: none !important; }
}

@media (max-width: 700px) {
    .stp-layout-cards .ultrakit-stp-list { grid-template-columns: 1fr; }

    .stp-layout-horizontal .ultrakit-stp-list, .stp-layout-zigzag .ultrakit-stp-list { flex-direction: column; }
    .stp-layout-horizontal .ultrakit-stp-step, .stp-layout-zigzag .ultrakit-stp-step {
        display: flex; flex-direction: row; align-items: flex-start; gap: 20px; padding: 0 0 34px 0; text-align: left;
    }
    .stp-layout-horizontal .ultrakit-stp-step:last-child, .stp-layout-zigzag .ultrakit-stp-step:last-child { padding-bottom: 0; }
    .stp-layout-horizontal .ultrakit-stp-body, .stp-layout-zigzag .ultrakit-stp-body,
    .stp-layout-zigzag .ultrakit-stp-step:nth-child(odd) .ultrakit-stp-body, .stp-layout-zigzag .ultrakit-stp-step:nth-child(even) .ultrakit-stp-body { margin-top: 0; padding-top: calc(var(--stp-m) / 2 - 16px); text-align: left; flex: 1; }
    .stp-layout-horizontal .ultrakit-stp-step:not(:last-child)::after, .stp-layout-zigzag .ultrakit-stp-step:not(:last-child)::after {
        left: calc(var(--stp-m) / 2 - var(--stp-line) / 2); top: calc(var(--stp-m) + 8px); bottom: 8px; width: 0; height: auto;
        border-top: none; border-left: var(--stp-line) var(--stp-ls) var(--lc);
    }
    .stp-layout-horizontal.stp-line-gradient .ultrakit-stp-step:not(:last-child)::after, .stp-layout-zigzag.stp-line-gradient .ultrakit-stp-step:not(:last-child)::after { width: var(--stp-line); height: auto; border-left: none; background: linear-gradient(180deg, var(--stp-accent), var(--stp-accent2)); }
    .stp-layout-horizontal.stp-line-arrow .ultrakit-stp-step:not(:last-child)::before, .stp-layout-zigzag.stp-line-arrow .ultrakit-stp-step:not(:last-child)::before { left: calc(var(--stp-m) / 2 - 5px); top: auto; bottom: 6px; border-top: none; border-right: var(--stp-line) solid var(--lc); border-bottom: var(--stp-line) solid var(--lc); }
    .stp-layout-stairs .ultrakit-stp-step { margin-left: calc(var(--i) * 14px); max-width: calc(100% - var(--i) * 14px); }
}

@media (prefers-reduced-motion: reduce) {
    .is-current .ultrakit-stp-marker { animation: none; }
    .stp-js .ultrakit-stp-step { transition: none !important; opacity: 1 !important; transform: none !important; }
}