/* AS SALIK V24 — referral badge, direct referral and merchandise image catalogue */

/* Make the sponsorship header badges fully readable on all browsers. */
html body[data-page="agent-promotion"] .sponsorship-referral-card .panel-card-head > .badge,
html body[data-page="agent-promotion"] .sponsorship-referral-card .panel-card-head > .badge-warning{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:44px!important;
  padding:10px 16px!important;
  border:1px solid #e5bd62!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#fff4cf,#ffe6a1)!important;
  color:#7a4500!important;
  -webkit-text-fill-color:#7a4500!important;
  font-size:1rem!important;
  font-weight:900!important;
  line-height:1.2!important;
  text-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  white-space:nowrap!important;
  position:relative!important;
  z-index:3!important;
}
html body[data-page="agent-promotion"] .sponsorship-referral-card .panel-card-head > .badge i,
html body[data-page="agent-promotion"] .sponsorship-referral-card .panel-card-head > .badge-warning i{
  color:#9a5d00!important;
  -webkit-text-fill-color:#9a5d00!important;
}
html body[data-page="agent-promotion"] .sponsorship-referral-card .panel-card-head .eyebrow{
  color:#7e1425!important;
  -webkit-text-fill-color:#7e1425!important;
  opacity:1!important;
}

/* Merchandise catalogue with attached product photography. */
.merch-card{display:flex!important;flex-direction:column!important;min-height:100%!important}
.merch-card .merch-content{display:flex!important;flex-direction:column!important;flex:1 1 auto!important}
.merch-card .merch-content .package-price{margin-top:auto!important}
.merch-image{
  position:relative!important;
  overflow:hidden!important;
  aspect-ratio:1.18/1!important;
  min-height:260px!important;
  background:linear-gradient(145deg,#fff8ed,#f5eadc)!important;
}
.merch-image img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  transition:transform .35s ease!important;
}
.merch-card:hover .merch-image img{transform:scale(1.035)!important}
.merch-image-fallback{display:none!important;position:absolute!important;inset:0!important;place-items:center!important;font-size:4rem!important;color:#7e1425!important}
.merch-image.image-error .merch-image-fallback,.merch-image-fallback.visible{display:grid!important}
.merch-stock-chip{
  position:absolute!important;
  right:14px!important;
  top:14px!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  color:#64101b!important;
  font-size:.8rem!important;
  font-weight:900!important;
  box-shadow:0 8px 22px rgba(56,8,16,.13)!important;
  backdrop-filter:blur(8px)!important;
}

.merch-table-product{display:flex!important;align-items:center!important;gap:13px!important;min-width:250px!important}
.merch-table-thumb,.cart-product-thumb,.reward-manage-image{
  width:66px!important;
  height:66px!important;
  flex:0 0 66px!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  border-radius:16px!important;
  background:#fff5e8!important;
  color:#7e1425!important;
  border:1px solid rgba(126,20,37,.12)!important;
}
.merch-table-thumb img,.cart-product-thumb img,.reward-manage-image img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.cart-item{grid-template-columns:56px minmax(0,1fr) auto!important}
.cart-product-thumb{width:56px!important;height:56px!important;flex-basis:56px!important;border-radius:13px!important}

/* Customer rewards use the same merchandise images. */
.reward-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.reward-card.reward-card-photo{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#fff!important;
}
.reward-product-image{
  position:relative!important;
  overflow:hidden!important;
  aspect-ratio:1.28/1!important;
  min-height:220px!important;
  background:linear-gradient(145deg,#fff8ed,#f4e7d6)!important;
}
.reward-product-image>img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important}
.reward-product-image .reward-icon{width:100%!important;height:100%!important;border-radius:0!important}
.reward-product-image .reward-stock{position:absolute!important;right:13px!important;top:13px!important;z-index:2!important;background:rgba(255,246,218,.94)!important;color:#76501e!important;box-shadow:0 7px 20px rgba(68,32,4,.12)!important}
.reward-card.reward-card-photo .reward-card-body{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;padding:20px!important}
.reward-card.reward-card-photo .reward-cost{margin-top:auto!important}
.reward-manage-image{width:82px!important;height:82px!important;flex-basis:82px!important;border-radius:20px!important;font-size:1.7rem!important}

@media(max-width:1050px){
  .reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  html body[data-page="agent-promotion"] .sponsorship-referral-card .panel-card-head{align-items:flex-start!important}
  html body[data-page="agent-promotion"] .sponsorship-referral-card .panel-card-head > .badge,
  html body[data-page="agent-promotion"] .sponsorship-referral-card .panel-card-head > .badge-warning{align-self:flex-start!important;font-size:.92rem!important}
  .merch-image{min-height:230px!important}
  .reward-grid{grid-template-columns:1fr!important}
  .reward-product-image{min-height:250px!important}
}
@media(max-width:480px){
  .merch-image{min-height:210px!important}
  .merch-table-product{min-width:220px!important}
}