/* Only what is specific to Sports Uniform Payments. The brand look comes from /brand/keystone-app.css, loaded first and never edited. */

[hidden] { display: none !important; }

/* ------------------------------------------------------------- text size */
/* Each level is 10% of the browser's own base size, so it still respects a person's device settings. Form fields never
   go below 16px, or iPhones zoom the page when you tap one. */
html { font-size: 100%; }
html[data-textsize="-3"] { font-size: 70%; }
html[data-textsize="-2"] { font-size: 80%; }
html[data-textsize="-1"] { font-size: 90%; }
html[data-textsize="1"]  { font-size: 110%; }
html[data-textsize="2"]  { font-size: 120%; }
html[data-textsize="3"]  { font-size: 130%; }
body { font-size: 1rem; }
input[type="text"], input[type="email"], input[type="search"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"], select, textarea { font-size: max(16px, 1rem); }

.textsize { display: flex; gap: 4px; align-items: center; }
.ts {
  position: relative; width: 36px; height: 36px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; color: var(--grey); background: transparent;
  border: 1px solid var(--navy-50); border-radius: 6px;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.ts:hover:not(:disabled):not(.is-on) { background: var(--navy-90); border-color: var(--grey); }
.ts:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ts:disabled { opacity: 0.4; cursor: not-allowed; }
.ts.is-on { background: var(--grey); color: var(--navy); border-color: var(--grey); }
.ts__glyph { font-weight: 700; line-height: 1; }
.ts--down .ts__glyph { font-size: 12px; }
.ts--reset .ts__glyph { font-size: 15px; }
.ts--up .ts__glyph { font-size: 19px; }
.ts__digit { position: absolute; right: 3px; bottom: 2px; font-size: 9px; font-weight: 700; line-height: 1; color: var(--navy-70); }
@media (max-width: 640px) { .ts { width: 44px; height: 44px; } .textsize { gap: 6px; } }
.ts.is-on:disabled { opacity: 1; cursor: default; }

/* ------------------------------------------------------- the parent's page */

.ref { font-size: 2.2rem; font-weight: 300; letter-spacing: 0.04em; margin: 4px 0 0; color: var(--navy); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 16px 0 0; }
.facts dt { color: var(--navy-70); }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

.order-table { width: 100%; border-collapse: collapse; }
.order-table th { text-align: left; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-70); border-bottom: 2px solid var(--navy); padding: 8px 6px; }
.order-table td { padding: 10px 6px; border-bottom: 1px solid var(--navy-10); vertical-align: top; }
.order-table .num { text-align: right; white-space: nowrap; }
.order-table .mid { text-align: center; }
.order-table tfoot td { border-bottom: 0; font-weight: 700; padding-top: 14px; }
.order-table .grand { font-size: 1.5rem; font-weight: 700; }

.section { margin-top: 28px; }
.rich p { margin: 0 0 8px; }
.rich ul { margin: 0 0 12px; padding-left: 22px; }
.rich li { margin: 0 0 4px; }
.qr-frame { text-align: center; margin: 12px 0; }
.qr-frame img { max-width: 100%; height: auto; border: 1px solid var(--navy-10); border-radius: 8px; background: var(--white); }
.slip-list { list-style: none; margin: 8px 0 0; padding: 0; }
.slip-list li { padding: 10px 0; border-bottom: 1px solid var(--navy-10); }
.slip-note { margin-top: 6px; color: var(--navy-70); font-size: 0.9rem; }
#upload-card input[type="file"] { width: 100%; font: inherit; padding: 8px 0; }
.copy-note { margin-left: 10px; }
.page-foot { margin: 36px 0 24px; font-size: 0.85rem; color: var(--navy-70); }
.privacy h2 { font-size: 1.15rem; margin: 26px 0 8px; }
.privacy p, .privacy li { max-width: 68ch; }