/* Salafi Bookstore and Islamic Centre zakah application, in the look of the Aero shop and the give site:
   the same colours and square controls, Clash Grotesk throughout with page headings and buttons in spaced
   capitals, and the shop's navy bar along the top and the bottom. The font is served from this site (fonts/),
   so the page still reaches nothing else. */

@font-face {
  font-family: "Clash Grotesk"; font-style: normal; font-display: swap; font-weight: 200 700;
  src: url("fonts/ClashGrotesk-Variable.woff2") format("woff2");
}

:root {
  --bg: #f9f8f5;
  --ink: #14151a;
  --muted: #6e6f6c;
  --line: #858683;  /* the edge of a control: 3:1 on the page and on the tint */
  --rule: #d9d8d1;  /* a quiet divider: the progress track, the spinner ring, the total's rule */
  --brand: #142d55;
  --brand-dark: #0c1e3c;
  --tint: rgba(20, 45, 85, 0.06);
  --tint-strong: rgba(20, 45, 85, 0.14);
  --error: #a1181d;
  --font: "Clash Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
  --font-display: var(--font);
  /* the shop's bar along the top and the bottom, and the copper of its announcement line, here the progress line */
  --bar: #03041d;
  --on-bar: #f9f8f5;
  --bar-line: #9a5215;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); font: 17px/1.5 var(--font); font-synthesis: none;
}
a { color: var(--brand-dark); }

.progress { position: fixed; inset: 0 0 auto; height: 3px; background: var(--bar); z-index: 10; }
.progress span { display: block; width: 0; height: 100%; background: var(--bar-line); transition: width 0.4s ease; }
/* the shop's bar, the whole width of the page, with its name linking back to the shop */
.top { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 20px; background: var(--bar); }
.top a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-bar); font-size: 17px; font-weight: 500; text-decoration: none; }


main {
  flex: 1; width: 100%; max-width: 42rem; margin: 0 auto; padding: 8vh 20px 40px;
  display: flex; flex-direction: column; justify-content: center;
}
.step { animation: arrive 260ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes arrive { from { opacity: 0; transform: translateX(16px); } }
/* Moving between screens: only the screen moves, so the bar and the footer stay still. The screen left behind
   fades and drifts away, and the next slides in from the side it comes from (app.js render). */
main { view-transition-name: screen; overflow-x: clip; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(screen) { animation-duration: 280ms; }
::view-transition-old(screen) { animation: leave 160ms ease-in both; }
::view-transition-new(screen) { animation: arrive 280ms cubic-bezier(0.23, 1, 0.32, 1) both; }
[data-going="back"]::view-transition-old(screen) { animation-name: leave-back; }
[data-going="back"]::view-transition-new(screen) { animation-name: arrive-back; }
@keyframes leave { to { opacity: 0; transform: translateX(-16px); } }
@keyframes leave-back { to { opacity: 0; transform: translateX(16px); } }
@keyframes arrive-back { from { opacity: 0; transform: translateX(-16px); } }
html:active-view-transition .step { animation: none; }

.part { margin: 0 0 10px; color: var(--brand); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.part-note { margin: -4px 0 14px; color: var(--muted); font-size: 1rem; }
/* the shop's page headings: capitals, spaced out, at its regular weight */
h1, h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
h1 { margin: 0 0 12px; font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); line-height: 1.25; outline: none; text-wrap: balance; }
h2 { margin: 24px 0 8px; font-size: 1.1rem; }
.help { margin: 0 0 22px; color: var(--muted); font-size: 1.05rem; }
.small, .help.small { margin: 4px 0 6px; color: var(--muted); font-size: 0.92rem; }
.body { margin: 0 0 14px; font-size: 1.1rem; }

input, textarea { font: inherit; color: var(--brand-dark); }
/* the shop's form fields: a white box with a grey line all round */
input[type="text"], input[type="tel"], input[type="email"] {
  width: 100%; padding: 12px 16px; border: 1px solid var(--muted); border-radius: 0;
  background: #fff; font-size: 1.2rem;
}
input:focus { outline: none; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
textarea {
  width: 100%; min-height: 7.5rem; padding: 10px 12px; border: 2px solid var(--line); border-radius: 0;
  background: #fff; font-size: 1.15rem; line-height: 1.45; resize: vertical;
}
textarea.big { min-height: 14rem; }
textarea:focus { outline: none; border-color: var(--brand); }
.money { display: flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: 1.35rem; }

.fields { display: grid; gap: 22px; }
.field label, .inline legend { display: block; margin-bottom: 2px; font-size: 1rem; font-weight: 600; }
.field input[type], .field .money { font-size: 1.2rem; }
.other-field { margin-top: 22px; }
fieldset { margin: 0; padding: 0; border: 0; }

.options { display: grid; gap: 10px; max-width: 32rem; }
.options.row { grid-auto-flow: column; justify-content: start; }
.option {
  position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 0; background: var(--tint);
  font-size: 1.08rem; line-height: 1.35; cursor: pointer; transition: background 0.15s;
}
.option:hover { background: var(--tint-strong); }
.option.on { border-color: var(--brand); background: var(--tint-strong); box-shadow: inset 0 0 0 1px var(--brand); }
.option.on::after { content: "✓"; margin-left: auto; padding-left: 8px; color: var(--brand); font-weight: 700; }
.option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.option:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.option kbd {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--line); border-radius: 0; background: #fff;
  color: var(--brand); font: 700 13px var(--font);
}
.option.on kbd { background: var(--brand); color: #fff; }
.options.row .option { padding: 10px 14px; }

.date { display: flex; gap: 14px; }
.datebox span { display: block; font-size: 0.95rem; font-weight: 600; }
.part-d, .part-m { width: 4.5rem; }
.part-y { width: 6.5rem; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
/* the shop's buttons: capitals, spaced out, flat */
.ok {
  min-height: 48px; padding: 10px 20px; border: 0; border-radius: 0; background: var(--brand); color: #fff;
  font: 500 1rem var(--font); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.ok:hover { background: var(--brand-dark); }
/* the download is an <a>, but it is a primary action wherever the share sheet is unavailable,
   so it carries the full 48px target rather than a 20px line of link text */
a.ok { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.ok:hover { color: #fff; }
.ok.alt { background: transparent; color: var(--brand); border: 2px solid var(--brand); box-shadow: none; }
.ok.alt:hover { background: transparent; color: var(--brand-dark); border-color: var(--brand-dark); }
.back {
  order: -1; min-height: 48px; padding: 10px 6px; border: 0; background: none; color: var(--muted);
  font: 600 1rem var(--font); cursor: pointer;
}
.ok:focus-visible, .back:focus-visible, .remove:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 3px;
}
.hint { color: var(--muted); font-size: 0.9rem; }
.later { margin: 14px 0 0; color: var(--muted); font-size: 0.95rem; }
.link {
  min-height: 44px; padding: 0; border: 0; background: none; color: var(--brand-dark);
  font: 600 0.95rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link.danger { color: var(--error); }
.link:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.hint kbd { font: 600 0.85rem var(--font); }
@media (pointer: coarse) { .hint { display: none; } }
.error { margin: 14px 0 0; color: var(--error); font-weight: 600; }
.error:empty { display: none; }
.total { margin: 22px 0 0; padding-top: 14px; border-top: 2px solid var(--rule); font-size: 1.05rem; font-weight: 700; }

.ready { margin: 18px 0; padding: 4px 16px 6px; border-left: 3px solid var(--brand); border-radius: 0; background: #fff; }
.ready h2 { margin-top: 10px; font-size: 1rem; }
details { margin-top: 26px; }
summary { display: flex; align-items: center; min-height: 44px; color: var(--brand-dark); font-weight: 600; cursor: pointer; }
details p { color: var(--muted); }
.other { margin-top: 18px; }
blockquote { margin: 0 0 22px; padding: 12px 16px; border-left: 3px solid var(--brand); border-radius: 0; background: #fff; font-size: 1.05rem; }
blockquote p { margin: 0; }

.upload .pick {
  display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 16px;
  border: 2px dashed var(--line); border-radius: 0; background: var(--tint);
  color: var(--brand-dark); font-size: 1.1rem; font-weight: 600; text-align: center; cursor: pointer;
}
.upload .pick:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.files { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.files li { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: 0; background: #fff; }
.files .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files .size { color: var(--muted); font-size: 0.9rem; }
.remove { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--error); font: 600 0.95rem var(--font); cursor: pointer; }

.turnstile { min-height: 70px; margin-top: 18px; }
.spinner { width: 36px; height: 36px; margin-top: 20px; border: 4px solid var(--rule); border-top-color: var(--brand); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
ol.steps { padding-left: 1.3em; }
ol.steps li { margin-bottom: 8px; }
.dua { margin-top: 24px; color: var(--muted); }

/* the shop's footer: cream on its darkest navy, with the way back to the shop */
.foot { padding: 16px 20px 24px; background: var(--bar); color: var(--on-bar); font-size: 12px; letter-spacing: 0.03em; text-align: center; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-bar); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.foot p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 480px) {
  /* keeps "Start my application" on the first screen of a 375x812 phone, under the bigger logo */
  main { justify-content: flex-start; padding-top: 3vh; }
  .body { margin-bottom: 10px; }
  .ready { margin: 14px 0; }
  .option { font-size: 1rem; }
}
/* on the narrowest phones the capitals close up a little, so a heading or a button keeps to its line */
@media (max-width: 340px) {
  h1, h2, .ok { letter-spacing: 0.02em; }
}
@media (prefers-reduced-motion: reduce) {
  .step { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .progress span { transition: none; }
  .spinner { animation-duration: 3s; }
}