.mri-review-widget {
  max-width: 480px;
  font: inherit;
  color: inherit;
}

.mri-review-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mri-review-intro {
  margin: 0 0 4px;
  font-size: 0.95em;
  opacity: 0.85;
}

.mri-review-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9em;
  font-weight: 600;
}

.mri-review-form input[type='text'],
.mri-review-form input[type='email'],
.mri-review-form input[type='tel'],
.mri-review-form input[type='date'] {
  font: inherit;
  font-weight: normal;
  padding: 8px 10px;
  border: 1px solid #ccd2d4;
  border-radius: 6px;
}

.mri-review-file-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mri-review-file-field-label {
  font-size: 0.9em;
  font-weight: 600;
}

.mri-review-file-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The actual <input type="file"> in each pair is hidden — this label is the
   clickable, styleable stand-in (native file inputs can't be restyled directly). */
.mri-review-file-button {
  font: inherit;
  font-weight: 600 !important;
  padding: 8px 14px;
  border: 1px solid #1e7e8c;
  border-radius: 6px;
  color: #1e7e8c;
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.mri-review-file-button:hover {
  background: #eaf4f5;
}

.mri-review-consent {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 8px !important;
  font-weight: normal !important;
  font-size: 0.85em !important;
  line-height: 1.4;
}

.mri-review-consent input {
  margin-top: 3px;
}

.mri-review-file-list {
  font-size: 0.85em;
}

/* Muted on the text itself rather than the whole list, so the notes below keep
   their full colour. */
.mri-review-file-summary {
  opacity: 0.75;
}

.mri-review-ready-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0.6rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: #22603c;
  background: #eef8f1;
  border: 1px solid #b5dcc2;
  border-radius: 6px;
}

.mri-review-ready-note svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: #2f7d4f;
}

.mri-review-clear-files {
  font: inherit;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0;
  border: none;
  background: none;
  color: #b23b3b;
  text-decoration: underline;
  cursor: pointer;
}

/* Wraps every editable field (see renderForm). Reset to look like no box at all, and
   laid out like the form itself so wrapping it changed nothing visually. */
.mri-review-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: opacity 0.2s ease;
}

/* Locked while a submission is in progress: greyed out, and the disabled
   attribute itself blocks typing, picking files and ticking boxes. */
.mri-review-fields:disabled {
  opacity: 0.45;
  filter: grayscale(1);
}

.mri-review-fields:disabled * {
  cursor: not-allowed !important;
}

.mri-review-fields:disabled .mri-review-file-button:hover {
  background: transparent;
}

/* Shown above the Submit button while a submission is in progress. */
.mri-review-upload-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: #eaf4f5;
  border: 1px solid #b9dbe0;
  border-radius: 8px;
}

.mri-review-upload-panel[hidden] {
  display: none;
}

.mri-review-upload-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mri-review-upload-title {
  flex: 1;
  font-size: 1.1em;
  font-weight: 700;
  color: #164e57;
}

.mri-review-upload-percent {
  font-size: 1.1em;
  font-weight: 700;
  color: #1e7e8c;
  font-variant-numeric: tabular-nums;
}

.mri-review-upload-detail {
  font-size: 0.9em;
  color: #164e57;
}

.mri-review-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid #b9dbe0;
  border-top-color: #1e7e8c;
  border-radius: 50%;
  animation: mri-review-spin 0.9s linear infinite;
}

@keyframes mri-review-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mri-review-spinner {
    animation: none;
  }
}

.mri-review-progress-track {
  height: 10px;
  background: #d3e6e9;
  border-radius: 5px;
  overflow: hidden;
}

.mri-review-progress-track[hidden] {
  display: none;
}

.mri-review-progress-bar {
  height: 100%;
  width: 0%;
  background: #1e7e8c;
  transition: width 0.2s ease;
}

.mri-review-status {
  font-size: 0.9em;
}

.mri-review-status-error {
  color: #b23b3b;
}

.mri-review-status-success {
  color: #2f7d4f;
}

.mri-review-form button[type='submit'] {
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  background: #1e7e8c;
  color: white;
  cursor: pointer;
}

.mri-review-form button[type='submit']:disabled {
  opacity: 0.6;
  cursor: default;
}

.mri-review-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 24px;
  text-align: center;
}

.mri-review-confirmation-icon {
  width: 48px;
  height: 48px;
  color: #2f7d4f;
}

.mri-review-confirmation-title {
  margin: 4px 0 0;
  font-size: 1.3em;
}

.mri-review-confirmation-lede {
  margin: 0;
  opacity: 0.85;
}

.mri-review-reference {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 4px;
  padding: 14px 24px;
  border: 1px solid #1e7e8c;
  border-radius: 8px;
  background: #eaf4f5;
}

.mri-review-reference-label {
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.mri-review-reference-value {
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #1e7e8c;
}

.mri-review-confirmation-note {
  margin: 0;
  font-size: 0.85em;
  opacity: 0.75;
}

.mri-review-next-steps {
  margin: 10px 0 0;
  padding: 0 0 0 20px;
  text-align: left;
  font-size: 0.9em;
  line-height: 1.5;
  list-style: disc; /* several WP themes reset default <ul> bullets */
}

.mri-review-next-steps li {
  margin-bottom: 4px;
}

/* "Upload another scan" on the confirmation screen — a secondary action, so the
   same outlined treatment as the Choose Files / Choose Folder buttons. */
.mri-review-another {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid #e3e7e8;
  width: 100%;
}

.mri-review-another p {
  margin: 0;
  font-size: 0.9em;
}

.mri-review-upload-more {
  font: inherit;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid #1e7e8c;
  border-radius: 6px;
  color: #1e7e8c;
  background: transparent;
  cursor: pointer;
}

.mri-review-upload-more:hover {
  background: #eaf4f5;
}

.mri-review-upload-more:focus-visible {
  outline: 2px solid #1e7e8c;
  outline-offset: 2px;
}

/* Top of the form when it was opened from "Upload another scan". */
.mri-review-another-note {
  padding: 0.6rem 0.8rem;
  font-size: 0.9em;
  line-height: 1.45;
  color: #164e57;
  background: #eaf4f5;
  border: 1px solid #b9dbe0;
  border-radius: 6px;
}

/* Files the upload had to leave behind (unreadable on this device, or failed after
   retries) — same amber treatment as .mri-review-skipped-note on the form. */
.mri-review-skipped-files {
  text-align: left;
  font-size: 0.9em;
  line-height: 1.5;
  color: #7a3b00;
  background: #fff7ed;
  border: 1px solid #f5c89a;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

.mri-review-skipped-files p {
  margin: 0.25rem 0;
}

.mri-review-skipped-files ul {
  margin: 0.25rem 0;
  padding: 0 0 0 20px;
  list-style: disc;
  word-break: break-all; /* camera file names have no spaces to wrap on */
}

/* ---- [mri_review_status] — status lookup ---- */
.mri-review-status-form {
  max-width: 28rem;
}
.mri-review-status-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.mri-review-status-label input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid #c9ced6;
  border-radius: 6px;
}
.mri-review-status-result {
  margin-top: 1.25rem;
}
.mri-review-status-loading {
  color: #5b6472;
}
.mri-review-stage {
  border: 1px solid #d9dee5;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  background: #fafbfc;
}
.mri-review-stage-needs_attention {
  border-color: #e0b4b4;
  background: #fdf5f5;
}
.mri-review-stage-title {
  margin: 0.75rem 0 0.35rem;
  font-size: 1.2rem;
}
.mri-review-stage-body {
  margin: 0 0 0.75rem;
  color: #3b4350;
}
.mri-review-stage-phone {
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.mri-review-steps {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.mri-review-steps li {
  flex: 1;
  position: relative;
  text-align: center;
  font-size: 0.85rem;
  color: #8a93a2;
  padding-top: 1.35rem;
}
.mri-review-steps li::before {
  content: '';
  position: absolute;
  top: 0.45rem;
  left: 50%;
  right: -50%;
  height: 2px;
  background: #d9dee5;
}
.mri-review-steps li:last-child::before {
  display: none;
}
.mri-review-step-dot {
  position: absolute;
  top: 0;
  left: calc(50% - 0.5rem);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d9dee5;
  z-index: 1;
}
.mri-review-steps li.is-done .mri-review-step-dot,
.mri-review-steps li.is-active .mri-review-step-dot {
  background: #1f6feb;
  border-color: #1f6feb;
}
.mri-review-steps li.is-done::before {
  background: #1f6feb;
}
.mri-review-steps li.is-done,
.mri-review-steps li.is-active {
  color: #1f2a37;
  font-weight: 600;
}

.mri-review-skipped-note {
  margin: 0.4rem 0 0.6rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: #7a3b00;
  background: #fff7ed;
  border: 1px solid #f5c89a;
  border-radius: 6px;
}

.mri-review-fallback {
  max-width: 480px;
  margin: 18px 0 0;
  font-size: 0.85em;
  opacity: 0.8;
}