/* RJ Distro wholesale application. Colours follow WEBSITE_THEME_BRAND_DECISIONS.md. */
:root {
  --blue: #2A6FB8;
  --blue-dark: #215790;
  --blue-light: #5A96D2;
  --blue-tint: #F2F7FC;
  --red: #E06666;
  --ink: #1C1C1E;
  --slate: #242A35;
  --muted: #5B616B;
  --line: #C9CDD3;
  --line-soft: #E3E6EA;
  --field-border: #8B919A; /* 3.17:1 on white: input borders need 3:1 (WCAG 1.4.11) */
  --chip: #F4F6F9;
  --error: #d31313;
  --success: #008A06;
  --warning: #FFBA2C;
  --white: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
}
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Chrome: slate header and footer; blue on slate uses the light step (#5A96D2), focus ring included */
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--blue-light); }
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; background: var(--slate);
}
.brand img { display: block; width: 125px; height: auto; }
/* Links in the chrome are 44px tall touch targets; the gap stands in for the space before the arrow.
   The footer's links already carry their own height, so its rows have no gap and little padding. */
.back-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--blue-light); font-size: 14px; text-decoration: none; }
.back-link:hover { color: var(--white); text-decoration: underline; }
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 18px;
  padding: 4px 16px; background: var(--slate); color: var(--line); font-size: 13px;
}
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-light); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

/* Page and steps: red is used only for the kicker and the short rule */
.page { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 28px 16px 40px; }
.test-banner {
  margin: 0 0 20px; padding: 8px 12px; border: 1px solid var(--warning); border-radius: 6px;
  background: #FFF6DE; font-size: 14px;
}
.progress { display: flex; gap: 4px; margin-bottom: 18px; }
.progress .seg { flex: 1; height: 4px; border-radius: 2px; background: var(--line-soft); }
.progress .seg.done { background: var(--blue); }
.kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
.step-title { margin: 4px 0 8px; font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--blue); }
.step-title:focus { outline: none; }
.rule { width: 44px; height: 3px; margin-bottom: 22px; background: var(--red); }
.copy { margin: 0 0 20px; }

/* Fields: the brand uses Poppins 400 and 700 only, so question labels are 700 and answer options 400 */
.field { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.field > label:not(.choice), .field > legend, .field > .label { display: block; margin: 0 0 4px; padding: 0; font-size: 15px; font-weight: 700; }
fieldset.field > legend { margin-bottom: 8px; }
/* A legend that is a paragraph of copy (the Terms text) reads as body text; its required marker keeps the 700 every marker has */
.field > legend.legend-copy { font-weight: 400; }
.req { color: var(--ink); font-weight: 700; }
.help { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--field-border); border-radius: 6px;
}
textarea { min-height: 120px; resize: vertical; }
::placeholder { color: #6B7079; }
.row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.row > .field { flex: 1 1 220px; }
.phone-row { display: flex; gap: 8px; }
.phone-row select { flex: 0 0 42%; max-width: 230px; }
.phone-row input { flex: 1; min-width: 0; }
@media (max-width: 480px) {
  .phone-row { flex-wrap: wrap; }
  .phone-row select { flex: 1 1 100%; max-width: none; }
}
.nowrap { white-space: nowrap; }
/* Radio and checkbox options: the question-label rule above skips .choice, and the 20px control
   sits 2px down so it is centred on the first 24px line of its label, even when the label wraps.
   10px above and below that line makes every option row a 44px touch target. */
.choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: 15px; line-height: 24px; cursor: pointer; }
.choice input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); }

/* Errors use the protected error red (#d31313), never the brand red */
.has-error input[type="text"], .has-error input[type="email"], .has-error input[type="tel"],
.has-error select, .has-error textarea { border-color: var(--error); }
.error { margin: 6px 0 0; font-size: 14px; color: var(--error); }
.error-summary { margin: 0 0 22px; padding: 12px 16px; border: 2px solid var(--error); border-radius: 8px; }
.error-summary p { margin: 0 0 6px; font-weight: 700; }
.error-summary ul { margin: 0; padding-left: 18px; }
.error-summary a { color: var(--error); }

/* Uploads */
.dropzone { padding: 18px; border: 1.5px dashed var(--line); border-radius: 8px; text-align: center; }
.dropzone.dragging { border-color: var(--blue); background: var(--blue-tint); }
.has-error .dropzone { border-color: var(--error); }
.drop-title { margin: 0; font-size: 15px; }
.drop-hint { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.browse { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; font: inherit; color: var(--blue); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.file-list { margin: 0; padding: 0; list-style: none; }
.chip { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 4px 4px 4px 12px; border-radius: 6px; background: var(--chip); font-size: 14px; }
.chip-name { flex: 1; overflow-wrap: anywhere; }
.chip-size { color: var(--muted); white-space: nowrap; }
.chip-remove { min-width: 44px; min-height: 44px; font-size: 22px; line-height: 1; color: var(--muted); background: none; border: 0; cursor: pointer; }
.chip-remove:hover { color: var(--ink); }

/* Submit area and buttons: blue owns every action */
.turnstile { margin: 8px 0 16px; }
.failure { margin: 0 0 16px; padding: 12px 16px; border: 2px solid var(--error); border-radius: 8px; }
.failure p { margin: 0 0 10px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 8px; }
.btn { min-height: 44px; padding: 0 24px; font: inherit; font-size: 15px; font-weight: 700; border-radius: 6px; cursor: pointer; }
.btn-primary { color: var(--white); background: var(--blue); border: 1.5px solid var(--blue); }
.btn-primary:hover, .btn-primary:active { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-secondary { color: var(--blue); background: var(--white); border: 1.5px solid var(--blue); }
.btn-secondary:hover { color: var(--blue-dark); border-color: var(--blue-dark); }
.btn[aria-disabled="true"] { cursor: progress; }
.btn-link { display: inline-flex; align-items: center; text-decoration: none; }
.btn-link:hover { color: var(--white); }

/* Confirmation */
.tick { display: block; margin-bottom: 12px; color: var(--success); }
.reference-box { margin: 16px 0 20px; padding: 14px 16px; border: 1.5px solid var(--blue); border-radius: 8px; font-size: 15px; }
.reference-box strong { display: block; font-size: 22px; letter-spacing: 1px; }

/* Honeypot: off-screen for people, still filled in by naive bots */
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 700px) {
  .site-header { padding: 14px 24px; }
  .page { padding-top: 36px; }
  .step-title { font-size: 28px; }
}