/* Arabic RTL Support and MoE-inspired styling */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap');

:root {
    --moe-blue: #0D3B66;
    --moe-gold: #F4D35E;
    --moe-white: #ffffff;
    --moe-gray: #f8f9fa;
    --moe-light-blue: #4a90e2;
    --moe-dark-blue: #2c5fa1;
}

/* Global Arabic font support */
body, .form-control, .btn, .card, .modal {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* RTL direction for Arabic content */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Text written left-to-right (an English question on an Arabic page) keeps its own alignment */
[dir="ltr"] {
    text-align: left;
}

[dir="auto"] {
    text-align: start;
}

/* Arabic input fields styling */
.form-control[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

/* Question form RTL improvements */
.question-form-rtl {
    direction: rtl;
    text-align: right;
}

.question-form-rtl .form-label {
    text-align: right;
    display: block;
    font-weight: 600;
    color: var(--moe-blue);
}

.question-form-rtl .form-control {
    direction: rtl;
    text-align: right;
    border: 2px solid #e9ecef;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.question-form-rtl .form-control:focus {
    border-color: var(--moe-gold);
    box-shadow: 0 0 8px rgba(244, 211, 94, 0.3);
}

/* MoE Color Scheme */
.bg-moe-blue {
    background-color: var(--moe-blue) !important;
}

.bg-moe-gold {
    background-color: var(--moe-gold) !important;
}

.text-moe-blue {
    color: var(--moe-blue) !important;
}

.text-moe-gold {
    color: var(--moe-gold) !important;
}

/* Enhanced button styling */
.btn-moe-primary {
    background: linear-gradient(135deg, var(--moe-blue), var(--moe-dark-blue));
    border: none;
    color: white;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-moe-primary:hover {
    background: linear-gradient(135deg, var(--moe-dark-blue), var(--moe-blue));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 59, 102, 0.3);
    color: white;
}

.btn-moe-secondary {
    background: linear-gradient(135deg, var(--moe-gold), #e6c347);
    border: none;
    color: var(--moe-blue);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-moe-secondary:hover {
    background: linear-gradient(135deg, #e6c347, var(--moe-gold));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(244, 211, 94, 0.4);
    color: var(--moe-blue);
}

/* Card styling with MoE colors */
.card-moe {
    border: 2px solid var(--moe-blue);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(13, 59, 102, 0.1);
}

.card-moe .card-header {
    background: linear-gradient(90deg, var(--moe-blue), var(--moe-dark-blue));
    color: white;
    font-weight: 600;
    border-radius: 10px 10px 0 0;
}

/* Arabic typography improvements */
.arabic-text {
    font-family: 'Cairo', sans-serif;
    line-height: 1.8;
    letter-spacing: 0.3px;
}

.arabic-heading {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: var(--moe-blue);
}

/* Form step indicators for Arabic */
.step-progress .step {
    font-family: 'Cairo', sans-serif;
    font-weight: 500;
}

/* Enhanced choice styling for RTL */
.choice-rtl {
    direction: rtl;
    text-align: right;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.choice-rtl:hover {
    border-color: var(--moe-gold);
    background: rgba(244, 211, 94, 0.1);
}

.choice-rtl.selected {
    border-color: var(--moe-blue);
    background: rgba(13, 59, 102, 0.1);
    box-shadow: 0 2px 8px rgba(13, 59, 102, 0.2);
}

/* Question type specific styling */
.question-type-card {
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 20px;
    margin: 15px 0;
    transition: all 0.3s ease;
}

.question-type-card.true-false {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.05);
}

.question-type-card.matching {
    border-color: #ffc107;
    background: rgba(255, 193, 7, 0.05);
}

.question-type-card.fill-blank {
    border-color: #17a2b8;
    background: rgba(23, 162, 184, 0.05);
}

/* Responsive RTL adjustments */
@media (max-width: 768px) {
    .question-form-rtl .form-control {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .arabic-text {
        font-size: 1.1em;
        line-height: 1.9;
    }
}

/* Print styling for Arabic content */
@media print {
    body {
        font-family: 'Cairo', sans-serif;
        direction: rtl;
        text-align: right;
    }
}

/* Accessibility improvements for Arabic */
.sr-only-ar {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-moe-blue {
        color: #000080 !important;
    }
    
    .bg-moe-gold {
        background-color: #ffcc00 !important;
    }
}

/* Additional styles for new question types */

/* True/False with Correction styles */
.true-false-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 30px 0;
}

.true-false-option {
    background: white;
    border: 3px solid #e0e0e0;
    border-radius: 15px;
    padding: 20px 30px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    min-width: 120px;
    font-family: 'Cairo', sans-serif;
    font-weight: 500;
}

.true-false-option:hover {
    border-color: var(--moe-blue);
    box-shadow: 0 5px 15px rgba(13, 59, 102, 0.2);
}

.true-false-option.selected {
    background: var(--moe-blue);
    color: white;
    border-color: var(--moe-blue);
}

.true-option.selected {
    background: #28a745;
    border-color: #28a745;
}

.false-option.selected {
    background: #dc3545;
    border-color: #dc3545;
}

/* Matching question styles */
.matching-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 30px 0;
}

.matching-column {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
}

.matching-item {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Cairo', sans-serif;
    text-align: center;
    font-weight: 500;
}

.matching-item:hover {
    border-color: var(--moe-blue);
    box-shadow: 0 3px 10px rgba(13, 59, 102, 0.2);
}

.matching-item.selected {
    background: var(--moe-gold);
    border-color: var(--moe-blue);
    color: var(--moe-blue);
    font-weight: 600;
}

.matching-item.matched {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

/* Fill in the blank styles */
.fill-blank-input {
    border: none;
    border-bottom: 3px solid var(--moe-blue);
    background: transparent;
    padding: 5px 10px;
    margin: 0 5px;
    font-family: 'Cairo', sans-serif;
    font-size: 1em;
    font-weight: 600;
    color: var(--moe-blue);
    text-align: center;
    min-width: 100px;
    outline: none;
    transition: all 0.3s ease;
}

.fill-blank-input:focus {
    border-bottom-color: var(--moe-gold);
    background: rgba(244, 211, 94, 0.1);
}

.fill-blank-input::placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Question type specific cards */
.question-type-fields .card {
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.question-type-fields .card:hover {
    border-color: var(--moe-blue);
    box-shadow: 0 5px 15px rgba(13, 59, 102, 0.1);
}

.question-type-fields .card-header {
    background: linear-gradient(135deg, var(--moe-blue), var(--moe-gold)) !important;
    color: white !important;
}

/* Responsive adjustments for new question types */
@media (max-width: 768px) {
    .matching-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .true-false-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .true-false-option {
        min-width: 200px;
    }
}

/* Fix a cross-browser quirk: .table-responsive (overflow-x: auto) containers
   inside an RTL page can default to a scrolled position that hides the
   start of the table (the rightmost column) until the user scrolls left.
   Setting direction explicitly on the scroll container itself fixes the
   initial scroll position to start at the true RTL start. */
[dir="rtl"] .table-responsive {
    direction: rtl;
}
/* Program code inside a question */
.q-code {
    direction: ltr;
    text-align: left;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: normal;
    white-space: pre;
    overflow-x: auto;
}

.q-code code {
    color: inherit;
    background: none;
    padding: 0;
}