/* ------------------------------------------- */
/* 1. القاعدة العالمية (Universal Selector)     */
/* ------------------------------------------- */

*{
      /* تزيل جميع الهوامش الخارجية الافتراضية من كل عنصر في الصفحة */
    margin: 0;
    /* تزيل جميع الحشوات/الهوامش الداخلية الافتراضية من كل عنصر */
    padding: 0;
     /* تزيل أي حدود افتراضية من كل عنصر */
    border: 0;
     /* تضمن أن الحجم الكلي للعنصر (العرض والارتفاع) يشمل الهوامش الداخلية والحدود. هذا يسهل التعامل مع الأبعاد. */
    box-sizing: border-box;
}

/* ------------------------------------------- */
/* 2. المتغيرات الجذرية (CSS Variables - :root) */
/* ------------------------------------------- */
/* :root يمثل العنصر الجذر للمستند (عادةً < html >). يستخدم لتحديد المتغيرات العامة. */
:root{
       /* يحدد لون خلفية جذري يمكن استخدامه لاحقاً كمتغير */
    background-color: rgb(230, 173, 88);
    /* يحدد لون حدود جذري يمكن استخدامه لاحقاً كمتغير */
    border-color: antiquewhite;
}

/* ------------------------------------------- */
/* 3. تنسيقات جسم الصفحة (body)                 */
/* ------------------------------------------- */
body{
    /* يحدد نوع الخط (Jont) مع استخدام خطوط Serif كبديل في حال عدم توفر الخط الأساسي */
    font-family: "jont" , serif;
     /* يحدد لون الخلفية لجسم الصفحة */
    background-color:antiquewhite;
}

/* ------------------------------------------- */
/* 4. تنسيق الحاوية الرئيسية (.container)        */
/* ------------------------------------------- */
.container{
     /* تفعيل نظام Flexbox لترتيب العناصر الداخلية */
    display: flex;
    /* محاذاة العناصر عمودياً (على المحور الفرعي) في المنتصف */
    align-items: center;
    /* محاذاة العناصر أفقياً (على المحور الرئيسي) في المنتصف */
    justify-content: center;
     /* يسمح للعناصر بالالتفاف إلى سطر جديد إذا لم يكن هناك مساحة كافية (مهم للتجاوب) */
    flex-wrap:wrap;
     /* يجعل ارتفاع الحاوية يساوي 100% من ارتفاع نافذة العرض */
    height: 100vh;
     /* مسافة (فجوة) بين العناصر الداخلية تبلغ 5rem (أفقي وعمودي) */
    gap: 5rem;
    /* مسافة داخلية (حشوة) حول الحاوية تبلغ 1rem */
    padding: 1rem;
}
/* ------------------------------------------- */
/* 5. تنسيق البطاقة العامة (.card)              */
/* ------------------------------------------- */
.card{
    /* يجعل موضع البطاقة نسبياً، مما يسمح بوضع العناصر الأبناء داخلها بشكل مطلق */
    position:relative ;
}
/* ------------------------------------------- */
/* 6. تنسيق حاوية الفيديو المخصصة (.tvideo)      */
/* ------------------------------------------- */

.tvideo{
     /* عرض الحاوية يبلغ 25 وحدة قياس rem (وحدة قياس نسبية لحجم الخط) */
    width: 25rem;
    /* ارتفاع الحاوية يبلغ 25 وحدة قياس rem */
    height: 25rem;
     /* تدوير الحواف بمقدار 2rem */
    border-radius: 2rem;
     /* إضافة حدود صلبة بسمك 1rem ولون وردي */
    border: 1rem solid rgb(231, 114, 151);
    /* إخفاء أي محتوى يتجاوز حدود هذه الحاوية */
    overflow: hidden;
     /* يجعل موضع العنصر نسبياً (يمكن أن يكون مطلقاً إذا لم يكن هناك حاجة لـ position: relative في .card) */
    position: relative;
}

/* ------------------------------------------- */
/* 7. تنسيق الفيديو داخل الحاوية (.tvideo video) */
/* ------------------------------------------- */
.tvideo video{
     /* جعل عرض الفيديو 100% من عرض الحاوية الأب (.tvideo) */
 width: 100%;   
  /* جعل ارتفاع الفيديو 100% من ارتفاع الحاوية الأب (.tvideo) */
 height: 100%;
  /* التأكد من أن الفيديو يملأ الحاوية بالكامل دون تشويه، مع قص الأجزاء الزائدة */
 object-fit: cover;
}

/* ------------------------------------------- */
/* 8. تنسيق شريط الزاوية/العلامة (.tag) -- تم نقله إلى الزاوية السفلية اليسرى */
/* ------------------------------------------- */
/* يمثل الحاوية الأب للقائمة المنسدلة */
.tag {
    /* يجعل موضع العنصر مطلقًا بالنسبة لـ .card أو .tvideo */
    position: absolute;
    /* وضع الشريط في الزاوية السفلية اليسرى (0rem من اليسار) */
    left: 0rem; /* تم التغيير من right: 0rem */
    /* وضع الشريط في الزاوية السفلية (0rem من الأسفل) */
    bottom: 0rem; 
    /* تحديد الأبعاد ليناسب الشكل المقتطع */
    width: 7rem; 
    height: 5rem;
    /* تنسيقات الشكل المائل القديمة */
    background-color: antiquewhite;
    /* عكس الحدود: border-top على اليمين و border-right في الأعلى */
    border-top: 0.9rem solid rgb(231, 114, 151);
    border-right: 0.9rem solid rgb(231, 114, 151); /* تم التغيير من border-left */
    /* تدوير الزاوية ليناسب اليسار */
    border-radius: 0 1rem 0 0; /* تم التغيير من 1rem 0 0 0 */
    
    /* يضمن أن العناصر الداخلية (القائمة المنسدلة) ستوضع بالنسبة لهذا العنصر */
    z-index: 10;
    /* تفعيل الفليكس لتوسيط الزر داخل الزاوية المقتطعة */
    display: flex;
    align-items: center;
    justify-content: center;
    /* إزالة إعداد top: 0rem السابق */
    top: auto; 
    /* إزالة إعداد right: 0rem السابق */
    right: auto;
}



/* ------------------------------------------- */
/* 9. تنسيق زر القائمة المنسدلة (.dropdown-btn) */
/* ------------------------------------------- */
.dropdown-btn {
    /* يورث تنسيقات .yutub ليكون الزر مميزاً */
    background-color: rgb(230, 173, 88); 
    color: antiquewhite;
    font-size: 1rem;
    padding: 0.5rem 0.5rem; /* تم تقليل الحشوة ليتناسب مع المساحة الصغيرة */
    width: 90%; /* جعل الزر يملأ عرض الأب */
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    /* إزالة تدوير الحواف العلوية واستخدام تدوير الزر القديم */
    border-radius: 1rem; 
    cursor: pointer;
    text-align: center;
    /* للتأكد من أن الزر لا يخرج من الـ tag */
    max-width: 6rem;
    max-height: 4rem;
}


/* ------------------------------------------- */
/* 10. تنسيق محتوى القائمة المنسدلة (.dropdown-content) -- تم تعديل موضعها لليسار */
/* ------------------------------------------- */
.dropdown-content {
    /* يوضع بشكل مطلق بالنسبة لـ .tag */
    position: absolute;
    /* إظهار القائمة فوق الزر (في الأعلى) */
    bottom: 100%; 
    left: 0; /* لتبدأ من يسار الـ tag (تم التغيير من right: 0) */
    right: auto; /* إزالة التحديد السابق */
    
    width: 15rem; /* تم زيادة العرض ليتسع للنصوص */
    background-color: white; /* تغيير الخلفية لتكون مرئية بوضوح */
    
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /* إخفاء القائمة افتراضياً */
    display: none; 
    z-index: 100; /* لضمان ظهورها فوق كل شيء */
    text-align: right; /* محاذاة النص لليمين */
    /* تدوير الزاوية */
    border-radius: 1rem; 
    
    /* إضافة حدود بسيطة */
    border: 1px solid #ccc;
    
    /* لضمان عدم خروجها خارج حدود البطاقة الأب (.card) */
    overflow: visible;
}


/* ------------------------------------------- */
/* 11. تنسيق عناصر القائمة (.dropdown-item) */
/* ------------------------------------------- */
.dropdown-item {
    color: black;
    padding: 12px 16px;
    text-decoration: none; /* إزالة خط الرابط */
    /* ******** التعديل الثاني هنا: لجعل الروابط تظهر ككتل منفصلة ******** */
    display: block; 
    text-align: right;
    width: 100%; /* ضمان أن العنصر يملأ العرض بالكامل */
}

/* لون الخلفية عند مرور المؤشر على العنصر */
.dropdown-item:hover {
    background-color: #ddd;
}

/* ------------------------------------------- */
/* 12. إظهار القائمة عند التفاعل */
/* ------------------------------------------- */
/* إظهار محتوى القائمة عند مرور المؤشر على الحاوية الأب (.tag) */
.dropdown:hover .dropdown-content {
    display: block;
}


/* ------------------------------------------- */
/* 13. تنسيق المنحنى الأول (.curve_one) -- تم تعديل موقعه لليسار */
/* ------------------------------------------- */
.curve_one{
     /* جعل خلفية العنصر شفافة (تستخدم لعمل الانحناء بالظل) */
    background-color:transparent;
    /* تحديد الموضع الأفقي بمقدار 16.8rem من اليسار (المكان الذي يقتطع فيه الـ tag الزاوية) */
    right: 16.8rem; /* تم التغيير من left: 16.8rem */
    left: auto; /* إزالة التحديد السابق */
    /* تحديد الموضع العمودي بمقدار 0rem من الأسفل */
    bottom: 0rem; 
    /* تدوير الحافة السفلية اليسرى بمقدار 1rem */
    border-bottom-left-radius: 1rem; /* تم التغيير من border-bottom-right-radius */
    border-bottom-right-radius: 0; 
    /* إزالة تدوير الحافة العلوية */
    border-top-right-radius: 0; 
    /* خدعة الظل لعمل انحناء: الظل أصبح على اليسار */
    box-shadow: -0.2rem 0.9rem  antiquewhite; /* تم عكس الظل الأفقي */
}


/* ------------------------------------------- */
/* 14. تنسيق الزاوية المائلة (tag::after) -- تم تعديل موقعه لليسار */
/* ------------------------------------------- */
.tag::after {
    /* تكرار للقاعدة الأساسية للعناصر الوهمية (تحدد الأبعاد والموضع المطلق) */
    width: 2rem; 
    height: 2rem;
    content: "";
    position:absolute;
    /* جعل خلفية العنصر شفافة (تستخدم لاحقاً مع خاصية box-shadow لعمل انحناء) */
    background-color:transparent;
    /* إزاحة العنصر 2rem للأعلى من حافة الأب العلوية */
    top: -2rem;
    /* إزاحة العنصر 0rem من اليسار (ملتصق بالطرف الأيسر) */
    left: 0rem; /* تم التغيير من right: 0rem */
    right: auto; /* إزالة التحديد السابق */
    /* تدوير الحافة السفلية اليسرى بمقدار 1rem */
    border-bottom-left-radius: 1rem; /* تم التغيير من border-bottom-right-radius */
    border-bottom-right-radius: 0;
    /* هذه هي الخدعة: إضافة ظل أفقي بـ 1rem على اليسار بلون الخلفية (antiquewhite) لخلق وهم الانحناء في الزاوية */
    box-shadow: -1rem 0rem  antiquewhite; /* تم عكس الظل الأفقي */
    /* تم إزالة display: none */
    display: block; 
}

/* ------------------------------------------- */
/* 15. تنسيق منحنى إضافي (.curve_two) -- تم تعديل موقعه لليسار */
/* ------------------------------------------- */
.curve_two {
     /* تكرار للقاعدة الأساسية للعناصر الوهمية (تحدد الأبعاد والموضع المطلق) */
    width: 2rem;
    height: 2rem;
    content: "";
    position:absolute;
    /* جعل خلفية العنصر شفافة (تستخدم لعمل الانحناء بالظل) */
    background-color:transparent;
    /* وضع العنصر في الزاوية السفلية اليمنى للـ tag (في هذا التصميم الجديد) */
    right: 16.8rem; /* تم التغيير من left: 16.8rem */
    left: auto; /* إزالة التحديد السابق */
    bottom: 0rem;
    /* تدوير الزاوية */
    border-bottom-left-radius: 1rem; /* تم التغيير من border-bottom-right-radius */
    border-bottom-right-radius: 0;
    /* الظل لعمل وهم الانحناء */
    box-shadow: -0.2rem 0.9rem antiquewhite; /* تم عكس الظل الأفقي */
    /* تم إزالة display: none */
    display: block;
}
/* ------------------------------------------- */
/* 12. تنسيق زر اليوتيوب (.yutub)                */
/* ------------------------------------------- */
.yutub{
     /* لون الخلفية، ربما يمثل لون اليوتيوب أو لون مميز */
    background-color: rgb(230, 173, 88) ;
    /* لون النص (أبيض عاجي) */
    color: antiquewhite;
    /* حجم الخط */
    font-size: 1rem;
    /* مسافة داخلية (حشوة) حول النص */
    padding: 1rem 1rem;
    /* جعل عرض الزر 95% من عرض الحاوية الأب */
    width: 95%;
    /* تفعيل Flexbox لتوسيط محتوى الزر */
    display: flex;
    /* توسيط المحتوى أفقياً */
    justify-content: center;
    /* توسيط المحتوى عمودياً */
    align-items: center;
    /* مسافة (فجوة) بين العناصر الداخلية للزر تبلغ 1rem */
    gap: 1rem 1rem;
     /* تدوير حواف الزر */
    border-radius: 1rem 1rem;
}