/* Rekentool huurprijs vakantiewoning, in de lichte huisstijl van spaansnieuws.com.
   Overschrijft binnen .reken.hp de donkere rekenmodule uit gids.css. */

.reken.hp {
  background: var(--tint);
  color: var(--inkt);
  border-top: 4px solid var(--zee);
  border-radius: var(--ronding);
  padding: 1.5rem 1.25rem 1.75rem;
}
@media (min-width: 42rem) {
  .reken.hp { padding: 2rem 2rem 2.25rem; }
}
.reken.hp h3 { color: var(--inkt); font-size: 1.4rem; letter-spacing: -.01em; }
.reken.hp .reken-intro { color: var(--inkt-zacht); }

.hp-groepkop {
  font-size: .8125rem;
  font-weight: 800;
  color: var(--zee);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 1.8rem 0 .9rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--lijn);
}
.reken.hp > .hp-groepkop:first-of-type { border-top: 0; padding-top: 0; margin-top: .4rem; }

/* Velden */
.reken.hp .reken-veld label,
.reken.hp .reken-veld .veldkop { color: var(--inkt-zacht); letter-spacing: .06em; }
.reken.hp .reken-veld label.hp-schuifkop { display: flex; }
.hp-schuifkop { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.hp-schuifkop output { font-weight: 800; color: var(--zee); font-size: 1rem; letter-spacing: 0; text-transform: none; }

.reken.hp .reken-veld input[type="range"] { accent-color: var(--zee); }

.hp-uitleg { font-size: .8125rem; color: var(--inkt-licht); margin: .4rem 0 0; line-height: 1.45; }

.hp-basisrij { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.hp-basisrij input[type="number"] {
  width: 7.5rem;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  padding: .45rem .7rem;
  background: var(--doek);
  color: var(--inkt);
  border: 2px solid var(--inkt);
  border-radius: var(--ronding);
  min-height: 2.9rem;
}
.hp-basisrij input[type="number"]:focus-visible { outline: 3px solid var(--zon); outline-offset: 1px; }
.hp-basisrij span { font-size: .8125rem; color: var(--inkt-zacht); }

.reken.hp .keuzerij button {
  background: var(--doek);
  color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
}
.reken.hp .keuzerij button:hover { border-color: var(--inkt); }
.reken.hp .keuzerij button[aria-pressed="true"] {
  background: var(--zee);
  border-color: var(--zee);
  color: #fff;
}
.reken.hp .keuzerij button:focus-visible { outline: 3px solid var(--zon); outline-offset: 2px; }

/* Uitkomst */
.reken.hp .reken-uitkomst { border-top: 1px solid var(--lijn); padding-top: 1.5rem; margin-top: .5rem; }

.hp-cijfers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.4rem;
}
@media (min-width: 42rem) {
  .hp-cijfers { grid-template-columns: repeat(4, 1fr); }
}
.hp-cijfers > div {
  background: var(--doek);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  padding: .9rem 1rem;
}
.hp .hp-cijfers .etiket {
  display: block;
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--inkt-licht);
  margin-bottom: .3rem;
}
.hp-cijfers .groot { display: block; font-size: clamp(1.35rem, 5vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--inkt); }
.hp-cijfers .hp-accent { border-top: 3px solid var(--zee); }
.hp-cijfers .hp-accent .groot { color: var(--zee); }
.hp-cijfers .klein { display: block; font-size: .75rem; color: var(--inkt-licht); margin-top: .25rem; }

/* Jaarkalender */
.hp-kalender {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1rem .9rem;
  margin: .4rem 0 1rem;
  background: var(--doek);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  padding: 1rem;
}
.hp-maandnaam { display: block; font-size: .8125rem; font-weight: 700; color: var(--inkt); margin-bottom: .3rem; text-transform: capitalize; }
.hp-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hp-dag,
.hp-leeg {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .625rem;
  line-height: 1;
  border-radius: 2px;
}
.hp-dag { color: var(--inkt); cursor: default; position: relative; }
.hp-vak::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 1px;
  height: 2px;
  background: var(--inkt);
}

/* Van rustig naar duur: koel grijs, zand, zon, oranje, rood */
.hp-n1 { background: #E4EAE8; }
.hp-n2 { background: #F3E6C4; }
.hp-n3 { background: #F5C94A; }
.hp-n4 { background: #EE8A4F; }
.hp-n5 { background: #D9363E; color: #fff; }
.hp-n5.hp-vak::after { background: #fff; }

.hp-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  font-size: .8125rem;
  color: var(--inkt-zacht);
  margin: 0 0 1.4rem;
}
.hp-legenda span { display: flex; align-items: center; gap: .4rem; }
.hp-legenda i { width: .85rem; height: .85rem; display: inline-block; border-radius: 2px; }
.hp-legenda i.hp-vakvoorbeeld { background: #E4EAE8; box-shadow: inset 0 -2px 0 var(--inkt); }

/* Tabellen, in dezelfde opmaak als de tabellen in artikelen */
.hp-tabelhoes { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--doek); border: 1px solid var(--lijn); border-radius: var(--ronding); margin: .4rem 0 1rem; }
.tekst .hp .hp-tabel,
.hp-tabel { display: table; width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .875rem; margin: 0; }
.tekst .hp .hp-tabel th,
.tekst .hp .hp-tabel td,
.hp-tabel th,
.hp-tabel td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tekst .hp .hp-tabel thead th,
.hp-tabel thead th { background: var(--inkt); color: var(--doek); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; border-bottom: 0; }
.tekst .hp .hp-tabel tbody tr:nth-child(even) { background: var(--tint); }
.hp-tabel tbody th { color: var(--inkt); font-weight: 700; text-transform: capitalize; }
.hp-tabel td { color: var(--inkt); white-space: nowrap; font-weight: 600; }
.hp-tabel td:last-child { white-space: normal; }
.tekst .hp .hp-tabel tfoot th,
.tekst .hp .hp-tabel tfoot td { border-top: 2px solid var(--zee); border-bottom: 0; font-weight: 800; color: var(--inkt); background: var(--zee-was); }
.hp-bereik { display: block; font-size: .75rem; color: var(--inkt-licht); font-weight: 400; }

.reken.hp .postenlijst div { border-bottom-color: var(--lijn); }
.reken.hp .postenlijst dt { color: var(--inkt-zacht); }
.reken.hp .postenlijst dd { color: var(--inkt); }
.reken.hp .postenlijst .toelichting { color: var(--inkt-licht); }

.tekst .hp details { border-bottom: 0; padding: 0; }
.hp-weken { margin-top: 1rem; }
.hp-weken summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--zee-diep);
  padding: .7rem 0;
  min-height: 2.75rem;
}
.hp-weken summary:focus-visible { outline: 3px solid var(--zon); outline-offset: 2px; }

.hp-knoppen { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 0; }
.hp-knoppen button {
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  padding: .6rem 1rem;
  min-height: 2.75rem;
  background: var(--doek);
  color: var(--inkt);
  border: 1px solid var(--inkt);
  border-radius: var(--ronding);
  cursor: pointer;
}
.hp-knoppen button:first-child { background: var(--zee); border-color: var(--zee); color: #fff; }
.hp-knoppen button:hover { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.hp-knoppen button:focus-visible { outline: 3px solid var(--zon); outline-offset: 2px; }

.reken.hp .reken-voetnoot { color: var(--inkt-licht); }
.reken.hp .reken-voetnoot a { color: var(--zee-diep); }

@media print {
  .reken.hp { display: block !important; background: #fff; border: 0; }
  .hp .reken-velden,
  .hp .hp-knoppen,
  .hp .hp-groepkop.hp-invoerkop { display: none !important; }
  .hp .hp-dag,
  .hp .hp-tabel thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Kleinere getalvelden voor bedragen */
.hp-basisrij.hp-klein { margin-bottom: 0; }
.hp-basisrij.hp-klein input[type="number"] { font-size: 1.05rem; width: 8rem; }

/* Van omzet naar resultaat */
.reken.hp .postenlijst { background: var(--doek); border: 1px solid var(--lijn); border-radius: var(--ronding); padding: .25rem 1rem; }
.reken.hp .postenlijst .totaalregel { border-top: 2px solid var(--zee); }
.reken.hp .postenlijst .totaalregel dt,
.reken.hp .postenlijst .totaalregel dd { color: var(--inkt); font-weight: 800; }
.reken.hp .postenlijst > div:last-child dd { color: var(--zee); font-size: 1.15rem; }

/* Mobiel: tabellen compacter */
@media (max-width: 41.99rem) {
  .tekst .hp .hp-tabel { min-width: 27rem; font-size: .8125rem; }
  .tekst .hp .hp-tabel th,
  .tekst .hp .hp-tabel td { padding: .5rem .5rem; }
  .reken.hp { padding: 1.25rem 1rem 1.5rem; }
}

/* Boekingskanalen */
.hp-kanalen { background: var(--doek); border: 1px solid var(--lijn); border-radius: var(--ronding); }
.hp-kanaalkop,
.hp-kanaal,
.hp-kanaalvoet {
  display: grid;
  grid-template-columns: 1fr 6.5rem 6.5rem;
  gap: .6rem;
  align-items: center;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--lijn);
}
.hp-kanaalkop { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--doek); background: var(--inkt); font-weight: 700; border-bottom: 0; }
.reken.hp .hp-kanaal label { margin: 0; font-size: .9375rem; text-transform: none; letter-spacing: 0; color: var(--inkt); font-weight: 600; }
.hp-procent { display: flex; align-items: center; gap: .3rem; }
.hp-procent input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: .45rem .5rem;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--ronding);
  background: var(--doek);
  color: var(--inkt);
  min-height: 2.75rem;
}
.hp-procent input:focus-visible { outline: 3px solid var(--zon); outline-offset: 1px; }
.hp-procent i { font-style: normal; color: var(--inkt-zacht); font-weight: 600; }
.hp-kanaalvoet { border-bottom: 0; grid-template-columns: 1fr auto; font-size: .875rem; color: var(--inkt-zacht); background: var(--tint); }
.hp-kanaalvoet strong { color: var(--zee); font-size: 1rem; }
.hp-mixtotaal.hp-afwijkend { color: var(--zee-diep); font-weight: 700; }
@media (max-width: 41.99rem) {
  .hp-kanaalkop,
  .hp-kanaal { grid-template-columns: 1fr 5.2rem 5.2rem; gap: .4rem; padding: .5rem .6rem; }
  .reken.hp .hp-kanaal label { font-size: .8125rem; }
}
.hp-procent input { -moz-appearance: textfield; appearance: textfield; padding: .45rem .4rem; text-align: right; }
.hp-procent input::-webkit-outer-spin-button,
.hp-procent input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 41.99rem) {
  .hp-kanaalkop,
  .hp-kanaal { grid-template-columns: 1fr 4.4rem 4.9rem; }
  .hp-procent { gap: .2rem; }
}