/* V0.5.12 – Tastatur optisch an HACCP angeglichen + Fokus nur auf dem Mengenfeld */

/* Der äußere Bestellbalken bleibt im normalen Zustand. Nur das aktive Mengenfeld wird markiert. */
.order-choice:has(input.keypad-active){
  border:2px solid #aebcc8!important;
  box-shadow:none!important;
  background:#fff!important;
}
.order-choice:has(input.keypad-active) .order-field-label{
  background:#eef3f7!important;
  color:#68788a!important;
}
.order-choice input.keypad-active{
  border:3px solid #e31b23!important;
  box-shadow:0 0 0 1px #e31b23!important;
  background:#fff!important;
  color:#172033!important;
  position:relative;
  z-index:2;
}

/* Lagerbestand links: Wert schwarz/kräftig, Bezeichnung klein darunter. */
.order-field-label.stock-field-label{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  padding:3px 5px!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.order-field-label.stock-field-label strong{
  display:block!important;
  color:#172033!important;
  font-size:13.5px!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.order-field-label.stock-field-label small{
  display:block!important;
  color:#667789!important;
  font-size:8px!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.order-choice:has(input.has-value) .stock-field-label strong{color:#172033!important}
.order-choice:has(input.has-value) .stock-field-label small{color:#71561f!important}
.order-choice:has(input.keypad-active) .stock-field-label strong{color:#172033!important}
.order-choice:has(input.keypad-active) .stock-field-label small{color:#667789!important}

/* Mobile Zahlentastatur: obere Infozeile bleibt kompakt; Zahlentasten und Weiter nochmals ca. 5 % größer. */
@media(max-width:900px), (pointer:coarse){
  .order-keypad{
    padding:5.25px 8px max(6px,env(safe-area-inset-bottom))!important;
    box-shadow:0 -8px 22px rgba(15,23,42,.14)!important;
  }
  .keypad-top{
    grid-template-columns:78px minmax(0,1fr) 42px!important;
    gap:5.25px!important;
    margin-bottom:4.2px!important;
  }
  .keypad-nav,.keypad-close{
    height:32.55px!important;
    min-height:32.55px!important;
    border-radius:9px!important;
    font-size:13px!important;
    padding:0 6px!important;
    white-space:nowrap!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
  }
  .keypad-close{font-size:19px!important;padding:0!important}

  /* Aktuelles Produkt in der Tastatur: beige wie die aktive Bestellzeile. */
  .keypad-current{
    padding:4px 8px!important;
    border:1px solid #dfb85f!important;
    border-radius:11px!important;
    background:#fff4d9!important;
    box-shadow:0 1px 3px rgba(181,132,32,.12)!important;
  }
  .keypad-current strong{
    font-size:12.5px!important;
    line-height:1.08!important;
    font-weight:950!important;
    color:#172033!important;
  }
  .keypad-current span{
    font-size:12px!important;
    margin-top:1px!important;
    line-height:1.05!important;
    color:#70551f!important;
  }
  .keypad-current b{font-size:15.5px!important;color:#172033!important}
  .keypad-current em{color:#9a6b12!important}

  .keypad-grid{
    gap:4.2px!important;
    max-width:none!important;
  }
  .keypad-grid button{
    height:46.1px!important;
    min-height:46.1px!important;
    border-radius:10px!important;
    font-size:24.2px!important;
  }
  .keypad-grid .keypad-next{font-size:17.3px!important}
  body.custom-keypad-open #orderPage{padding-bottom:285px!important}
}

@media(max-height:700px) and (max-width:900px), (max-height:700px) and (pointer:coarse){
  .keypad-nav,.keypad-close{height:30.45px!important;min-height:30.45px!important}
  .keypad-grid button{height:43.7px!important;min-height:43.7px!important}
  body.custom-keypad-open #orderPage{padding-bottom:268px!important}
}

/* =========================================================
   2026-08-14 – gezielte Tastatur-Korrektur
   - Unterste Reihe real: Zurück | 0 | Löschen
   - Abstand zur 9 bleibt sauber
   - Produktnamen-Rahmen bleibt leicht größer
   - Schließen-X nur dezent rot
   Keine Änderung an Bestell-, Speicher- oder Weiter-Logik.
   ========================================================= */
@media(max-width:900px), (pointer:coarse){
  .order-keypad{overflow:visible!important}

  .keypad-top{
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:7px!important;
    margin-bottom:7px!important;
  }

  /* Produktname + Menge bleibt etwas luftiger. */
  .keypad-current{
    min-height:44px!important;
    padding:5px 10px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  .keypad-current strong{line-height:1.12!important}
  .keypad-current span{margin-top:2px!important;line-height:1.08!important}

  /* X nur leicht rot – Größe und Funktion bleiben unverändert. */
  .keypad-close{
    height:44px!important;
    min-height:44px!important;
    color:#a94444!important;
    background:#fff7f7!important;
    border-color:#e5c8c8!important;
  }

  .keypad-grid{
    row-gap:8px!important;
    column-gap:4.2px!important;
  }

  /* Diese drei vorhandenen Buttons sind nach dem kleinen DOM-Patch echte Grid-Elemente. */
  .keypad-grid > #keypadPrev{
    position:static!important;
    grid-column:1!important;
    grid-row:4!important;
    width:auto!important;
    height:46.1px!important;
    min-height:46.1px!important;
    margin:0!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    border:1px solid #c6d0da!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#182235!important;
    font-size:15.5px!important;
    font-weight:850!important;
    padding:0 5px!important;
    box-shadow:0 1px 2px rgba(15,23,42,.05)!important;
    z-index:auto!important;
  }
  .keypad-grid > [data-keypad-digit="0"]{
    grid-column:2!important;
    grid-row:4!important;
  }
  .keypad-grid > #keypadBackspace{
    position:static!important;
    grid-column:3!important;
    grid-row:4!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
  }

  /* Weiter bleibt wie bisher als dunkler Button oberhalb rechts. */
  .keypad-grid #keypadNext{
    position:absolute!important;
    top:-66px!important;
    right:8px!important;
    width:min(31%,172px)!important;
    height:56px!important;
    min-height:56px!important;
    margin:0!important;
    border:1px solid #182235!important;
    border-radius:12px!important;
    background:#182235!important;
    color:#fff!important;
    font-size:17px!important;
    font-weight:900!important;
    box-shadow:0 4px 12px rgba(15,23,42,.18)!important;
    z-index:3!important;
  }
  body.custom-keypad-open #orderPage{padding-bottom:305px!important}
}

@media(max-height:700px) and (max-width:900px), (max-height:700px) and (pointer:coarse){
  .keypad-grid > #keypadPrev{height:43.7px!important;min-height:43.7px!important}
  .keypad-grid{row-gap:6px!important}
  .keypad-grid #keypadNext{top:-61px!important;height:52px!important;min-height:52px!important}
  body.custom-keypad-open #orderPage{padding-bottom:288px!important}
}