/**
 * تنسيقات مخصصة لتحسين عرض صور المنتجات على جميع الأجهزة
 * هذا الملف يحتوي على تنسيقات لضمان عرض صور المنتجات بشكل مناسب على جميع أحجام الشاشات
 */

/* تنسيقات أساسية لصور المنتجات */
.card-img-top {
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: 4 / 3;
    transition: transform 0.3s ease;
    max-height: 250px;
}

/* تحسين عرض الصور في بطاقات المنتجات */
.product-card {
    display: flex;
    flex-direction: column;
}

.product-card .product-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 75%; /* نسبة ارتفاع إلى عرض 3:4 */
}

.product-card .card-img-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* تنسيقات للأجهزة المتوسطة (التابلت) */
@media (min-width: 576px) and (max-width: 991px) {
    .product-card .product-image-wrapper {
        padding-top: 75%; /* الحفاظ على نسبة 3:4 */
    }
    
    .product-card .card-img-top {
        max-height: 100%;
    }
}

/* تنسيقات للأجهزة الصغيرة (الجوالات) */
@media (max-width: 575px) {
    .product-card .product-image-wrapper {
        padding-top: 100%; /* نسبة 1:1 للشاشات الصغيرة */
    }
    
    .product-card .card-img-top {
        object-fit: contain;
    }
    
    /* تحسين عرض القائمة على الأجهزة الصغيرة */
    .product-list-item .product-image-wrapper {
        padding-top: 75%;
        height: 100%;
    }
}

/* تحسينات لعرض الصور في قائمة المنتجات */
.product-list-item .product-image-wrapper {
    height: 100%;
    padding-top: 0;
}

/* تأثيرات إضافية لتحسين تجربة المستخدم */
.product-card:hover .card-img-top {
    transform: scale(1.05);
}

/* تحسين عرض الصور الغير متوفرة */
.card-img-top.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    color: #6c757d;
}

/* تحسين سرعة تحميل الصور */
.card-img-top {
    content-visibility: auto;
}