/* Dinner Party On Tour – zelfde stijl als de kleur-app. Alles valt onder .dpot zodat je thema niet geraakt wordt. */
.dpot{
  --dpot-bg:#F8DCCB; --dpot-paper:#FFF3EC; --dpot-ink:#4A1726; --dpot-muted:#8A5A62;
  --dpot-line:#E9BFA9; --dpot-accent:#FF741F; --dpot-accent-ink:#1A0A0F;
  --dpot-red:#ED1A21; --dpot-blue:#1525FF;
  font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--dpot-ink); line-height:1.5; font-weight:400;
}
.dpot *,.dpot *::before,.dpot *::after{box-sizing:border-box}
.dpot h2{font-family:inherit; font-weight:800; font-size:1.4rem; line-height:1.15; letter-spacing:-.01em; margin:0 0 .6rem; color:var(--dpot-ink)}
.dpot h3{font-family:inherit; font-weight:700; font-size:1.15rem; line-height:1.2; margin:.2rem 0 .3rem; color:var(--dpot-ink)}

/* Knoppen */
.dpot .dpot-btn{
  display:inline-block; font:inherit; font-weight:800; font-size:1rem; line-height:1.2; cursor:pointer;
  padding:.75rem 1.1rem; border:0; border-radius:.8rem; text-decoration:none;
  background:var(--dpot-accent); color:var(--dpot-accent-ink);
}
.dpot .dpot-btn:hover{filter:brightness(1.05)}
.dpot .dpot-btn:focus-visible,.dpot button:focus-visible,.dpot a:focus-visible{outline:3px solid var(--dpot-ink); outline-offset:3px}
.dpot .dpot-btn-ghost{background:transparent; color:var(--dpot-ink); border:2px solid var(--dpot-ink); padding:calc(.75rem - 2px) 1rem}
.dpot .dpot-btn-big{font-size:1.2rem; padding:1rem 1.4rem; width:100%; text-align:center}
.dpot .dpot-link{color:var(--dpot-ink); font-weight:600}

/* Meldingen */
.dpot-notice{padding:.8rem 1rem; border-radius:.8rem; font-weight:600; margin:0 0 1rem}
.dpot-notice-ok{background:#E3F4E6; color:#1D4D26}
.dpot-notice-err{background:#FDE3E4; color:#7A0D12}

/* Veiligheidsblok */
.dpot-safety{background:var(--dpot-ink); color:var(--dpot-paper); border-radius:1.1rem; padding:1.1rem 1.25rem; margin:0 0 1.25rem}
.dpot-safety h2{color:var(--dpot-paper)}
.dpot-safety ul{margin:0; padding-left:1.2rem}
.dpot-safety li{margin:.3rem 0}

/* Filter */
.dpot-toolbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; margin:0 0 1rem}
.dpot-filter{display:flex; flex-wrap:wrap; gap:.4rem}
.dpot-filter button{
  font:inherit; font-weight:600; cursor:pointer; padding:.45rem .9rem; border-radius:999px;
  border:2px solid var(--dpot-line); background:transparent; color:var(--dpot-ink);
}
.dpot-filter button[aria-pressed="true"]{background:var(--dpot-ink); border-color:var(--dpot-ink); color:var(--dpot-paper)}

/* Kaarten */
.dpot-list{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr)); margin:0 0 1.5rem}
.dpot-card{background:var(--dpot-paper); border:2px solid var(--dpot-line); border-radius:1.1rem; padding:1rem 1.1rem}
.dpot-card[hidden]{display:none}
.dpot-tag{display:inline-block; margin:0; padding:.15rem .6rem; border-radius:999px; background:var(--dpot-bg); font-size:.85rem; font-weight:600}
.dpot-meta{margin:0 0 .4rem}
.dpot-note{margin:0 0 .5rem; white-space:normal}
.dpot-by{margin:0 0 .75rem; color:var(--dpot-muted); font-size:.9rem}
.dpot-actions{display:flex; flex-wrap:wrap; gap:.5rem}
.dpot-empty{color:var(--dpot-muted); margin:0 0 1.5rem}
.dpot-contact{margin-top:.9rem; padding-top:.9rem; border-top:2px dashed var(--dpot-line)}

/* Formulieren */
.dpot-form{background:var(--dpot-paper); border:2px solid var(--dpot-line); border-radius:1.25rem; padding:1.25rem; max-width:36rem}
.dpot-field{margin:0 0 1rem}
.dpot label,.dpot legend{display:block; font-weight:600; margin:0 0 .35rem}
.dpot fieldset{border:0; padding:0; margin:0 0 1rem; min-width:0}
.dpot-opt{font-weight:400; color:var(--dpot-muted)}
.dpot input[type=text],.dpot input[type=email],.dpot input[type=number],.dpot select,.dpot textarea{
  width:100%; font:inherit; font-size:1rem; padding:.6rem .75rem; margin:0;
  border:2px solid var(--dpot-line); border-radius:.7rem; background:#fff; color:var(--dpot-ink);
}
.dpot input:focus-visible,.dpot select:focus-visible,.dpot textarea:focus-visible{outline:3px solid var(--dpot-accent); outline-offset:1px}
.dpot-hint{font-size:.9rem; color:var(--dpot-muted); margin:.35rem 0 1rem}
.dpot-check{display:flex !important; gap:.6rem; align-items:flex-start; font-weight:400 !important; margin:0 0 .8rem !important}
.dpot-check input{margin-top:.3rem; width:1.1rem; height:1.1rem; flex:none; accent-color:var(--dpot-ink)}
.dpot-hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Keuzeknoppen (avond, rit) */
.dpot-seg{display:flex; flex-wrap:wrap; gap:.4rem}
.dpot-seg input,.dpot-choices input{position:absolute; opacity:0; pointer-events:none}
.dpot-seg label{
  margin:0; flex:1 1 auto; text-align:center; padding:.6rem .8rem; cursor:pointer;
  border:2px solid var(--dpot-line); border-radius:999px; background:#fff;
}
.dpot-seg input:checked + label{background:var(--dpot-ink); border-color:var(--dpot-ink); color:var(--dpot-paper)}
.dpot-seg input:focus-visible + label,.dpot-choices input:focus-visible + label{outline:3px solid var(--dpot-accent); outline-offset:2px}

/* Meetup */
.dpot-meetup{display:grid; gap:1.25rem}
.dpot-day{background:var(--dpot-bg); border-radius:1.25rem; padding:1.25rem}
.dpot-day .dpot-form{background:var(--dpot-paper)}
.dpot-choices{display:grid; gap:.4rem}
.dpot-choices label{
  margin:0; padding:.7rem .9rem; cursor:pointer; font-weight:600;
  border:2px solid var(--dpot-line); border-radius:.8rem; background:#fff;
}
.dpot-choices input:checked + label{border-color:var(--dpot-ink); box-shadow:inset 0 0 0 2px var(--dpot-ink)}
.dpot-results{list-style:none; margin:0 0 1rem; padding:0}
.dpot-results li{margin:0 0 .6rem}
.dpot-results-row{display:flex; justify-content:space-between; gap:1rem; font-weight:600}
.dpot-results-row span:last-child{white-space:nowrap}
.dpot-bar{height:.6rem; border-radius:999px; background:var(--dpot-paper); overflow:hidden; margin-top:.25rem}
.dpot-bar span{display:block; height:100%; background:var(--dpot-accent); border-radius:999px}
.dpot-final{background:var(--dpot-ink); color:var(--dpot-paper); border-radius:1rem; padding:1rem 1.1rem}
.dpot-final p{margin:0}
.dpot-final .dpot-final-label{font-weight:800; color:var(--dpot-accent); margin-bottom:.25rem}

@media (prefers-reduced-motion:no-preference){ .dpot-bar span{transition:width .6s ease} }

/* Taalknop */
.dpot-lang{display:flex; justify-content:flex-end; margin:0 0 1rem}
.dpot-lang a{
  font-weight:600; font-size:.9rem; text-decoration:none; color:var(--dpot-ink);
  padding:.3rem .8rem; border:2px solid var(--dpot-ink);
}
.dpot-lang a:first-child{border-radius:999px 0 0 999px; border-right:0}
.dpot-lang a:last-child{border-radius:0 999px 999px 0}
.dpot-lang a[aria-current="true"]{background:var(--dpot-ink); color:var(--dpot-paper)}

/* =========================================================
   Webapp-weergave
   ========================================================= */
html:has(body.dpot-app-body){background:#F8DCCB}
body.dpot-app-body{margin:0; background:#F8DCCB; -webkit-tap-highlight-color:transparent}
.dpot-app{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column}
.dpot-appbar{
  position:sticky; top:var(--wp-admin--admin-bar--height,0px); z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:calc(.7rem + env(safe-area-inset-top,0px)) 1.25rem .7rem;
  background:rgba(248,220,203,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.dpot-appbar .dpot-lang{margin:0}
.dpot-brand{font-weight:800; color:var(--dpot-ink); text-decoration:none; letter-spacing:-.01em}
.dpot-main{flex:1; width:100%; max-width:34rem; margin:0 auto; padding:.5rem 1.25rem calc(7rem + env(safe-area-inset-bottom,0px))}
.dpot-page-title{font-size:clamp(2.3rem,11vw,3.2rem); line-height:.95; font-weight:800; letter-spacing:-.03em; margin:.75rem 0 1.25rem; color:var(--dpot-ink)}
.dpot-content > *:first-child{margin-top:0}
.dpot-content p{margin:0 0 1rem}
.dpot-content .dpot .dpot-lang{display:none}

/* Tabbalk */
.dpot-tabbar{
  position:fixed; z-index:30; left:50%; transform:translateX(-50%);
  bottom:calc(.6rem + env(safe-area-inset-bottom,0px)); width:min(32rem, calc(100% - 1.2rem));
  display:flex; justify-content:space-around; padding:.35rem;
  background:var(--dpot-ink); border-radius:1.4rem; box-shadow:0 10px 30px rgba(74,23,38,.28);
  font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.dpot-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.45rem .2rem .4rem; border-radius:1.05rem; text-decoration:none;
  color:rgba(255,243,236,.72); font-size:.72rem; font-weight:600; line-height:1.1;
}
.dpot-tab svg{width:1.45rem; height:1.45rem}
.dpot-tab[aria-current="page"]{color:var(--dpot-ink); background:var(--dpot-accent)}
.dpot-tab:focus-visible{outline:3px solid var(--dpot-accent); outline-offset:2px}

/* Startscherm */
.dpot-hero{padding:1.25rem 0 1.5rem}
.dpot-kicker{margin:0 0 .5rem; font-weight:600; color:var(--dpot-muted)}
.dpot-hero-title{font-size:clamp(3rem,16vw,4.6rem); line-height:.88; font-weight:800; letter-spacing:-.04em; margin:0 0 1rem; color:var(--dpot-ink)}
.dpot-countdown{margin:0; font-size:1.15rem}
.dpot-countdown strong{font-size:1.6em; font-weight:800; color:var(--dpot-ink)}
.dpot-flagcard{background:var(--dpot-paper); border:2px solid var(--dpot-line); border-radius:1.4rem; padding:1.2rem; margin:0 0 1rem}
.dpot-flagcard p{margin:0 0 1rem}
.dpot-bands{border-radius:1rem; overflow:hidden; margin:0 0 1rem; border:2px solid var(--dpot-line)}
.dpot-band{display:flex; justify-content:space-between; gap:.75rem; padding:.6rem .9rem; font-size:.95rem}
.dpot-band strong{font-weight:800}
.dpot-tiles{display:grid; gap:.6rem; margin:0 0 1rem}
.dpot-tile{
  display:flex; align-items:center; gap:.9rem; padding:.9rem 1rem; text-decoration:none; color:var(--dpot-ink);
  background:var(--dpot-paper); border:2px solid var(--dpot-line); border-radius:1.1rem;
}
.dpot-tile:active{transform:scale(.99)}
.dpot-tile-icon{flex:none; display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:.9rem; background:var(--dpot-ink); color:var(--dpot-paper)}
.dpot-tile-text{display:flex; flex-direction:column}
.dpot-tile-text strong{font-size:1.1rem; font-weight:800}
.dpot-tile-text span{color:var(--dpot-muted); font-size:.95rem}
.dpot-install{margin:.5rem 0 0}
.dpot-install .dpot-btn{width:100%}
.dpot-app .dpot-day{background:none; padding:0}
.dpot-app .dpot-meetup{gap:2rem}