/* Prevent FOUC if this CSS is late */
#reviewModalBackdrop, #reviewModal,
#couponModalBackdrop, #couponModal { display:none; }

/* Shared button style (aligned to your site) */
#reviewModal .btn, #couponModal .btn {
  border: none; border-radius: 10px; padding: 10px 14px; font-weight: bold; cursor: pointer;
}
#reviewModal .btn-primary, #couponModal .btn-primary { background:#1e5e8c; color:#fff; }
#reviewModal .btn-ghost,   #couponModal .btn-ghost   { background:#f2f4f7; color:#222; }

/* Review Modal */
#reviewModalBackdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998;
}
#reviewModal {
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#fff; width:560px; max-width:90vw; border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.25); padding:24px; z-index:9999;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
#reviewModal.show { display:block; }
#reviewModalBackdrop.show { display:block; }
#reviewModal .hdr { text-align:center; margin-bottom:12px; }
#reviewModal .badge {
  display:inline-block; padding:12px 12px; border-radius:999px;
  background:#CA1C27; color:#fff; font-size:14px;
}
#reviewModal h3 { margin:20px; font-size:24px; }
#reviewModal .actions { display:flex; gap:10px; justify-content:flex-end; margin-top:25px; }
#reviewClose {
  position:absolute; right:10px; top:10px; width:34px; height:34px; border:0; background:transparent; font-size:24px; cursor:pointer;
}

/* Coupon Modal (review page look) */
#couponModalBackdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998;
}
#couponModal {
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#fff; width:560px; max-width:90vw; border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.25); padding:24px; z-index:9999;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
#couponModal.show { display:block; }
#couponModalBackdrop.show { display:block; }

#couponModal .hdr { text-align:center; margin-bottom:12px; }
#couponModal .badge {
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:#1e5e8c; color:#fff; font-size:13px; letter-spacing:.2px;
}
#couponModal .save {
  text-align:center; font-size:56px; font-weight:800; letter-spacing:.5px; margin:8px 0 0;
}
#couponModal small { display:block; font-weight:600; font-size:16px; margin-top:4px; }

#couponModal .body {
  border:2px dashed #1e5e8c; border-radius:12px; padding:16px; margin:16px 0;
}
#couponModal .grid {
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
#couponModal .left h4 { margin:0 0 6px; font-size:18px; }
#couponModal .left p { margin:0; font-size:14px; }
#couponModal .right { text-align:right; }
#couponModal .code {
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:20px; font-weight:800; color:#ec2027;
}
#couponModal .expire { font-size:13px; color:#333; margin-top:4px; }
#couponModal .legal { font-size:12px; color:#555; line-height:1.5; margin-top:8px; }

#couponModal .actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
#couponClose {
  position:absolute; right:10px; top:10px; width:34px; height:34px; border:0; background:transparent; font-size:24px; cursor:pointer;
}

/* Print fallback (just in case someone hits CTRL+P on same tab) */
@media print {
  body * { visibility:hidden !important; }
  #printableCoupon, #printableCoupon * { visibility:visible !important; }
  #printableCoupon { position:absolute; left:0; top:0; width:100%; }
}