/* Recras boekproces in huisstijl Solexverhuur Woudenberg
   Gebaseerd op de code van de klant (arrangement_aanvragen_popup.txt), omgezet naar ACSS-tokens.
   Alleen binnen de pop-up (.recras-popup), zodat /boeken/ en de bestaande boekprocessen niet veranderen.
   Deze classes maakt Recras zelf aan (niet aan Etch-blocks gekoppeld), daarom in een stylesheet.
   De pop-up zelf (.recras-popup) staat in de Style Manager. */

.recras-popup .bookprocess .version2 {
  --recras-tap: calc(var(--icon-size) + var(--space-xs));
  --bp-col-dark: var(--primary) !important;
  --bp-col-middle: var(--primary-hover) !important;
  --bp-col-light: var(--primary-light) !important;
  --bp-color-text: var(--white) !important;
  --bp-color-text-alt: var(--text-dark) !important;
  --bp-color-background: transparent !important;
  font-family: var(--text-font-family);
  color: var(--text-dark);
  background: var(--base-ultra-light);
  border-radius: calc(var(--radius) * 2);
  padding: var(--space-m) var(--space-s) var(--space-s);
  inline-size: 100%;
  max-inline-size: var(--width-60);
  margin-inline: auto;
}
.recras-popup .bookprocess .version2 > *,
.recras-popup .bookprocess .version2 .bpMainForm,
.recras-popup .bookprocess .version2 fieldset,
.recras-popup .bookprocess .version2 fieldset > div { min-inline-size: 0; max-inline-size: 100%; }

/* Vragen */
.recras-popup .bookprocess .version2 fieldset > div > label,
.recras-popup .bookprocess .version2 fieldset > div > legend {
  color: var(--text-dark) !important;
  font-size: var(--text-m) !important;
  font-weight: 600 !important;
  margin-block-end: calc(var(--space-xs) / 2);
}
.recras-popup .bookprocess .version2 fieldset > div + div { margin-block-start: var(--space-m); }
.recras-popup .bookprocess .version2 .recras-required > label::after,
.recras-popup .bookprocess .version2 sup { color: var(--accent-semi-dark) !important; }
.recras-popup .bookprocess .version2 a,
.recras-popup .bookprocess .version2 a[style],
.recras-popup .bookprocess .version2 span[style] { color: var(--primary) !important; }

/* Arrangementkaarten: compact, naam en prijs links, knop rechts */
.recras-popup .bookprocess .version2 .display-blocks {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--width-20)), 1fr)) !important;
  gap: var(--space-xs) !important;
}
.recras-popup .bookprocess .version2 .display-blocks .groupWrapper {
  grid-template-areas: "image image image" "label extrainfo buttons" "price price buttons" !important;
  grid-template-columns: 1fr auto auto !important;
  grid-template-rows: auto 1fr 1fr !important;
  align-items: center;
  column-gap: var(--space-xs);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-s) !important;
  background: var(--white) !important;
  border: var(--border-size) solid var(--base-light) !important;
  border-radius: calc(var(--radius) * 2) !important;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.recras-popup .bookprocess .version2 .display-blocks .groupWrapper:hover { border-color: var(--primary) !important; }
.recras-popup .bookprocess .version2 .display-blocks .groupWrapper:has(input:checked) {
  border-color: var(--primary) !important;
  box-shadow: inset 0 0 0 var(--border-size) var(--primary);
  background: var(--primary-ultra-light) !important;
}
.recras-popup .bookprocess .version2 .display-blocks .groupWrapper > label {
  color: var(--primary) !important;
  font-weight: 600 !important;
  font-size: var(--text-s) !important;
  line-height: var(--base-heading-lh);
  padding: 0 !important;
  margin: 0 !important;
  min-block-size: 0 !important;
  block-size: auto !important;
  align-self: end !important;
  cursor: pointer;
}
.recras-popup .bookprocess .version2 .display-blocks .groupWrapper .price-information {
  color: var(--text-dark-muted) !important;
  font-size: var(--text-s) !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: start !important;
}
.recras-popup .bookprocess .version2 .display-blocks .groupWrapper > .subgroupWrapper,
.recras-popup .bookprocess .version2 .display-blocks .groupWrapper .radioWrapper {
  align-self: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ronde knoppen: kiezen en plus/min */
.recras-popup .bookprocess .version2 .radioWrapper label,
.recras-popup .bookprocess .version2 .numberWithPlusMinus button {
  background-color: var(--primary) !important;
  color: var(--white) !important;
  border: 0 !important;
}
.recras-popup .bookprocess .version2 .radioWrapper label::after,
.recras-popup .bookprocess .version2 .numberWithPlusMinus button::before,
.recras-popup .bookprocess .version2 .numberWithPlusMinus button::after { background-color: var(--white) !important; }
.recras-popup .bookprocess .version2 .radioWrapper input:checked + label { background-color: var(--accent) !important; }
.recras-popup .bookprocess .version2 .radioWrapper input:checked + label::after { background-color: var(--text-dark) !important; }
.recras-popup .bookprocess .version2 .numberWithPlusMinus {
  grid-template-columns: var(--recras-tap) calc(var(--recras-tap) * 1.75) var(--recras-tap) !important;
  gap: calc(var(--space-xs) / 2) !important;
  align-items: center;
}
.recras-popup .bookprocess .version2 .numberWithPlusMinus button {
  inline-size: var(--recras-tap) !important;
  block-size: var(--recras-tap) !important;
  border-radius: var(--radius-50) !important;
  padding: 0 !important;
}
.recras-popup .bookprocess .version2 .numberWithPlusMinus button:hover { background-color: var(--primary-dark) !important; }
.recras-popup .bookprocess .version2 .numberWithPlusMinus input { inline-size: calc(var(--recras-tap) * 1.75) !important; text-align: center; }

/* Velden */
.recras-popup .bookprocess .version2 input[type="text"],
.recras-popup .bookprocess .version2 input[type="email"],
.recras-popup .bookprocess .version2 input[type="tel"],
.recras-popup .bookprocess .version2 input[type="number"],
.recras-popup .bookprocess .version2 input[type="date"],
.recras-popup .bookprocess .version2 select,
.recras-popup .bookprocess .version2 textarea {
  background-color: var(--white) !important;
  border: var(--border-size) solid var(--base-semi-light) !important;
  border-radius: var(--radius) !important;
  font-family: inherit !important;
  font-size: var(--text-m) !important;
  color: var(--text-dark) !important;
  min-block-size: var(--recras-tap);
  padding: var(--space-xs) var(--space-xs) !important;
}
.recras-popup .bookprocess .version2 :is(textarea, select, input[type="text"], input[type="email"], input[type="tel"]) {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  box-sizing: border-box;
}
/* Pijltje in de select, getekend met twee verlopen (geen svg met vaste kleur nodig) */
.recras-popup .bookprocess .version2 select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--primary) 50%),
    linear-gradient(135deg, var(--primary) 50%, transparent 50%) !important;
  background-position:
    calc(100% - var(--space-s) - var(--space-xs) / 2) 50%,
    calc(100% - var(--space-s)) 50% !important;
  background-size: calc(var(--space-xs) / 2) calc(var(--space-xs) / 2) !important;
  background-repeat: no-repeat !important;
  padding-inline-end: var(--space-xl) !important;
}
.recras-popup .bookprocess .version2 :is(input, select, textarea):focus {
  outline: var(--focus-width) solid var(--accent) !important;
  outline-offset: var(--focus-offset);
  border-color: var(--primary) !important;
}

/* Meerdere keuzes (zoals voertuigen) als knoppen */
.recras-popup .bookprocess .version2 .recras-choice_multiple { display: flex !important; flex-wrap: wrap; gap: calc(var(--space-xs) / 2) !important; }
.recras-popup .bookprocess .version2 .checkboxWrapper { position: relative; margin: 0 !important; padding: 0 !important; }
.recras-popup .bookprocess .version2 .checkboxWrapper input[type="checkbox"] { position: absolute; opacity: 0; inline-size: var(--border-size); block-size: var(--border-size); margin: 0; }
.recras-popup .bookprocess .version2 .checkboxWrapper label {
  display: inline-flex !important;
  align-items: center;
  min-block-size: var(--recras-tap);
  margin: 0 !important;
  padding: 0 var(--space-s) !important;
  background: var(--white) !important;
  border: var(--border-size) solid var(--base-semi-light) !important;
  border-radius: var(--radius-circle) !important;
  font-size: var(--text-s) !important;
  font-weight: 500 !important;
  color: var(--text-dark) !important;
  cursor: pointer;
}
.recras-popup .bookprocess .version2 .checkboxWrapper label::before,
.recras-popup .bookprocess .version2 .checkboxWrapper label::after { display: none !important; }
.recras-popup .bookprocess .version2 .checkboxWrapper input:checked + label { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--white) !important; }
.recras-popup .bookprocess .version2 .checkboxWrapper input:focus-visible + label { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); }

/* Kalender */
.recras-popup .bookprocess .version2 fieldset > div:has(.react-datepicker) > label {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: start !important;
  color: var(--text-dark) !important;
}
.recras-popup .bookprocess .version2 .react-datepicker {
  display: block !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  border: var(--border-size) solid var(--base-light) !important;
  border-radius: calc(var(--radius) * 2) !important;
  overflow: hidden;
  font-family: inherit !important;
}
.recras-popup .bookprocess .version2 .react-datepicker__month-container { inline-size: 100% !important; float: none !important; }
.recras-popup .bookprocess .version2 .react-datepicker__header { background: var(--white) !important; border-block-end: var(--border-size) solid var(--base-light) !important; }
.recras-popup .bookprocess .version2 .react-datepicker__current-month { font-size: var(--text-m) !important; font-weight: 600 !important; color: var(--primary) !important; }
.recras-popup .bookprocess .version2 .react-datepicker__day-names,
.recras-popup .bookprocess .version2 .react-datepicker__week { display: grid !important; grid-template-columns: repeat(7, 1fr); }
.recras-popup .bookprocess .version2 .react-datepicker__day,
.recras-popup .bookprocess .version2 .react-datepicker__day-name {
  inline-size: 100% !important;
  max-inline-size: var(--space-l);
  aspect-ratio: 1;
  margin: calc(var(--space-xs) / 4) auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: var(--text-s) !important;
  line-height: 1 !important;
}
.recras-popup .bookprocess .version2 .react-datepicker__day--selected,
.recras-popup .bookprocess .version2 .react-datepicker__day--keyboard-selected {
  background: var(--primary) !important;
  color: var(--white) !important;
  border-radius: var(--radius-50) !important;
}
.recras-popup .bookprocess .version2 .react-datepicker__day:not(.react-datepicker__day--disabled):not(.react-datepicker__day--selected):hover {
  background: var(--accent) !important;
  color: var(--text-dark) !important;
  border-radius: var(--radius-50) !important;
}

/* Knoppen */
.recras-popup .bookprocess .version2 .bpButtonWrapper { margin-block-start: 0 !important; }
.recras-popup .bookprocess .version2 .spinnerWrapper:empty { block-size: 0 !important; }
.recras-popup .bookprocess .version2 button.primary,
.recras-popup .bookprocess .version2 .nextStep {
  inline-size: 100%;
  min-block-size: calc(var(--recras-tap) * 1.2);
  padding: var(--space-xs) var(--space-m) !important;
  background: var(--primary) !important;
  color: var(--white) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  font-family: inherit !important;
  font-size: var(--text-m) !important;
  font-weight: 600 !important;
  text-align: center !important;
  justify-content: center;
  cursor: pointer;
}
.recras-popup .bookprocess .version2 button.primary:hover,
.recras-popup .bookprocess .version2 .nextStep:hover { background: var(--primary-dark) !important; }

/* Rustige footer */
.recras-popup .bookprocess .version2 .bpFooter { opacity: .55; margin-block-start: var(--space-s); }

/* Pagina niet laten scrollen achter de open pop-up */
html:has(.recras-popup[open]) { overflow: hidden; }