/* ======================================================
   RUN BUTTON
====================================================== */
.run-btn.running {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--success);
    color: var(--primary-bg);
    cursor: default;
}

.run-btn.running.cancel-hover {
    background: var(--error) !important;
    color: var(--primary-bg) !important;
    cursor: pointer;
}

/* ======================================================
   STATUS DISPLAY
====================================================== */
#status {
    margin-top: var(--status-margin-top, 1rem);
    font-size: var(--status-font-size, 1rem);
    font-weight: 600;
    text-align: center;
}

#status.error {
    color: var(--error);
}

/* ======================================================
   RUN BUTTON SPINNER
====================================================== */
.run-btn.running::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5rem;
    border: 2px solid var(--primary-bg);
    border-top: 2px solid var(--btn-hover-bg);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ======================================================
   SCHEDULE FORM CARD ANIMATION
====================================================== */
#scheduleForm .card {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 0.28s cubic-bezier(0.44, 1.13, 0.73, 0.98),
        transform 0.28s cubic-bezier(0.44, 1.13, 0.73, 0.98);
}

#scheduleForm .card.show-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}