.promo-popup { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; border-radius: 12px; width: min(640px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; background: #fff; color: #171717; text-align: left; box-shadow: 0 24px 80px #0006; }
.promo-popup:not([open]) { display: none; }
.promo-popup::backdrop { background: rgb(0 0 0 / 80%); }
.promo-popup-close { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #fff8; border-radius: 50%; background: #222a; color: white; font: 28px/1 sans-serif; cursor: pointer; }
.promo-popup-close:hover { background: #111; }
.promo-popup :is(button, a, input):focus-visible { outline: 3px solid #2965dd; outline-offset: 3px; }
.promo-popup-image { display: block; width: 100%; height: auto; max-height: none; }
.promo-popup-body { padding: 24px; }
.promo-popup h2 { margin: 0 0 16px; font-size: 16px; line-height: 1.5; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.promo-popup-description { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.promo-popup-description :is(ul, ol) { padding-left: 22px; margin: 12px 0; }
.promo-popup-description ul { list-style: disc; }
.promo-popup-description ol { list-style: decimal; }
.promo-popup-description a { color: #254bc1; text-decoration: underline; }
.promo-popup-description img { max-width: 100%; height: auto; }
.promo-popup-link { display: block; margin-top: 20px; padding: 12px 16px; border-radius: 8px; background: #111; color: #fff; text-align: center; text-decoration: none; font-size: 14px; }
.promo-popup-link:hover { background: #333; color: #fff; }
.promo-popup-remember { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 12px; cursor: pointer; }
.promo-popup-remember input { width: 18px; height: 18px; accent-color: #111; }
html.promo-popup-open { overflow: hidden; }