/* 123boeken-reserveringswidget — LAYOUT-overrides voor de EXTERNE widget.
 * BEWUST ONGELAAGD (buiten @layer site): de widget brengt z'n eigen ongelaagde CSS mee;
 * ongelaagd wint van elke laag. In @layer site zouden deze overrides van de widget verliezen
 * (kalender klapte van 2-koloms naar gestapeld). Specificiteit (:is(...) [data-widget]) wint. */

/* 123boeken-reserveringswidget: alleen LAYOUT (grid/kaarten/kalender-opmaak/
   spacing/typografie + neutrale kaart-borders). Kleuren bewust NIET geforceerd —
   die worden bij 123boeken zelf ingesteld en zijn daar leidend (2026-07-21). */
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"]{
  --vb-booking-border:color-mix(in srgb,var(--theme-color-2,#89c162) 35%,#fff);
  font-family:var(--font-body);
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-booking{
  display:block;
  max-width:1160px;
  margin-inline:auto;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-title{
  margin:0 0 1rem;
  font-family:var(--font-display);
  font-size:clamp(1.9rem,1.3rem + 1.2vw,2.7rem);
  line-height:1.1;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  gap:clamp(20px,3vw,40px);
  align-items:start;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section{
  overflow:hidden;
  margin:0 0 1.25rem;
  border:1px solid var(--vb-booking-border);
  border-radius:18px;
  box-shadow:0 14px 38px rgba(41,39,35,.07);
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-header{
  font-family:var(--font-body);
  font-weight:600;
  line-height:1.25;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-header{
  padding:.95rem 1.2rem;
  font-size:1.02rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-content{
  padding:1rem 1.2rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-options{
  padding-top:0;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-option{
  overflow:hidden;
  margin:0 0 1.45rem!important;
  border:1px solid var(--vb-booking-border);
  border-radius:14px;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-optiontitle{
  padding:.7rem 1rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  line-height:1.25;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-option .widget-123boeken-row{
  padding:.9rem 1rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-image img{
  border-radius:12px;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] input,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] select,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] textarea{
  border:1.5px solid var(--vb-booking-border)!important;
  border-radius:10px!important;
  font:inherit!important;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] input,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] select{
  min-height:2.35rem;
  padding:.55rem .75rem!important;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] textarea{
  padding:.75rem!important;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] input:focus,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] select:focus,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] textarea:focus{
  outline:0;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-add,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-bookButton,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  padding:.6rem 1rem;
  border-radius:999px;
  border:0!important;
  font-weight:700;
  text-decoration:none!important;
  transition:background-color .2s ease,transform .2s ease;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-add:hover,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-bookButton:hover,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-back:hover{
  transform:translateY(-1px);
}
/* Sticky-poging op .widget-123boeken-section-right (vanaf 768px) is uitgezet (2026-08-21,
   punt 431): leverde een lege ogende interne scrollbalk op. De widget regelt haar eigen
   positionering (relative vanaf 768px, een fixed optrek-lade eronder); laat de widget dit zelf
   doen. De bestaande position:static-regel op mobiel (hieronder, <=900px) blijft staan -- die
   voorkomt een eigen, ouder probleem (horizontale scroll) en hoort niet bij deze poging. */
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation{
  overflow:hidden;
  border:1px solid var(--vb-booking-border);
  border-radius:18px;
  box-shadow:0 14px 38px rgba(41,39,35,.09);
  font-size:.9rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-title{
  margin:0;
  padding:.9rem 0 .55rem;
  font-family:var(--font-display);
  font-size:clamp(1.35rem,1.1rem + .55vw,1.65rem);
  font-weight:600;
  line-height:1;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-header{
  font-size:.95rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-content,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-row{
  padding:.45rem .75rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-cell{
  line-height:1.3;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container .widget-123boeken-section-right .widget-123boeken-prices{
  overflow:hidden;
  padding:0;
  border:1px solid var(--vb-booking-border);
  border-radius:18px;
  box-shadow:0 14px 38px rgba(41,39,35,.09);
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container .widget-123boeken-section-right .widget-123boeken-prices > .widget-123boeken-image,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container .widget-123boeken-section-right .widget-123boeken-prices > .widget-123boeken-image ~ *{
  padding-right:1rem;
  padding-left:1rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container .widget-123boeken-section-right .widget-123boeken-prices > .widget-123boeken-image{
  padding-top:1rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-price-total{
  border-top:1px solid var(--vb-booking-border);
  font-weight:700;
  font-size:.95rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-conditions a{
  font-weight:700;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-inner-message{
  border-radius:18px;
  border:1px solid var(--vb-booking-border);
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons,
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar,
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation{
  overflow:hidden;
  margin:0 0 1.25rem;
  border:1px solid var(--vb-booking-border);
  border-radius:18px;
  box-shadow:0 14px 38px rgba(41,39,35,.07);
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons .widget-123boeken-title,
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar > .widget-123boeken-title{
  margin:0;
  padding:.95rem 1.2rem;
  font-family:var(--font-body);
  font-size:1.02rem;
  font-weight:600;
  line-height:1.25;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons form{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  padding:1rem 1.2rem;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:flex-start;
  padding:1rem;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-module-calendar{
  flex:2 1 42rem;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-summary{
  flex:1 1 18rem;
}
.booking-widget-inline [data-widget="123boeken"] .pika-lendar{
  overflow:hidden;
  border:1px solid var(--vb-booking-border);
  border-radius:12px;
}
.booking-widget-inline [data-widget="123boeken"] .pika-single .pika-lendar{
  max-width:none;
}
.booking-widget-inline [data-widget="123boeken"] .pika-label{
  font-family:var(--font-body);
  font-weight:600;
}
.booking-widget-inline [data-widget="123boeken"] .pika-table th{
  font-weight:600;
}
.booking-widget-inline [data-widget="123boeken"] .pika-table{
  table-layout:fixed;
  width:100%;
}
.booking-widget-inline [data-widget="123boeken"] .pika-table td{
  overflow:hidden;
  vertical-align:top;
}
.booking-widget-inline [data-widget="123boeken"] .pika-button{
  overflow:hidden;
}
.booking-widget-inline [data-widget="123boeken"] .pika-button[data-content]::after{
  content:none;
}
.booking-widget-inline [data-widget="123boeken"] .is-selected .pika-button,
.booking-widget-inline [data-widget="123boeken"] .is-startrange .pika-button,
.booking-widget-inline [data-widget="123boeken"] .is-endrange .pika-button{
  font-weight:700;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation{
  margin:0;
  padding:1rem;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-title{
  padding:0 0 .65rem;
}
/* De prijsopgave krijgt hier een tweekoloms raster mét tussenruimte. Dit blok stond op
   `.booking-widget-inline` (de widget in de zijkaart van een woningpagina) en miste dus de
   boekingspagina zelf, waar de sectie `.layer--booking` heet. Daar bleef de widget-eigen opmaak
   staan: kolommen zonder ruimte ertussen, waardoor "Complete huurprijs:" en het bedrag tegen
   elkaar aan plakten. Gemeten 20-08-2026: 0px tussen de cellen op /nl/reserveren, 12px op de
   woningpagina. De buurregels hierboven (padding, regelhoogte) dekten beide al; deze drie niet. */
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-table{
  display:grid;
  gap:.35rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-row{
  display:grid;
  grid-template-columns:minmax(8.5rem,1fr) max-content;
  gap:.75rem;
  align-items:baseline;
  padding:.2rem 0;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-cell{
  min-width:0;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-row .widget-123boeken-cell:last-child{
  text-align:right;
  margin-left:auto;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-button{
  display:flex;
  justify-content:flex-end;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-button button,
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-button a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  padding:.6rem 1.35rem;
  border:0;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
}
@media(max-width:900px){
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container{
    grid-template-columns:1fr;
  }
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-right{
    position:static;
  }
}
@media(max-width:520px){
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-row{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
  }
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-cell{
    min-width:0;
    flex:1 1 9rem;
  }
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-row .widget-123boeken-cell:last-child{
    margin-left:auto;
    flex:0 1 auto;
    white-space:nowrap;
  }
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-button{
    flex:1 1 100%;
    justify-content:flex-end;
  }
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-add,
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-bookButton{
    width:100%;
  }
}

/* Boekwidget: dag-cijfers kleiner (12px). */
.booking-widget-inline [data-widget="123boeken"][data-type="detail"][data-format="1"] .pika-single .pika-button.pika-day{font-size:12px}
/* Boekwidget-layout: kalender-blok >=620px (2 maanden + legenda passen). Vanaf 660px staan de
   2 maanden naast elkaar; de Prijsopgave staat ernaast als het past en zakt anders automatisch
   eronder (flex-wrap). Onder 660px stapelt alles (mobiel). Geen !important: we matchen de
   widget-format-attributen [data-format="1"] voor voldoende specificiteit. */
@media (min-width:660px){
  .booking-widget-inline [data-widget="123boeken"][data-type="detail"][data-format="1"] .widget-123boeken-calendar{flex-wrap:wrap;align-items:flex-start;gap:1.25rem}
  .booking-widget-inline [data-widget="123boeken"][data-type="detail"][data-format="1"] .widget-123boeken-calendar>.widget-123boeken-module-calendar{flex:1 1 620px;min-width:0;width:auto}
  .booking-widget-inline [data-widget="123boeken"][data-type="detail"][data-format="1"] .widget-123boeken-calendar>.widget-123boeken-summary{flex:1 1 300px;min-width:0;width:auto}
  .booking-widget-inline [data-widget="123boeken"] .pika-single{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;min-width:620px}
  .booking-widget-inline [data-widget="123boeken"] .pika-single .pika-lendar{flex:1 1 0;min-width:0;max-width:none}
  .booking-widget-inline [data-widget="123boeken"] .pika-single .widget-123boeken-calendar-legend-labels{flex:0 0 100%}
}

/* Boekwidget fijn-afstemming (klantwensen 2026-07-21): compactere Samenstelling-balk,
   bredere personen-dropdown, kleinere "Complete huurprijs", verticaal gecentreerde dag-cijfers.
   Geen !important; kleuren blijven van 123boeken (dashboard). */
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons{margin-bottom:8px}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons form{padding-top:8px;padding-bottom:8px}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons .widget-123boeken-title{padding-top:9px;padding-bottom:9px}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons form select{min-width:4rem}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-price-total .widget-123boeken-cell{font-size:15px;line-height:1.5}
.booking-widget-inline [data-widget="123boeken"] .pika-button.pika-day{display:flex;align-items:center;justify-content:center}

/* Prijsopgave-kaart: witte blokken (datums + prijzen) licht afgerond + verticale lucht
   (Huurprijs/Aankomst niet meer strak tegen de rand); "Complete huurprijs" meer ademruimte.
   price-total padding zit op een monster-selector -> lucht via margin + font op de cellen. */
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-table.widget-123boeken-dateslist,
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-table.widget-123boeken-pricelist{border-radius:8px;padding-top:10px;padding-bottom:10px}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-row.widget-123boeken-price-total{margin-top:8px;margin-bottom:4px}

/* Kalender-cellen mogen krimpen: widget zet .pika-button min-width:6ch -> overflow/
   lelijke cellen bij smalle (3-koloms) kalender; hier terug naar 0 zodat ze meeschalen. */
.booking-widget-inline [data-widget="123boeken"] .pika-single .pika-button{min-width:0}
/* "Complete huurprijs": padding-top tussen de scheidingslijn en de tekst. De rij-padding
   zit op een widget-selector (specificiteit 0,8,0); hier met (0,9,0) netjes overheen. */
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar>:nth-child(2) .widget-123boeken-quotation .widget-123boeken-table.widget-123boeken-pricelist .widget-123boeken-row.widget-123boeken-price-total{padding-top:8px}

/* Kalender-dagcel proportioneel: de format-regel zet min-height:50px (0,5,0) -> vaste
   hoogte, waardoor smallere cellen te 'staand' werden. Hier (0,6,0) min-height los +
   vierkante aspect-ratio, zodat de cel met de breedte meeschaalt. */
.booking-widget-inline [data-widget="123boeken"][data-type="detail"][data-format="1"] .pika-single .pika-button{min-height:0;aspect-ratio:1}

/* Boekwidget-legenda mag wrappen (op mobiel liep 'ie van het scherm; widget zet items op
   display:inline zonder wrap-container). Flex-wrap: op desktop 1 regel, op smal meerdere. */
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar-legend-labels{display:flex;flex-wrap:wrap;gap:.5em 1.2em}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar-legend-labels .widget-123boeken-item{display:inline-flex;align-items:center;margin-right:0}

/* Prijsregel zonder bedrag (bv. "Bed-, bad- en keukenlinnen") krijgt via custom.js de tekst
   "Inbegrepen" i.p.v. een lege cel -- :empty vangt dit niet, 123boeken laat er een spatie
   staan. Zie custom.js: alleen op de enkelvoudige .widget-123boeken-option-regels, niet op
   de "Extra kosten"-inklaprij (widget-123boeken-options, meervoud). */
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-cell.is-included{color:rgba(167,167,167,.85);font-style:italic}
/* "Inbegrepen" (punt 431) plakte tegen een lang label ("Bed-, bad- en keukenlinnen") in de
   uitgeklapte "Extra kosten"-lijst. Oorzaak: 123boeken zet zelf `display:table-row` op de
   optie-regel zodra .widget-123boeken-options de klasse .active krijgt (specificiteit 7
   klassen -- wint van onze eerdere `display:grid`-regel hierboven, die alleen de onzichtbare
   staat raakt). Hier expliciet flex geforceerd, met [data-type="detail"][data-format="1"]
   erbij voor voldoende specificiteit (zelfde truc als de "Complete huurprijs"-fix verderop
   in dit bestand). */
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"][data-type="detail"][data-format="1"] .widget-123boeken-quotation .widget-123boeken-table .widget-123boeken-row.widget-123boeken-option{
  display:flex;
  align-items:baseline;
  gap:.5rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"][data-type="detail"][data-format="1"] .widget-123boeken-quotation .widget-123boeken-table .widget-123boeken-row.widget-123boeken-option .widget-123boeken-cell:first-child{
  flex:1 1 auto;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"][data-type="detail"][data-format="1"] .widget-123boeken-quotation .widget-123boeken-table .widget-123boeken-row.widget-123boeken-option .widget-123boeken-cell:last-child{
  flex:0 0 auto;
  margin-left:auto;
  text-align:right;
}
}