/* Question Paper Card Styles */

.question-card {
    background: var(--color-bg-surface, #ffffff);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-lg, 16px);
    padding: var(--spacing-5, 16px) var(--spacing-6, 20px);
    margin: var(--spacing-5, 16px) 0;
    page-break-inside: avoid;
}

.question-card.has-image {
    padding: var(--spacing-6, 20px) var(--spacing-7, 24px);
}

/* Question Header */
.question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-4, 12px);
    gap: var(--spacing-4, 12px);
}

.question-left {
    display: flex;
    align-items: flex-start;
    flex: 1;
    gap: var(--spacing-3, 8px);
}

.question-number {
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-lg, 18px);
    color: var(--color-text-primary, #111827);
    min-width: 30px;
    flex-shrink: 0;
}

.question-text {
    font-size: var(--font-size-md, 16px);
    line-height: var(--line-height-normal, 1.5);
    color: var(--color-text-primary, #111827);
    flex: 1;
}

.question-marks {
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-md, 16px);
    color: var(--color-primary-600, #1e6ce0);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Question Image */
.question-image {
    text-align: center;
    margin: var(--spacing-4, 12px) 0;
}

.question-image img {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(16, 24, 40, 0.08));
}

/* MCQ Options */
.mcq-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4, 12px) var(--spacing-6, 20px);
    margin-top: var(--spacing-4, 12px);
}

.mcq-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3, 8px);
}

.option-content {
    display: flex;
    gap: var(--spacing-2, 4px);
    flex: 1;
}

.option-label {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #111827);
    flex-shrink: 0;
}

.option-text {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-secondary, #6b7280);
    line-height: var(--line-height-normal, 1.5);
}

.option-indicator {
    font-size: 20px;
    color: var(--color-neutral-400, #9ca3af);
    flex-shrink: 0;
}

/* Answer Lines */
.answer-lines {
    margin-top: var(--spacing-4, 12px);
}

.answer-line {
    border-bottom: 1px solid var(--color-neutral-300, #d1d5db);
    height: 32px;
    margin-bottom: var(--spacing-3);
}

/* Numerical Answer Box */
.numerical-answer-box {
    margin-top: var(--spacing-4);
    padding: var(--spacing-5);
    border: 2px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    text-align: center;
    background: var(--color-bg-subtle);
}

.answer-box-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-3);
}

.answer-box-line {
    font-size: var(--font-size-lg);
    letter-spacing: 2px;
    color: var(--color-neutral-500);
}

/* True/False Options */
.true-false-options {
    display: flex;
    gap: var(--spacing-8);
    margin-top: var(--spacing-4);
    justify-content: flex-start;
}

.tf-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.tf-option .option-label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.tf-option .option-indicator {
    font-size: 20px;
    color: var(--color-neutral-400);
}

/* Print Styles */
@media print {
    .question-card {
        border: 1px solid #ddd;
        box-shadow: none;
        page-break-inside: avoid;
        margin: 15px 0;
    }
    
    .question-image img {
        max-width: 500px;
        max-height: 350px;
        page-break-inside: avoid;
    }
    
    .mcq-options {
        gap: 12px 20px;
    }
    
    .answer-line {
        height: 28px;
        margin-bottom: 10px;
    }
}