/* Recras functional integration — scoped to the existing booking slot. */
/* Reserve the measured first-step calendar height before Recras hydrates. */
#o19-campingvisite-kalender .b-live-booking,
.o17-module-frame[data-recras-calendar="12"] .b-live-booking,
.np-recras-wrap .b-live-booking{min-height:386.6167px}
@media(min-width:900px){
  #o19-campingvisite-kalender .b-live-booking,
  .o17-module-frame[data-recras-calendar="12"] .b-live-booking,
  .np-recras-wrap .b-live-booking{min-height:394.25px}
}
.b-live-booking iframe{width:100%;height:auto;min-height:0;border:0}
.b-live-booking .bookprocess{
  --bp-color-dark:#A24736;
  --bp-color-middle:#EFE2D0;
  --bp-color-light:#FFFCF7;
  --bp-color-text:#38332F;
  --bp-color-text-alt:#6D625A;
  --bp-color-background:#FFFCF7;
  width:100%;
  max-width:760px;
  color:#38332F;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
}
.b-live-booking .bookprocess *{box-sizing:border-box}
.b-live-booking .bookprocess .bpMainForm{width:100%;font-family:'DM Sans',Arial,sans-serif}
.b-live-booking .bookprocess :where(button,input,select,textarea){font:inherit}
.b-live-booking .bookprocess :where(input,select,textarea){max-width:100%;border:1px solid #D8CCBE;border-radius:4px;background:#FFFCF7;color:#38332F;padding:9px 10px}
.b-live-booking .bookprocess button{min-height:42px;border:1px solid #A24736;border-radius:4px;background:#A24736;color:#fff;padding:8px 14px;font-weight:700;cursor:pointer}
.b-live-booking .bookprocess button:disabled{opacity:.48;cursor:not-allowed}
.b-live-booking .bookprocess button:not(:disabled):hover{filter:brightness(.95)}
.b-live-booking .bookprocess :is(button.primary,button.nextStep,a.nextStep){background:#A24736!important;border-color:#A24736!important;color:#fff!important;--bp-color-text:#fff}

/* Recras calendar: let it use the available card width instead of browser-default sizing. */
.b-live-booking .react-datepicker{width:min(100%,420px);border:1px solid #D8CCBE;border-radius:5px;background:#FFFCF7;color:#38332F;font-family:'DM Sans',Arial,sans-serif;box-shadow:none}
.b-live-booking .react-datepicker__month-container{float:none;width:100%}
.b-live-booking .react-datepicker__header{padding:14px 12px 9px;background:#F7F0E5;border-bottom:1px solid #D8CCBE;border-radius:5px 5px 0 0}
.b-live-booking .react-datepicker__current-month{font-family:Georgia,'Times New Roman',serif;font-size:21px;font-weight:400;color:#38332F;text-transform:none}
.b-live-booking .react-datepicker__day-names,
.b-live-booking .react-datepicker__week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.b-live-booking .react-datepicker__day-name,
.b-live-booking .react-datepicker__day{width:auto;min-width:0;margin:0;line-height:36px;text-align:center;border-radius:3px}
.b-live-booking .react-datepicker__day-name{font-size:12px;font-weight:700;color:#6D625A}
.b-live-booking .react-datepicker__month{margin:10px 12px 13px}
.b-live-booking .react-datepicker__day{font-size:14px;color:#38332F}
.b-live-booking .react-datepicker__day:hover{background:#EFE2D0}
.b-live-booking .react-datepicker__day--selected,
.b-live-booking .react-datepicker__day--keyboard-selected{background:#A24736;color:#fff}
.b-live-booking .react-datepicker__day--disabled,
.b-live-booking .react-datepicker__day--outside-month{color:#B8AEA4}
.b-live-booking .react-datepicker__navigation{top:13px}

/* Eigenaar 11-10: "powerd by recras mag eraf". */
.b-live-booking .bookprocess .bpFooter{display:none!important}
.b-live-booking .bookprocess .bpButtonWrapper{margin-top:16px}

@media(min-width:760px){
  .b-live-booking .bookprocess{font-size:16px}
  .b-live-booking .react-datepicker{width:430px}
}
/* Recras-overzicht (eigenaar 11-10: "overzicht is wel wat gekkig op de desktop"): eerst het overzicht, dan Volgende. */
.b-live-booking .bookprocess .version2{display:flex;flex-direction:column}
.b-live-booking .bookprocess .version2>aside{order:1}
.b-live-booking .bookprocess .version2>.bpButtonWrapper{order:2}
.b-live-booking .bookprocess .recapWrapper{margin-top:20px;padding:14px 16px 12px;border:1px solid #D8CCBE;border-radius:5px;background:#FFFCF7}
.b-live-booking .bookprocess .recapWrapper h2{margin:0 0 4px;font-size:22px;line-height:1.2}
.b-live-booking .bookprocess .recapEle{margin:0}
.b-live-booking .bookprocess .recapEle dt{margin:10px 0 2px;padding-top:10px;border-top:1px solid #EFE2D0;color:#6D625A;font-size:13px;font-weight:700;line-height:1.3}
.b-live-booking .bookprocess .recapEle dt:first-child{margin-top:4px;padding-top:0;border-top:0}
.b-live-booking .bookprocess .recapEle dd{margin:0}
.b-live-booking .bookprocess .recapWrapper table{width:100%;border-collapse:collapse;font-size:inherit}
.b-live-booking .bookprocess .recapWrapper :is(th,td){padding:3px 0;text-align:left;vertical-align:top;font-weight:400}
.b-live-booking .bookprocess .recapWrapper thead th{color:#6D625A;font-size:13px}
.b-live-booking .bookprocess .recapWrapper :is(th,td).number{width:1%;padding-left:16px;text-align:right;white-space:nowrap}
.b-live-booking .bookprocess .recapWrapper tfoot th{padding-top:6px;border-top:1px solid #D8CCBE;font-weight:700}
.b-live-booking .bookprocess .recapWrapper #programma :is(th,td):first-child{width:1%;padding-right:16px;white-space:nowrap}
.b-live-booking .bookprocess .recapWrapper #programma :is(th,td).number{padding:3px 16px 3px 0;text-align:left}

/* Recras product_with_time marked as display-blocks: present start-time checkboxes as real time buttons. */
.b-live-booking .bookprocess .display-single-quantity.display-blocks .subgroupWrapper{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .numberWrapper{
  flex:0 0 100%;
  max-width:320px;
  margin-bottom:4px;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper{
  position:relative;
  flex:0 1 92px;
  margin:0;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper>input[type="checkbox"]{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper>label{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  width:100%;
  padding:8px 10px;
  border:1px solid #557A4B;
  border-radius:4px;
  background:#EEF3EA;
  color:#38332F;
  font-size:14px;
  font-weight:700;
  line-height:1;
  text-align:center;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper>label:hover{
  background:#DDE8D8;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper>input[type="checkbox"]:focus-visible+label{
  outline:2px solid #A24736;
  outline-offset:2px;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper>input[type="checkbox"]:checked+label{
  border-color:#557A4B;
  background:#557A4B;
  color:#fff;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper>input[type="checkbox"]:disabled+label{
  border-color:#D8CCBE;
  background:#EEE9E2;
  color:#9B9188;
  cursor:not-allowed;
}

/* Recras extra-info trigger: keep the explanation, lose the giant red question-mark button. */
.b-live-booking .bookprocess .extraInfoWrapper{
  display:inline-flex;
  align-items:center;
  margin:4px 0 8px;
}
.b-live-booking .bookprocess button.extraInfoOpen{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  min-width:26px;
  height:26px;
  min-height:26px;
  padding:0!important;
  border:1px solid #A24736!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#A24736!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1!important;
}
.b-live-booking .bookprocess button.extraInfoOpen:hover{
  background:#EFE2D0!important;
  filter:none!important;
}
.b-live-booking .bookprocess dialog{
  max-width:min(520px,calc(100vw - 32px));
  border:1px solid #D8CCBE;
  border-radius:6px;
  background:#FFFCF7;
  color:#38332F;
  padding:24px;
  box-shadow:0 14px 44px rgba(56,51,47,.18);
}
.b-live-booking .bookprocess dialog::backdrop{background:rgba(56,51,47,.35)}
.b-live-booking .bookprocess dialog .closeSmall{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  min-width:30px;
  height:30px;
  min-height:30px;
  padding:0;
  border-radius:50%;
}

@media(max-width:519px){
  .b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper{flex:1 1 calc(33.333% - 8px)}
}

/* Final time-slot treatment: Recras already marks these as display-blocks. */
.b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper>label{
  border-color:#7F9E78;
  background:#8FB49A;
  color:#203126;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper>label:hover{
  border-color:#557A4B;
  background:#7EA88B;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper>input[type="checkbox"]:checked+label{
  border-color:#557A4B;
  background:#557A4B;
  color:#fff;
}

/* Recras extra-info is information, not a mystery question. */
.b-live-booking .bookprocess button.extraInfoOpen{
  font-size:0!important;
}
.b-live-booking .bookprocess button.extraInfoOpen::before{
  content:'i';
  display:block;
  font-family:Georgia,'Times New Roman',serif;
  font-size:15px;
  font-style:italic;
  font-weight:700;
  line-height:1;
}

/* Mobile/amount layout correction for clickable start times. */
.b-live-booking .bookprocess .display-single-quantity.display-blocks .numberWrapper{
  flex:0 0 100%!important;
  max-width:none!important;
  width:100%!important;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .numberWrapper>input[type="number"]{
  width:min(100%,320px)!important;
  max-width:320px!important;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .numberWrapper button{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
  border-radius:50%!important;
  border:1px solid #7F9E78!important;
  background:#8FB49A!important;
  color:#203126!important;
  line-height:1!important;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .numberWrapper button:hover{
  background:#7EA88B!important;
  filter:none!important;
}
@media(max-width:519px){
  .b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper{
    flex:1 1 calc(33.333% - 8px)!important;
    min-width:0!important;
  }
}

/* Exact Recras product-with-time structure: amount row, then clickable times. */
.b-live-booking .bookprocess .display-single-quantity.display-blocks>.groupWrapper>.subgroupWrapper.auto-amount{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  align-items:end!important;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks>.groupWrapper>.subgroupWrapper.auto-amount>.numberWrapper{
  grid-column:1/-1!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 4px!important;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .numberWithPlusMinus{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  width:max-content!important;
  max-width:100%!important;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .numberWithPlusMinus>input[type="number"]{
  order:2!important;
  width:68px!important;
  min-width:68px!important;
  max-width:68px!important;
  height:40px!important;
  padding:7px 8px!important;
  text-align:center!important;
  appearance:textfield;
  -moz-appearance:textfield;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .numberWithPlusMinus>input[type="number"]::-webkit-inner-spin-button,
.b-live-booking .bookprocess .display-single-quantity.display-blocks .numberWithPlusMinus>input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .numberWithPlusMinus>button:first-of-type{order:1!important}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .numberWithPlusMinus>button:last-of-type{order:3!important}
.b-live-booking .bookprocess .display-single-quantity.display-blocks>.groupWrapper>.subgroupWrapper.auto-amount>.checkboxWrapper{
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
}
@media(min-width:700px){
  .b-live-booking .bookprocess .display-single-quantity.display-blocks>.groupWrapper>.subgroupWrapper.auto-amount{
    grid-template-columns:repeat(5,minmax(82px,1fr))!important;
  }
}

/* Keep Recras product cards inside the booking column; product images must not dictate viewport width. */
.b-live-booking .bookprocess .display-single-quantity.display-blocks,
.b-live-booking .bookprocess .display-single-quantity.display-blocks>.groupWrapper{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks .labelBookprocessImage{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:cover!important;
}

/* Firefox fieldsets default to min-width:min-content; that forced Recras product cards to ~600px on mobile. */
.b-live-booking .bookprocess fieldset,
.b-live-booking .bookprocess .recras-required{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
}

/* Compact scale for ALL Recras booking flows. The functional React DOM stays untouched. */
.b-live-booking .bookprocess{
  font-size:14px;
  line-height:1.4;
}
.b-live-booking .bookprocess fieldset{
  padding:10px!important;
  margin:0 0 12px!important;
}
.b-live-booking .bookprocess :where(.groupWrapper,.subgroupWrapper){
  min-width:0!important;
  max-width:100%!important;
}
.b-live-booking .bookprocess .groupWrapper{
  margin:0 0 14px!important;
}
.b-live-booking .bookprocess .groupWrapper>label,
.b-live-booking .bookprocess .numberWrapper>label{
  display:block;
  margin:0 0 5px!important;
  font-size:14px!important;
  line-height:1.3!important;
  font-weight:700!important;
}
.b-live-booking .bookprocess .price-information{
  margin:2px 0 6px!important;
  font-size:13px!important;
  line-height:1.25!important;
}

/* Product imagery: supporting information, not a full-width hero. */
.b-live-booking .bookprocess .labelBookprocessImage,
.b-live-booking .bookprocess .labelImage{
  display:block!important;
  width:auto!important;
  max-width:min(100%,260px)!important;
  max-height:180px!important;
  height:auto!important;
  margin:6px 0 8px!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:4px!important;
}

/* Every Recras amount selector gets the same compact control: minus, value, plus. */
.b-live-booking .bookprocess .numberWrapper{
  width:auto!important;
  max-width:100%!important;
  margin:0 0 10px!important;
}
.b-live-booking .bookprocess .numberWithPlusMinus{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  width:max-content!important;
  max-width:100%!important;
}
.b-live-booking .bookprocess .numberWithPlusMinus>input[type="number"]{
  order:2!important;
  box-sizing:border-box!important;
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  height:34px!important;
  min-height:34px!important;
  padding:4px 6px!important;
  text-align:center!important;
  font-size:14px!important;
  line-height:1!important;
  appearance:textfield;
  -moz-appearance:textfield;
}
.b-live-booking .bookprocess .numberWithPlusMinus>input[type="number"]::-webkit-inner-spin-button,
.b-live-booking .bookprocess .numberWithPlusMinus>input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.b-live-booking .bookprocess .numberWithPlusMinus>button{
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  border:1px solid #7F9E78!important;
  border-radius:50%!important;
  background:#8FB49A!important;
  color:#203126!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1!important;
}
.b-live-booking .bookprocess .numberWithPlusMinus>button:first-of-type{order:1!important}
.b-live-booking .bookprocess .numberWithPlusMinus>button:last-of-type{order:3!important}
.b-live-booking .bookprocess .numberWithPlusMinus>button:hover{background:#7EA88B!important;filter:none!important}

/* Form controls elsewhere in the booking process stay modest too. */
.b-live-booking .bookprocess :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  min-height:34px!important;
  padding:5px 7px!important;
  font-size:14px!important;
}
.b-live-booking .bookprocess .extraInfoWrapper{margin:2px 0 5px!important}
.b-live-booking .bookprocess button.extraInfoOpen{
  width:22px!important;
  min-width:22px!important;
  height:22px!important;
  min-height:22px!important;
}
.b-live-booking .bookprocess button.extraInfoOpen::before{font-size:13px!important}

/* Clickable start times: compact, still easy to tap. */
.b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper>label{
  min-height:36px!important;
  padding:6px 8px!important;
  font-size:13px!important;
}
.b-live-booking .bookprocess .display-single-quantity.display-blocks>.groupWrapper>.subgroupWrapper.auto-amount{
  gap:6px!important;
}

@media(max-width:519px){
  .b-live-booking .bookprocess{
    font-size:13px;
    line-height:1.35;
  }
  .b-live-booking .bookprocess fieldset{
    padding:8px!important;
    margin-bottom:10px!important;
  }
  .b-live-booking .bookprocess .groupWrapper{
    margin-bottom:11px!important;
  }
  .b-live-booking .bookprocess .groupWrapper>label,
  .b-live-booking .bookprocess .numberWrapper>label{
    font-size:13px!important;
    margin-bottom:4px!important;
  }
  .b-live-booking .bookprocess .price-information{font-size:12px!important;margin-bottom:5px!important}
  .b-live-booking .bookprocess .labelBookprocessImage,
  .b-live-booking .bookprocess .labelImage{
    max-width:190px!important;
    max-height:128px!important;
    margin:5px 0 6px!important;
  }
  .b-live-booking .bookprocess .numberWithPlusMinus>input[type="number"]{
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    height:32px!important;
    min-height:32px!important;
    font-size:13px!important;
  }
  .b-live-booking .bookprocess .numberWithPlusMinus>button{
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
    min-height:30px!important;
    font-size:13px!important;
  }
  .b-live-booking .bookprocess :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    min-height:32px!important;
    font-size:13px!important;
  }
  .b-live-booking .bookprocess .display-single-quantity.display-blocks .checkboxWrapper>label{
    min-height:34px!important;
    padding:5px 6px!important;
    font-size:12px!important;
  }
}

/* Product images use one compact visual scale. The main party product matches the adult-ticket image. */
.b-live-booking .bookprocess .display-single-quantity.display-blocks .labelBookprocessImage{
  width:190px!important;
  max-width:190px!important;
  height:127px!important;
  max-height:127px!important;
  object-fit:cover!important;
}

/* B29: keep the official modules within their own booking columns. */
.b-live-booking .bookprocess[data-id="12"] .display-calendar .react-datepicker{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.b-live-booking .bookprocess[data-id="66"] .labelBookprocessImage{
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
}
@media(min-width:520px){
  #o19-campingvisite-kalender .b-live-booking{width:min(100%,454px)!important}
  #o19-campingvisite-kalender .b-live-booking .bookprocess,
  #o19-campingvisite-kalender .b-live-booking .bpMainForm{width:100%!important;max-width:100%!important}
  #o19-campingvisite-kalender .b-live-booking .display-calendar .react-datepicker{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
}
@media(min-width:1100px){
  .o22g-rechts-kolom #o19-campingvisite-kalender{margin-top:16px}
}
@media(max-width:519px){
  #o19-campingvisite-kalender .b-live-booking{width:calc(100% - 40px)!important;margin-left:20px!important;margin-right:20px!important}
  .su-information-form .b-live-booking .bookprocess fieldset>div{margin-bottom:16px!important}
  .su-information-form .b-live-booking .bookprocess fieldset>div>label{display:block!important;margin-bottom:8px!important}
}

/* Make the main option groups read as separate sections instead of one continuous list. */
.b-live-booking .bookprocess .display-lines.show-price.groupWrapper,
.b-live-booking .bookprocess .display-single-quantity.display-blocks.display-dropdown.groupWrapper{
  margin-top:26px!important;
  padding-top:16px!important;
  border-top:1px solid #D8CCBE!important;
}
.b-live-booking .bookprocess .display-lines.show-price.groupWrapper>label,
.b-live-booking .bookprocess .display-single-quantity.display-blocks.display-dropdown.groupWrapper>label{
  margin-bottom:10px!important;
  font-size:15px!important;
  line-height:1.25!important;
}
@media(max-width:519px){
  .b-live-booking .bookprocess .display-lines.show-price.groupWrapper,
  .b-live-booking .bookprocess .display-single-quantity.display-blocks.display-dropdown.groupWrapper{
    margin-top:22px!important;
    padding-top:14px!important;
  }
  .b-live-booking .bookprocess .display-lines.show-price.groupWrapper>label,
  .b-live-booking .bookprocess .display-single-quantity.display-blocks.display-dropdown.groupWrapper>label{
    margin-bottom:8px!important;
    font-size:14px!important;
  }
}

/* Actual separation between top-level option sections in the Recras fieldset. */
.b-live-booking .bookprocess fieldset>div:has(>.display-lines.show-price.groupWrapper),
.b-live-booking .bookprocess fieldset>div:has(>.display-single-quantity.display-blocks.display-dropdown.groupWrapper){
  margin-top:24px!important;
  padding-top:14px!important;
  border-top:1px solid #D8CCBE!important;
}
@media(max-width:519px){
  .b-live-booking .bookprocess fieldset>div:has(>.display-lines.show-price.groupWrapper),
  .b-live-booking .bookprocess fieldset>div:has(>.display-single-quantity.display-blocks.display-dropdown.groupWrapper){
    margin-top:20px!important;
    padding-top:12px!important;
  }
}

/* Correct top-level Recras wrapper selectors for section separation. */
.b-live-booking .bookprocess fieldset>div:has(>.subgroupWrapper.display-lines.show-price),
.b-live-booking .bookprocess fieldset>div:has(>.subgroupWrapper.display-single-quantity.display-blocks.display-dropdown){
  margin-top:24px!important;
  padding-top:14px!important;
  border-top:1px solid #D8CCBE!important;
}
.b-live-booking .bookprocess fieldset>div:has(>.subgroupWrapper.display-lines.show-price)>label,
.b-live-booking .bookprocess fieldset>div:has(>.subgroupWrapper.display-single-quantity.display-blocks.display-dropdown)>label{
  display:block!important;
  margin:0 0 10px!important;
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:700!important;
  color:#38332F!important;
}

/* B14: desktop spacing inside the official information form, without touching its fields. */
@media(min-width:900px){
  /* B30: the party calendar is 430px; keep its single frame snug around it. */
  #su-pony .b-live-booking .bookprocess,
  #su-boerenknecht .b-live-booking .bookprocess,
  #su-speelfeestje .b-live-booking .bookprocess{width:min(100%,454px)!important;max-width:100%!important}
  .np-recras-wrap .b-live-booking .bookprocess,
  .np-recras-wrap .b-live-booking .bookprocess .bpMainForm,
  .np-recras-wrap .b-live-booking .bookprocess fieldset{width:470px!important;max-width:100%!important}
  .np-recras-wrap .b-live-booking .bookprocess .display-calendar{width:max-content!important;max-width:100%!important}
  .np-recras-wrap .b-live-booking .bookprocess[data-id="12"] .display-calendar{width:100%!important}
  .b-live-booking .bookprocess[data-id="66"] .subgroupWrapper.recras-product_with_time{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 24px!important}
  .b-live-booking .bookprocess[data-id="66"] .subgroupWrapper.recras-product_with_time>.groupWrapper{width:auto!important;min-width:0!important;margin:0!important}
  .su-information-form .b-live-booking .bookprocess fieldset>div{margin-bottom:18px!important}
  .su-information-form .b-live-booking .bookprocess fieldset>div:last-child{margin-bottom:0!important}
  .su-information-form .b-live-booking .bookprocess fieldset>div>label{display:block!important;margin:0 0 6px!important}
  .su-information-form .b-live-booking .bookprocess .subgroupWrapper.recras-choice_single{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px 12px!important}
  .su-information-form .b-live-booking .bookprocess .subgroupWrapper.recras-choice_single>.radioWrapper{width:auto!important;min-width:0!important;margin:0!important}
  .su-information-form .b-live-booking .bookprocess .subgroupWrapper.recras-choice_single>.radioWrapper>label{width:auto!important;max-width:100%!important}
  .su-information-form .b-live-booking .bookprocess .bpButtonWrapper,
  .su-information-form .b-live-booking .bookprocess .bpFooter{padding-left:10px!important}
  .su-information-form>p:has(>small>a[href^="mailto:"]){position:relative!important;left:10px!important}
}

/* B31: keep the official day-card name, price and help on one line, with
   the provider's time menu beside its quantity control. */
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper{
  display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;
}
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper>label,
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper>.price-information,
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper>.price-information>div,
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper>.extraInfoWrapper{
  width:auto;margin:0;
}
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper>.subgroupWrapper{flex:1 0 100%}
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper>.subgroupWrapper.auto-amount{
  display:flex!important;flex-wrap:wrap;align-items:flex-end;gap:8px 16px!important;
}
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper>.subgroupWrapper.auto-amount>.numberWrapper{
  flex:0 0 auto!important;width:auto!important;grid-column:auto!important;margin:0!important;
}
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper>.subgroupWrapper.auto-amount>.selectWrapper{
  order:2;flex:0 0 auto;width:auto!important;margin:0 0 3px!important;
}
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper>.subgroupWrapper.auto-amount>.selectWrapper>label{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
/* Dagkaart met productfoto (after school ticket): ook daar prijs en (i) op de regel van de naam, de foto eronder. */
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper>img.labelBookprocessImage{order:1;margin:4px 0 0}
.b-live-booking .bookprocess[data-id="12"] .subgroupWrapper.display-single-quantity>.groupWrapper>.subgroupWrapper{order:2}
@media(max-width:519px){
  .b-live-booking .bookprocess fieldset>div:has(>.subgroupWrapper.display-lines.show-price),
  .b-live-booking .bookprocess fieldset>div:has(>.subgroupWrapper.display-single-quantity.display-blocks.display-dropdown){
    margin-top:20px!important;
    padding-top:12px!important;
  }
  .b-live-booking .bookprocess fieldset>div:has(>.subgroupWrapper.display-lines.show-price)>label,
  .b-live-booking .bookprocess fieldset>div:has(>.subgroupWrapper.display-single-quantity.display-blocks.display-dropdown)>label{
    margin-bottom:8px!important;
    font-size:14px!important;
  }
}

/* B42: let price and help follow the last word of the product name. Inline
   formatting wraps long names naturally; the controls and image stay below. */
.b-live-booking .bookprocess .groupWrapper:has(>.price-information):has(>.extraInfoWrapper){
  display:block!important;
}
.b-live-booking .bookprocess .groupWrapper:has(>.price-information):has(>.extraInfoWrapper)>label{
  display:inline!important;width:auto!important;margin:0!important;
}
.b-live-booking .bookprocess .groupWrapper:has(>.price-information):has(>.extraInfoWrapper)>.price-information{
  display:inline-block!important;width:auto!important;margin:0 0 0 10px!important;white-space:nowrap!important;vertical-align:middle!important;
}
.b-live-booking .bookprocess .groupWrapper:has(>.price-information):has(>.extraInfoWrapper)>.price-information>div{
  display:inline!important;width:auto!important;margin:0!important;
}
.b-live-booking .bookprocess .groupWrapper:has(>.price-information):has(>.extraInfoWrapper)>.extraInfoWrapper{
  display:inline-flex!important;width:22px!important;margin:0 0 0 10px!important;vertical-align:middle!important;
}
.b-live-booking .bookprocess .groupWrapper:has(>.price-information):has(>.extraInfoWrapper)>:is(img,.subgroupWrapper){
  display:block!important;
}
/* Some Recras products insert their photo before the help control in the
   DOM. Reorder only those children so the help stays beside the price. */
.b-live-booking .bookprocess .groupWrapper:has(>img):has(>.price-information):has(>.extraInfoWrapper){
  display:flex!important;flex-wrap:wrap!important;align-items:flex-end!important;column-gap:10px!important;
}
.b-live-booking .bookprocess .groupWrapper:has(>img):has(>.price-information):has(>.extraInfoWrapper)>label{
  flex:0 1 auto!important;min-width:0!important;max-width:calc(100% - 110px)!important;
}
.b-live-booking .bookprocess .groupWrapper:has(>img):has(>.price-information):has(>.extraInfoWrapper)>.price-information{
  flex:0 0 auto!important;margin:0!important;
}
.b-live-booking .bookprocess .groupWrapper:has(>img):has(>.price-information):has(>.extraInfoWrapper)>.extraInfoWrapper{
  flex:0 0 22px!important;margin:0!important;
}
.b-live-booking .bookprocess .groupWrapper:has(>img):has(>.price-information):has(>.extraInfoWrapper)>img{
  order:1!important;flex:0 0 auto!important;
}
.b-live-booking .bookprocess .groupWrapper:has(>img):has(>.price-information):has(>.extraInfoWrapper)>.subgroupWrapper{
  order:2!important;flex:1 0 100%!important;
}
@media(min-width:900px){
  /* The Van hand tot schoot cards are only about 175px wide in two columns. */
  .b-live-booking .bookprocess[data-id="66"] .groupWrapper:has(>img):has(>.price-information):has(>.extraInfoWrapper)>label{
    flex:0 0 100%!important;max-width:100%!important;
  }
}

/* Package cards carry their price in the name instead of a separate price node. */
body#steenuil-site#steenuil-site#steenuil-site#steenuil-site#steenuil-site#steenuil-site#steenuil-site main .b-live-booking .recras-package>.groupWrapper{
  grid-template-areas:'foto rondje naam info'!important;
  grid-template-columns:112px 22px minmax(0,1fr) 22px!important;
  align-items:start!important;
}
body#steenuil-site#steenuil-site#steenuil-site#steenuil-site#steenuil-site#steenuil-site#steenuil-site main .b-live-booking .recras-package>.groupWrapper>.extraInfoWrapper{
  grid-area:info!important;width:22px!important;margin:0!important;
}

/* Recras personal-data fields: labels above full-width controls on a phone. */
@media(max-width:519px){
  .b-live-booking .bookprocess fieldset>div:has(>label):has(>:is(input,select,textarea))>label{
    display:block!important;width:100%!important;margin:0 0 6px!important;
  }
  .b-live-booking .bookprocess fieldset>div:has(>label)>:is(input,select,textarea){
    display:block!important;width:100%!important;max-width:100%!important;
  }
}
.b-live-booking .bookprocess button.btnApply{
  color:#fff!important;background:#A24736!important;border-color:#A24736!important;
}