/* Divi Lover promo popup (snippet 56 prints the markup, content from Divi → Global Fields → Promo popup).
   Built from the site's own components: About CTA gradient card, the Resource Library "Unlock" card
   (Panel Reversed), the Pink / White button presets, H1 + Libre line, Label, <mark>, .has-shadow.
   Reversed colours: dark boxes on the light site, light boxes in dark mode. */

.dl-promo,
.dl-promo-pill {
	--bg: var(--dl-panel-reversed, #363B4A);
	--ink: var(--dl-text-reversed, #fff);
	--soft: color-mix(in srgb, var(--dl-text-reversed, #fff) 70%, transparent);
	--pink: var(--gcid-primary-color, #ff6699);
	--peach: var(--gcid-secondary-color, #ff9966);
	--pink-light: var(--gcid-jeso1n63pu, #FF99B2);
	--dark: var(--gcid-2h75ou7t2e, #19191a);
	--code-bg: #EEF2F2;
	/* Button glow only in light mode, like .dl-button.shadow-reversed */
	--glow: 0 10px 20px -5px hsl(225 20 50 / 60%);
	--glow-h: 0 10px 30px -10px hsl(225 20 50 / 60%);
}
[data-theme="dark"] .dl-promo,
[data-theme="dark"] .dl-promo-pill {
	--glow: 0 0 0 transparent;
	--glow-h: 0 0 0 transparent;
	--code-bg: #fff; /* the boxes are light in dark mode, so the code button is white */
}
.dl-promo *,
.dl-promo-pill,
.dl-promo-pill * { corner-shape: superellipse(2); }

/* ---------- Dialog + overlay ---------- */
.dl-promo {
	position: fixed; inset: 0; z-index: 999999;
	display: none; align-items: center; justify-content: center;
	width: 100%; height: 100%; max-width: none; max-height: none;
	margin: 0; padding: 24px; border: 0; overflow: auto;
	background: transparent; color: var(--ink);
	font-family: var(--et_global_body_font); font-size: var(--gvid-r9pokwackb, 18px);
}
.dl-promo[open] { display: flex; }
.dl-promo::backdrop { background: transparent; }
.dl-promo::before {
	content: ""; position: fixed; inset: 0;
	background: color-mix(in srgb, var(--dl-canvas, #fff) 75%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	opacity: 0; transition: opacity .5s ease;
}
.dl-promo.is-in::before { opacity: 1; }
/* Scroll lock without the page jumping sideways when the scrollbar disappears */
html.dl-promo-lock { overflow: hidden; scrollbar-gutter: stable; }

/* ---------- Layout: kicker + gradient box | details box ---------- */
.dl-promo__box {
	position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
	width: min(1000px, 100%); margin: auto; text-align: left; outline: none;
}
.dl-promo__col { display: flex; flex-direction: column; gap: 16px; }
.dl-promo__card { position: relative; border-radius: 45px; padding: 56px; }
.dl-promo__card--hero {
	flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
	background: linear-gradient(45deg, var(--pink) 21%, var(--peach) 100%, var(--peach) 110%), var(--dl-promo-noise, none);
	color: #19191a; /* text on the gradient is always dark */
}
.dl-promo__card--details { z-index: 1; background: var(--bg); color: var(--ink); }

/* ---------- Entrance ---------- */
.dl-promo__card--hero,
.dl-promo__card--details { opacity: 0; transition: opacity .5s ease, transform .8s cubic-bezier(.2, 1.15, .35, 1); }
.dl-promo__card--hero { transform: translateY(60px) scale(.95); transition-delay: .15s; }
.dl-promo__card--details { transform: translateX(70px); transition-delay: .45s; }
.dl-promo.is-in .dl-promo__card--hero,
.dl-promo.is-in .dl-promo__card--details { opacity: 1; transform: none; }
/* First (automatic) opening: the kicker lines rise in one by one first, with DL Motion text-reveal's own
   values (from 100% + transparent, 0.8 s, power3.out, 0.15 s apart), then the boxes. Reopening skips it. */
.dl-promo__line { display: block; }
.dl-promo--intro .dl-promo__line { opacity: 0; transform: translateY(100%); }
.dl-promo--intro.is-in .dl-promo__line { animation: dlPromoLine .8s cubic-bezier(.215, .61, .355, 1) forwards; }
.dl-promo--intro.is-in .dl-promo__line:nth-child(1) { animation-delay: .3s; }
.dl-promo--intro.is-in .dl-promo__line:nth-child(2) { animation-delay: .45s; }
.dl-promo--intro.is-in .dl-promo__line:nth-child(3) { animation-delay: .6s; }
.dl-promo--intro.is-in .dl-promo__line:nth-child(4) { animation-delay: .75s; }
.dl-promo--intro .dl-promo__card--hero { transition-delay: 1.3s; }
.dl-promo--intro .dl-promo__card--details { transition-delay: 1.65s; }
@keyframes dlPromoLine { to { opacity: 1; transform: none; } }

/* ---------- Close ---------- */
.dl-promo .dl-promo__close,
.dl-promo-pill .dl-promo-pill__x {
	display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
	background: transparent; cursor: pointer; transition: background .2s, color .2s;
}
.dl-promo .dl-promo__close { position: absolute; z-index: 3; top: 24px; right: 24px; width: 44px; height: 44px; color: var(--ink); }
.dl-promo .dl-promo__close:hover,
.dl-promo-pill .dl-promo-pill__x:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.dl-promo__close svg,
.dl-promo-pill__x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- Text ---------- */
.dl-promo .dl-promo__kicker {
	margin: 0; padding: 0 8px; font-size: inherit; font-weight: 800; letter-spacing: .05em;
	text-transform: uppercase; line-height: 1.3; color: var(--gcid-heading-color, #19191a);
}
.dl-promo .dl-promo__title {
	margin: 0; padding: 0; font-family: var(--et_global_heading_font); font-size: var(--gvid-zy9h367bm9, 60px);
	font-weight: 900; line-height: .85; letter-spacing: normal; color: inherit;
}
.dl-promo .dl-promo__libre {
	display: inline-block; margin-top: 14px; font-family: 'Libre', serif; font-size: var(--gvid-ix03tf8sw0, 36px);
	font-weight: 700; letter-spacing: -.03em; line-height: 1.15;
}
.dl-promo__icon { display: block; width: 65px; height: auto; margin: 0 0 24px; }
.dl-promo .dl-promo__text { margin: 0 0 24px; padding: 0; font-size: inherit; line-height: 1.7; color: var(--ink); }
.dl-promo .dl-promo__label { margin: 0 0 8px; padding: 0; font-size: inherit; font-weight: 600; color: var(--ink); }
.dl-promo .dl-promo__hint { margin: 12px 0 0; padding: 0; font-size: inherit; line-height: 1.55; color: var(--soft); }
.dl-promo mark { color: inherit; }
.dl-promo .dl-promo__card--details mark { --mark-color: rgba(255, 102, 128, .45); }
[data-theme="dark"] .dl-promo .dl-promo__card--details mark { --mark-color: rgba(255, 102, 128, .2); }

/* ---------- Buttons = the site's Pink / White button presets ---------- */
.dl-promo__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 32px; }
.dl-promo .dl-promo__copy,
.dl-promo .dl-promo__btn,
.dl-promo-pill .dl-promo__copy,
.dl-promo-pill .dl-promo-pill__shop {
	position: relative; display: inline-flex; align-items: center; gap: 10px;
	padding: .7em 1.2em; border: 2px solid var(--dark); border-radius: 30px;
	font-family: var(--et_global_body_font); font-size: inherit; font-weight: 800; line-height: 1.1;
	color: var(--dark) !important; text-decoration: none !important; white-space: nowrap; cursor: pointer;
	box-shadow: 0 4px 0 0 var(--dark), var(--glow);
	transition: transform .2s, box-shadow .2s, background-color .2s;
}
.dl-promo .dl-promo__copy,
.dl-promo-pill .dl-promo__copy { background: var(--code-bg); font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.dl-promo .dl-promo__btn,
.dl-promo-pill .dl-promo-pill__shop { background: var(--pink); }
.dl-promo .dl-promo__copy:hover,
.dl-promo .dl-promo__btn:hover,
.dl-promo-pill .dl-promo__copy:hover,
.dl-promo-pill .dl-promo-pill__shop:hover { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--dark), var(--glow-h); }
.dl-promo .dl-promo__btn:hover,
.dl-promo-pill .dl-promo-pill__shop:hover { background: var(--pink-light); }
.dl-promo__copy-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl-promo__copy-text { min-width: 7ch; text-align: center; }
.dl-promo__btn-short { display: none; }
.dl-promo .dl-promo__later {
	padding: 0; border: 0; background: none; color: var(--soft); font: inherit; cursor: pointer;
	text-decoration: underline; text-underline-offset: 4px;
}
.dl-promo .dl-promo__later:hover { color: var(--ink); }

/* ---------- "Copy code" tooltip: one element (arrow = its ::before), so the whole shape fades as one.
   Opposite colours to the box it sits on. ---------- */
.dl-promo__tip {
	position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
	padding: 6px 12px; border-radius: 10px; background: var(--ink); color: var(--bg);
	font-family: var(--et_global_body_font); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0; white-space: nowrap;
	opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.dl-promo__tip::before {
	content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: -6px 0 0 -5px;
	background: inherit; border-radius: 2px; transform: rotate(45deg); corner-shape: round;
}
.dl-promo__copy:hover .dl-promo__tip,
.dl-promo__copy:focus-visible .dl-promo__tip { opacity: 1; }
.dl-promo__copy.is-copied .dl-promo__tip { opacity: 0; }

/* ---------- Focus ---------- */
.dl-promo :focus-visible,
.dl-promo-pill :focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.dl-promo .dl-promo__box:focus,
.dl-promo .dl-promo__box:focus-visible { outline: none; }
.dl-promo__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Corner card: text on top (reopens the popup), code + Shop below ---------- */
.dl-promo-pill {
	position: fixed; left: 24px; bottom: 24px; z-index: 99980;
	display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "t t x" "c s s";
	align-items: center; justify-items: start; gap: 14px 10px;
	padding: 20px 16px 20px 22px; border-radius: 30px;
	background: var(--bg); color: var(--ink); font-family: var(--et_global_body_font); font-size: 16px;
}
.dl-promo-pill[hidden] { display: none; }
.dl-promo-pill .dl-promo-pill__open {
	grid-area: t; padding: 0 12px 0 0; border: 0; background: none; color: inherit; cursor: pointer;
	font: inherit; font-size: 18px; font-weight: 800; line-height: 1.3; text-align: left; white-space: nowrap;
}
.dl-promo-pill .dl-promo-pill__x { grid-area: x; justify-self: end; width: 36px; height: 36px; margin: -6px -4px 0 0; color: var(--soft); }
.dl-promo-pill .dl-promo-pill__x:hover { color: var(--ink); }
.dl-promo-pill .dl-promo__copy { grid-area: c; padding: .55em 1em; }
.dl-promo-pill .dl-promo-pill__shop { grid-area: s; padding: .55em 1em; }
.dl-promo-pill .dl-promo__copy-icon { width: 16px; height: 16px; }

/* Back-to-top button level with the corner card's middle (promo.js sets the variable + class) */
.et_pb_scroll_top.et-pb-icon { transition: background-color .3s ease, bottom .35s ease; }
html.dl-promo-pill-on .et_pb_scroll_top.et-pb-icon { bottom: calc(var(--dl-promo-pill-mid) - 24px); }

/* ---------- Desktop: tooltip to the right of the code in the popup ---------- */
@media (min-width: 861px) {
	.dl-promo .dl-promo__tip { left: calc(100% + 14px); bottom: auto; top: 50%; transform: translateY(-50%); }
	.dl-promo .dl-promo__tip::before { left: 0; top: 50%; margin: -5px 0 0 -4px; }
}

/* ---------- Phone: bottom sheet ---------- */
@media (max-width: 860px) {
	.dl-promo { padding: 0; align-items: flex-end; }
	.dl-promo::before { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
	.dl-promo__box { grid-template-columns: 1fr; gap: 10px; width: 100%; margin: auto 0 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
	.dl-promo__col { gap: 10px; }
	.dl-promo__card { border-radius: 30px; padding: 22px 20px; }
	.dl-promo__card--hero,
	.dl-promo__card--details { transform: translateY(120%); }
	.dl-promo .dl-promo__kicker { font-size: 15px; padding: 6px 52px 0 10px; }
	.dl-promo .dl-promo__close { top: 4px; right: 6px; color: var(--gcid-heading-color, #19191a); }
	.dl-promo .dl-promo__title { font-size: 36px; }
	.dl-promo .dl-promo__libre { margin-top: 8px; font-size: 24px; }
	.dl-promo__icon,
	.dl-promo .dl-promo__later,
	.dl-promo__btn-long { display: none; }
	.dl-promo__btn-short { display: inline; }
	/* Details box: text, code + short shop button side by side, the small hint (end date) at the bottom */
	.dl-promo__card--details { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
	.dl-promo__actions { display: contents; }
	.dl-promo .dl-promo__text { order: 0; width: 100%; margin: 0 0 14px; font-size: 15px; line-height: 1.55; }
	.dl-promo .dl-promo__label { display: none; }
	.dl-promo .dl-promo__copy { order: 2; z-index: 2; }
	.dl-promo .dl-promo__btn { order: 3; }
	.dl-promo .dl-promo__hint { order: 4; width: 100%; margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
	.dl-promo .dl-promo__copy,
	.dl-promo .dl-promo__btn { padding: .65em .85em; gap: 8px; font-size: 16px; }
	.dl-promo-pill { left: 12px; bottom: 12px; padding: 16px 12px 16px 18px; gap: 12px 8px; }
	.dl-promo-pill .dl-promo-pill__open { font-size: 16px; }
}

/* ---------- [dl_promo] shortcode: the same two boxes inside a post, static ---------- */
.dl-promo.dl-promo--inline {
	position: relative; inset: auto; z-index: auto; display: block;
	width: auto; height: auto; margin: 2em 0; padding: 0; overflow: visible;
	container-type: inline-size;
}
.dl-promo--inline::before { content: none; }
.dl-promo--inline .dl-promo__box { margin: 0; padding: 0; width: 100%; }
.dl-promo--inline .dl-promo__card--hero,
.dl-promo--inline .dl-promo__card--details { opacity: 1; transform: none; transition: none; }
.dl-promo--inline .dl-promo__card { padding: 40px; }
.dl-promo--inline .dl-promo__title { font-size: var(--gvid-24u161lyer, 44px); line-height: .9; }
.dl-promo--inline .dl-promo__libre { margin-top: 10px; font-size: var(--gvid-d9adb809-250e-4aaa-9fef-727b14fb69ec, 26px); }
/* box="1" / box="2": one box on its own, full width of the post column */
.dl-promo--single .dl-promo__box { grid-template-columns: 1fr; }
/* The inline marks are swept by DL Motion's mark-highlight on scroll; without it they show fully. */
.dl-promo--inline mark { --mark-progress: 1; --mark-cap-right: 1; }
/* Inside post text the site's text-link style (pink underline, tiny padding) would hit the button. */
#page-container #et-boc .dl-text .dl-promo--inline a.dl-promo__btn,
#page-container .dl-promo--inline a.dl-promo__btn {
	background-image: none; margin-inline: 0; padding: .7em 1.2em;
	transition: transform .2s, box-shadow .2s, background-color .2s;
}
/* Narrow post column: boxes stacked */
@container (max-width: 640px) {
	.dl-promo--inline .dl-promo__box { grid-template-columns: 1fr; gap: 12px; }
	.dl-promo--inline .dl-promo__card { padding: 28px 24px; border-radius: 30px; }
	#page-container #et-boc .dl-text .dl-promo--inline a.dl-promo__btn,
	#page-container .dl-promo--inline a.dl-promo__btn { padding: .65em .85em; }
}

/* ---------- Reduced motion: fades only, no delays ---------- */
@media (prefers-reduced-motion: reduce) {
	.dl-promo__card--hero,
	.dl-promo__card--details { transform: none !important; transition: opacity .3s ease !important; }
	.dl-promo--intro .dl-promo__line { opacity: 1; transform: none; animation: none !important; }
}