/* Masarak Core CSS */
:root {
    --primary: #1B4F72;
    --accent: #2E86C1;
    --success: #1E8449;
    --warning: #D4AC0D;
    --danger: #C0392B;
    --light-bg: #f0f8ff;
    --border: #d6eaf8;
    --text: #2C3E50;
    --muted: #7f8c8d;
}

/* XP Bar */
.masarak-xp-bar {
    background: var(--border);
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
    margin: 5px 0;
}
.masarak-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 10px;
    transition: width 0.6s ease;
}

/* Streak Badge */
.masarak-streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ff6b35, #f7c59f);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}

/* Quiz styles */
.masarak-quiz-question {
    background: white;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    transition: border-color 0.3s;
}
.masarak-quiz-question.correct  { border-color: var(--success); background: #f0faf0; }
.masarak-quiz-question.wrong    { border-color: var(--danger);  background: #fdf0f0; }
.masarak-quiz-answer {
    display: block;
    width: 100%;
    text-align: right;
    padding: 12px 18px;
    margin: 8px 0;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--light-bg);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
    font-family: 'Tajawal', sans-serif;
}
.masarak-quiz-answer:hover      { border-color: var(--accent); background: #e8f4fb; }
.masarak-quiz-answer.selected   { border-color: var(--primary); background: #d6eaf8; font-weight: 600; }
.masarak-quiz-answer.correct    { border-color: var(--success); background: #d5f5e3; }
.masarak-quiz-answer.wrong      { border-color: var(--danger);  background: #fadbd8; }

/* Bookmark button */
.masarak-bookmark-btn {
    background: none;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
    transition: all 0.3s;
    font-family: 'Tajawal', sans-serif;
}
.masarak-bookmark-btn.bookmarked,
.masarak-bookmark-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--light-bg);
}

/* Toast notification */
.masarak-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--primary);
    color: white;
    padding: 14px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    z-index: 99999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    animation: masarakSlideIn 0.3s ease;
    direction: rtl;
    font-family: 'Tajawal', sans-serif;
}
@keyframes masarakSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* User level chip */
.masarak-level-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--light-bg);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

/* Personality test */
.masarak-test-scale {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 10px;
    flex-direction: row-reverse;
}
.masarak-test-scale label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--muted);
}
.masarak-test-scale input[type=radio] { cursor: pointer; width: 18px; height: 18px; accent-color: var(--primary); }
.masarak-test-scale input[type=radio]:checked + span { color: var(--primary); font-weight: 700; }

/* Result card */
.masarak-result-card {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border-radius: 16px;
    padding: 35px;
    text-align: center;
}
.masarak-result-icon { font-size: 60px; margin-bottom: 15px; }
.masarak-result-title { font-size: 26px; font-weight: 900; margin-bottom: 10px; }
.masarak-result-code { font-size: 40px; font-weight: 900; letter-spacing: 3px; opacity: 0.9; }