:root {
  --hpos-red: #a6193e;
  --hpos-ink: #14151A;
  --hpos-border: #E3E1DD;
  --hpos-bg: #F6F5F3;
}
#hpos-kiosk-root {
  color: var(--hpos-ink);
  color-scheme: light;
}
#hpos-kiosk-root input, #hpos-kiosk-root select { color: var(--hpos-ink); }
.hpos-modal, .hpos-modal input, .hpos-modal select { color: var(--hpos-ink); }

html, body {
  color-scheme: light;
  margin: 0;
  padding: 0;
  background: #F6F5F3;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* The kiosk used to be a fixed 100vh box with overflow:hidden and a
   carefully choreographed set of inner scroll regions (the product
   grid scrolling independently of the cart, which scrolled independently
   of the page...) so that nothing on screen ever needed the browser's
   own scrollbar. In practice this kept being a source of exactly the
   kind of bug that's hard to catch without a real device in hand: a
   nested scroll container that LOOKS scrollable in testing can still
   feel stuck or undiscoverable on a real touchscreen, especially once
   several are nested inside each other. Simpler and far more robust:
   the kiosk is just a normal page now. It's at least one full screen
   tall (min-height, not height, so it's free to grow), and if a full
   cart or a big catalog makes it taller than the screen, the browser's
   own scrollbar (or a normal touch-scroll) handles the rest \u2014 the one
   scrolling mechanism every browser and every person already knows how
   to use, on a phone, a tablet, or a desktop, without exception. */
#hpos-kiosk-root {
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
#hpos-kiosk-root * { box-sizing: border-box; }
#hpos-kiosk-root .hgi-portal--login { padding: 0; align-items: center; }
#hpos-kiosk-root .hgi-app-footer { margin-top: 8px; }

.hpos-kiosk-pinpad {
  max-width: 360px;
  margin: 8vh auto 0;
  background: #fff;
  border: 1px solid #E3E1DD;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
}
.hpos-kiosk-logo {
  font-size: 22px;
  font-weight: 700;
  color: #a6193e;
  margin-bottom: 20px;
}
.hpos-kiosk-pin-display {
  font-size: 28px;
  letter-spacing: 8px;
  min-height: 40px;
  margin-bottom: 16px;
  color: #14151A;
}
.hpos-kiosk-pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hpos-kiosk-pin-key {
  min-height: 64px;
  font-size: 22px;
  font-weight: 600;
  border: 1px solid #E3E1DD;
  border-radius: 10px;
  background: #F6F5F3;
  cursor: pointer;
}
.hpos-kiosk-pin-key:active { background: #E3E1DD; }
.hpos-kiosk-pin-enter { background: #a6193e; color: #fff; border-color: #a6193e; }
.hpos-kiosk-pin-clear { font-size: 14px; }

/* --- Tablet / phone --- */
@media (max-width: 900px) {
  #hpos-kiosk-root { padding: 10px; }
}
@media (max-width: 560px) {
  #hpos-kiosk-root { padding: 8px; }
  .hpos-kiosk-pin-grid { gap: 8px; }
  .hpos-kiosk-pin-key { min-height: 54px; font-size: 19px; }
}