/* Reserveerformulier De Peperboom — koppeling met het horeca-dashboard.
   Kleuren en lettertypen volgen de site via de variabelen hieronder; pas alleen deze aan als het moet. */
.pbr {
  --pbr-tekst: var(--ink, #25382d);
  --pbr-zacht: var(--muted, #586351);
  --pbr-accent: var(--forest, #17352c);
  --pbr-accent-tekst: var(--paper, #f2efe5);
  --pbr-veld: #e8e9de;
  --pbr-lijn: #a9ad9a;
  --pbr-fout: var(--wine, #663836);
  --pbr-klaar: #e2e6d6;
  color: var(--pbr-tekst);
  font: inherit;
  max-width: 640px;
}
.pbr [hidden] { display: none !important; }
.pbr * { box-sizing: border-box; }
.pbr-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 20px; }
.pbr label { display: block; font-size: 14px; margin: 0 0 18px; }
.pbr input, .pbr select, .pbr textarea {
  display: block; width: 100%; min-height: 50px; margin-top: 7px; padding: 12px;
  border: 0; border-bottom: 1px solid var(--pbr-lijn); border-radius: 0;
  background: var(--pbr-veld); color: var(--pbr-tekst); font: inherit; font-size: 16px;
}
.pbr textarea { min-height: 90px; resize: vertical; }
.pbr input:focus-visible, .pbr select:focus-visible, .pbr textarea:focus-visible, .pbr button:focus-visible { outline: 2px solid var(--pbr-accent); outline-offset: 3px; }
.pbr-uitleg { font-size: 13px; color: var(--pbr-zacht); margin: -8px 0 18px; }
.pbr-tijden { min-height: 50px; margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--pbr-zacht); }
.pbr-tijden a { color: var(--pbr-tekst); text-decoration: underline; }
.pbr-kop { margin: 0 0 10px; color: var(--pbr-tekst); font-size: 14px; }
.pbr-knoppen { display: flex; flex-wrap: wrap; gap: 9px; }
.pbr-tijd {
  min-width: 74px; min-height: 46px; padding: 10px 14px; cursor: pointer;
  background: transparent; border: 1px solid var(--pbr-accent); color: var(--pbr-accent); font: inherit; font-size: 15px;
}
.pbr-tijd:hover, .pbr-tijd[aria-pressed="true"] { background: var(--pbr-accent); color: var(--pbr-accent-tekst); }
.pbr-pot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }
.pbr-verstuur {
  display: block; width: 100%; min-height: 54px; padding: 15px 22px; cursor: pointer;
  background: var(--pbr-accent); color: var(--pbr-accent-tekst); border: 1px solid var(--pbr-accent); font: inherit; font-size: 15px;
}
.pbr-verstuur[disabled] { opacity: .65; cursor: progress; }
.pbr-klein { font-size: 13px; color: var(--pbr-zacht); margin: 12px 0 0; }
.pbr-fout { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--pbr-fout); background: #efe2dc; color: var(--pbr-fout); font-size: 15px; }
.pbr-fout a { color: inherit; }
.pbr-klaar { background: var(--pbr-klaar); padding: 26px; }
.pbr-klaar h3 { margin: 0 0 12px; }
.pbr-klaar a { color: var(--pbr-tekst); text-decoration: underline; }

.pbr-cutoff{font-size:14px;line-height:1.7;padding:14px 16px;background:var(--pbr-veld);border-left:3px solid var(--pbr-accent);margin:0 0 22px}

#tafel { scroll-margin-top: 110px; }