.cpo-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:12px;
  flex-wrap:wrap;
}


.cpo-live{
  border:1px solid #eee;
  border-radius:14px;
  padding:10px 12px;
  min-width: 200px;
  text-align:right;
}

.cpo-live-label{
  font-size:12px;
  opacity:.75;
  margin-bottom:2px;
}

.cpo-live-price{
  font-size:20px;
  font-weight:900;
  line-height:1.2;
}

.cpo-live-sub{
  font-size:12px;
  opacity:.75;
  margin-top:4px;
}

.cpo-options{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

@media (min-width: 680px){
  .cpo-options{
    grid-template-columns: 1fr 1fr;
  }
}

.cpo-card{
  border:1px solid #ddd;
  border-radius:14px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  cursor:pointer;
  position:relative;
  transition: transform .08s ease, border-color .08s ease, box-shadow .08s ease;
  background:#fff;
}

.cpo-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.05);
}


.cpo-card input[type="radio"]{ margin-top:3px; }

.cpo-card-main{ flex:1; }

.cpo-card-label{ font-weight:900; }


.cpo-hint{
  margin-top:10px;
  font-size:12px;
  opacity:.8;
}

/* When offer selected we lock qty input */
.cpo-qty-locked{
  opacity: .6;
  pointer-events: none;
}
/* صندوق العروض: بوردر + خلفية خفيفة ملفتة */
.cpo-wrap{
  border:1px solid #f3b3b3;
  background: rgba(255, 0, 0, 0.03);
  border-radius:16px;
  padding:14px;
  margin:14px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

/* عنوان */
.cpo-title{
  font-weight:900;
  font-size:16px;
  margin-bottom:12px;
}

/* فواصل النقاط داخل السطر */
.cpo-dot{
  opacity:.5;
  margin: 0 6px;
}

/* تحسين سطر التفاصيل */
.cpo-card-sub{
  font-size:13px;
  opacity:.9;
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  line-height:1.6;
}

/* خلي البادج أهدى وأوضح */
.cpo-badge{
  position:absolute;
  left:12px;
  top:12px;
  font-size:12px;
  border:1px solid #e9b0b0;
  border-radius:999px;
  padding:4px 8px;
}
/*====================================*/
/* خلفية كل كارت عرض أحمر خفيف */
.cpo-card{
  background: #ad8682;   /* أحمر خفيف */
  border-color: #f0c0c0;
}

/* عند الاختيار يبقى أوضح */
.cpo-card.is-selected{
  background: #b5736d;
  border-color: #c65a5a;
}

/* بادج "هتوفري" بخلفية أحمر باهت */
.cpo-badge{
  background:#dc746a!important;
  border-color: #e7a0a0;
}

/* (اختياري) لو عايز نص البادج أغمق */
.cpo-badge{
  color:#ffffff;
}