/* Natuurlijk Susanne — boekingspagina */

.boek__wrap { max-width: 780px; margin: 0 auto; }

.boek__paneel { margin-bottom: 46px; }
.boek__paneel--klaar { max-width: 620px; }

.boek__label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sage-deep); margin: 18px 0 8px; font-weight: 600; }

.boek__select, .boek__input {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 14px; outline: none; transition: border-color .18s ease;
}
.boek__select:focus, .boek__input:focus { border-color: var(--sage-deep); }
.boek__select { height: 48px; }
textarea.boek__input { resize: vertical; }

.boek__waarschuwing { background: #fdf3ec; border: 1.5px solid var(--terra); border-radius: 12px;
  padding: 14px 18px; font-size: 15px; color: var(--ink); margin: 0 0 26px; line-height: 1.6; }
.boek__waarschuwing[hidden] { display: none; }
/* Uitleg bij stap 2 als we de momenten opnieuw hebben opgehaald (oud tabblad, moment net
   weg). Rustiger dan de storingsmelding: er is niets stuk, de klant kiest gewoon opnieuw. */
.boek__melding { background: var(--cream-2); border: 1.5px solid var(--sage); border-left-width: 5px;
  border-radius: 12px; padding: 12px 16px; font-size: 15px; color: var(--ink); margin: 0 0 20px; line-height: 1.55; }
.boek__melding[hidden] { display: none; }

.boek__gekozenrij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.boek__gekozenrij[hidden] { display: none; }
.boek__info { font-size: 15px; color: var(--ink-soft);
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin: 0; }
.boek__wis { font: inherit; font-size: 14px; color: var(--sage-deep); cursor: pointer;
  background: none; border: none; padding: 6px 4px; display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.boek__wis::before { content: '✕'; font-size: 13px; line-height: 1; }
.boek__wis:hover { color: var(--terra); border-bottom-color: currentColor; }
.boek__note { margin-top: 16px; font-size: 14.5px; color: var(--ink-soft); }
.boek__note a { color: var(--sage-deep); }
.boek__note--tight { margin-top: 8px; }

/* Extra's bij een behandeling */
.boek__extralijst { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.boek__extra { display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px;
  font-size: 14.5px; color: var(--ink); cursor: pointer; transition: border-color .15s ease; }
.boek__extra:hover { border-color: var(--sage-deep); }
.boek__extra input { accent-color: var(--sage-deep); width: 16px; height: 16px; flex: none; }
.boek__extra .prijs { margin-left: auto; color: var(--sage-deep); white-space: nowrap; }
@media (max-width: 680px) { .boek__extralijst { grid-template-columns: 1fr; } }

/* Weeknavigatie + dagen */
.boek__weeknav { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; }
.boek__periode { font-family: var(--display); font-size: 17px; color: var(--ink); flex: 1; text-align: center; }
.boek__dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.boek__dag { border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
  padding: 10px 4px 8px; text-align: center; cursor: pointer; font: inherit;
  transition: border-color .15s ease, background .15s ease; }
.boek__dag:hover:not(:disabled) { border-color: var(--sage-deep); }
.boek__dag:disabled { opacity: .38; cursor: default; }
.boek__dag.is-actief { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.boek__dag-wd { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.boek__dag-nr { display: block; font-family: var(--display); font-size: 19px; line-height: 1.3; }
.boek__dag-n { display: block; font-size: 11px; opacity: .75; }

/* Tijdslots */
.boek__slots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.boek__slot { display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  border-radius: 100px; border: 1.5px solid var(--sage-deep); background: #fff;
  color: var(--sage-deep); font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease; }
.boek__slot:hover { background: var(--sage-deep); color: #fff; }
.boek__leeg { font-size: 15px; color: var(--ink-soft); margin-top: 16px; }

/* Formulier */
.boek__gekozen { font-size: 15.5px; background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; margin: 4px 0 6px; }
.boek__veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.boek__akkoord { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 4px;
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; cursor: pointer; }
.boek__akkoord input { margin-top: 3px; accent-color: var(--sage-deep); width: 17px; height: 17px; flex: none; }
.boek__acties { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.boek__msg { min-height: 22px; font-size: 14.5px; margin-top: 14px; }
.boek__msg.err { color: #a04328; }
.boek__msg.ok { color: var(--sage-deep); }
/* De WhatsApp-link in een melding (buitenlands nummer, storing) moet als link herkenbaar
   zijn: sitebreed staan links zonder onderstreping (styles.css), en dan las "WhatsApp" als
   gewone tekst. Ook in de storingsmelding bovenaan. */
.boek__msg a, .boek__waarschuwing a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* Samenvatting (bevestiging + beheer) */
.boek__samenvatting { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 22px; margin: 14px 0 18px; }
.boek__samenvatting dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 0; }
.boek__samenvatting dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sage-deep); font-weight: 600; padding-top: 2px; }
.boek__samenvatting dd { margin: 0; font-size: 15.5px; color: var(--ink); }

@media (max-width: 680px) {
  .boek__dagen { grid-template-columns: repeat(4, 1fr); }
  .boek__veldrij { grid-template-columns: 1fr; }
}

/* Behandelingstegels: op telefoons (tot en met 680 px) én op elk aanraakscherm (iPad).
   Daar tekent iOS het keuzemenu zelf, smal en met afgebroken regels; op de iPad net zo
   (melding Stefan 2026-10-18). Het onderscheid met een laptop maken we op de bediening, niet
   op de breedte: een iPad liggend is even breed als een kleine laptop. "(hover: none) and
   (pointer: coarse)" = vinger als hoofdbediening; een laptop met muis of trackpad houdt het
   keuzemenu precies zoals het was. Het select blijft in de pagina als bron van de keuze,
   maar is dan verborgen (display:none: ook niet voor schermlezers, niet met Tab). */
.boek__tegels { display: none; }
@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  .boek__select { display: none; }
  .boek__tegels { display: block; }
  /* Ruimte rechts voor de zwevende knoppen (44 px + 20 px rand), zodat ze geen tekst afdekken */
  .boek__tegelgroep { margin-bottom: 18px; padding-right: 0; }
  .boek__tegelkop { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sage-deep); font-weight: 600; margin: 4px 0 8px; }
  .boek__tegel { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; align-items: center; align-content: center; /* naam en prijs bij elkaar, ook als de tegel naast een hogere wordt uitgerekt */
    width: 100%; min-height: 56px; margin: 0 0 8px; padding: 10px 62px 10px 14px; /* rechts vrij voor de zwevende knoppen */ text-align: left;
    font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line-2);
    border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
  .boek__tegel::before { content: ''; grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--line-2); background: #fff center / 14px no-repeat;
    transition: background-color .15s ease, border-color .15s ease; }
  .boek__tegel-naam { grid-column: 2; font-weight: 600; font-size: 15.5px; line-height: 1.35; overflow-wrap: break-word; }
  .boek__gekozenrij { scroll-margin-top: 110px; }
  .boek__tegel-rest { grid-column: 2; font-size: 14px; color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }
  .boek__tegel:focus-visible { outline: 3px solid var(--terra-deep); outline-offset: 2px; }
  .boek__tegel.is-gekozen { background: var(--cream-2); border-color: var(--terra-deep);
    box-shadow: inset 0 0 0 1.5px var(--terra-deep); }
  .boek__tegel.is-gekozen::before { border-color: var(--terra-deep); background-color: var(--terra-deep);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
  .boek__tegel.is-gekozen .boek__tegel-rest { color: var(--ink); }
  /* Ingeklapt na een keuze: alleen de gekozen tegel en zijn groepskop blijven staan. */
  .boek__tegels.is-ingeklapt .boek__tegel:not(.is-gekozen),
  .boek__tegels.is-ingeklapt .boek__tegelgroep:not(.heeft-keuze) { display: none; }
}
/* Telefoon: prijzen van de extra's mogen niet onder de zwevende knoppen (44 px + 20 px rand) komen */
@media (max-width: 680px) {
  .boek__extra { padding-right: 62px; }
}
/* Aanraakscherm breder dan een telefoon (iPad): tegels in twee kolommen, één hoogte per rij.
   Ingeklapt staat de gekozen tegel over de volle breedte. */
@media (min-width: 681px) and (hover: none) and (pointer: coarse) {
  .boek__tegelgroep { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: stretch; }
  .boek__tegelkop { grid-column: 1 / -1; }
  .boek__tegels.is-ingeklapt .boek__tegelgroep { grid-template-columns: 1fr; }
}