/*
  The public RMA form.

  Its own stylesheet for the same reason portal.css is separate: this is a customer-facing page on
  no auth scheme at all, and an agent-side change must not be able to move it. Design tokens and
  the button styles come from site.css, and the page furniture (header, card, eyebrow) is shared
  with portal.css so the returns form and the portal read as one product.
*/

.rma-page { min-height: 100vh; color: var(--text); background: var(--surface-sunken); }

.rma-shell { width: min(760px, calc(100% - 36px)); margin: 40px auto 64px; }

.rma-card {
  padding: 34px 38px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(35,45,60,.08);
}
.rma-card[hidden] { display: none; }
.rma-card .eyebrow { margin: 0; color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.rma-card h1 { margin: 7px 0 10px; font-size: 27px; }
.rma-card h2 { margin: 26px 0 10px; font-size: 15px; }
.rma-intro { margin: 0 0 22px; color: var(--text-soft); font-size: 12px; }
.rma-required { color: var(--coral); }

/* The one thing on the page a customer must not miss: nothing should be shipped until the
   paperwork names a depot. Repeated on the confirmation for the same reason. */
.rma-notice {
  margin: 0 0 26px;
  padding: 14px 16px;
  border: 1px solid var(--orange-tint);
  border-left: 4px solid var(--orange);
  border-radius: 6px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--orange-wash);
}
.rma-notice-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-brand);
  background: var(--orange);
  font-size: 13px;
  font-weight: 800;
}
.rma-notice b { display: block; margin-bottom: 4px; font-size: 12px; }
.rma-notice p { margin: 0; color: var(--orange-ink); font-size: 11px; line-height: 1.55; }

.rma-section { margin: 0 0 8px; padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--border); }
.rma-section:last-of-type { border-bottom: 0; }
.rma-section legend {
  padding: 0;
  margin: 18px 0 14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}
.rma-section-hint { margin: -6px 0 14px; color: var(--text-soft); font-size: 11px; }

.rma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* Suburb, state and postcode on one line, the way they are written on an envelope. The postcode
   is sized to its four digits rather than given an equal share, which would leave a field three
   times wider than anything that can go in it. */
.rma-locality { display: grid; grid-template-columns: 1fr minmax(150px, 0.8fr) 110px; gap: 0 18px; }
.rma-card form .rma-locality select {
  width: 100%;
  height: 44px;
  margin-top: 7px;
  padding: 0 10px;
  border: 1px solid var(--border-dark);
  border-radius: 5px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}
.rma-card form .rma-locality select:focus { outline: 2px solid var(--orange); outline-offset: -1px; }
.rma-card form .rma-locality select:invalid { color: var(--text-faint); }

.rma-card form label { margin: 0 0 15px; display: block; color: var(--text); font-size: 11px; font-weight: 750; }
.rma-card form label[hidden] { display: none; }
.rma-card form input[type=text],
.rma-card form input[type=email],
.rma-card form input[type=tel],
.rma-card form textarea {
  width: 100%;
  margin-top: 7px;
  padding: 11px 12px;
  border: 1px solid var(--border-dark);
  border-radius: 5px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}
.rma-card form input[type=text],
.rma-card form input[type=email],
.rma-card form input[type=tel] { height: 44px; padding: 0 12px; }
.rma-card form textarea { resize: vertical; line-height: 1.5; }
.rma-card form input:focus, .rma-card form textarea:focus { outline: 2px solid var(--orange); outline-offset: -1px; }
.rma-card form label small { display: block; margin-top: 5px; color: var(--text-soft); font-size: 10px; font-weight: 500; }

.rma-checkbox { display: flex; align-items: flex-start; gap: 9px; font-weight: 600 !important; }
.rma-checkbox input { margin: 1px 0 0; accent-color: var(--orange); }
.rma-checkbox span { font-size: 11px; line-height: 1.5; }
.rma-accept { margin-top: 16px !important; padding: 13px 15px; border: 1px solid var(--border-dark); border-radius: 6px; background: var(--surface-sunken); }

/* One piece of equipment. Boxed so a form with six of them still reads as six things rather
   than one very long column of inputs. */
.rma-equipment {
  margin: 0 0 14px;
  padding: 16px 18px 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-sunken);
}
.rma-equipment-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rma-equipment-title { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rma-remove {
  padding: 3px 4px;
  border: 0;
  color: var(--coral-ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  text-decoration: underline;
}
.rma-remove[hidden] { display: none; }

.rma-add { width: 100%; }
.rma-add:disabled { opacity: .55; cursor: default; }

.rma-terms { margin: 0; padding-left: 20px; color: var(--text-soft); font-size: 11px; line-height: 1.7; }
.rma-terms li { margin-bottom: 7px; }

/* Off screen rather than display:none -- a bot reading the DOM finds an ordinary input, and a
   person never does. aria-hidden and tabindex on the markup keep it away from assistive tech. */
.rma-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rma-error {
  margin: 18px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--coral-tint);
  border-radius: 5px;
  color: var(--coral-ink);
  background: var(--coral-wash);
  font-size: 11px;
  font-weight: 600;
}
.rma-error[hidden] { display: none; }

.rma-submit { width: 100%; margin-top: 20px; min-height: 46px; border-radius: 6px; }
.rma-submit:disabled { opacity: .6; cursor: default; transform: none; }
.rma-fineprint { margin: 14px 0 0; color: var(--text-faint); font-size: 10px; text-align: center; }
.rma-fineprint a { color: var(--green-ink); }

.rma-done { text-align: center; }
.rma-done .rma-notice, .rma-done .rma-next { text-align: left; }
.rma-done-tick {
  width: 46px;
  height: 46px;
  margin: 4px auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-brand);
  background: var(--green);
  font-size: 22px;
}
.rma-reference { margin: 0 0 22px; color: var(--text-soft); font-size: 12px; }
.rma-reference b { color: var(--text); font-size: 15px; }
.rma-next { margin: 0; padding-left: 20px; color: var(--text-soft); font-size: 12px; line-height: 1.75; }

@media (max-width: 640px) {
  .rma-shell { margin: 22px auto 44px; }
  .rma-card { padding: 24px 20px; }
  .rma-card h1 { font-size: 22px; }
  .rma-grid { grid-template-columns: 1fr; }
  /* Suburb gets its own line; state and postcode still pair, which is how they read. */
  .rma-locality { grid-template-columns: 1fr 110px; }
  .rma-locality > label:first-child { grid-column: 1 / -1; }
}