/* Pia-podium (peek-core). Tokens uit het thema (theme.json), met terugval. */
.peek-pia-section{ position:relative; z-index:3; background:var(--wp--preset--color--studio, #040506); color:var(--wp--preset--color--ink, #ECEBE7);
  padding:clamp(64px, 10vw, 144px) var(--peek-m, 56px); border-top:1px solid var(--wp--preset--color--line, rgba(236,235,231,.14)); }
.peek-podium{ display:grid; grid-template-columns:minmax(220px, 320px) minmax(0, 440px); gap:clamp(20px, 3vw, 48px); align-items:end; max-width:1480px; margin:0 auto; }
.pp-frame{ position:relative; aspect-ratio:4/5; border-radius:14px; overflow:hidden; background:#031019; color-scheme:dark;
  box-shadow:0 0 0 1px rgba(143,216,255,.28), 0 0 44px rgba(0,154,215,.22); }
.pp-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; transition:opacity .6s var(--peek-e, ease); }
.pp-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; color-scheme:dark; }
.is-loaded .pp-poster{ opacity:.25; }
.pp-state{ position:absolute; left:10px; bottom:8px; font:500 12px/1.2 var(--wp--preset--font-family--mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:#8FD8FF; text-shadow:0 0 8px rgba(0,154,215,.8); pointer-events:none; }
.pp-state:empty{ display:none; }
.is-live .pp-frame{ box-shadow:0 0 0 1px rgba(0,154,215,.7), 0 0 60px rgba(0,154,215,.4); }
.pp-kicker{ margin:0 0 8px; font:500 12px/1.3 var(--wp--preset--font-family--mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:#8FD8FF; }
.pp-h{ margin:0 0 10px; font:400 clamp(28px, 3vw, 44px)/1.02 var(--wp--preset--font-family--display, serif); letter-spacing:-.01em; }
.pp-h em{ font-style:italic; color:#8FD8FF; }
.pp-intro, .pp-fallback p{ margin:0 0 10px; color:var(--wp--preset--color--ink-2, #A4A7AA); font-size:15px; line-height:1.5; max-width:44ch; }
.pp-poster-line{ margin:12px 0; padding-top:10px; border-top:1px solid var(--wp--preset--color--line, rgba(236,235,231,.14)); font:italic 400 20px/1.2 var(--wp--preset--font-family--display, serif); color:#8FD8FF; }
.pp-start, .pp-callback{ appearance:none; display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px; border-radius:999px; border:1px solid rgba(239,146,33,.6);
  background:var(--wp--preset--color--orange, #EF9221); color:#140A02; font:500 15px/1 var(--wp--preset--font-family--text, sans-serif); cursor:pointer; box-shadow:0 0 26px rgba(239,146,33,.3); }
.pp-start .d{ width:8px; height:8px; border-radius:50%; background:#140A02; }
.pp-callback{ background:transparent; color:var(--wp--preset--color--ink, #ECEBE7); box-shadow:none; min-height:44px; }
.pp-end{ margin:10px 0 0; font-size:14px; color:var(--wp--preset--color--ink, #ECEBE7); }
.is-feedback .pp-frame{ aspect-ratio:auto; transition:min-height .3s ease; }
.pp-status, .pp-after, .pp-chip{ margin:10px 0 0; font-size:13px; color:var(--wp--preset--color--ink-3, #7E8286); }
.pp-chip a{ color:#8FD8FF; }
.pp-fallback{ margin-top:20px; padding-top:14px; border-top:1px solid var(--wp--preset--color--line, rgba(236,235,231,.14)); }
.pp-fallback-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.pp-fallback a{ color:var(--wp--preset--color--ink, #ECEBE7); }
.is-refused .pp-fallback, .is-fallback .pp-fallback{ border-top-color:var(--wp--preset--color--orange, #EF9221); }
.is-refused .pp-fallback p:first-child, .is-fallback .pp-fallback p:first-child{ color:var(--wp--preset--color--ink, #ECEBE7); }
.pp-ai{ margin:14px 0 8px; font-size:14px; line-height:1.4; color:var(--wp--preset--color--ink, #ECEBE7); }
.pp-privacy{ margin:10px 0 0; max-width:46ch; font-size:13px; line-height:1.5; color:var(--wp--preset--color--ink-2, #A4A7AA); }
.peek-tbc{ font:400 12px/1.4 var(--wp--preset--font-family--mono, monospace); color:var(--wp--preset--color--ink-3, #7E8286); letter-spacing:.02em; font-style:normal; }

/* Dock: Pia klein rechtsonder zolang je elders op de pagina kijkt (podium.js). */
.pp-dock-back{ display:none; }
.is-docked .pp-frame{ position:fixed; z-index:70; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:clamp(128px, 15vw, 200px); height:auto;
  animation:pp-dock-in .4s var(--peek-e, ease) both; }
.is-docked .pp-dock-back{ display:flex; align-items:center; justify-content:center; position:absolute; left:0; right:0; top:0; min-height:36px; padding:0 8px; border:0;
  background:linear-gradient(rgba(3,16,25,.9), rgba(3,16,25,0)); color:#8FD8FF; font:500 12px/1.2 var(--wp--preset--font-family--mono, monospace); letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer; }
.is-docked .pp-state{ font-size:12px; }
@keyframes pp-dock-in{ from{ opacity:0; transform:translateY(14px) scale(.94); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .is-docked .pp-frame{ animation:none; } }
@media (max-width:699px){ .is-docked .pp-frame{ width:112px; right:12px; } }

/* Dialoog (homepage) */
.peek-pia-dialog{ width:min(880px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:clamp(20px, 3vw, 40px); border:1px solid rgba(143,216,255,.18); border-radius:18px;
  background:rgba(4,8,12,.94); color:var(--wp--preset--color--ink, #ECEBE7); color-scheme:dark; overflow:auto; }
.peek-pia-dialog::backdrop{ background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.pp-close-form{ position:absolute; top:10px; right:10px; margin:0; }
.pp-close{ appearance:none; width:44px; height:44px; border-radius:50%; border:1px solid rgba(236,235,231,.2); background:transparent; color:inherit; font-size:22px; line-height:1; cursor:pointer; }

@media (max-width:699px){
  .peek-podium{ grid-template-columns:1fr; }
  .pp-frame{ max-width:320px; }
  .peek-pia-section{ padding:64px 16px; }
}
:focus-visible{ outline:2px solid var(--wp--preset--color--orange, #EF9221); outline-offset:3px; }

/* "Pia raadt aan": kaartje met foto (of silhouet) van het product dat Pia noemt. */
.pp-privacy a{ color:var(--wp--preset--color--ink-2, #A4A7AA); text-decoration:underline; text-underline-offset:2px; }
.pp-rec{ position:relative; display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:center; margin:14px 0 0; padding:10px 40px 10px 10px; border-radius:12px;
  border:1px solid rgba(143,216,255,.45); background:linear-gradient(180deg, rgba(0,40,60,.55), rgba(4,10,14,.6)); box-shadow:0 0 28px rgba(0,154,215,.22); }
.pp-rec[hidden]{ display:none; }
.pp-rec.is-in{ animation:pp-rec-in .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pp-rec-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .pp-rec.is-in{ animation:none; } }
.pp-rec__img{ width:96px; aspect-ratio:4 / 3; border-radius:8px; overflow:hidden; background:radial-gradient(120% 95% at 35% 22%, #ffffff, #f4f4f1 55%, #dcdbd6); }
.pp-rec__img img{ display:block; width:100%; height:100%; object-fit:contain; padding:6%; mix-blend-mode:multiply; }
.pp-rec__img.is-sil{ background:radial-gradient(90% 90% at 40% 30%, rgba(236,235,231,.08), rgba(4,5,6,.9)); color:rgba(236,235,231,.45); padding:8px; }
.pp-rec__sil{ display:block; width:100%; height:100%; }
.pp-rec__k{ margin:0 0 3px; display:flex; align-items:center; gap:7px; font:500 12px/1.2 var(--wp--preset--font-family--mono, monospace); letter-spacing:.12em; text-transform:uppercase; color:#BFE9FF; }
.pp-rec__k b{ color:#fff; letter-spacing:.04em; }
.pp-rec__k .d{ width:7px; height:7px; border-radius:50%; background:#8FD8FF; box-shadow:0 0 10px #009AD7; flex:none; }
.pp-rec__name{ margin:0 0 8px; font-size:13px; line-height:1.35; color:var(--wp--preset--color--ink-2, #A4A7AA); }
.pp-rec__go{ display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:999px; background:#009AD7; color:#02121B; border:1px solid #8FD8FF;
  font:500 12px/1 var(--wp--preset--font-family--mono, monospace); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; }
.pp-rec__go:hover{ background:#26B5EE; }
.pp-rec__x{ position:absolute; top:4px; right:4px; width:32px; height:32px; border:0; border-radius:50%; background:transparent; color:var(--wp--preset--color--ink-3, #7E8286); font-size:18px; cursor:pointer; }
.pp-rec__x:hover{ color:var(--wp--preset--color--ink, #ECEBE7); }
.peek-intern{ display:inline-block; margin-top:4px; padding:2px 6px; border:1px dashed rgba(239,146,33,.5); border-radius:4px; font:400 12px/1.4 var(--wp--preset--font-family--mono, monospace); color:#E9B77A; }

/* Tekststand (geen video): alleen uitleg en terugbelformulier; de chat zit rechtsonder (inc/chat.php). */
.is-tekst .pp-fallback{ margin-top:14px; }
.pt-cb{ margin:12px 0 10px; max-width:44ch; display:grid; gap:8px; }
.pt-cb .peek-cb__f{ display:grid; gap:4px; margin:0; }
.pt-cb .peek-cb__f label{ font-size:13px; color:var(--wp--preset--color--ink-2, #A4A7AA); }
.pt-cb input, .pt-cb textarea{ font:inherit; font-size:16px; color:inherit; background:rgba(255,255,255,.06); border:1px solid rgba(236,235,231,.2); border-radius:10px; padding:9px 11px; width:100%; }
.pt-cb .peek-cb__hp{ position:absolute; left:-9999px; }
.pt-cb p{ margin:0; }
/* Videostand: de verwijzing naar de chat alleen als Pia's sessie geweigerd is. */
.pp-refused-chat{ display:none; }
.is-refused .pp-refused-chat{ display:inline; }
/* Videogesprek met Pia (Ruud 05-10-2026): camera-icoon, regel "met geluid en microfoon" en "Liever typen?" (opent de chat). */
.pp-start-row{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:0; }
.pp-cam{ flex:none; }
.pp-start-sub{ margin:6px 0 0 2px; font:400 12px/1.3 var(--wp--preset--font-family--mono, monospace); letter-spacing:.08em; color:var(--wp--preset--color--ink-3, #7E8286); }
.pp-typ{ appearance:none; border:0; background:none; padding:8px 0; min-height:44px; font:inherit; font-size:14px; color:var(--wp--preset--color--ink-2, #A4A7AA); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.pp-typ:hover{ color:var(--wp--preset--color--ink, #ECEBE7); }
.pp-typ:focus-visible{ outline:2px solid #8FD8FF; outline-offset:2px; }
.is-loaded .pp-start-sub{ display:none; }