/*
 * DAM Directory UI Update
 * Scoped to the DAM Directory front-end only.
 */

/* توحيد جميع خطوط الإضافة على Cairo */
.dam-dir,
.dam-dir *,
.dam-dir input,
.dam-dir select,
.dam-dir textarea,
.dam-dir button {
    font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}

/*
 * وصف المصنع:
 * بطاقة المصنع تتميز بوجود data-region + data-specialty.
 * نطبق القص فقط على وصف المصنع ولا نغير وصف الباحثين عن العمل.
 */
.dam-dir [data-region][data-specialty] .dam-desc-wrap {
    position: relative;
    width: 100%;
    --dam-live-card-bg: #fff;
}

.dam-dir [data-region][data-specialty] .dam-desc-wrap > .dam-desc {
    margin-bottom: 0 !important;
}

.dam-dir [data-region][data-specialty] .dam-desc-wrap:not(.is-expanded) > .dam-desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden !important;
    max-height: none !important;
    padding-left: 34px;
}

/* زر (…) يكون عند نهاية السطر الثالث بصريًا في النص العربي */
.dam-dir [data-region][data-specialty] .dam-desc-toggle {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 2;
    min-width: 30px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 4px 1px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: var(--dam-live-card-bg, #fff) !important;
    color: inherit !important;
    box-shadow: none !important;
    outline: 0 !important;
    font: inherit !important;
    font-family: "Cairo", Tahoma, Arial, sans-serif !important;
    font-weight: 800 !important;
    line-height: inherit !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* تدرج بسيط قبل (…) حتى لا تتداخل مع آخر كلمة */
.dam-dir [data-region][data-specialty] .dam-desc-wrap:not(.is-expanded) > .dam-desc-toggle::before {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 22px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, var(--dam-live-card-bg, #fff) 30%, transparent);
}

/* عند الفتح يظهر النص كاملًا */
.dam-dir [data-region][data-specialty] .dam-desc-wrap.is-expanded > .dam-desc {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    padding-left: 0;
}

/* زر عرض أقل بعد التوسعة */
.dam-dir [data-region][data-specialty] .dam-desc-wrap.is-expanded > .dam-desc-toggle {
    position: static !important;
    display: inline-flex !important;
    margin-top: 7px !important;
    padding: 2px 8px !important;
    color: #6f5438 !important;
    background: transparent !important;
    font-size: 11px !important;
}

/* إذا كان الوصف أصلاً ثلاثة أسطر أو أقل لا نظهر زرًا */
.dam-dir [data-region][data-specialty] .dam-desc-toggle[hidden] {
    display: none !important;
}

/* حماية من ظلال القالب على زر التوسعة */
.dam-dir [data-region][data-specialty] .dam-desc-toggle:hover,
.dam-dir [data-region][data-specialty] .dam-desc-toggle:focus,
.dam-dir [data-region][data-specialty] .dam-desc-toggle:active {
    box-shadow: none !important;
    transform: none !important;
}


/* v1.0.1 — مسافة مريحة بين وصف المصنع وصف الأزرار */
.dam-dir [data-region][data-specialty] .dam-desc-wrap {
    margin-bottom: 18px !important;
}

/* عند فتح الوصف بالكامل تبقى نفس المسافة قبل الأزرار */
.dam-dir [data-region][data-specialty] .dam-desc-wrap.is-expanded {
    margin-bottom: 18px !important;
}


/* =========================================================
   v1.0.2 — إصلاح تمدد بطاقات المصانع على الجوال والتابلت
   ========================================================= */

/*
 * المشكلة كانت أن بعض خصائص flex/grid في البطاقة الأصلية
 * تجعل الوصف يتمدد ويدفع الأزرار إلى أسفل البطاقة.
 * هنا نجعل الوصف والأزرار يتبعان المحتوى الحقيقي.
 */

/* جميع المقاسات: لا نسمح للوصف بأن يكون عنصر تمدد */
.dam-dir [data-region][data-specialty] > .dam-desc,
.dam-dir [data-region][data-specialty] .dam-desc-wrap,
.dam-dir [data-region][data-specialty] .dam-desc {
    flex: 0 0 auto !important;
}

/* الأزرار تأتي مباشرة بعد الوصف بمسافة ثابتة وواضحة */
.dam-dir [data-region][data-specialty] .dam-actions {
    margin-top: 0 !important;
    flex: 0 0 auto !important;
}

/* الوصف نفسه يحافظ على 3 أسطر بارتفاع طبيعي */
.dam-dir [data-region][data-specialty] .dam-desc-wrap:not(.is-expanded) {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

/* الكمبيوتر: مسافة متوازنة */
@media (min-width: 1025px) {
    .dam-dir [data-region][data-specialty] .dam-desc-wrap {
        margin-bottom: 18px !important;
    }
}

/* الآيباد والتابلت */
@media (min-width: 651px) and (max-width: 1024px) {
    .dam-dir [data-region][data-specialty] {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    .dam-dir [data-region][data-specialty] .dam-desc-wrap {
        margin-bottom: 16px !important;
    }

    .dam-dir [data-region][data-specialty] .dam-actions {
        position: static !important;
        bottom: auto !important;
    }
}

/* الجوال */
@media (max-width: 650px) {
    /*
     * أهم إصلاح:
     * البطاقة لا تأخذ ارتفاع الصف/الحاوية ولا ارتفاعًا أدنى كبيرًا.
     */
    .dam-dir [data-region][data-specialty] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: start !important;
    }

    /*
     * إذا كانت شبكة البطاقات تستخدم stretch نجعل عناصرها تبدأ من الأعلى
     * بدل تمديد البطاقة على كامل ارتفاع صف غير مطلوب.
     */
    .dam-dir .dam-cards,
    .dam-dir .dam-grid,
    .dam-dir [class*="cards"],
    .dam-dir [class*="grid"] {
        align-items: start !important;
    }

    .dam-dir [data-region][data-specialty] .dam-desc-wrap {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .dam-dir [data-region][data-specialty] .dam-desc {
        min-height: 0 !important;
        height: auto !important;
        flex-grow: 0 !important;
    }

    .dam-dir [data-region][data-specialty] .dam-actions {
        margin-top: 0 !important;
        position: static !important;
        inset: auto !important;
    }
}