/* static/css/htmx_styles.css */

/* --- General HTMX State Styles --- */

/* Hide all loading spinners by default */
.loading-spinner {
    display: none;
}

/* Allow designated spinners to remain visible outside of HTMX requests */
.persistent-spinner.loading-spinner {
    display: inline-block;
}

/* Show a spinner when its parent container has the htmx-request class */
.htmx-request .loading-spinner {
    display: block;
}

/* --- Animations --- */

/* Smooth content slide-up for new content */
#question-display-area, #main-block {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Component-Specific Loading States --- */

/* Style for the "Next Question" button during a request */
.htmx-request.next-btn .button-icon {
    display: none;
}
.htmx-request.next-btn .button-text {
    margin-right: 0;
}
.htmx-request.next-btn {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe); /* Corresponds to indigo-100/200 */
    color: #6366f1; /* Corresponds to indigo-500 */
    transform: scale(0.98);
}

/* Style for an individual answer button during its request */
.htmx-request.answer-btn {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    border-color: #6366f1;
    transform: scale(0.98);
}

/* Disable all answer buttons when any one of them is clicked */
#answers-container.htmx-request .answer-btn {
    pointer-events: none;
    opacity: 0.6;
}