/* Mercury Warranty web page: the same colours as the phone app, RMA and Rollcall, light and dark. */
:root {
  --bg: #F2F5F6; --surface: #FFFFFF; --surface2: #E9EEF0; --ink: #132228; --muted: #5B6D74; --line: #D5DEE1;
  --brand: #9F1B18; --brand-hi: #E51B21; --accent: #9F1B18; --accent-ink: #FFFFFF;
  --good: #1E8A4C; --good-soft: #DDF2E5; --warn: #A86A00; --warn-soft: #FBEFD5; --bad: #8B2252; --bad-soft: #F6E1EB;
  --neutral: #5B6D74; --neutral-soft: #E9EEF0;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1719; --surface: #152225; --surface2: #1C2C30; --ink: #E4EEF0; --muted: #93A6AC; --line: #2A3C41;
    --brand: #7E1512; --brand-hi: #E51B21; --accent: #F2676A; --accent-ink: #2A0605;
    --good: #5BCB88; --good-soft: #173726; --warn: #E3AE4A; --warn-soft: #3A2D12; --bad: #E58AB4; --bad-soft: #3B1A2A;
    --neutral: #93A6AC; --neutral-soft: #1C2C30;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column;
}
button, input { font: inherit; color: inherit; }
a { color: var(--accent); font-weight: 600; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.top { background: var(--brand); border-bottom: 3px solid var(--brand-hi); padding: 14px 20px; }
.logo-link { display: inline-block; line-height: 0; }
.logo-link img { width: 160px; height: auto; }

main { width: 100%; max-width: 600px; margin: 0 auto; padding: 28px 20px 40px; flex: 1; }
h1 { font-size: 30px; line-height: 1.2; margin: 0 0 6px; }
.lead { color: var(--muted); margin: 0 0 18px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.row { display: flex; gap: 10px; }
input {
  flex: 1; min-width: 0; height: 54px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); font-size: 20px; font-weight: 600; letter-spacing: 1px;
}
input::placeholder { color: var(--muted); font-weight: 600; }
button {
  min-width: 110px; height: 54px; padding: 0 20px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-size: 17px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
button:disabled { opacity: .8; cursor: default; }
.help { color: var(--muted); font-size: 15px; margin: 8px 0 0; }
.spinner { width: 22px; height: 22px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.result { margin-top: 16px; padding: 18px; border-radius: 12px; border-left: 5px solid; }
.result h2 { font-size: 22px; line-height: 1.25; margin: 0; }
.result .model { font-size: 17px; font-weight: 600; margin-top: 6px; }
/* Ink, not muted: muted grey on the "out of warranty" box falls just under 4.5:1 contrast. */
.result .serial { color: var(--ink); font-size: 15px; margin: 2px 0 8px; }
.result p { margin: 4px 0 0; }
.result .contact { display: inline-block; margin-top: 12px; }
.tone-good { background: var(--good-soft); border-color: var(--good); } .tone-good h2 { color: var(--good); }
.tone-warn { background: var(--warn-soft); border-color: var(--warn); } .tone-warn h2 { color: var(--warn); }
.tone-bad { background: var(--bad-soft); border-color: var(--bad); } .tone-bad h2 { color: var(--bad); }
.tone-neutral { background: var(--neutral-soft); border-color: var(--neutral); } .tone-neutral h2 { color: var(--neutral); }

.note { margin: 16px 0 0; font-size: 15px; color: var(--muted); }
.info { margin-top: 32px; color: var(--ink); }
.info h2 { font-size: 18px; margin: 22px 0 6px; }
.info p { margin: 0 0 8px; color: var(--muted); }

footer { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; padding: 18px 20px 28px; color: var(--muted); font-size: 15px; }

@media (max-width: 480px) {
  h1 { font-size: 26px; }
  .row { flex-direction: column; }
  input { flex: none; width: 100%; }
  button { width: 100%; }
}

/* Inside a box on mercurysd.ie (an iframe): just the check, no page furniture. */
.embedded .top, .embedded footer, .embedded .info, .embedded h1, .embedded .lead { display: none; }
.embedded main { padding: 12px; max-width: none; }
.embedded body { background: transparent; min-height: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }