/* ============================================================
   CHA CHI VERSACI — boekingsblok vakantiewoning Spanje

   De plugin brengt eigen css mee (hb-public.css). Die is functioneel,
   maar hoort bij niemand: Helvetica-achtige systeemletters, blauw
   #1f6feb, grijsblauwe vlakken, rood-roze voor bezette dagen. Naast de
   rest van de site valt dat blok er meteen uit.

   Dit bestand laadt ná hb-public.css en trekt het gelijk met de andere
   formulieren op de site: witte kaart, Fredoka op de labels, Nunito in
   de velden, groene rand die bij focus oplicht, knop met de groene
   'plint' eronder. Kleuren komen uit ccv-tokens.css, zodat één wijziging
   daar ook hier doorwerkt.

   Er staat bijna nergens !important. De plugin gebruikt enkelvoudige
   klassen, dus een selector met de blokklasse ervoor weegt al zwaarder.
   Alleen bij de geselecteerde dagen is het nodig: de plugin zet dáár
   zelf !important op, en dan is er geen andere weg.
   ============================================================ */

/* ---------- de agenda ---------- */

/* De plugin zet hier max-width:680px en het formulier op 560px. Onder
   elkaar staan die dan niet gelijk uitgelijnd; dezelfde breedte voor
   beide leest als één blok in plaats van twee losse. */
.hb-calendar,
.hb-booking-form{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  font-family:'Nunito',sans-serif;
  color:var(--text);
}

.hb-calendar{
  background:var(--card);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow);
  padding:30px 30px 26px;
  margin-bottom:22px;
  box-sizing:border-box;
}

.hb-calendar .hb-cal-legend{
  justify-content:center;
  gap:22px;
  margin-bottom:20px;
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
}

.hb-calendar .hb-dot{
  width:13px;height:13px;border-radius:5px;margin-right:6px;
}
.hb-calendar .hb-dot-free{background:var(--accent);}
.hb-calendar .hb-dot-booked{background:rgba(20,33,10,.12);}

.hb-calendar .hb-cal-grid{gap:30px;}

.hb-calendar .hb-cal-title{
  font-family:'Fredoka',sans-serif;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
  text-align:center;
  margin-bottom:12px;
}

.hb-calendar .hb-cal-dow{
  font-family:'Fredoka',sans-serif;
  font-size:11.5px;
  font-weight:600;
  color:var(--muted);
  padding-bottom:5px;
}

/* var(--r-md) is 18px en dat is te rond voor een cel van veertig pixels;
   die wordt dan een bolletje. Vandaar een eigen, kleinere ronding. */
.hb-calendar .hb-cal-day{
  border-radius:12px;
  min-height:44px;
  font-size:13.5px;
  font-weight:700;
  gap:2px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

/* Drie tinten groen van licht naar diep: vrij → binnen de gekozen
   periode → begin- en einddatum. Zo zie je in één oogopslag wat je
   hebt aangeklikt zonder dat er een tweede kleur bij hoeft. */
.hb-calendar .hb-free{
  background:var(--pill);
  color:var(--accent-deep);
}
.hb-calendar.hb-cal-selectable .hb-free{cursor:pointer;}
.hb-calendar.hb-cal-selectable .hb-free:hover{
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:var(--glow-accent);
  transform:translateY(-2px);
}
.hb-calendar .hb-sel-in{
  background:rgba(90,234,1,.42) !important;
  color:var(--ink) !important;
}
.hb-calendar .hb-sel-start,
.hb-calendar .hb-sel-end{
  background:var(--accent-deep) !important;
  color:#ffffff !important;
}

/* Bezet en verstreken: neutraal grijs uit het inkt-groen, niet rood.
   Rood leest als een storing, en een volle week ís geen storing. */
.hb-calendar .hb-booked{
  background:rgba(20,33,10,.07);
  color:var(--muted);
  cursor:not-allowed;
}
.hb-calendar .hb-booked .hb-cal-d{text-decoration:line-through;}
.hb-calendar .hb-past{
  background:transparent;
  color:rgba(20,33,10,.22);
}

.hb-calendar .hb-cal-price{
  font-size:10.5px;
  font-weight:700;
  opacity:1;
  color:inherit;
}
.hb-calendar .hb-past .hb-cal-price{display:none;}

/* ---------- het formulier ---------- */

/* Dezelfde kaart als elk ander formulier in een shortcode-widget
   (zie ccv-palette.css). De plugin heeft een eigen kader plus schaduw;
   die gaan eraf, anders zitten er twee randen om elkaar heen. */
.hb-booking-form{
  background:var(--card);
  border:0;
  border-radius:var(--r-xl);
  box-shadow:var(--shadow);
  padding:32px 30px;
  box-sizing:border-box;
}

.hb-booking-form .hb-form label{
  font-family:'Fredoka',sans-serif;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  margin-bottom:6px;
}

.hb-booking-form .hb-form .hb-field{margin-bottom:16px;}
.hb-booking-form .hb-form .hb-row{gap:16px;}

.hb-booking-form .hb-form input[type="text"],
.hb-booking-form .hb-form input[type="email"],
.hb-booking-form .hb-form input[type="tel"],
.hb-booking-form .hb-form input[type="date"],
.hb-booking-form .hb-form input[type="number"],
.hb-booking-form .hb-form select,
.hb-booking-form .hb-form textarea{
  font-family:'Nunito',sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  background:var(--card);
  border:2px solid var(--border);
  border-radius:var(--r-md);
  padding:13px 16px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.hb-booking-form .hb-form input:focus,
.hb-booking-form .hb-form select:focus,
.hb-booking-form .hb-form textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--pill);
}
.hb-booking-form .hb-form ::placeholder{color:var(--muted);opacity:1;}
.hb-booking-form .hb-form textarea{resize:vertical;}

/* ---------- gasten ---------- */

/* Per gast een eigen regeltje. Dat zijn al snel zes blokjes onder
   elkaar, dus ze krijgen een licht vlak eromheen: anders lijkt het
   halve formulier uit naamvelden te bestaan. */
.hb-booking-form .hb-guests-section{
  background:var(--bg-alt);
  border-radius:var(--r-md);
  padding:18px 18px 10px;
  margin:6px 0 18px;
}
.hb-booking-form .hb-guests-heading{
  font-family:'Fredoka',sans-serif;
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:10px;
}
.hb-booking-form .hb-guest-group{gap:9px;margin-bottom:9px;}
.hb-booking-form .hb-guest-row{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:9px 10px;
  gap:9px;
}
.hb-booking-form .hb-guest-tag{
  font-family:'Fredoka',sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--accent-deep);
  flex-basis:96px;
}
.hb-booking-form .hb-guest-row input{
  font-family:'Nunito',sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:9px 12px;
}
.hb-booking-form .hb-guest-row input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--pill);
}
/* Het leeftijdsveld staat in de plugin op 96px. Met de ruimere binnenmarge
   hierboven valt 'Leeftijd' daar half buiten; vandaar wat breder. */
.hb-booking-form .hb-guest-row .hb-g-age{flex:0 0 118px;}

/* ---------- het prijsvak ---------- */

/* De site heeft één diep paars blok per pagina als eindpunt, en op deze
   pagina is dat de prijs: dat is waar de bezoeker op wacht. Het totaal
   staat in het felle groen dat op dat paars gebruikt wordt. */
.hb-booking-form .hb-price-box{
  background:var(--deep-bg);
  color:var(--deep-text);
  border-radius:var(--r-lg);
  padding:20px 24px;
  margin:8px 0 20px;
  font-family:'Nunito',sans-serif;
  font-weight:600;
}
.hb-booking-form .hb-price-row{
  font-size:15px;
  padding:4px 0;
}
.hb-booking-form .hb-price-row span:last-child{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.hb-booking-form .hb-price-total{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:20px;
  color:var(--deep-accent);
  border-top:1px solid var(--deep-border);
  margin-top:10px;
  padding-top:11px;
}

/* De kortingsregel staat op het diepe paars, dus daar werkt het groen van
   de site niet meer als 'goed nieuws' — dat is te donker. Het felle groen
   van het totaal is hier de juiste kleur. */
.hb-booking-form .hb-price-discount{
  color:var(--deep-accent);
  font-weight:700;
}

/* ---------- kortingscode ---------- */

.hb-booking-form .hb-discount{
  font-family:'Fredoka',sans-serif;
  letter-spacing:.06em;
}
.hb-booking-form .hb-discount-msg{
  font-family:'Nunito',sans-serif;
  font-size:13.5px;
  font-weight:700;
  margin-top:7px;
}
.hb-booking-form .hb-discount-ok{color:var(--accent-deep);}
.hb-booking-form .hb-discount-bad{color:var(--pop-deep);}

/* Kan de gekozen periode niet, dan gebruikt de plugin hetzelfde vakje
   met .hb-error erop. Paars op paars valt niet te lezen, dus dan terug
   naar een licht vlak met de paarse waarschuwkleur van de site. */
.hb-booking-form .hb-price-box.hb-error{
  background:var(--bg-alt);
  color:var(--pop-deep);
  border:2px solid rgba(196,51,240,.26);
  font-family:'Fredoka',sans-serif;
  font-size:15px;
}

/* ---------- versturen en meldingen ---------- */

/* Exact de knop van de andere formulieren: de plint van 6px onder de
   knop die bij indrukken inzakt. */
.hb-booking-form .hb-submit{
  font-family:'Fredoka',sans-serif;
  font-size:16px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--on-accent);
  background:var(--accent);
  border:0;
  border-radius:var(--r-pill);
  padding:14px 30px;
  margin-top:10px;
  cursor:pointer;
  box-shadow:0 6px 0 var(--accent-deep);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease;
}
.hb-booking-form .hb-submit:hover:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 3px 0 var(--accent-deep),var(--glow-accent);
}
.hb-booking-form .hb-submit:disabled{
  background:var(--bg-alt);
  color:var(--muted);
  box-shadow:0 6px 0 rgba(20,33,10,.10);
  opacity:1;
  cursor:not-allowed;
}

.hb-booking-form .hb-message{
  font-family:'Fredoka',sans-serif;
  font-size:15px;
  border-radius:var(--r-md);
  padding:16px 20px;
  margin-top:16px;
  line-height:1.5;
}
.hb-booking-form .hb-message.hb-success{
  background:var(--pill);
  border:0;
  color:var(--accent-deep);
}
.hb-booking-form .hb-message.hb-error{
  background:rgba(196,51,240,.09);
  border:0;
  color:var(--pop-deep);
}

/* ---------- prijsmelding ---------- */

/* Nog niet op de pagina geplaatst, maar hoort bij dezelfde plugin.
   Nu meenemen scheelt een tweede ronde als het blok er later bij komt. */
.hb-price-watch{font-family:'Nunito',sans-serif;}
.hb-watch-toggle{
  font-family:'Fredoka',sans-serif;
  font-size:14.5px;
  font-weight:600;
  color:var(--accent-deep);
  background:transparent;
  border:2px solid var(--border);
  border-radius:var(--r-pill);
  padding:11px 18px;
}
.hb-watch-toggle:hover{background:var(--pill);}
.hb-watch-panel{
  background:var(--bg-alt);
  border:0;
  border-radius:var(--r-md);
  padding:16px 18px;
}
.hb-watch-intro{color:var(--muted);font-size:13.5px;}
.hb-watch-email{
  font-family:'Nunito',sans-serif;
  font-weight:600;
  color:var(--ink);
  background:var(--card);
  border:2px solid var(--border);
  border-radius:var(--r-md);
  padding:12px 15px;
}
.hb-watch-email:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--pill);}
.hb-watch-submit{
  font-family:'Fredoka',sans-serif;
  font-size:14.5px;
  font-weight:500;
  color:var(--on-accent);
  background:var(--accent);
  border:0;
  border-radius:var(--r-pill);
  padding:12px 22px;
}
.hb-watch-message.hb-success{color:var(--accent-deep);background:transparent;border:0;}
.hb-watch-message.hb-error{color:var(--pop-deep);background:transparent;border:0;}

/* ---------- mobiel ---------- */

@media(max-width:767px){
  .hb-calendar{padding:20px 14px 18px;border-radius:var(--r-lg);}
  /* De twee maanden gaan onder elkaar.
     De plugin zet ze met flex naast elkaar en geeft elke maand
     min-width:280px. Op een telefoon past dat niet: de kolommen van het
     raster kunnen bovendien niet smaller worden dan de prijs die erin
     staat (€150 in vet), dus samen blijven ze breder dan het scherm. Dan
     rekt niet alleen de agenda maar de hele pagina mee uit — het
     formulier eronder liep daardoor ook rechts buiten beeld. Onder
     elkaar krijgt elke maand de volle breedte en is er niets af te
     snijden. Twee maanden naast elkaar op een telefoon las toch al
     niet. */
  .hb-calendar .hb-cal-grid{flex-direction:column;gap:26px;}
  .hb-calendar .hb-cal-month{min-width:0;}
  .hb-calendar .hb-cal-day{min-height:40px;font-size:13px;}

  .hb-booking-form{padding:24px 20px;border-radius:var(--r-lg);}
  /* De plugin zet de twee velden naast elkaar met flex; op een telefoon
     wordt een datumveld dan zó smal dat de datum wegvalt. */
  .hb-booking-form .hb-form .hb-row{flex-direction:column;gap:0;}
  .hb-booking-form .hb-submit{width:100%;text-align:center;}
  .hb-booking-form .hb-price-box{padding:18px;}
}

@media(max-width:480px){
  .hb-booking-form .hb-guest-tag{flex-basis:100%;}
}