/* 1999.LOC — the payment tool's face: a card terminal.
 *
 * The dark plastic point-of-sale terminal that sat by every till: a small
 * backlit blue LCD, a grid of hard rubber number keys, a red cancel and a
 * green enter, and a slot along the top. That is the shape here, with the card
 * slot turned into the QR the customer scans. You key in the amount, it checks
 * the address, and it prints a receipt with the code.
 *
 * No CSS variables, no web fonts. The charcoal body, the cyan LCD glow and the
 * red/green action keys are plain colours and bevels, scoped under
 * [data-app="pay"].
 */

/* ---- the menu bar, pinned to the window --------------------------- */
[data-app="pay"] .app-window > .pos-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px 4px;
  background: #cdd0d5;
  border-bottom: 1px solid #8b8f96;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: #1b1d21;
}
[data-app="pay"] .app-window > .pos-menu .menu-title {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  min-height: 26px;
}

[data-app="pay"] .app-body {
  font-family: "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  font-size: 12px;
  color: #1b1d21;
  background: #9aa0a8;
}
/* The gutter. The shell sets `padding: 0` on an application's body, for the
   programs that lay themselves out in bands and bring their own spacing; this
   one is content, and with no gutter every line starts hard against the tube.
   A plain `[data-app] .app-body` loses to that shell rule, which carries an
   element plus two classes, which is why the padding this asked for never
   arrived. Naming the desk the window sits on wins on class count without
   reaching outside the app. */
[data-app="pay"] .desk-shell .app-window > .app-body { padding: 10px 14px; }

[data-app="pay"] .app-body h3 { font-size: 13px; color: #0a3550; margin: 10px 0 5px 0; }
[data-app="pay"] .app-body .note { color: #33383d; }
[data-app="pay"] .app-body a { color: #0a5f8a; }

/* ---- the terminal body -------------------------------------------- */
[data-app="pay"] .pos-machine {
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 14px 16px 18px;
  border-radius: 14px 14px 18px 18px;
  background: #31353d;
  border: 1px solid #14161a;
  border-top-color: #4b515b;
  box-shadow: inset 0 2px 0 #565d68, inset 0 -4px 10px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35);
  color: #e7ebf0;
}
[data-app="pay"] .pos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
[data-app="pay"] .pos-brand {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 12px;
  color: #93a6b4;
}
/* The card-swipe slot along the top, drawn as ridges. */
[data-app="pay"] .pos-grip {
  width: 74px; height: 12px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #23262b 0, #23262b 3px, #3a3f47 3px, #3a3f47 6px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ---- the backlit LCD ---------------------------------------------- */
[data-app="pay"] .pos-screen {
  background: #06243b;
  border: 2px solid #0b3a5c;
  border-radius: 5px;
  padding: 9px 12px;
  margin-bottom: 12px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.7), inset 0 0 0 1px #0a2f4a;
}
[data-app="pay"] .pos-scr-top { display: flex; align-items: baseline; gap: 8px; }
[data-app="pay"] .pos-ticker {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 13px;
  color: #5fb6d4;
  letter-spacing: 1px;
}
[data-app="pay"] .pos-amount {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  text-align: right;
  font-family: "Courier New", Courier, monospace;
  font-size: 30px;
  font-weight: 700;
  color: #7fdcef;
  text-shadow: 0 0 6px rgba(90, 200, 230, 0.5);
}
[data-app="pay"] .pos-amount::placeholder { color: #2f6d86; }
[data-app="pay"] .pos-scr-sub {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  color: #3f88a4;
  margin-top: 4px;
  min-height: 14px;
}

/* ---- the coin toggle ---------------------------------------------- */
[data-app="pay"] .pos-coins { display: flex; gap: 8px; margin-bottom: 10px; }
[data-app="pay"] .pos-coin {
  flex: 1 1 0;
  padding: 8px 0;
  border-radius: 7px;
  border: 1px solid #14161a;
  border-top-color: #545b66;
  background: #3c414a;
  color: #c7cdd4;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #565d68;
}
[data-app="pay"] .pos-coin.is-on {
  background: #e8a11f;
  border-color: #a9741a;
  border-top-color: #ffd77a;
  color: #35240a;
  box-shadow: inset 0 2px 5px rgba(80, 50, 0, 0.4);
}

/* ---- the fields --------------------------------------------------- */
[data-app="pay"] .pos-field { margin-bottom: 9px; }
[data-app="pay"] .pos-field label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #93a0ac;
  margin-bottom: 3px;
}
[data-app="pay"] .pos-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 9px;
  border: 1px solid #14161a;
  border-radius: 5px;
  background: #1a1d22;
  color: #e7ebf0;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
[data-app="pay"] .pos-field input:focus { outline: 2px solid #2f7fa6; outline-offset: -1px; }
[data-app="pay"] .pos-addr-wrap { position: relative; }
[data-app="pay"] .pos-mark {
  display: block;
  min-height: 14px;
  margin-top: 3px;
  font-size: 11px;
  font-family: "Courier New", Courier, monospace;
}
[data-app="pay"] .pos-mark.is-ok { color: #4fd07a; }
[data-app="pay"] .pos-mark.is-bad { color: #f08a5f; }

/* ---- the keypad --------------------------------------------------- */
[data-app="pay"] .pos-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 12px;
}
[data-app="pay"] .pos-key {
  padding: 12px 0;
  border-radius: 7px;
  border: 1px solid #14161a;
  border-top-color: #565d68;
  background: linear-gradient(#454b54, #363b43);
  color: #eef1f4;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #5d646f, 0 2px 0 #1c1f24;
}
[data-app="pay"] .pos-key:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); }
[data-app="pay"] .pos-key-back { color: #f0b45f; }
[data-app="pay"] .pos-back-ico { width: 26px; height: 17px; vertical-align: middle; }

/* ---- the action keys ---------------------------------------------- */
[data-app="pay"] .pos-actions { display: flex; gap: 10px; }
[data-app="pay"] .pos-clear,
[data-app="pay"] .pos-charge {
  flex: 1 1 0;
  padding: 13px 0;
  border-radius: 8px;
  border: 1px solid #14161a;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}
[data-app="pay"] .pos-clear {
  background: #b23a2a;
  border-top-color: #e2705f;
  color: #ffece7;
  box-shadow: inset 0 1px 0 #d4695a, 0 2px 0 #7f2418;
}
[data-app="pay"] .pos-charge {
  flex: 2 1 0;
  background: #1f9d4d;
  border-top-color: #58d488;
  color: #eafff1;
  box-shadow: inset 0 1px 0 #4cc57c, 0 2px 0 #136a33;
}
[data-app="pay"] .pos-clear:active,
[data-app="pay"] .pos-charge:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4); }

[data-app="pay"] .error { color: #a01010; margin: 8px 2px 0; }

/* ---- the customer receipt ----------------------------------------- */
[data-app="pay"] .pos-ticket {
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  margin: 12px auto 0;
  padding: 14px;
  background: #f7f4ec;
  border: 1px solid #d8d2c2;
  border-radius: 4px;
  text-align: center;
  color: #1b1d21;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
[data-app="pay"] .pos-ticket-head {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: #0a3550;
  margin-bottom: 8px;
}
[data-app="pay"] .pos-qr { line-height: 0; }
[data-app="pay"] .pos-qr svg { display: inline-block; width: 200px; height: 200px; }
[data-app="pay"] .pos-uri {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  color: #3a4048;
  word-break: break-all;
  margin: 8px 0;
  max-height: 60px;
  overflow: auto;
}
[data-app="pay"] .pos-ticket-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
[data-app="pay"] .pos-ticket-actions button {
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid #9aa0a4;
  border-top-color: #ffffff;
  background: #eef1f2;
  color: #23282b;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff;
}
[data-app="pay"] .pos-ticket-actions button:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25); }

/* ---- responsive --------------------------------------------------- */
@media (max-width: 700px) {
  [data-app="pay"] .app-window > .pos-menu span { padding: 2px 5px; }
  [data-app="pay"] .pos-machine, [data-app="pay"] .pos-ticket { max-width: none; }
  [data-app="pay"] .pos-amount { font-size: 26px; }
  [data-app="pay"] .pos-qr svg { width: 170px; height: 170px; }
}