/* Add to end of style.css */

/* ================== CALCULATOR PROGRESS BAR ================== */
.calc-progress-container {
    width: 100%;
    height: 8px;
    background-color: var(--color-border);
    border-radius: 4px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.calc-progress-fill {
    height: 100%;
    width: 25%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 4px;
    transition: width 0.4s ease-out;
}

/* ================== CALCULATOR RESULT STEP ================== */
.calc-result-box {
    text-align: center;
    padding: 1.5rem;
    background-color: #f1f5f9;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    border: 1px solid var(--color-border);
}

.calc-result-box p {
    margin-bottom: 0;
    color: var(--color-text-main);
}

.pulse-btn {
    animation: pulseGlow 2s infinite;
    background: linear-gradient(135deg, var(--color-accent), var(--color-tk-ruby));
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(227, 10, 23, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(227, 10, 23, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(227, 10, 23, 0);
    }
}