/* November campaign CTA (ClickUp 86e3yp8tu): sticky bar, Special Offers, popup.
   Same file on micro-prets.ca, etransferpaydayloans.ca and odsp-payday-loans.ca.
   Self-contained: no inline style needed, works with style-src 'self'.
   Creatives are the task's WebP files; text lives in the image, the alt repeats it. */

/* ---- Shared hit area: the whole creative is one submit button ---------------- */
.nvo-form{margin:0;padding:0;border:0}
.nvo-hit{display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;
  color:inherit;font:inherit;line-height:0;text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none}
.nvo-hit picture,.nvo-hit img{display:block}
.nvo-hit img{max-width:100%;height:auto;margin:0 auto}
.nvo-hit:focus{outline:none}
.nvo-hit:focus-visible{outline:3px solid #fff;outline-offset:-3px;box-shadow:inset 0 0 0 6px #14082e}

/* ---- Sticky bar: first child of the site's sticky header, so it sticks with it -- */
.nvo-bar{display:block;margin:0;padding:0;line-height:0;overflow:hidden}
.nvo-bar .nvo-hit{position:relative}
.nvo-bar .nvo-hit img{width:100%;max-width:1440px}
/* Bar focus: a ring drawn ABOVE the creative (yellow + dark inner line), readable on the purple,
   navy and blue bars and next to a white header. */
.nvo-bar .nvo-hit:focus-visible{outline:none;box-shadow:none}
.nvo-bar .nvo-hit:focus-visible::after{content:"";position:absolute;inset:0;border:3px solid #ffd43b;box-shadow:inset 0 0 0 2px #14082e;pointer-events:none}
.nvo--mp.nvo-bar{background:linear-gradient(90deg,#3f0f9a,#741aba 50%,#c01991)}
.nvo--etpd.nvo-bar{background:#0e1f4e}
.nvo--odsp.nvo-bar{background:linear-gradient(90deg,#0a4ecf,#0940b2 50%,#0b3091)}
@media (max-width:640px){
  .nvo-bar .nvo-hit img{max-width:none}
}
/* Bar height from its creative ratio (2880x128 up to 1440 px wide; 750x120 at <= 640 px).
   Sites whose sticky offsets are fixed numbers get the bar height added, only when the bar
   is on the page. eTransfer measures its header in JS (--header-h): nothing to add there. */
:root{--nvo-bar-h:calc(min(100vw,1440px) * .04444)}
@media (max-width:640px){:root{--nvo-bar-h:calc(100vw * .16)}}
:root:has(.nvo-bar.nvo--odsp){scroll-padding-top:calc(var(--bar-h,4.25rem) + var(--nvo-bar-h) + 1rem)}
:root:has(.nvo-bar.nvo--odsp) .essay--rails .topic__body > .pic--faq{top:calc(var(--bar-h,4.25rem) + var(--nvo-bar-h) + 1.5rem)}
:root:has(.nvo-bar.nvo--mp) .mb-prose h2,:root:has(.nvo-bar.nvo--mp) .mb-prose h3{scroll-margin-top:calc(112px + var(--nvo-bar-h))}
:root:has(.nvo-bar.nvo--mp) .mb-sidebar{top:calc(100px + var(--nvo-bar-h))}

/* ---- Special Offers: right after the hero. Container: the site's own .shell (EN) or
   .nvo-offers__in (micro-prets, same 1200 px + 28 px gutter as its header). -------------- */
.nvo-offers{display:block;margin:0;padding:24px 0 20px;background:transparent}
.nvo-offers__in{box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:0 28px}
.nvo-offers .nvo-hit{max-width:1160px;margin:0 auto;border-radius:18px}
.nvo-offers .nvo-hit img{width:100%;max-width:1160px;border-radius:18px}
.nvo-offers .nvo-hit:focus-visible{outline:3px solid #14082e;outline-offset:3px;box-shadow:0 0 0 6px #fff}
@media (max-width:640px){
  .nvo-offers{padding:20px 0 16px}
  .nvo-offers__in{padding:0 16px}
  .nvo-offers .nvo-hit,.nvo-offers .nvo-hit img{max-width:480px}
}

/* ---- Popup: native modal <dialog>, closed by default (also without JS) ------- */
.nvo-pop{box-sizing:border-box;margin:auto;padding:0;border:0;background:transparent;color:inherit;
  max-width:none;max-height:none;overflow:visible}
.nvo-pop:not([open]){display:none}
.nvo-pop::backdrop{background:rgba(9,6,28,.72)}
.nvo-pop__panel{position:relative;width:min(440px,calc(100vw - 40px),calc((100vh - 40px) * .8148))}
@supports (height:100dvh){
  .nvo-pop__panel{width:min(440px,calc(100vw - 40px),calc((100dvh - 40px) * .8148))}
}
.nvo-pop .nvo-hit{border-radius:20px}
.nvo-pop .nvo-hit img{width:100%;border-radius:20px}
.nvo-pop__x{position:absolute;z-index:1;top:-14px;right:-14px;box-sizing:border-box;display:flex;
  align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:2px solid #fff;
  border-radius:50%;background:#14082e;color:#fff;font:700 26px/1 Arial,Helvetica,sans-serif;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35);-webkit-appearance:none;appearance:none}
.nvo-pop__x:hover{background:#2b1760}
.nvo-pop__x:focus{outline:none}
.nvo-pop__x:focus-visible{outline:3px solid #ffd43b;outline-offset:2px}
html.nvo-lock{overflow:hidden;scrollbar-gutter:stable}
@media (prefers-reduced-motion:no-preference){
  .nvo-pop[open]{animation:nvo-in .18s ease-out}
  @keyframes nvo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}