/**
 * Lead-popup onderin (recept → voedingsschema, oefening → fitnessschema).
 * Kleuren via --lp-*: standaard warm mosgroen + lime (recept); varianten zetten alleen de variabelen.
 * Markup: template-parts/lead-popup/*.php · gedrag: assets/js/lead-popup.js.
 */
.lp { --lp-accent: #b4e35c; --lp-on-accent: var(--ink-950); --lp-bg: #1b2414; --lp-bg-2: #232f1a; --lp-line: #34432a; --lp-this: #2c3a1f; --lp-fg: var(--paper); --lp-soft: #cdd8bf; --lp-muted: #a9b69b; --lp-dim: #8a9a7a; --lp-shadow: var(--ink-950); --lp-btn: var(--lp-accent); --lp-btn-fg: var(--lp-on-accent); --lp-em: var(--lp-accent); position: fixed; z-index: 90; left: 50%; bottom: 0; width: min(780px, 100%); background: var(--lp-bg); color: var(--lp-fg); border-top: 6px solid var(--lp-accent); box-shadow: 0 -18px 50px rgba(0, 0, 0, .45); transform: translate(-50%, 110%); transition: transform .45s var(--ease-slide); }
.lp[hidden] { display: none; }
/* Oefening → fitnessschema: ijsblauw op nachtblauw (training; los van het groen van voeding). */
.lp--ice { --lp-accent: #7cc4ff; --lp-on-accent: #0b1520; --lp-bg: #0e1620; --lp-bg-2: #142030; --lp-line: #24344a; --lp-this: #17304a; --lp-fg: #eef4fa; --lp-soft: #c3d3e4; --lp-muted: #93a7bd; --lp-dim: #6f849b; --lp-shadow: #05090e; }
.lp.is-in { transform: translate(-50%, 0); }
.lp__x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; font: 700 24px/1 var(--font-body); color: var(--lp-fg); opacity: .7; }
.lp__x:hover, .lp__x:focus-visible { opacity: 1; }
.lp__in { display: grid; grid-template-columns: 1fr 270px; gap: 32px; padding: 32px 32px 28px; }
.lp__main { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.lp__h { margin: 0 0 22px; font: 900 56px/.84 var(--font-display); text-transform: uppercase; color: var(--lp-fg); }
.lp__h em { display: block; font-style: normal; color: var(--lp-em); }
.lp__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 26px; background: var(--lp-btn); color: var(--lp-btn-fg); font: 800 17px/1 var(--font-body); text-decoration: none; white-space: nowrap; box-shadow: 6px 6px 0 var(--lp-shadow); transition: transform var(--t-fast); }
.lp__btn:hover, .lp__btn:focus-visible { transform: translateX(3px); }
.lp__ticks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; color: var(--lp-soft); }
.lp__ticks li::before { content: '✓ '; color: var(--lp-accent); }

/* Rechts: dagmenu of training, met dit recept/deze oefening uitgelicht. */
.lp__list { margin: 0; padding: 0; list-style: none; align-self: center; background: var(--lp-bg-2); border: 1px solid var(--lp-line); }
.lp__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-top: 1px solid var(--lp-line); font-size: 13px; color: var(--lp-muted); }
.lp__list li:first-child { border-top: 0; }
.lp__list i { width: 44px; height: 44px; display: grid; place-items: center; background: var(--lp-bg); font: 800 12px/1 var(--font-body); font-style: normal; color: var(--lp-dim); }
.lp__list img { width: 44px; height: 44px; object-fit: cover; display: block; }
.lp__list b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--lp-fg); font-size: 14px; }
.lp__list .is-this { background: var(--lp-this); box-shadow: inset 3px 0 0 var(--lp-accent); }
.lp__list .is-this small { color: var(--lp-accent); font-weight: 800; }
.lp__list .val { font-weight: 800; color: var(--lp-fg); white-space: nowrap; }
.lp__list .lock { filter: blur(3.5px); user-select: none; }
.lp__list .tot { grid-template-columns: 1fr auto; padding: 10px 12px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lp__list .tot .val { color: var(--lp-accent); font-size: 13px; letter-spacing: 0; text-transform: none; }

/* Mobiel: compact (± een kwart van het scherm; Google-richtlijn voor banners).
   Foto van dit recept/deze oefening + kop naast elkaar, knop eronder (ref. CVS-bottomsheet). */
@media (max-width: 760px) {
	.lp { border-top-width: 4px; }
	.lp__in { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "this h" "btn btn" "ticks ticks"; gap: 0 14px; padding: 16px 16px 14px; }
	.lp__main { display: contents; }
	.lp__x { top: 2px; right: 2px; }
	.lp__h { grid-area: h; align-self: center; margin: 0; padding-right: 30px; font-size: 27px; line-height: .88; }
	.lp__h em { display: block; }
	.lp__btn { grid-area: btn; width: 100%; min-height: 50px; margin-top: 14px; font-size: 16px; box-shadow: 4px 4px 0 var(--lp-shadow); }
	.lp__ticks { grid-area: ticks; justify-content: center; margin-top: 10px; font-size: 12px; }
	.lp__ticks li:nth-child(2) { display: none; }
	.lp__list { grid-area: this; align-self: center; background: none; border: 0; }
	.lp__list li:not(.is-this) { display: none; }
	.lp__list .is-this { position: relative; display: block; padding: 0; background: none; box-shadow: none; }
	.lp__list .is-this img, .lp__list .is-this i { width: 72px; height: 72px; outline: 2px solid var(--lp-accent); outline-offset: -2px; }
	.lp__list .is-this > span:not(.val) { display: none; }
	.lp__list .is-this .val { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0; background: var(--lp-accent); color: var(--lp-on-accent); font-size: 11px; text-align: center; }
}
@media (max-width: 360px) {
	.lp__h { font-size: 24px; }
	.lp__ticks { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lp { transition: none; } }