[x-cloak] {
    display: none !important;
}

.test-progress {
    background: linear-gradient(90deg, var(--color-secondary) var(--progress), transparent var(--progress));
}

.question-card {
    transform-origin: center;
    transition: all 0.5s ease;
}

.question-card.active {
    transform: translateX(0);
    opacity: 1;
}

.question-card.inactive {
    transform: translateX(100px);
    opacity: 0;
    pointer-events: none;
}

.radio-button {
    @apply w-full p-4 text-left border rounded-lg transition-all duration-200 ease-in-out;
}

.radio-button:hover {
    @apply border-[#4A4E69] bg-[#F2E9E4];
}

.radio-button.selected {
    @apply border-[#4A4E69] bg-[#C9ADA7] ring-2 ring-[#4A4E69] ring-opacity-50;
}

/* Progress bar animations and effects */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Update progress dot colors */
.progress-dot {
    background-color: var(--color-accent);
}

.progress-dot.active {
    background-color: var(--color-secondary);
}

/* Gradient shimmer effect */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.progress-shimmer {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 2s infinite;
}

@media print {
    .article-content {
        page-break-after: always;
        break-after: page;
    }
}