/* ==========================================================
 * Timed coupon popup - printed by inc/bp-coupon-popup.php on single product
 * pages, on top of SweetAlert2's own stylesheet.
 *
 * The first three rules are the old gentli.com theme's, unchanged, so the
 * modal reads exactly as it did: black panel, white title held to 85% of the
 * width so the countdown never reflows the line.
 * ========================================================== */
.coupon-popup { background-color: #000 !important; }
.coupon-title { color: #fff !important; margin: 0 auto !important; max-width: 85% !important; min-width: 85% !important; }
.coupon-title div { margin: 0 auto; min-width: 100%; }

/* The old markup carries Tailwind utility classes, and the old theme shipped
 * Tailwind. This theme does not, so the four that the popup actually uses are
 * declared here, scoped to the popup. Without them the countdown and the code
 * would render as plain body text. */
.coupon-popup .font-bold { font-weight: 700; }
.coupon-popup .text-white { color: #fff; }
.coupon-popup .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.coupon-popup .text-center { text-align: center; }

/* Body copy and the close cross sit on black, and SweetAlert2's defaults are
 * tuned for a white panel. */
.coupon-popup .swal2-html-container { color: #fff; }
.coupon-popup .swal2-close { color: #fff; }
.coupon-popup .swal2-close:hover { color: #fff; opacity: 0.7; }