/* Hunter Ball v2.2 — modal alignment + lean checkout + storefront offers */

/* Safari/iPhone: dialogs are always centered from the visual viewport, independent of RTL. */
dialog#productModal[open],
dialog#checkoutModal[open],
dialog#accountModal[open],
dialog#guideModal[open]{
  position:fixed!important;
  inset:auto!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  transform:translate3d(-50%,-50%,0)!important;
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100dvh - 24px)!important;
  box-sizing:border-box!important;
  overscroll-behavior:contain;
}
#productModal[open]{width:min(760px,calc(100vw - 24px))!important}
#checkoutModal[open]{width:min(690px,calc(100vw - 24px))!important}
#accountModal[open],#guideModal[open]{width:min(680px,calc(100vw - 24px))!important}

/* The checkout is intentionally short: buyer name + region/payment + coupon. */
#checkoutBody .field:has(#coPhone),
#checkoutBody .field:has(#coTelegram),
#checkoutBody .field:has(#coNotes){display:none!important}
/* v1.1.7: email is mandatory for receipts/delivery. Older v2.2 CSS hid it. */
#checkoutBody .field:has(#coEmail),
#checkoutBody .hb-email-field-v116,
#checkoutBody .hb-email-field-v117{display:grid!important;visibility:visible!important;opacity:1!important}
#checkoutBody .form-grid{grid-template-columns:1fr!important}
#checkoutBody #coName,#checkoutBody #coCoupon{width:100%!important}

/* Strong offer language on image + beside names. */
.hb-name-discount-v2{
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;margin-inline-start:7px;padding:4px 8px;
  border-radius:999px;background:linear-gradient(135deg,#d91f3d,#ff405f);
  color:#fff!important;border:1px solid rgba(255,128,149,.28);
  box-shadow:0 7px 20px rgba(224,28,63,.22);font-size:9px!important;
  font-weight:1000!important;line-height:1!important;white-space:nowrap;
}
.product-body h3,.package-card-body h3,.product-route-copy h1,.package-action-copy h3{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.product-card .discount-badge,.package-image-card .package-discount{
  background:#e22143!important;color:#fff!important;border-color:#ff6c84!important;
  box-shadow:0 9px 26px rgba(226,33,67,.34)!important;
}
.package-discount{position:absolute;z-index:4;top:9px;left:9px;padding:5px 8px;border-radius:999px;background:#e22143;color:#fff;font-size:8px;font-style:normal;font-weight:1000}
.old-price{opacity:.78!important;text-decoration:line-through!important;text-decoration-thickness:2px!important;text-decoration-color:#ff4c69!important}
.new-price{color:#ffbf67!important;font-weight:1000!important}
.package-prices .old-price,.package-action-price .old-price{margin-inline-end:6px}

@media(max-width:700px){
  dialog#productModal[open],dialog#checkoutModal[open],dialog#accountModal[open],dialog#guideModal[open]{
    width:calc(100vw - 18px)!important;max-width:calc(100vw - 18px)!important;
    max-height:calc(100dvh - 18px)!important;top:50%!important;left:50%!important;
    transform:translate3d(-50%,-50%,0)!important;margin:0!important;
  }
  #productModalBody,#checkoutBody{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .package-action{width:100%!important;max-width:100%!important;margin:0!important;padding:12px!important;box-sizing:border-box!important}
  .package-action-image{width:100%!important;max-width:100%!important;margin:0!important}
  .hb-name-discount-v2{font-size:7px!important;padding:3px 6px;margin-inline-start:4px}
  .package-discount{top:7px;left:7px;font-size:7px;padding:4px 6px}
}