/* Webfu Exit Popup. Colours and fonts follow the theme's tokens when it has them. */
.wxp { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.wxp[hidden] { display: none; }
.wxp__backdrop { position: absolute; inset: 0; background: rgba(22, 21, 26, .62); opacity: 0; transition: opacity .2s ease; }
.wxp__dialog {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--dl-paper, #fff); color: var(--dl-ink-80, #36343b);
  border-top: 4px solid var(--dl-crimson, #801235); border-radius: var(--dl-radius, 4px);
  box-shadow: 0 24px 64px rgba(22, 21, 26, .28);
  padding: 44px 40px 36px; text-align: center; font-family: var(--dl-sans, system-ui, sans-serif);
  opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .22s ease, transform .22s ease;
}
.wxp__dialog:focus { outline: none; }
.wxp.is-open .wxp__backdrop { opacity: 1; }
.wxp.is-open .wxp__dialog { opacity: 1; transform: none; }
.wxp__close {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%; color: var(--dl-ink-60, #5d5a63); cursor: pointer;
}
.wxp__close:hover { background: var(--dl-alt, #f6f5f7); color: var(--dl-ink, #16151a); }
.wxp__close::after {
  content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--dl-ink, #16151a); color: #fff; font: 400 .8rem/1.3 var(--dl-sans, system-ui, sans-serif);
  padding: 7px 10px; border-radius: 3px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.wxp__close:hover::after, .wxp__close:focus-visible::after { opacity: 1; }
@media (hover: none) { .wxp__close::after { display: none; } }
.wxp__logo { display: block; width: auto; max-width: 240px; max-height: 60px; margin: 0 auto 24px; }
.wxp__title {
  font-family: var(--dl-display, var(--dl-serif, Georgia, serif)); font-weight: 700; letter-spacing: -.015em; color: var(--dl-ink, #16151a);
  font-size: clamp(1.75rem, 4.5vw, 2.25rem); line-height: 1.12; margin: 0 0 14px;
}
.wxp__title .dl-price { color: var(--dl-crimson, #801235); }
.wxp__text { font-size: 1.05rem; line-height: 1.6; margin: 0 auto 26px; max-width: 400px; }
.wxp__actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 340px; margin: 0 auto; }
.wxp__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px;
  font: 500 1rem/1.2 var(--dl-sans, system-ui, sans-serif); text-decoration: none;
  border: 1px solid transparent; border-radius: var(--dl-radius, 4px); transition: background .15s ease, color .15s ease;
}
.wxp__btn--primary { background: var(--dl-crimson, #801235); color: #fff; }
.wxp__btn--primary:hover { background: var(--dl-crimson-deep, #5c0c25); color: #fff; }
.wxp__btn--ghost { background: transparent; color: var(--dl-ink, #16151a); border-color: var(--dl-line, #e3e0e4); }
.wxp__btn--ghost:hover { border-color: var(--dl-ink, #16151a); color: var(--dl-ink, #16151a); }
.wxp__fine { font-size: .85rem; color: var(--dl-ink-60, #5d5a63); margin: 18px 0 0; }
html.wxp-lock, html.wxp-lock body { overflow: hidden; }
@media (max-width: 480px) { .wxp__dialog { padding: 40px 22px 28px; } }
@media (prefers-reduced-motion: reduce) { .wxp__backdrop, .wxp__dialog { transition: none; } }