/* bravo-counter — Elementor Widget
   Scope: .bravo-counter  /  prefix: .bcnt-*
   Desktop/Tablet ≥ 768px: sticky number left, steps right
   Mobile < 768px: inline step number, vertical list
*/

/* ── Elementor panel icon ─────────────────────────────── */
.bravo-icon-counter {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url('../img/bravo-mark-2.svg') no-repeat center / contain;
    vertical-align: middle;
}
.bravo-icon-counter::before { content: ''; }

/* ── Root ─────────────────────────────────────────────── */
.bravo-counter {
    font-family: inherit;
    width: 100%;
}

/* ── Two-column wrap ──────────────────────────────────── */
.bcnt-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 56px;
    align-items: start;
}

/* ── Left: sticky digit roller ─────────────────────────── */
.bcnt-left {
    position: sticky;
    /* top and height set dynamically by JS; fallback: */
    top: 30vh;
    align-self: start;
    overflow: hidden;
    min-width: 80px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.bcnt-digit-track {
    display: flex;
    flex-direction: column;
    transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.bcnt-digit {
    font-size: 140px; /* default; Elementor typography group overrides */
    font-weight: 700;
    color: #201d49;
    line-height: 1.1;
    display: block;
    white-space: nowrap;
}

/* ── Steps list ───────────────────────────────────────── */
.bcnt-right {
    min-width: 0;
}

/* ── Single step ──────────────────────────────────────── */
.bcnt-step {
    padding: 48px 0;
}

/* Mobile-only inline step number */
.bcnt-step__num {
    display: none;
    font-size: 16px;
    font-weight: 700;
    color: #201d49;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

/* ── Progress bar (mobile only) ───────────────────────── */
.bcnt-step__progress {
    display: none; /* shown only on mobile via media query below */
    width: 100%;
    height: 2px;
    background: #E5E7EB;
    border-radius: 2px;
    margin-bottom: 20px;
    overflow: hidden;
}
.bcnt-step__bar {
    height: 100%;
    width: 0%;
    background: #201d49;
    border-radius: 2px;
    transition: width 0.6s ease;
}
.bcnt-step.is-active .bcnt-step__bar {
    width: 100%;
}

/* ── Tagline ──────────────────────────────────────────── */
.bcnt-step__tagline {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #201d49;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
}

/* ── Heading ──────────────────────────────────────────── */
.bcnt-step__heading {
    font-size: 36px;
    font-weight: 700;
    color: #201d49;
    line-height: 1.2;
    margin: 0 0 16px;
}

/* ── Body text ────────────────────────────────────────── */
.bcnt-step__text {
    font-size: 16px;
    font-weight: 400;
    color: #4B5563;
    line-height: 1.65;
    margin: 0;
}

/* ── CTA ──────────────────────────────────────────────── */
.bcnt-step__cta {
    margin-top: 24px;
}
.bcnt-btn {
    display: inline-block;
    padding: 13px 28px;
    background: #201d49;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.bcnt-btn:hover {
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
}

/* ── Tablet (768–1279px) ──────────────────────────────── */
@media (min-width: 768px) and (max-width: 1279px) {
    .bcnt-digit          { font-size: 90px; }
    .bcnt-step           { padding: 36px 0; }
    .bcnt-step__heading  { font-size: 28px; }
    .bcnt-wrap           { gap: 0 36px; }
}

/* ── Mobile (< 768px) ─────────────────────────────────── */
@media (max-width: 767px) {
    .bcnt-left { display: none; }

    .bcnt-wrap {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bcnt-step__num      { display: block; }
    .bcnt-step__progress { display: block; }
    .bcnt-step           { padding: 32px 0; }
    .bcnt-step__heading  { font-size: 24px; }
    .bcnt-step__text     { font-size: 15px; }
}