/* ═══════════════════════════════════════════════════════════
   Moroccan AI Orientation – Frontend Styles
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;900&display=swap');

.mao-container *,
.mao-container *::before,
.mao-container *::after {
    box-sizing: border-box;
}

.mao-container {
    font-family: 'Cairo', 'Segoe UI', Arial, sans-serif;
    direction: rtl;
    max-width: 780px;
    margin: 30px auto;
    padding: 0 15px;
    color: #2c3e50;
    line-height: 1.8;
}

/* ── Header ─────────────────────────────────────────────── */
.mao-header {
    background: linear-gradient(135deg, #1a3c6e 0%, #2980b9 60%, #27ae60 100%);
    color: #fff;
    text-align: center;
    padding: 40px 30px 35px;
    border-radius: 18px;
    margin-bottom: 30px;
    box-shadow: 0 8px 32px rgba(26,60,110,0.18);
}
.mao-flag {
    font-size: 56px;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}
.mao-header h2 {
    font-size: 24px;
    font-weight: 900;
    margin: 0 0 8px;
}
.mao-header p {
    font-size: 14px;
    opacity: 0.88;
    margin: 0;
}

/* ── Cards ──────────────────────────────────────────────── */
.mao-form-card,
.mao-loading-card {
    background: #fff;
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.09);
    border: 1px solid #e8f0fe;
}
.mao-form-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a3c6e;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8f0fe;
}

/* ── Form fields ────────────────────────────────────────── */
.mao-field {
    margin-bottom: 20px;
}
.mao-field label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #444;
    margin-bottom: 7px;
}
.mao-field input,
.mao-field select {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    font-family: 'Cairo', sans-serif;
    border: 2px solid #dce6f1;
    border-radius: 10px;
    background: #f8faff;
    color: #2c3e50;
    transition: border 0.25s, box-shadow 0.25s;
    outline: none;
    direction: rtl;
}
.mao-field input:focus,
.mao-field select:focus {
    border-color: #2980b9;
    box-shadow: 0 0 0 4px rgba(41,128,185,0.12);
    background: #fff;
}

/* ── Buttons ────────────────────────────────────────────── */
.mao-btn {
    display: inline-block;
    padding: 13px 28px;
    font-size: 15px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    line-height: 1.4;
}
.mao-btn-primary {
    background: linear-gradient(135deg, #2980b9, #1a3c6e);
    color: #fff;
    box-shadow: 0 4px 16px rgba(41,128,185,0.28);
}
.mao-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(41,128,185,0.38);
}
.mao-btn-success {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: #fff;
    box-shadow: 0 4px 16px rgba(39,174,96,0.28);
}
.mao-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(39,174,96,0.38);
}
.mao-btn-secondary {
    background: #ecf0f1;
    color: #444;
    border: 1px solid #dce6f1;
}
.mao-btn-secondary:hover {
    background: #dce6f1;
}
.mao-btn-outline {
    background: transparent;
    color: #2980b9;
    border: 2px solid #2980b9;
}
.mao-btn-outline:hover {
    background: #eaf4fb;
}
.mao-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
}
#mao-start-btn {
    width: 100%;
    margin-top: 8px;
    font-size: 16px;
    padding: 15px;
}

/* ── Quiz ───────────────────────────────────────────────── */
.mao-quiz-header {
    margin-bottom: 24px;
}
.mao-progress-wrapper {
    height: 8px;
    background: #e0eaf5;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 10px;
}
.mao-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2980b9, #27ae60);
    width: 0%;
    border-radius: 99px;
    transition: width 0.4s ease;
}
.mao-progress-text {
    font-size: 13px;
    color: #666;
    text-align: center;
}

.mao-question-card {
    background: #fff;
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.09);
    border: 1px solid #e8f0fe;
    margin-bottom: 22px;
    animation: fadeInUp 0.35s ease;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mao-question-num {
    font-size: 12px;
    font-weight: 700;
    color: #2980b9;
    background: #eaf4fb;
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.mao-question-text {
    font-size: 17px;
    font-weight: 700;
    color: #1a3c6e;
    margin-bottom: 20px;
}
.mao-options {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.mao-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border: 2px solid #dce6f1;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: #f8faff;
    font-size: 14px;
}
.mao-option:hover {
    border-color: #2980b9;
    background: #eaf4fb;
    transform: translateX(-3px);
}
.mao-option.selected {
    border-color: #2980b9;
    background: linear-gradient(90deg, #eaf4fb, #f0f9f4);
    box-shadow: 0 2px 8px rgba(41,128,185,0.15);
}
.mao-option-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #dce6f1;
    color: #2980b9;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.mao-option.selected .mao-option-letter {
    background: #2980b9;
    color: #fff;
}

.mao-quiz-nav {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ── Loading ────────────────────────────────────────────── */
.mao-loading-card {
    text-align: center;
    padding: 50px 30px;
}
.mao-spinner {
    width: 56px;
    height: 56px;
    border: 5px solid #e0eaf5;
    border-top-color: #2980b9;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin: 0 auto 22px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mao-loading-card h3 {
    font-size: 18px;
    color: #1a3c6e;
    margin-bottom: 10px;
}
.mao-loading-card p {
    color: #666;
    font-size: 13px;
    margin-bottom: 28px;
}
.mao-loading-steps {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}
.mao-load-step {
    background: #ecf0f1;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: #888;
    transition: all 0.3s;
}
.mao-load-step.active {
    background: linear-gradient(135deg, #2980b9, #1a3c6e);
    color: #fff;
    box-shadow: 0 2px 8px rgba(41,128,185,0.25);
}
.mao-load-step.done {
    background: #27ae60;
    color: #fff;
}

/* ── Results ────────────────────────────────────────────── */
.mao-result-header {
    background: linear-gradient(135deg, #1a3c6e, #2980b9, #27ae60);
    color: #fff;
    text-align: center;
    padding: 36px 25px 30px;
    border-radius: 18px;
    margin-bottom: 25px;
    box-shadow: 0 8px 32px rgba(26,60,110,0.18);
}
.mao-result-header h2 {
    font-size: 22px;
    font-weight: 900;
    margin: 10px 0 6px;
}
.mao-result-header p {
    font-size: 16px;
    opacity: 0.92;
    font-weight: 600;
    margin: 0;
}

.mao-result-section {
    background: #fff;
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 18px;
    box-shadow: 0 3px 18px rgba(0,0,0,0.07);
    border-right: 5px solid #2980b9;
    border-left: none;
}
.mao-result-section:nth-child(even) {
    border-right-color: #27ae60;
    background: #f8fff9;
}
.mao-result-section h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a3c6e;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #dce6f1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mao-result-section .content {
    font-size: 14px;
    color: #444;
    line-height: 2;
    white-space: pre-line;
}

.mao-result-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
    padding: 20px;
    background: #f8faff;
    border-radius: 14px;
    border: 1px solid #e8f0fe;
}

/* ── Error box ──────────────────────────────────────────── */
.mao-error-box {
    background: #fdf2f8;
    border: 2px solid #e74c3c;
    border-radius: 12px;
    padding: 20px 25px;
    color: #c0392b;
    text-align: center;
    margin-top: 20px;
}
.mao-error-box p {
    margin-bottom: 12px;
    font-weight: 600;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .mao-header h2   { font-size: 18px; }
    .mao-question-text { font-size: 15px; }
    .mao-option      { font-size: 13px; padding: 11px 14px; }
    .mao-form-card,
    .mao-loading-card,
    .mao-question-card,
    .mao-result-section { padding: 20px 18px; }
    .mao-quiz-nav    { justify-content: stretch; }
    .mao-quiz-nav .mao-btn { flex: 1; }
    .mao-result-actions { flex-direction: column; }
    .mao-result-actions .mao-btn { text-align: center; }
}

@media print {
    .mao-quiz-nav,
    .mao-result-actions { display: none !important; }
    .mao-result-section { break-inside: avoid; }
}