/* Valour Canada newsletter signup — compact bottom-right toast (was a
   full-screen centered dialog with a dimming backdrop; client feedback
   2026-09-08: "too intrusive and dominant... make it much much smaller and
   anchor it to the bottom right"). The backdrop element stays in the markup
   (click-away-to-close still works) but is now invisible rather than
   dimming the page — a small corner card doesn't need to block the rest of
   the site the way a true modal does. */
.vc-subscribe-open { overflow: visible; }
.vc-subscribe-modal[hidden] { display: none; }
.vc-subscribe-modal {
	position: fixed;
	inset: 0;
	z-index: 1000000000;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
}
.vc-subscribe-modal.is-open { opacity: 1; pointer-events: auto; }
.vc-subscribe-modal__backdrop { position: absolute; inset: 0; background: transparent; }
/* Form only — no image (client feedback 2026-09-08, template-parts.php no
   longer renders .vc-subscribe-modal__media at all).
   Height is measured directly against the live embed's normal render
   (heading through the Sign Up button, ~490-500px at this width) plus a
   buffer, so the form fits with no internal scrollbar (client feedback
   2026-09-09: "should not be any scroll"). NOTE: this Keela form appears to
   be published as a "Pop-up" type in Keela's own dashboard, not
   "Embedded" — its iframe runs Keela's own self-contained widget (their
   own open/close/collapse animation, own close button) rather than a
   static form, which is the root cause of the intermittent extra close
   button and would need Keela's proper Master-Code+Embed-Script inline
   integration (from Keela's Publish Form settings) to fully resolve; see
   the .vc-subscribe-modal__mask rule below for the interim mitigation. */
.vc-subscribe-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 420px;
	max-width: calc(100vw - 40px);
	height: 520px;
	max-height: calc(100vh - 40px);
	overflow: hidden;
	background: var(--vc-color-white, #fff);
	border: 1px solid var(--vc-color-border-light, rgba(0,0,0,.1));
	border-radius: var(--vc-card-radius-sm, 8px);
	box-shadow: var(--vc-shadow-card, 5px 5px 30px rgba(0,0,0,.15));
	transform: translateY(18px);
	transition: transform 220ms cubic-bezier(.22,1,.36,1);
}
.vc-subscribe-modal.is-open .vc-subscribe-modal__dialog { transform: translateY(0); }
.vc-subscribe-modal__close { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; min-width: 32px; padding: 0; border: 0; font-size: 20px; line-height: 1; cursor: pointer; }
.vc-subscribe-modal__form { position: relative; min-width: 0; flex: 1 1 auto; overflow: hidden; background: var(--vc-color-white, #fff); }
.vc-subscribe-modal__form iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--vc-color-white, #fff); }
/* See the template-parts.php comment above this element: covers Keela's
   own close button on the rare render where it shows one, so only our
   themed close button is ever visible (client feedback 2026-09-09). Sized
   to the corner only — small enough to stay clear of the heading text in
   Keela's normal compact render. */
.vc-subscribe-modal__mask { position: absolute; top: 0; right: 0; width: 60px; height: 56px; z-index: 1; background: var(--vc-color-white, #fff); }
.vc-subscribe-trigger { cursor: pointer; }
@media (max-width: 480px) {
	.vc-subscribe-modal { padding: 12px; }
	/* Narrower width wraps the heading/labels onto more lines, so mobile
	   needs more height than desktop to still avoid an internal scrollbar
	   (measured directly against the live embed at this width). */
	.vc-subscribe-modal__dialog { width: 100%; max-width: calc(100vw - 24px); height: 660px; max-height: calc(100vh - 24px); }
}
@media (prefers-reduced-motion: reduce) { .vc-subscribe-modal, .vc-subscribe-modal__dialog { transition: none; } }