.product-img-box{
    width:100%;
    background-color: rgba(226, 0, 66, 0.2);
    height: 70px;
    padding: 5px 0px;
}
.product-img {
    float: right;
    width: 20%;
    height: 60px;
    margin: 0% 2.5%;
    background-color: red;
}
.info-box{
    padding: 10px;
}
.product-imaging{
    width: 100%;
    height: 200px;
    
}
.autoShowHide{
   
  white-space: nowrap; 
  width: 100%; 
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-size{
    width:25%;
    float: right;
    padding: 5px;
    color: rgba(5, 5, 5, 0.685);
    
}

.pro_image{
  width: 100%;
  height: 250px;
}
.discount-box{
  position: absolute;
  border-radius: 10px 0px 0px 10px;
  padding: 5px;
  background-color: red;
  color: white;
  z-index: 1000;
  font-size: 12px;
  font-weight: bold;
}
.free-shapping{
  position: absolute;
  bottom: 5px;
  right: 0;
  border-radius: 10px 0px 0px 10px;
  padding: 5px;
  background-color: #2474bc;
  color:#ffffff;
  z-index: 1000;
  font-size: 12px;
  font-weight: bold;
}
.cart_card{
  position: relative;
}
.discount-box2{
  position: absolute;
  top:0;
  right: 0;
  font-size: 12px;
  border-radius: 10px 0px 0px 10px;
  padding: 5px;
  background-color: red;
  color: white;
  z-index: 1000;
  font-weight: bold;
}
#container-boxy {
  width: 100%;
  display: flex;
  overflow: auto;
  padding: 5px 0px;
}

#flex-scroll-boxy {
  padding: 5px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

.boxy {
  width: 80px;
  height: 80px;
  margin: 0px 5px;

}
.is-visible{
  min-width: 15rem;
  margin-left: 5px;
}

 .deleted_btn:hover{
  cursor: pointer;
 }
.cancel_pro:hover{
  background-color: #f77f00;
}
.quantity-finish{
  padding:1px 1px;
  font-size: 10px;
  text-align: center;
  background-color: rgba(253, 50, 50, 0.863);
  color:white;
  border-radius: 5px;
  margin-bottom: 5px;
}
.quantity-stock{
  padding:2px 2px;
  font-size: 10px;
  text-align: center;
  background-color: #f77f00;
  color:white;
  border-radius: 5px;
  margin-bottom: 5px;
}
.disable_item{
  pointer-events: none;
    opacity: 0.8;
    
}

/******************************************* تنسيق الصورة داخل وصف أكثر عن المنتج/*****/
.parent-content img{
  max-width: 100%;
  height: auto;
}
/****************تنسيق الجدول داخل وصف اكثر عن المنتج*************************/
/* تنسيق العنصر الأب .parent-content */
.parent-content {
  padding: 10px;
  background-color: #fafafa; /* خلفية خفيفة */
  border-radius: 8px; /* حواف دائرية */
  overflow-x: auto; /* تمكين التمرير الأفقي إذا كانت البيانات أكبر من الجدول */
  
}

/* تنسيق الجدول */
.parent-content table {
  width: 100%;
  border-collapse: collapse; /* دمج الحدود */
  background-color: #fff; /* خلفية بيضاء */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* إضافة ظل ناعم للجدول */
  border-radius: 8px; /* حواف دائرية للجدول */
  margin-top: 10px; /* هامش أعلى الجدول */
  
  text-align: center; /* محاذاة النص إلى اليسار */
  table-layout: fixed; /* جعل الجدول يستخدم تخطيط ثابت للعرض */
}

/* تنسيق رؤوس الأعمدة */
.parent-content table th {
  background-color: #003049; /* خلفية خضراء */
  color: white; /* النص باللون الأبيض */
  padding: 12px; /* المسافة الداخلية */
  font-size: 14px; /* حجم الخط */
  text-transform: uppercase; /* تحويل النص إلى حروف كبيرة */
 
  text-align: center; /* محاذاة النص في المنتصف */
}

/* تنسيق الخلايا */
.parent-content table td {
  border: 1px solid #ddd; /* حدود خفيفة حول الخلايا */
  padding: 10px; /* مسافة داخلية في الخلايا */
  font-size: 14px; /* حجم الخط */
  color: #333; /* لون النص */
  text-align: center; /* محاذاة النص في المنتصف */
}

/* تغيير لون الصفوف عند التمرير بالفأرة */
.parent-content table tr:hover {
  background-color: #f1f1f1; /* تغيير الخلفية عند المرور */
}

/* تغيير لون الصفوف الفردية */
.parent-content table tr:nth-child(odd) {
  background-color: #f9f9f9; /* خلفية فاتحة للصفوف الفردية */
}

/* تنسيق الحدود عند مرور الفأرة على الخلايا */
.parent-content table td:hover {
  background-color: #f0f0f0; /* تغيير لون الخلفية عند المرور على الخلية */
  cursor: pointer; /* تغيير شكل المؤشر */
}

/* تنسيق الخلايا عند التحديد */
.parent-content table td:active {
  background-color: #e2e2e2; /* تغيير الخلفية عند النقر */
}

.carded{
  width: 25%;
}
.quas-img{
  width: 400px;
  height: auto;
}
@media(max-width: 767px) {
    .card-size,.carded{
        width:33.3%;
        padding: 5px;
        
            }
  }
@media(max-width: 575px) {
    .card-size,.carded{
        width:50%;
        padding: 5px;
        
            }
  }
  @media(max-width: 320px) {
    .card-size,.carded{
        width:100%;
        padding: 5px;
            }
  }

  .copy-bubble {
    position: absolute;
    top: -25px;
    right: 50%;
    transform: translateX(50%);
    background-color: #0056b3;
    color: white;
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.text-primary-custom {
  color: #0056b3 !important;
}

.free-shipping-banner {
  background-color: #e6f0fa; /* خلفية فاتحة مشتقة من اللون */
  border: 1px dashed #0056b3;
  
}