.csx-promo-modal {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top, 0)) 16px calc(16px + env(safe-area-inset-bottom, 0));
  background: rgba(7, 31, 61, .72); backdrop-filter: blur(18px); overflow: hidden;
}
.csx-promo-modal[hidden] { display: none; }
.csx-promo-shell { position: relative; width: min(720px, calc(100vw - 32px), 75dvh); max-height: 75dvh; margin: auto; box-shadow: 0 34px 100px rgba(7, 20, 38, .32); }
.csx-promo-image { display: block; width: 100%; height: auto; max-height: 75dvh; margin: auto; border: 1px solid rgba(215, 168, 75, .55); border-radius: 18px; background: #fff; object-fit: contain; cursor: pointer; }
.csx-promo-close-icon { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: #071f3d; color: #fff; box-shadow: 0 10px 28px rgba(7, 20, 38, .25); font-size: 24px; cursor: pointer; }
.csx-promo-image:focus-visible, .csx-promo-close-icon:focus-visible { outline: 3px solid #d7a84b; outline-offset: 3px; }
body.csx-promo-open { overflow: hidden; touch-action: none; }
body.csx-promo-open .csx-bottom-nav, body.csx-promo-open .csx-chat-widget, body.csx-promo-open .csx-chat-modal, body.csx-promo-open .csx-mobile-menu { visibility: hidden; pointer-events: none; }
@media (max-width: 767px) { .csx-promo-modal { padding: 12px; } .csx-promo-shell { width: min(calc(100vw - 24px), 75dvh); } }