/* V1024: customer My Coupons modal only. Layout changes, no redemption logic changes. */
#couponModal:not(.coupon-link-mode-v569):not(.coupon-link-only-v570) .coupon-modal-top,
#couponModal .coupon-modal-top {
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  align-items:stretch!important;
  gap:9px!important;
  width:100%!important;
  margin:0 auto 11px!important;
  text-align:center!important;
}
#couponModal .coupon-modal-img,
#couponModal .coupon-preview {
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:240px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:12px!important;
  background:#fff!important;
}
#couponModal .coupon-modal-top > div {width:100%!important;min-width:0!important;text-align:center!important;}
#couponModal .coupon-modal-title {font-size:15px!important;line-height:1.4!important;font-weight:750!important;margin:2px 0 7px!important;overflow-wrap:anywhere!important;}
#couponModal .coupon-modal-expiry {
  display:inline-block!important;
  max-width:100%!important;
  padding:5px 11px!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.5!important;
  color:#587487!important;
  background:#f0f7fa!important;
  border:1px solid #dcebf1!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
#couponModal {--coupon-qr-size-v227:128px!important;}
#couponModal #qrPanel.active,#couponModal #barPanel.active,#couponModal #codePanel.active {
  min-height:160px!important;height:auto!important;padding:9px 12px!important;
}
#couponModal #qrBox,#couponModal .qr-svg {
  width:100%!important;min-height:138px!important;height:138px!important;padding:3px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
#couponModal #qrBox canvas,#couponModal #qrBox img,#couponModal #qrBox svg,
#couponModal .qr-svg canvas,#couponModal .qr-svg img,#couponModal .qr-svg svg {
  width:128px!important;height:128px!important;max-width:128px!important;max-height:128px!important;
  margin:auto!important;object-fit:contain!important;
}
#couponModal .barcode,#couponModal #barPanel .barcode {height:134px!important;min-height:134px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
#couponModal #barcodeSvg,#couponModal .barcode svg {width:100%!important;max-width:300px!important;height:76px!important;max-height:76px!important;margin:auto!important;}
#couponModal #codePanel.active {font-size:18px!important;line-height:1.45!important;overflow-wrap:anywhere!important;}
#couponModal #plainCode,#couponModal #codePanel span {font-size:18px!important;line-height:1.45!important;overflow-wrap:anywhere!important;}
@media(max-width:520px){
  #couponModal .coupon-modal-img,#couponModal .coupon-preview {max-height:min(210px,28dvh)!important;}
  #couponModal .coupon-modal-top {gap:7px!important;margin-bottom:9px!important;}
  #couponModal .coupon-modal-title {font-size:14px!important;}
  #couponModal #qrPanel.active,#couponModal #barPanel.active,#couponModal #codePanel.active {min-height:154px!important;height:auto!important;}
}