/* منع أي محتوى من التسبب في ظهور شريط تمرير أفقي */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* التأكد من أن الكارد لا يتجاوز عرض الحاوية */
.container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
}

/* التأكد من أن الصور داخل الكارد تأخذ الحجم المتاح فقط */
img {
    max-width: 100% !important;
    height: auto !important;
}
/* product_details.css */

/* ضمان عدم تجاوز الصور لحاوية الكارد */
.product-details-img-container {
    width: 100%;
    max-height: 400px;
    background-color: #f7fafc;
}

.product-details-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* تنسيق متجاوب للنصوص */
@media (max-width: 767px) {
    .product-details-img-container {
        height: 250px !important; /* تصغير الصورة في الشاشات الصغيرة */
    }
    
    .display-5 {
        font-size: 2rem !important; /* تصغير العنوان في الجوال */
    }
}

/* تحسين شكل نموذج اختيار الحجم */
.form-select {
    border-radius: 50px !important;
    padding: 12px 20px !important;
    border: 2px solid #eee !important;
}

/* إضافة تأثير بسيط عند التحويم فوق زر الإضافة */
#btn-submit-cart:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}
/* 1. ضمان أن أي عنصر select داخل الكارد لا يتجاوز عرضه */
.card .form-select {
    width: 100% !important; /* إجبارها على أخذ عرض الكارد فقط */
    max-width: 100% !important;
    box-sizing: border-box !important; /* مهم جداً لحساب الحواف والبادينج ضمن العرض */
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important; /* إذا كان النص طويلاً جداً سيظهر نقاط ... بدلاً من التمدد */
}

/* 2. التأكد من أن الحاوية الأب (col) لا تسمح بفيضان المحتوى */
.col-12, .col-md-6 {
    min-width: 0 !important; /* هذا يمنع العناصر المرنة من دفع الحاوية للخارج */
}

/* إجبار حقل الاختيار على اتجاه النص اليساري */
.form-select {
    direction: ltr !important;
    text-align: left !important;
    /* إضافة مساحة كافية على اليمين للسهم حتى لا يلمس النص */
    padding-right: 50px !important; 
    /* ضبط مكان السهم ليكون في أقصى اليمين مع مسافة أمان */
    background-position: right 15px center !important;
    /* التأكد من أن السهم يظهر دائماً في الجهة الصحيحة */
    background-repeat: no-repeat;
}

/* لتحسين المظهر عند الضغط */
.form-select:focus {
    border-color: #ffc107; /* لون تركيز (اختياري) */
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}