/* ============================================================
   Global "How it works" section
   ------------------------------------------------------------
   Markup:    resources/views/frontend/inc/steps-section.blade.php
   Behaviour: public/frontend/js/steps-section.js
   Self-contained; mobile-first. Lists are spaced with padding (the site resets list margins).
   ============================================================ */

.stp {
    --st-navy: #061634;
    --st-blue: #2563eb;
    --st-orange: #f97316;
    --st-orange-d: #ea580c;
    --st-green: #16a34a;
    --st-ink: #0f172a;
    --st-text: #475569;
    --st-muted: #64748b;
    --st-line: #e6ebf3;
    --st-soft: #f5f8fe;
    --st-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --st-shadow-hover: 0 18px 40px rgba(15, 23, 42, .1);
    padding: 56px 0;
    background: #fff;
    color: var(--st-text);
}
.stp--soft { background: #f7f9fd; }
.stp *, .stp *::before, .stp *::after { box-sizing: border-box; }
.stp a { text-decoration: none; }
.stp :focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; border-radius: 6px; }
.stp-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Heading ──────────────────────────────────────────────── */
.stp-head { max-width: 680px; margin: 0 auto; padding-bottom: 32px; text-align: center; }
.stp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #eff5ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--st-blue);
}
.stp-head h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem); font-weight: 900; line-height: 1.2; letter-spacing: -.01em; color: var(--st-ink); }
.stp-head p { margin: 0; font-size: 15.5px; line-height: 1.65; }

/* ── Buttons ──────────────────────────────────────────────── */
.stp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}
.stp-btn--orange { background: var(--st-orange); border-color: var(--st-orange); color: #fff; }
.stp-btn--orange:hover { background: var(--st-orange-d); border-color: var(--st-orange-d); color: #fff; }
.stp-btn--ghost { background: #fff; color: var(--st-ink); }
.stp-btn--ghost:hover { background: var(--st-soft); border-color: #cbd8ee; color: var(--st-ink); }

/* ── Steps ────────────────────────────────────────────────── */
.stp-list { position: relative; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.stp-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px;
    border: 1px solid var(--st-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--st-shadow);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.stp-step:hover { transform: translateY(-4px); border-color: #cfdcf2; box-shadow: var(--st-shadow-hover); }
.stp-step__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; }
.stp-step__badge {
    --from: var(--st-blue);
    --to: #60a5fa;
    --glow: rgba(37, 99, 235, .28);
    position: relative;
    flex-shrink: 0;
    width: 56px; height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--from), var(--to));
    color: #fff;
    font-size: 21px;
    box-shadow: 0 10px 24px var(--glow);
}
.stp-step:nth-child(2) .stp-step__badge { --from: var(--st-orange); --to: #fbbf24; --glow: rgba(249, 115, 22, .28); }
.stp-step:nth-child(3) .stp-step__badge { --from: #059669; --to: #34d399; --glow: rgba(5, 150, 105, .28); }
.stp-step:nth-child(4) .stp-step__badge { --from: #7c3aed; --to: #a78bfa; --glow: rgba(124, 58, 237, .28); }
.stp-step:nth-child(5) .stp-step__badge { --from: #db2777; --to: #f472b6; --glow: rgba(219, 39, 119, .28); }
.stp-step__badge b {
    position: absolute;
    top: -8px; right: -8px;
    width: 24px; height: 24px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--st-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.stp-step__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--st-line);
    border-radius: 999px;
    background: var(--st-soft);
    font-size: 12px;
    font-weight: 700;
    color: var(--st-muted);
    white-space: nowrap;
}
.stp-step h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--st-ink); }
.stp-step p { flex: 1; margin: 0; padding-bottom: 16px; font-size: 14.5px; line-height: 1.65; }
.stp-step__points { display: grid; gap: 8px; margin: 0; padding: 14px 0 0; border-top: 1px dashed var(--st-line); list-style: none; }
.stp-step__points li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--st-ink); }
.stp-step__points i {
    flex-shrink: 0;
    width: 18px; height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dcfce7;
    color: var(--st-green);
    font-size: 9px;
}

/* ── Call to action ───────────────────────────────────────── */
.stp-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 24px;
    padding: 18px 20px;
    border: 1px solid var(--st-line);
    border-radius: 16px;
    background: var(--st-soft);
}
.stp--soft .stp-cta { background: #fff; }
.stp-cta p { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; line-height: 1.5; }
.stp-cta p i {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    color: var(--st-orange);
    font-size: 16px;
    box-shadow: var(--st-shadow);
}
.stp-cta b { display: block; color: var(--st-ink); }
.stp-cta__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── ≥768px ───────────────────────────────────────────────── */
@media (min-width: 768px) {
    .stp { padding: 72px 0; }
    .stp-list--2,
    .stp-list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .stp-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    /* Dashed connector between the step badges, visible in the gaps. */
    .stp-list--3::before {
        content: "";
        position: absolute;
        top: 52px; left: 12%; right: 12%;
        z-index: 0;
        border-top: 2px dashed #c9d8f2;
    }
    .stp-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 18px 22px; }
}

/* ── ≥992px ───────────────────────────────────────────────── */
@media (min-width: 992px) {
    .stp { padding: 88px 0; }
    .stp-step { padding: 28px 26px 24px; }
    .stp-list--3::before { top: 56px; }
    .stp-list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stp-list--4::before {
        content: "";
        position: absolute;
        top: 56px; left: 10%; right: 10%;
        z-index: 0;
        border-top: 2px dashed #c9d8f2;
    }
}

/* ── Five steps: 2 → 3 → 5 columns ────────────────────────── */
@media (min-width: 768px) {
    .stp-list--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 992px) {
    .stp-list--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .stp-list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
    .stp-list--5 .stp-step { padding: 22px 18px 20px; }
    .stp-list--5 .stp-step h3 { font-size: 17px; }
    .stp-list--5::before {
        content: "";
        position: absolute;
        top: 50px; left: 8%; right: 8%;
        z-index: 0;
        border-top: 2px dashed #c9d8f2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stp *, .stp *::before, .stp *::after { transition: none !important; }
    .stp-step:hover { transform: none; }
}