/* ========================================
   التصميم الموحد للتبرعات والكفالات
   هوية الجمعية: #0c897a
   ======================================== */

salla-product-card.s-product-card-donation {
  --donation-main: #0c897a;
  border-radius: 18px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 5px 20px rgba(0,0,0,.06);
}

/* الحفاظ على صور المنتجات */
salla-product-card.s-product-card-donation
.s-product-card-image img {
  max-width: 100%;
  object-fit: contain;
}

/* قسم الخيارات */
.unified-donation-choices {
  width: 100%;
  margin: 14px 0;
  direction: rtl;
}

.unified-donation-heading {
  font-size: 15px;
  font-weight: 700;
  color: #24534e;
  margin-bottom: 10px;
  text-align: right;
}

/* شبكة الخيارات */
.unified-donation-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.unified-donation-option {
  min-width: 0;
  min-height: 48px;
  padding: 10px 6px;
  border: 1px solid #d5e6e2;
  border-radius: 11px;
  background: #fff;
  color: #245c55;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  transition: .15s ease;
}

.unified-donation-option strong {
  font-size: 15px;
  font-weight: 800;
}

.unified-donation-option:hover {
  border-color: #0c897a;
  background: #eff8f5;
}

.unified-donation-option.is-selected {
  background: #0c897a;
  border-color: #0c897a;
  color: #fff;
}

.unified-donation-custom {
  grid-column: 1 / -1;
}

/* زر التبرع الأصلي */
salla-product-card.s-product-card-donation
salla-button {
  max-width: 100%;
}

/* وسائل الدفع */
.unified-donation-payment {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  margin: 10px 0;
  padding: 8px 4px;

  border-radius: 10px;
  background: #f5f9f8;
  box-sizing: border-box;
}

.unified-donation-payment > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 63px;
  height: 36px;
  flex: 0 0 auto;

  background: #fff;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
}

/* Visa */
.unified-pay-visa {
  font-size: 19px;
  font-weight: 900;
  font-style: italic;
  color: #1734ba;
}

/* Mastercard */
.unified-pay-master i {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.unified-pay-master i:first-child {
  background: #eb001b;
  margin-left: -6px;
}

.unified-pay-master i:last-child {
  background: #f79e1b;
  margin-left: -7px;
  opacity: .9;
}

/* التحويل البنكي */
.unified-pay-bank {
  color: #0c897a;
}

/* أزرار إضافية */
.unified-donation-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 12px 0;
  width: 100%;
}

.unified-donation-apple,
.unified-donation-gift {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 46px;
  padding: 9px;

  border-radius: 10px;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  box-sizing: border-box;
}

/* Apple Pay */
.unified-donation-apple {
  color: #fff !important;
  background: #111;
}

.unified-donation-apple:hover {
  background: #292929;
}

/* الإهداء */
.unified-donation-gift {
  color: #0c897a !important;
  background: #fff;
  border: 1px solid #0c897a;
}

.unified-donation-gift:hover {
  background: #f0f8f5;
}

/* الجوال */
@media (max-width: 480px) {
  .unified-donation-grid {
    gap: 6px;
  }

  .unified-donation-option {
    font-size: 12px;
    padding: 8px 4px;
    min-height: 44px;
  }

  .unified-donation-option strong {
    font-size: 13px;
  }

  .unified-donation-payment {
    gap: 5px;
  }

  .unified-donation-payment > span {
    width: 52px;
    height: 32px;
  }

  .unified-donation-apple,
  .unified-donation-gift {
    font-size: 13px;
  }
}



/* Official Apple Pay component inside donation cards */
.unified-donation-actions .unified-native-apple {
  display: block;
  width: 100%;
  min-width: 0;
  flex: 1 1 0;
}

.unified-donation-actions .unified-native-apple apple-pay-button {
  display: block;
  width: 100%;
  min-height: 44px;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 44px;
  --apple-pay-button-border-radius: 10px;
}

/* Keep gift button in its existing layout */
.unified-donation-actions .unified-donation-gift {
  flex: 1 1 0;
  min-width: 0;
}


/* عرض منتج واحد في كل صف على الجوال فقط */
@media screen and (max-width: 767px) {

  /* شبكة المنتجات */
  .s-products-list-wrapper,
  .s-products-slider-wrapper .swiper-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* بطاقات المنتجات */
  .s-products-list-wrapper > *,
  .s-products-list-wrapper salla-product-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
  }

  /* شبكة سلة ذات العمودين */
  .grid.grid-cols-2:has(salla-product-card) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* شعارات وسائل الدفع الأربعة في صف واحد */
.unified-donation-payment {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px !important;
  align-items: center;
  width: 100%;
  padding: 7px !important;
}

/* توحيد مقاسات الشعارات */
.unified-donation-payment > span {
  width: 100% !important;
  min-width: 0;
  height: 42px;
  box-sizing: border-box;
}

/* شعار Apple Pay */
.unified-pay-apple {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #111;
}

.unified-pay-apple svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.unified-pay-apple small {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* إخفاء زر Apple Pay المنفصل */
.unified-donation-actions .unified-donation-apple,
.unified-donation-actions .unified-native-apple {
  display: none !important;
}

/* الإبقاء على الإهداء بعرض البطاقة */
.unified-donation-actions .unified-donation-gift {
  width: 100%;
}

@media (max-width: 480px) {
  .unified-donation-payment {
    gap: 4px !important;
  }

  .unified-donation-payment > span {
    height: 36px;
  }

  .unified-pay-apple small {
    font-size: 12px;
  }

  .unified-pay-apple svg {
    width: 18px;
    height: 18px;
  }
}