/* Kiosk field/action flow, 2026-09-17 v2. Keep controls in one layout box. */
:root {
  --kiosk-action-width: 160px;
  --kiosk-action-gap: 18px;
  --delivery-action-width: 190px;
}

.app-shell .wizard-form > .kiosk-step-frame {
  position: absolute;
  top: 34vh;
  left: 20%;
  width: 60%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--kiosk-action-width);
  column-gap: var(--kiosk-action-gap);
  align-items: start;
  box-sizing: border-box;
  z-index: 24;
}

.app-shell .wizard-form > .kiosk-step-frame.is-picker { top: clamp(150px, 18vh, 200px); }
.app-shell .wizard-form > .kiosk-step-frame.hidden { display: none !important; }

.app-shell .kiosk-step-frame > .field.wizard-step {
  position: relative !important;
  inset: auto !important;
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  min-width: 0;
  transform: none !important;
  animation: none !important;
  overflow: visible;
}

.app-shell .kiosk-step-frame > .field.wizard-step > input {
  display: block;
  width: 100% !important;
  box-sizing: border-box;
  border-bottom: 2px solid #f15a29;
}

.app-shell .kiosk-step-frame > .field.wizard-step > input:focus { border-bottom-color: #ff7040; }

.app-shell .kiosk-step-frame > .wizard-nav {
  position: static !important;
  inset: auto !important;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: block;
  width: var(--kiosk-action-width) !important;
  max-width: none !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 1;
}

.app-shell .kiosk-step-frame > .wizard-nav .primary-btn {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px;
  white-space: nowrap;
}

.app-shell .wizard-nav .primary-btn.hidden { display: none !important; }

.app-shell .kiosk-step-frame .recipient-checklist {
  width: calc(100% + var(--kiosk-action-width) + var(--kiosk-action-gap)) !important;
  max-width: none !important;
  box-sizing: border-box;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.app-shell .kiosk-step-frame > .signout-results {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
  box-sizing: border-box;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.delivery-flow .kiosk-delivery-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--delivery-action-width);
  column-gap: var(--kiosk-action-gap);
  align-items: end;
  width: 100%;
}

.delivery-flow .kiosk-delivery-row > .delivery-search,
.delivery-flow .kiosk-delivery-row > .delivery-number,
.delivery-flow .kiosk-delivery-row .delivery-number input {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

.delivery-flow .kiosk-delivery-row > .delivery-search,
.delivery-flow .kiosk-delivery-row > .delivery-number {
  grid-column: 1;
  grid-row: 1;
}

.delivery-flow .kiosk-delivery-row > .delivery-search,
.delivery-flow .kiosk-delivery-row .delivery-number input {
  border-bottom: 2px solid #f15a29;
}

.delivery-flow .kiosk-delivery-row > .delivery-footer {
  position: static !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end;
  display: block;
  width: var(--delivery-action-width) !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

.delivery-flow .kiosk-delivery-row .delivery-continue {
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap;
}

.delivery-flow .delivery-results {
  width: 100%;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.app-shell .action-row[data-step="6"] {
  right: 12.8vw !important;
  grid-template-columns: auto !important;
  width: auto;
}

@media (max-width: 760px) {
  .app-shell .wizard-form > .kiosk-step-frame { left: 10%; width: 80%; }
}

@media (max-width: 600px) {
  :root {
    --kiosk-action-width: 64px;
    --kiosk-action-gap: 12px;
    --delivery-action-width: 154px;
  }

  .delivery-flow[data-step="1"] { --delivery-action-width: 64px; }

  .app-shell .kiosk-step-frame > .wizard-nav #wizardNextBtn,
  .delivery-flow[data-step="1"] .kiosk-delivery-row .delivery-continue {
    min-width: 64px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  .app-shell .kiosk-step-frame > .wizard-nav #wizardNextBtn::after,
  .delivery-flow[data-step="1"] .kiosk-delivery-row .delivery-continue::after {
    content: "\2192";
    display: block;
    font: 600 30px/1 "Avenir Next", Avenir, sans-serif;
  }

  .app-shell .wizard-form > .kiosk-step-frame { left: 8%; width: 84%; top: 30vh; }
  .app-shell .wizard-form > .kiosk-step-frame.is-picker { top: 135px; }
  .app-shell .kiosk-step-frame > .wizard-nav .primary-btn,
  .delivery-flow .kiosk-delivery-row .delivery-continue { min-height: 52px; font-size: 16px; }
  .app-shell .action-row[data-step="6"] { right: 8% !important; }
}