/* Aanvullingen op boeken-2027.css voor wat het ontwerp als platte vlakken toonde en de live pagina als echt formulierveld nodig heeft. */
.pg input.inp,.pg select.inp,.pg textarea.inp{width:100%;font:inherit;color:inherit;margin:0}
.pg input.inp::placeholder,.pg textarea.inp::placeholder{color:var(--sub);opacity:1}
.pg select.inp{appearance:none;-webkit-appearance:none;padding-right:42px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center}
.pg textarea.inp{min-height:96px;resize:vertical;align-items:flex-start;display:block}
.pg .inp.fill{background-color:#faf7f4}
.pg .inp.tel{padding:0;gap:0;overflow:hidden;align-items:stretch}
.pg .inp.tel select{appearance:none;-webkit-appearance:none;border:0;border-right:1px solid var(--bd);background:#faf7f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;padding:0 30px 0 16px;font:inherit;color:inherit;max-width:46%;min-height:48px}
.pg .inp.tel input{border:0;padding:12px 16px;font:inherit;color:inherit;flex:1;min-width:0;background:transparent;outline:0}
.pg .inp:focus-within{border-color:var(--acc)}
.pg .fld.err .inp.tel{border:1.5px solid #c8283f;box-shadow:0 0 0 3px #fdecee}
.pg a.btn,.pg a.btn-o{cursor:pointer}
.pg .btn[disabled]{opacity:.45;cursor:not-allowed}
.pg .st a{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.pg .stay .kt{display:none}
@media (max-width:760px){.pg .stay .lg{display:none}.pg .stay .kt{display:inline}.pg .sum.eerst{order:-1}.pg .sum.alleen-desktop{display:none}}
/* Stap 2: aanvinkbare rijen en tariefkaarten zijn echte formuliervelden; het ontwerp tekent het vakje zelf (.cb / .rd). */
.pg [hidden]{display:none!important}
.pg label.ln,.pg label.tf{position:relative;cursor:pointer}
.pg .ln>input,.pg .tf>input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.pg .ln:has(>input:focus-visible),.pg .tf:has(>input:focus-visible){outline:2px solid var(--acc);outline-offset:-2px}
.ex .ln .qty button{width:40px;height:40px;border-radius:50%;border:1.5px solid #ddd5d1;background:#fff;display:grid;place-items:center;font:900 18px/1 Lato,Arial,sans-serif;color:var(--ink);padding:0}
.ex .ln .qty button:hover{border-color:var(--ink)}
.ex .ln .tx .note{display:block}
.pg .lnk-knop{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:var(--deep);font-weight:700;text-decoration:underline}
.pg .ln .cb svg{display:none}
.pg .ln .cb.on svg{display:block}
/* Popup (annuleringsbeleid): het ontwerp tekent de donkere laag op het canvas, live ligt hij boven de pagina. */
.pg .dim.live{position:fixed;z-index:50}
.pg .dim.live .modal.md2{max-height:90vh}
@media (max-width:760px){.pg .dim.live{align-items:flex-end;padding:0}}
/* Stap 1: de  ontwerpvlakken zijn live knoppen en velden. */
.pg .stp button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--bd);display:grid;place-items:center;font:700 18px Lato,Arial,sans-serif;background:#fff;color:var(--ink);padding:0}
.pg .stp button:hover:not(:disabled){border-color:var(--ink)}
.pg .stp button:disabled{opacity:.4;cursor:not-allowed}
.pg .pers.k2 .stp button{width:34px;height:34px}
.pg .pbox.err{border-color:#c8283f;box-shadow:0 0 0 3px #fdecee}
.pg .d.sa.solo{background:transparent}
.pg .d.ev::before{background:linear-gradient(135deg,#fff 50%,#e3dbd6 50%);border:1.5px solid #ddd5d1}
.pg .leg i.l-ev{background:linear-gradient(135deg,#fff 50%,#e3dbd6 50%)}
.pg .d{outline-offset:-2px}
.pg .d:focus-visible{outline:2px solid var(--acc)}
.pg .d.bk{cursor:default}
.pg .sugg{display:flex;flex-wrap:wrap;gap:8px}
.pg .rm:not(.off) .ph{cursor:pointer}
.pg button.pick{cursor:pointer}
.pg .pick[aria-disabled]{cursor:not-allowed}
.pg .rooms .skel{height:190px}
.pg .cal-btn:disabled{cursor:not-allowed}
.pg .rm .pills{display:flex;flex-wrap:wrap;gap:8px}
.pg .rm .notice{font-size:14px;padding:11px 14px}
.pg .rm .in .meta svg{flex:none}

/* Totaal in woorden (Prijs op aanvraag): de uitleg en het totaal onder elkaar i.p.v. in een smalle kolom naast elkaar. */
.pg .bk-total:has(strong.txt){flex-direction:column;align-items:flex-start;gap:6px}
.pg .bk-total strong.txt{font-size:22px;line-height:1.15;white-space:normal}

/* Meldingen en uitleg in het blok "Gasten in deze kamer" over de hele breedte i.p.v. in de eerste kolom van het raster. */
.pg .pers>.notice,.pg .pers>.hint,.pg .pers>.age-panel{grid-column:1/-1}

/* Stap 4: tussen de melding (of de uitleg) en het blok met kosten ter plaatse, en tussen twee van die blokken, staat ruimte. */
.pg .notice+.tp-box,.pg .lead+.tp-box,.pg .plan+.tp-box,.pg .plan3+.tp-box,.pg .tp-tot+.tp-box{margin-top:16px}
.pg .tp-box+.tp-box{margin-top:12px}

/* Stap 4: een bedrag ("€ 90,00") breekt nooit af en blijft rechts uitgelijnd; de toelichting links krijgt de overblijvende breedte. */
.pg .tp-r>span:last-child,.pg .tp-e>span:last-child{flex:none;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.pg .tp-r>span:first-child,.pg .tp-e>span:first-child{flex:1 1 auto;min-width:0}

/* De borg in de samenvatting: eigen regel, groen omdat de gast ze terugkrijgt. */
.pg .bk-later.borg{margin-top:8px}
.pg .bk-later.borg .pi{background:#e3f5ea;color:#14532d}
.pg .bk-later.borg strong{color:#14532d}

/* Stap 2, vier tegels bovenaan: het bedrag staat als één blok onder het label, rechtop (geen cursief) en zonder afgebroken "gekozen". */
.pg.ex .sumline .sv{display:block;font:inherit}
.pg.ex .sumline .sv em{font-style:normal}
.pg.ex .sumline .sv:has(em[data-som-gekozen]){white-space:nowrap}