/* DuitNow QR Display Guideline (Appendix C):
   Color 01 ruby #ED2E67, Color 02 black #000000.
   Typeface Gotham Rounded Bold, fallback Calibri Bold, ALL CAPS for tagline / merchant name.
   Digital screen: 4 units white space around QR, 2 units ruby frame, 6 units bottom band,
   tagline centred at 2 units tall. Scale proportionally: everything below is driven by --u. */

:root {
  --ruby: #ED2E67;
  --black: #000000;
  --grey: #F2F2F2;
  --green: #1B9E4B;
  --u: clamp(4px, 1.6vw, 8px);          /* one guideline unit */
  --qr-size: calc(var(--u) * 40);        /* QR occupies 40 units */
  font-family: "Gotham Rounded", Calibri, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
/* Author display rules (flex/grid) would otherwise override the hidden attribute and show every screen at once. */
[hidden] { display: none !important; }
body { margin: 0; background: #e9e9e9; color: var(--black); }

.device {
  max-width: 420px; min-height: 100vh; margin: 0 auto; background: #fff;
  padding: 24px 20px 32px; display: flex; flex-direction: column;
}
section { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.brand img { width: 260px; max-width: 100%; display: block; margin: 0 auto 8px; }

h1 { font-size: 22px; letter-spacing: .04em; margin: 8px 0 4px; text-transform: uppercase; }
label { font-weight: 700; font-size: 13px; letter-spacing: .08em; }
.uat-banner {
  background: #FFC83D; color: #000; font-weight: 700; font-size: 12px; letter-spacing: .1em;
  text-align: center; padding: 6px; margin: -24px -20px 16px;
}
.share { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share button { font-size: 12px; padding: 12px 6px; }
.note { color: #1B9E4B; font-size: 14px; text-align: center; margin: 0; }
#uat-expiry { display: flex; flex-direction: column; gap: 6px; }
#uat-expiry[hidden] { display: none; }
.hint { font-size: 13px; color: #555; text-align: center; margin: 0; }
select { font: inherit; font-size: 16px; padding: 12px; border: 2px solid var(--black); border-radius: 8px; width: 100%; background: #fff; }

form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
input[type=number] {
  font: inherit; font-size: 32px; font-weight: 700; text-align: center;
  padding: 12px; border: 2px solid var(--black); border-radius: 8px; width: 100%;
}
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick button { padding: 10px 0; }

button {
  font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  border: 0; border-radius: 6px; padding: 14px; cursor: pointer; width: 100%;
  background: var(--grey); color: var(--black);
}
button.primary { background: var(--ruby); color: #fff; }
button:disabled { opacity: .5; cursor: default; }

/* ---- QR frame ---- */
.duitnow-frame {
  position: relative;
  background: var(--ruby);
  padding: calc(var(--u) * 2) calc(var(--u) * 2) 0;   /* 2-unit ruby frame */
  border-radius: calc(var(--u) * 3);
  width: calc(var(--qr-size) + var(--u) * 12);        /* QR + 4u white each side + 2u frame each side */
}
.duitnow-white {
  background: #fff; padding: calc(var(--u) * 4);      /* 4-unit clear space */
  border-radius: calc(var(--u) * 1.5);
}
.duitnow-white img { width: var(--qr-size); height: var(--qr-size); display: block; image-rendering: pixelated; }
.duitnow-tagline {
  height: calc(var(--u) * 6);                          /* 6-unit bottom band */
  line-height: calc(var(--u) * 6);
  font-size: calc(var(--u) * 2);                       /* tagline 2 units tall */
  font-weight: 700; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: .08em;
}
.overlay {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,.88); display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--ruby); letter-spacing: .06em;
}

/* Merchant name comes from the QR payload (Maybank's registration for the MID). Guideline: bold, ALL CAPS. */
.merchant { font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0; text-align: center; }
.amount { font-size: 34px; font-weight: 700; margin: 8px 0 0; }
.expiry { margin: 0; color: #555; }
.ref { margin: 0; font-size: 12px; color: #777; word-break: break-all; text-align: center; }
.actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.error { color: #b00020; font-size: 14px; text-align: center; margin: 0; }
.env { margin-top: auto; font-size: 11px; color: #888; text-align: center; line-height: 1.5; }
.links { font-size: 13px; } .links a { color: var(--ruby); }

/* ---- result ---- */
.result-icon { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 56px; font-weight: 700; }
.result-icon.ok { background: var(--green); }
.result-icon.bad { background: var(--ruby); }
.result-icon.expired { background: #777; }
.details { width: 100%; font-size: 13px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0; }
.details dt { color: #777; text-transform: uppercase; letter-spacing: .05em; }
.details dd { margin: 0; word-break: break-all; }