/* ─── كارت تقييم الخبير التقني — تصميم كامل العرض تحت قسم الهيرو ───────────
   نُقل من "بادج overlay فوق الصورة البارزة" لكارت مستقل، بناءً على تصميم
   Photoshop اتفقنا عليه. قابل للطي/الفتح بالضغط — الأول بيبان مختصر (عنوان
   + دايرة + تلميح)، والفئات الخمسة بتتفتح بالضغط على الهيدر. */

.ek-expert-card {
    background: #F5F5F5;
    border: 1px solid #eee;
    border-radius: 12px;
    /* الـ padding الأفقي هنا مطابق لنفس padding محتوى التابات
       (.aps-tab-content: 20px ديسكتوب / 10px موبايل) — عشان حواف الكارت
       تتماشى بصريًا مع حواف محتوى التابات تحته، بدل مطاردة حرف بعينه (صف
       التابات نفسه justify-content:center على الديسكتوب فمفيش نقطة ثابتة
       نقدر نحاذي حرف بعينها فيها بشكل مضمون على كل المقاسات). */
    padding: 10px 20px;
    margin: 16px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    box-sizing: border-box;
    width: 100%;
}

/* ── الهيدر القابل للضغط (زرار حقيقي button) ───────────────────────────── */
.ek-expert-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    background: none;
    border: none;
    padding: 4px 0;
    margin: 0;
    cursor: pointer;
    text-align: right;
    font: inherit;
    box-sizing: border-box;
    /* إعادة ضبط مظهر الزرار الافتراضي بتاع المتصفح/نظام التشغيل (مهم على
       الموبايل تحديدًا، Safari/Chrome بيضيفوا مظهر افتراضي لعنصر button) */
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
}

.ek-expert-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    /* نفس لون زر "قارن بين هاتفين" بالظبط (m-compare-match-btn)، بحالتيه
       العادي والـ hover — طلب توحيد لون عنوان الكارت مع لون الزر */
    color: #666;
    font-family: 'Tajawal Heading', 'Tajawal Fallback Heading', sans-serif;
    line-height: 1.4;
    transition: color .2s;
    flex: 1;
    min-width: 0;
    /* توسيط أفقي ورأسي — رأسي عن طريق align-items:center على الهيدر نفسه
       فوق، وأفقي عن طريق flex+justify-content هنا */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ek-expert-card-header:hover .ek-expert-card-title {
    color: #333;
}

.ek-expert-header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ek-expert-ring {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.ek-expert-ring svg {
    display: block;
    width: 42px;
    height: 42px;
}

.ek-ring-track {
    stroke: rgba(255,255,255,0.18);
}

.ek-ring-fill {
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 28px 28px;
    transition: stroke-dashoffset 1.1s ease-out;
}

.ek-ring-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: #FFFFFF;
    font-family: 'Tajawal Heading', 'Tajawal Fallback Heading', sans-serif;
}

/* ── الحاوية القابلة للطي (مخفية افتراضيًا) ─────────────────────────────── */
.ek-expert-grid-wrap {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}
.ek-expert-grid-wrap.is-open {
    max-height: 600px; /* أكبر من ارتفاع المحتوى الفعلي بأمان */
    opacity: 1;
    margin-top: 10px;
}

/* ── الشبكة: الفئات الخمسة (عمودين، البند الأخير الفردي ياخد الصف كامل) ─── */
.ek-expert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    direction: rtl;
    padding-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.ek-expert-grid .ek-expert-item {
    min-width: 0; /* يمنع overflow النص جوه خلايا الـ grid على الشاشات الضيقة */
}

.ek-expert-grid .ek-expert-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.ek-expert-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}

.ek-expert-item-label {
    font-size: 12px;
    font-weight: 700;
    color: #444;
    font-family: 'Tajawal Body', 'Tajawal Fallback Body', sans-serif;
    white-space: nowrap;
}

.ek-expert-item-val {
    font-size: 12px;
    font-weight: 700;
    color: #444444;
    white-space: nowrap;
}

.ek-expert-bar-bg {
    height: 7px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.ek-expert-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff4b4b, #cc0000);
    border-radius: 4px;
    transition: width 1.1s ease-out;
    display: block;
}

/* ── الموبايل والتابلت (نفس breakpoint المستخدم في mobile-single-extra.css) ── */
@media (max-width: 768px) {
    .ek-expert-card {
        padding: 10px 10px; /* مطابق لـ .aps-tab-content على الموبايل (15px 10px) */
    }
    .ek-expert-card-title {
        font-size: 14px;
    }
    /* ── العنوان والدايرة في نفس السطر جنب بعض، والاتنين متوسطين مع بعض
       كمجموعة واحدة في نص الكارت (مش كل واحد لوحده) ─────────────────────── */
    .ek-expert-card-header {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    .ek-expert-card-title {
        width: auto;
        flex: none;
    }
    .ek-expert-header-right {
        flex-direction: row;
        align-items: center;
        width: auto;
    }
}

@media (max-width: 480px) {
    .ek-expert-card-title {
        font-size: 13px;
    }
    .ek-expert-grid {
        grid-template-columns: 1fr;
    }
    .ek-expert-grid .ek-expert-item:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* ── شاشات كبيرة جدًا (Smart TV) — نفس منطق باقي الصفحة، حد أقصى للعرض ──── */
@media (min-width: 1600px) {
    .ek-expert-card {
        max-width: 100%;
    }
}