@charset "UTF-8";
/**
 * Kids Digitaal - Toetsenbordje voor vrije invulvelden (kd-toetsenbord)
 *
 * Het paneel is GEEN overlay: kd-toetsenbord.js zet het als zusje tussen
 * .kd-engine-content en .kd-check-btn-wrapper in de flexkolom van de app.
 * Daardoor krimpt de content vanzelf en dekt het toetsenbord nooit de vraag af.
 *
 * Zie kd-toetsenbord.js voor de logica en init.php (KD_TOETSENBORD_LIVE) voor
 * de schakelaar.
 */

/* ===== PANEEL ===== */
.kd-toetsenbord {
  flex-shrink: 0;
  z-index: 160;
  background: var(--kd-card, #fff);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  animation: kdTbIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes kdTbIn {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kd-toetsenbord {
    animation: none;
  }
}

.kd-toetsenbord[hidden] {
  display: none;
}

/* ===== RIJEN & TOETSEN ===== */
.kd-tb-rij {
  display: flex;
  gap: 7px;
  margin-bottom: 7px;
}

.kd-tb-rij:last-child {
  margin-bottom: 0;
}

.kd-tb-toets {
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--kd-text, #1A1D29);
  background: #F7F8FA;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.13);
  transition: transform 0.08s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.kd-tb-toets:active,
.kd-tb-toets.is-ingedrukt {
  transform: translateY(3px);
  background: #ECEFF3;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.13);
}

/* Wissen: smaller en grijzer, zodat hij niet met een cijfer verward wordt */
.kd-tb-toets--wis {
  flex: 0 0 16%;
  background: #E7EAEF;
  font-size: 1.2rem;
}

.kd-tb-toets--wis:active,
.kd-tb-toets--wis.is-ingedrukt {
  background: #DBDFE6;
}

.kd-tb-toets--wis svg {
  width: 26px;
  height: 26px;
  stroke: var(--kd-text-secondary, #6B7280);
}

/* Extra tekens (: , - /) iets kleiner dan de cijfers */
.kd-tb-toets--teken {
  flex: 0 0 12%;
  font-size: 1.25rem;
  color: var(--kd-text-secondary, #6B7280);
}

/* De OK-toets is tegelijk de Nakijken-knop */
.kd-tb-toets--ok {
  flex: 2 1 0;
  background: var(--kd-success, #00D68F);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}

.kd-tb-toets--ok:active,
.kd-tb-toets--ok.is-ingedrukt {
  background: var(--kd-success-dark, #00B377);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

.kd-tb-toets--ok[disabled] {
  background: #D6DAE0;
  color: #fff;
  cursor: default;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08);
}

.kd-tb-toets--ok[disabled]:active {
  transform: none;
}

/* ===== ACTIEF VELD ===== */
/* Zonder systeemtoetsenbord is er geen cursor, dus het actieve veld moet
   zelf duidelijk maken waar de tekens landen. */
.kd-tb-veld-actief {
  border-color: var(--kd-primary, #4BADFF) !important;
  box-shadow: 0 0 0 4px rgba(75, 173, 255, 0.18) !important;
}

/* De vul-in blanks hebben zelf al een lichtblauwe vulling, dus daar moet de
   actieve iets duidelijker uitspringen dan alleen de ring. */
input.kd-vulin-blank.kd-tb-veld-actief,
input.kd-rv-input.kd-tb-veld-actief {
  background: #CDE7FF !important;
}

/* Terwijl het toetsenbord open staat mag de vraag niet nog eens extra
   ruimte onderaan reserveren. */
.kd-leer-engine.kd-tb-open .kd-engine-content {
  padding-bottom: 8px;
}

/* ===== KLEINE SCHERMEN ===== */
@media (max-height: 700px) {
  .kd-tb-toets {
    height: 46px;
    font-size: 1.3rem;
  }

  .kd-tb-rij {
    gap: 6px;
    margin-bottom: 6px;
  }

  .kd-toetsenbord {
    padding: 8px 7px calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 700px) {
  .kd-toetsenbord {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    border-top: none;
  }
}