/* /ny-klinik/book/ (Morten 11/11 + 12/11): videobooking i /ny-klinik-universet - tokens only.
   Først dagene, så tiderne - to skærme ("Først datoer så tidspunkter. 2 steps"). Det valgte står hvidt, som i pakke-trinnet.
   Ingen hop ved load: kort og tider har faste mål, skeletterne er præcis lige så store, og tomme pladser fyldes ud. */
.nk .nkb { display: flex; flex-direction: column; align-items: center; width: min(100%, calc(var(--space-30) * 5)); margin: 0 auto; text-align: center; }
.nk .nkb-title { margin: 0; }
.nk .nkb-team { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); text-align: left; }
.nk .nkb-team .nk-chat__team > * { width: var(--space-10); height: var(--space-10); box-shadow: 0 0 0 2px var(--nk-void); }
.nk .nkb-team .nk-chat__team > * + * { margin-left: calc(var(--space-2) * -1); }
.nk .nkb-team__t { margin: 0; font-size: var(--text-lg); line-height: 1.35; color: var(--nk-text); }
.nk .nkb-meta { display: block; margin-top: var(--space-1); font-size: var(--text-md); color: var(--nk-soft); }

/* dag: de første otte ledige dage som kort, fire pr. række (mobil: to) */
.nk .nkb-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); width: min(100%, calc(var(--space-30) * 4.6)); margin-top: var(--space-8); }
.nk .nkb-day {
  display: grid; align-content: center; justify-items: center; gap: var(--space-1); min-height: calc(var(--space-16) + var(--space-3)); padding: var(--space-3);
  border: 0; border-radius: var(--pc-radius-card); background: color-mix(in srgb, var(--pc-surface) 6%, transparent);
  box-shadow: inset 0 0 0 var(--pc-hairline) var(--nk-line); color: var(--nk-text); font: inherit; text-align: center; cursor: pointer;
  transition: background-color 0.3s var(--nk-ease), color 0.3s var(--nk-ease), box-shadow 0.3s var(--nk-ease);
}
.nk .nkb-day__w { font-size: var(--text-md); line-height: 1.2; color: var(--nk-soft); }
.nk .nkb-day__d { font-size: var(--text-2xl); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.nk .nkb-day:hover { background: color-mix(in srgb, var(--pc-surface) 11%, transparent); }
.nk .nkb-day[aria-selected="true"] { background: var(--pc-surface); color: var(--pc-primary); box-shadow: 0 var(--space-4) var(--space-10) calc(var(--space-4) * -1) color-mix(in srgb, black 55%, transparent); }
.nk .nkb-day[aria-selected="true"] .nkb-day__w { color: var(--pc-soft-ink); }
.nk .nkb-day:focus-visible, .nk .nkb-slot:focus-visible { outline: none; box-shadow: var(--nk-ring); }

/* tid: dagen øverst, alle dagens tider fire pr. række - pladsen til fire rækker står fast */
.nk .nkb-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); width: min(100%, calc(var(--space-30) * 3.8)); margin-top: var(--space-6); }
.nk .nkb-slot {
  height: calc(var(--space-10) + var(--space-2)); border: 0; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--pc-surface) 6%, transparent); box-shadow: inset 0 0 0 var(--pc-hairline) var(--nk-line-hi);
  color: var(--nk-text); font: inherit; font-size: var(--text-lg); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color 0.3s var(--nk-ease), color 0.3s var(--nk-ease);
}
.nk .nkb-slot:hover { background: color-mix(in srgb, var(--pc-surface) 13%, transparent); }
.nk .nkb-slot[aria-selected="true"] { background: var(--pc-surface); color: var(--pc-primary); box-shadow: none; }
.nk .nkb-fine { margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--nk-dim); }
.nk .nkb-void { visibility: hidden; }  /* tom plads i gitteret: holder målene, ses ikke */

/* den valgte dag/tid som pille med "Skift" (tid- og dig-skærmen) */
.nk .nkb-when {
  display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 0; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--pc-surface) 8%, transparent); font-size: var(--text-md); color: var(--nk-text);
}
.nk .nkb-when .nk-i { flex: none; color: var(--nk-accent); }
.nk .nkb-when .nk-link { margin-left: var(--space-2); padding: var(--space-1) var(--space-3); font-size: var(--text-md); }

/* dig: tiden øverst, tre felter */
.nk .nkb-form { display: grid; gap: var(--space-4); width: min(100%, calc(var(--space-30) * 3.4)); margin-top: var(--space-6); text-align: left; }
.nk .nkb-form .nk-field input { letter-spacing: 0; font-variant-numeric: normal; }
.nk .nkb-opt { font-style: normal; color: var(--nk-dim); }
.nk .nkb-fag { margin: 0; font-size: var(--text-md); color: var(--nk-soft); }
.nk .nkb-fag b { font-weight: 500; color: var(--nk-text); }
.nk .nkb-go { justify-self: center; margin-top: var(--space-2); }
.nk .nkb-form .nkb-fine { justify-self: center; margin-top: 0; }

/* bekræftet */
.nk .nkb-ok__icon { display: grid; place-items: center; width: var(--space-16); height: var(--space-16); margin-bottom: var(--space-5); border-radius: var(--radius-pill); background: var(--pc-surface); color: var(--pc-primary); }
.nk .nkb-ok__icon .nk-i { font-size: var(--text-5xl); stroke-width: 2.4; }
.nk .nkb-ok__when { margin: var(--space-4) 0 0; font-size: var(--text-2xl); font-weight: 500; color: var(--nk-text); }
.nk .nkb-ok__t { margin: var(--space-2) 0 0; font-size: var(--text-md); color: var(--nk-soft); }
.nk .nkb-ok__t b { font-weight: 500; color: var(--nk-text); }
.nk .nkb-ok__btns { margin-top: var(--space-6); }
.nk .nkb-cal { gap: var(--space-2); }
.nk .nkb-ok__try { width: min(100%, calc(var(--space-30) * 3)); margin-top: var(--space-10); padding-top: var(--space-6); border-top: var(--pc-hairline) solid var(--nk-line); }
.nk .nkb-ok__try p { margin: 0 0 var(--space-2); font-size: var(--text-md); color: var(--nk-soft); }

/* indlæsning: rolige pladsholdere i præcis samme mål som kort og tider */
.nk .nkb-skel { display: block; background: color-mix(in srgb, var(--pc-surface) 5%, transparent); box-shadow: none; cursor: default; animation: nkb-pulse 1.4s var(--nk-ease) infinite alternate; }
@keyframes nkb-pulse { from { opacity: 0.45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nk .nkb-skel { animation: none; } }
/* ingen tider / fejl */
.nk .nkb-state { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.nk .nkb-state p { margin: 0; font-size: var(--text-lg); color: var(--nk-text); }
.nk .nkb-state .nk-link { font-size: var(--text-md); }
/* formularen: fejl fra CSM (fx "tiden er taget") og knappens ventetilstand */
.nk .nkb-form .nk-err { margin: 0; }
.nk .nkb-formerr { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--pc-radius-card); background: color-mix(in srgb, var(--pc-surface) 8%, transparent); font-size: var(--text-md); line-height: 1.4; color: var(--nk-text); }
.nk .nkb-formerr .nk-link { margin-left: var(--space-1); font-size: var(--text-md); }
.nk .nkb-go:disabled { cursor: progress; }
.nk .nkb-go.is-loading > .nk-i { display: none; }

/* Ingen hop ved load (Morten 12/11): siden står stille, til tekster, skrift og datoer er på plads, og toner så frem samlet.
   book.js sætter .is-ready (senest efter 0,5 s). Uden JS - eller hvis book.js fejler - vises siden alligevel efter 1,5 s. */
.nkb-page:not(.is-ready) :is(.nk-trail, .nk-top-r, .nk-steps, .nk-stage, .nk-privacy) { opacity: 0; animation: nkb-show 0s linear 1.5s forwards; }
.nkb-page :is(.nk-trail, .nk-top-r, .nk-steps, .nk-privacy) { transition: opacity 0.3s var(--nk-ease); }
@keyframes nkb-show { to { opacity: 1; } }

@media (max-width: 599px) {
  .nk .nkb { align-items: stretch; text-align: left; }
  .nk .nkb-days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); width: 100%; margin-top: var(--space-6); }
  .nk .nkb-slots, .nk .nkb-form { width: 100%; }
  .nk .nkb-fine { text-align: center; }
  .nk .nkb-when { align-self: flex-start; }
  .nk .nkb-go { width: 100%; }
  .nk .nkb--ok { align-items: center; text-align: center; }
}
/* Mobil (Morten 13/11: "komprimeret, overskuelig og lækker på mobil, så man ikke skal scrolle for meget"):
   lavere dagkort og strammere rytme - skeletterne har samme klasse, så intet hopper */
@media (max-width: 599px) {
  .nk .nkb-days { margin-top: var(--space-5); }
  .nk .nkb-day { min-height: calc(var(--space-12) + var(--space-2)); padding: var(--space-2); gap: 0; }
  .nk .nkb-day__w { font-size: var(--text-sm); }
  .nk .nkb-day__d { font-size: var(--text-xl); }
  .nk .nkb-team { margin-top: var(--space-4); }
}
@media (max-width: 599px) {  /* formularen strammere på telefonen (Morten 13/11) */
  .nk .nkb { --nk-field-h: calc(var(--space-10) + var(--space-1)); }
  .nk .nkb-title { font-size: var(--text-5xl); }
  .nk .nkb-form { gap: var(--space-3); margin-top: var(--space-4); }
  .nk .nkb-form .nk-field { gap: var(--space-1); }
  .nk .nkb-when { margin-top: var(--space-4); }
}
@media (max-width: 599px) and (max-height: 700px) { .nk .nkb-title { font-size: var(--text-4xl); } }