/* Base styles load before the editable design CSS. Override these selectors in Design CSS. */
.mdbf-coupon-modal:not([open]) { display: none; }
.mdbf-coupon-modal { box-sizing: border-box; position: fixed; inset: 0; margin: auto; width: calc(100% - 32px); max-width: 520px; max-height: calc(100% - 48px); overflow: auto; padding: 32px; border: 0; border-radius: 8px; background: #fff; color: #222; text-align: center; font-family: inherit; box-shadow: 0 12px 60px rgba(0,0,0,.3); }
.mdbf-coupon-modal::backdrop { background: rgba(0,0,0,.65); }
.mdbf-coupon-modal .mdbf-coupon-modal__title { margin: 0 0 16px; color: #111; font-size: 26px; line-height: 1.25; }
.mdbf-coupon-modal .mdbf-coupon-modal__description { margin: 0 0 20px; line-height: 1.6; }
.mdbf-coupon-modal .mdbf-coupon-modal__code { margin: 0 0 24px; padding: 16px; border: 2px dashed #b70c34; color: #b70c34; font-size: 28px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; user-select: all; }
.mdbf-coupon-modal .mdbf-coupon-modal__close { display: inline-block; padding: 12px 28px; border: 0; border-radius: 4px; background: #b70c34; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.mdbf-coupon-modal .mdbf-coupon-modal__close:focus-visible { outline: 3px solid #111; outline-offset: 4px; }
@media (max-width: 575px) { .mdbf-coupon-modal { padding: 24px 18px; } }

.mdbf-coupon-modal .mdbf-coupon-modal__detail { margin: 8px 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.mdbf-coupon-modal .mdbf-coupon-modal__detail[hidden] { display: none; }
.mdbf-coupon-modal .mdbf-coupon-modal__detail + .mdbf-coupon-modal__close { margin-top: 16px; }