/* ppt-preview.css — brug tussen design-2026.css (cx-vormtaal) en de MDP-preview.
   Zet de donkere paginabasis, de mobiele drawer en de (voorlopige) footer.
   design-2026.css verzorgt de header (cxh) en alle secties. */

/* ---- Paginabasis: 1-op-1 de body van premiumpartytent.nl (film-grain + gouden gloed) ---- */
body.ppt-redesign{margin: 0; background-color: #100F0E; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"), radial-gradient(1200px 820px at 50% -12%, rgba(196, 154, 84, .16), transparent 60%), radial-gradient(720px 600px at 85% 104%, rgba(196, 154, 84, .07), transparent 70%), radial-gradient(720px 600px at 10% 94%, rgba(196, 154, 84, .05), transparent 70%); background-size: 160px 160px, auto, auto, auto; background-repeat: repeat, no-repeat, no-repeat, no-repeat; background-attachment: fixed; color: var(--pp-white); font-family: 'Montserrat', system-ui, -apple-system, sans-serif; font-size: var(--fs-16); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased;}
body.ppt-redesign #pb-main{display:block}
body.ppt-redesign.ppt-drawer-open{overflow:hidden}
/* Specificiteit 0,0,1 (zoals PPT), zodat PPT's eigen img-regels (logo's, klantlogo's) winnen. */
:where(body.ppt-redesign) :is(img, video){max-width:100%;height:auto;display:block}
/* Basisregels uit PPT main.css (zelfde lage specificiteit als bij PPT). */
:where(body.ppt-redesign) :is(*, *::before, *::after){box-sizing:border-box}
:where(body.ppt-redesign) a{color:var(--pp-gold-2);text-decoration:none}
:where(body.ppt-redesign) a:hover{color:var(--pp-cream)}
:where(body.ppt-redesign) p{margin:0 0 1em}

/* ---- Sectielagen uit PPT main.css (gouden gloed / tint) ---- */
.pp-section--alt{background:linear-gradient(180deg,rgba(46,44,40,.92),rgba(38,36,33,.92))}
.pp-section--tint{background:linear-gradient(180deg,rgba(196,154,84,.10),rgba(196,154,84,.05) 70%,rgba(196,154,84,.02))}
.pp-section--glow::before{content:'';position:absolute;inset:0 0 auto 0;height:min(440px,72%);pointer-events:none;background:radial-gradient(58% 100% at 50% 0%,rgba(214,170,94,.14),transparent 74%)}

/* ---- Mobiele drawer: 1-op-1 geport uit premiumpartytent.nl (.ppt-drawer) ---- */
.ppt-drawer-backdrop{position:fixed;inset:0;z-index:998;background:rgba(0,0,0,.6);opacity:0;transition:opacity .3s var(--ease)}
.ppt-drawer-backdrop.is-open{opacity:1}
body.ppt-drawer-open{overflow:hidden}
.ppt-drawer{position:fixed;top:0;right:0;z-index:999;
	width:90%;max-width:400px;height:100dvh;
	display:flex;flex-direction:column;
	background:linear-gradient(180deg,#24221F,#191817);
	border-left:1px solid rgba(196,154,84,.28);
	box-shadow:-22px 0 50px rgba(0,0,0,.55);
	transform:translateX(100%);
	transition:transform .32s var(--ease);
	padding:1.1rem clamp(1.1rem,5vw,1.6rem) calc(1.4rem + env(safe-area-inset-bottom));
	overflow:hidden}
.ppt-drawer.is-open{transform:translateX(0)}
/* Dichte la: schaduw niet in beeld laten lekken (PPT heeft dit lek ook). */
.ppt-drawer:not(.is-open){box-shadow:none}
@media(min-width:992px){.ppt-drawer,.ppt-drawer-backdrop{display:none}}
.ppt-drawer__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid var(--pp-line-soft)}
.ppt-drawer__logo img{height:46px;width:auto}
.ppt-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;background:transparent;border:1px solid var(--pp-line-soft);border-radius:var(--radius-sm);color:var(--pp-gold-2);cursor:pointer}
.ppt-drawer__close svg{flex:0 0 auto;width:20px;height:20px}
.ppt-drawer__nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin-top:.35rem}
.ppt-drawer__group{margin-top:1.35rem}
.ppt-drawer__group:first-child{margin-top:.5rem}
.ppt-drawer__group-label{display:block;font-size:var(--fs-12);font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--pp-gold-2);margin-bottom:.1rem}
.ppt-drawer__list{list-style:none;margin:0;padding:0;display:grid}
.ppt-drawer__list a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem .25rem;color:var(--pp-white);font-weight:700;font-size:var(--fs-18);text-decoration:none;border-bottom:1px solid var(--pp-line-soft);transition:color .15s var(--ease)}
.ppt-drawer__list li:last-child a{border-bottom:0}
.ppt-drawer__arrow{flex:0 0 auto;color:var(--pp-muted);transition:color .15s var(--ease),transform .15s var(--ease)}
.ppt-drawer__list a:hover{color:var(--pp-gold-2)}
.ppt-drawer__list a:hover .ppt-drawer__arrow{color:var(--pp-gold-2);transform:translateX(3px)}
.ppt-drawer__foot{flex:0 0 auto;margin-top:0;padding-top:1.2rem;display:grid;gap:.9rem;border-top:1px solid var(--pp-line-soft)}
.ppt-drawer__reviews{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;color:var(--pp-muted);font-size:var(--fs-14)}
.ppt-drawer__stars{color:var(--pp-gold);letter-spacing:.1em}
.ppt-drawer__reviews-text strong{color:var(--pp-white)}
.ppt-drawer__cta{width:100%;justify-content:center;text-align:center}

/* ---- Footer (voorlopig compact) ---- */
.ppt-foot{background:var(--cx-ink-2,#1A1917);border-top:1px solid var(--pp-line,rgba(196,154,84,.26))}
.ppt-foot__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap;padding-block:clamp(2rem,5vw,3.25rem)}
.ppt-foot__name{font-weight:800;font-size:1.2rem;color:var(--pp-white,#F6F3EA);display:block;margin-bottom:.45rem}
.ppt-foot__tag{color:var(--pp-muted,#CFC9C0);max-width:48ch;margin:0 0 .6rem;font-size:.95rem;line-height:1.55}
.ppt-foot__mail{color:var(--pp-gold-2,#E5C983);text-decoration:none;font-weight:600}
.ppt-foot__mail:hover{text-decoration:underline}
.ppt-foot__cta{flex:none}
.ppt-foot__bar{border-top:1px solid var(--pp-line-soft,rgba(250,245,235,.10))}
.ppt-foot__bar-in{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.2rem;flex-wrap:wrap;padding-block:1rem;color:var(--pp-muted,#CFC9C0);font-size:.85rem}
.ppt-foot__links{display:flex;gap:1.3rem;flex-wrap:wrap}
.ppt-foot__links a{color:var(--pp-muted,#CFC9C0);text-decoration:none}
.ppt-foot__links a:hover{color:var(--pp-gold-2,#E5C983)}

/* ================= MDP-specifieke aanpassingen t.o.v. PPT ================= */

/* Social-proof strip (i.p.v. klantlogo's; MDP heeft die logo's niet) */
.mdx-proof{padding-block:clamp(1.6rem,3.5vw,2.4rem)}
.mdx-proof__in{display:flex;align-items:center;justify-content:center;gap:.8rem 2.2rem;flex-wrap:wrap;text-align:center}
.mdx-proof__item{display:inline-flex;align-items:center;gap:.6rem;color:var(--pp-muted,#CFC9C0);font-weight:600;font-size:.95rem}
.mdx-proof__item b{color:var(--pp-white,#F6F3EA)}
.mdx-proof__item svg{width:1.25rem;height:1.25rem;color:var(--pp-gold-2,#E5C983);flex:none}
.mdx-proof__sep{width:1px;height:1.4rem;background:var(--pp-line,rgba(196,154,84,.26))}
@media(max-width:640px){.mdx-proof__sep{display:none}}

/* Formaten gebruikt de native cx-maat/cx-schets-stijl uit design-2026 (1-op-1 met PPT). */

/* Video's in het A-Z-raster en het gelegenheden-kader net als de foto's laten vullen. */
.bkzn-raster__beeld video, .cxgel__kader video { width:100%; height:100%; object-fit:cover; display:block; }

/* Reviews: eigen cx-kaarten (MDP heeft geen Trustindex meer) */
.ppt-revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:.5rem}
@media(max-width:900px){.ppt-revs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ppt-revs{grid-template-columns:1fr}}
.ppt-rev{background:#fff;border:1px solid #E6E1D6;border-radius:var(--radius,14px);padding:1.2rem 1.25rem;display:flex;flex-direction:column;gap:.6rem;box-shadow:0 8px 24px rgba(20,19,15,.06)}
.ppt-rev__stars{color:#F2B01E;letter-spacing:.08em;font-size:.95rem}
.ppt-rev__text{color:#46413A;font-size:.95rem;line-height:1.55;margin:0}
.ppt-rev__who{display:flex;align-items:center;gap:.6rem;margin-top:auto}
.ppt-rev__av{width:34px;height:34px;border-radius:50%;background:var(--pp-gold,#C49A54);color:#14130F;display:grid;place-content:center;font-weight:800;font-size:.9rem;flex:none}
.ppt-rev__name{font-weight:700;color:#14130F;font-size:.9rem}
.ppt-rev__src{color:#8B857B;font-size:.75rem}
.ppt-revs__voet{text-align:center;margin-top:1.6rem}

/* Labels boven de koppen sitebreed weg (wens Cas 9 okt 2026). Alleen de informatieve
   labels in de eind-CTA (.cx-slot, bv. "Vorübergehend 50 € Rabatt") blijven staan. */
.cx-page .cx-hand{display:none}
.cx-page .cx-slot .cx-hand{display:block}

/* Productbadge op de foto (Wintertipp/Sommertipp), 1-op-1 uit PPT main.css. */
.cx-acckaart__foto{position:relative}
.pp-imgbadge{position:absolute;top:.5rem;left:.5rem;z-index:3;display:inline-block;padding:.28rem .6rem;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--pp-gold-deep) 0%,var(--pp-gold) 50%,var(--pp-gold-2) 100%);color:#14100A;font-size:var(--fs-12);font-weight:800;letter-spacing:.02em;line-height:1.2;box-shadow:0 4px 12px rgba(0,0,0,.4);pointer-events:none;white-space:nowrap}

/* Vloeiend scrollen naar ankers (#pakete, #formaten …), 1-op-1 PPT main.css. */
html:has(body.ppt-redesign){-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html:has(body.ppt-redesign){scroll-behavior:auto}}

/* Event-sfeerbeelden + lightbox, 1-op-1 uit PPT main.css. */
.pp-event-gallery__title{text-align: left; margin: 0 0 1.5rem;}
.pp-event-gallery{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.15rem);}
@media (min-width: 720px){.pp-event-gallery{grid-template-columns: repeat(3, minmax(0, 1fr));}}
.pp-event-gallery__item{display: block; width: 100%; padding: 0; margin: 0; cursor: zoom-in; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--pp-line-soft); background: none;}
.pp-event-gallery__item:focus-visible{outline: 2px solid var(--pp-gold-2); outline-offset: 3px;}
.pp-event-gallery__item img{width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease);}
.pp-event-gallery__item:hover img{transform: scale(1.05);}
.pp-event-gallery__item--video{cursor: zoom-in; position: relative;}
.pp-event-gallery__item--video video{pointer-events: none;}
.pp-event-gallery__item video{width: 100%; height: 100%; object-fit: cover; display: block;}
.pp-lightbox[hidden]{display: none;}
.pp-lightbox{position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: clamp(1rem, 4vw, 3rem); background: rgba(8, 7, 5, .93); backdrop-filter: blur(4px);}
body.pp-lightbox-open{overflow: hidden;}
.pp-lightbox__fig{margin: 0; display: flex; align-items: center; justify-content: center; max-width: min(1100px, 92vw); max-height: 88vh;}
.pp-lightbox__img{display: block; max-width: 100%; max-height: 88vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6);}
.pp-lightbox__video{display: block; max-width: 100%; max-height: 88vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); background: #000;}
.pp-lightbox__video[hidden], .pp-lightbox__img[hidden]{display: none;}
.pp-lightbox__close{position: absolute; top: 1.1rem; right: 1.3rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pp-line); background: rgba(0, 0, 0, .45); color: var(--pp-cream); font-size: 1.7rem; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s;}
.pp-lightbox__close:hover{border-color: var(--pp-gold); color: var(--pp-gold-2);}
.pp-lightbox__nav{flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--pp-line); background: rgba(0, 0, 0, .45); color: var(--pp-cream); font-size: 1.9rem; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s;}
.pp-lightbox__nav:hover{border-color: var(--pp-gold); color: var(--pp-gold-2);}
@media (max-width: 640px){.pp-lightbox{gap: 0;}.pp-lightbox__nav{position: absolute; bottom: 1.4rem; width: 44px; height: 44px;}.pp-lightbox__nav--prev{left: 28%;}.pp-lightbox__nav--next{right: 28%;}}