body {
    font-family: "Tahoma", sans-serif;
    background: #f4f4f4;
    padding: 20px;
    text-align: center;
}

.title {
    font-size: 32px;
    color: #1d4e89;
    margin-bottom: 10px;
}

.goals {
    background: #1d4e89;
    color: white;
    width: 140px;
    padding: 8px;
    margin: 0 auto 25px;
    border-radius: 6px;
    font-weight: bold;
}

/* الحاوية الرئيسية */
.container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* عشان الموبايل يحطهم تحت بعض */
}

/* الكروت */
.card {
    background: white;
    width: 300px;
    padding: 15px;
    border-radius: 10px;
    border: 2px solid #1d4e89;
}

/* صورة أعلى الكارت */
.top-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* عنوان المستوى */
.level-title {
    background: #1d4e89;
    color: white;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
}

/* عنوان الدرس */
.lesson h3 {
    background: #dce9f7;
    color: #1d4e89;
    padding: 8px;
    border-radius: 6px;
}

/* الأزرار */
button {
    width: 100%;
    background: #eef6ff;
    color: #1d4e89;
    border: 1px solid #1d4e89;
    padding: 10px;
    border-radius: 6px;
    margin: 6px 0;
    cursor: pointer;
    font-size: 15px;
}

/* موبايل */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
    }
}

/* شاشة الكمبيوتر: صفحة المستوى المفرد - اجعل الكارت يستخدم كامل المساحة وأزرار الدرس في صف */
@media (min-width: 769px) {
    /* عندما نعرض صفحة بها single-container، نحدّ الكارت بعرض كبير لكن يسمح له بأخذ المساحة */
    .single-container .card {
        width: 100%;
        max-width: 1200px;
    }

    /* كل درس يظهر بعرض كامل داخل الكارت */
    .single-container .card .lesson {
        margin-bottom: 16px;
    }

    /* على الديسكتوب، أزل السلوك العرضي للأزرار (100%) واجعلها صفاً أفقياً */
    .single-container .card .lesson > button {
        width: auto;
        display: inline-block;
        margin: 6px 8px 6px 0; /* مناسب للـ RTL */
        min-width: 140px;
    }

    /* حافظ على تنسيق العناوين */
    .single-container .card .lesson h3 {
        margin-bottom: 10px;
    }
}

/* Desktop: make the card image take 30% width and center it vertically; content takes remaining 70% */
@media (min-width: 1000px) {
    .single-container .card {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 20px;
    }

    /* image column */
    .single-container .card .top-img {
        flex: 0 0 30%;
        width: 30%;
        height: auto;
        object-fit: cover;
        display: block;
        margin: 0 auto; /* keep image centered in its column */
        border-radius: 8px;
    }

    /* make all other direct children use remaining space */
    .single-container .card > *:not(.top-img) {
        flex: 1 1 70%;
    }

    /* ensure lesson buttons align horizontally within their content area */
    .single-container .card .lesson {
        display: block;
    }

    .single-container .card .lesson > button {
        width: auto;
        display: inline-block;
        margin: 6px 8px 6px 0;
        min-width: 140px;
    }
}