/**
 * 學生學習成效調查系統 - 前台樣式
 * Student Learning Effectiveness Survey System - Frontend Styles
 */

/* 自訂樣式已在 header.php 內嵌 */

/* 額外響應式調整 */
@media (max-width: 768px) {
    .survey-hero {
        padding: 2rem 0;
    }

    .survey-hero h1 {
        font-size: 1.5rem;
    }

    .progress-steps {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .step-connector {
        width: 30px;
        margin: 0 0.5rem;
    }

    .question-card {
        padding: 1rem;
    }

    .option-item {
        padding: 0.5rem 0.75rem;
    }
}

/* 列印樣式 */
@media print {
    .navbar-survey,
    .btn,
    footer {
        display: none !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .question-card {
        page-break-inside: avoid;
    }
}

/* 動畫效果 */
.question-card {
    animation: fadeInUp 0.3s ease;
}

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

/* 驗證錯誤樣式 */
.question-card.border-danger {
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* 自訂 checkbox/radio 樣式 */
.option-item input[type="radio"],
.option-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sv-primary);
}

/* 進度條樣式 */
.progress-step {
    transition: all 0.3s ease;
}

.progress-step:hover {
    transform: scale(1.05);
}

/* 按鈕載入狀態 */
.btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn.loading::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    margin-left: 0.5em;
    animation: spin 0.75s linear infinite;
}

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