/* ========================================================================== Colors & Status ========================================================================== */

.status_good {
  --color: var(--wp--preset--color--shamrock);
  --hov_color: var(--wp--preset--color--shamrock);
}

.status_okay {
  --color: var(--wp--preset--color--goldenrod);
  --hov_color: var(--wp--preset--color--goldenrod);
}

.status_bad {
  --color: var(--wp--preset--color--magic-potion);
  --hov_color: var(--wp--preset--color--magic-potion);
}


/* ==========================================================================  Main Layout Containers & Headers ========================================================================== */

.audit-container {
  width: 80%;
  max-width: 800px;
  margin: 32px auto;
}

#audit-results {
  margin: 0 auto;
}

#audit-title {
  color: var(--mza-core-tonal-a00);
  font-weight: 700;
  margin: 0 auto;
  text-align: center;
}

#audit-sub {
  font-size: 16px;
  margin: 0 auto;
  text-align: center;
}

#audit-msg {
  margin: 32px;
  text-align: center;
}


/* ========================================================================== Forms & Inputs ========================================================================== */

.audit-form,
.audit-lead-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px auto;
  justify-content: center;
  align-items: center;
}

.audit-container .mza-input {
  --mza-core-radius: 100px;
  --bg_color: var(--mza-core-surface-a00);
  margin: 0;
  max-width: 550px;
}

.audit-container .mza-input input {
  height: 60px;
}


/* ========================================================================== Audit Metrics Section ========================================================================== */

.audit-metrics {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 32px;
  margin-bottom: 50px;
  background-color: var(--mza-core-surface-a10);
  border-radius: var(--mza-core-radius);
}

.metric-card {
  display: flex;
  flex-direction: column-reverse;
  gap: 0;
}

.metric-label {
  color: var(--mza-core-tonal-a00);
  font-size: 14px;
  text-align: center;
  opacity: 0.5;
}

.metric-value {
  color: var(--mza-core-tonal-a00);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}


/* ========================================================================== Audit Descriptions & Results List ========================================================================== */

.audit-desc > div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.audit-desc > div > .mza-icon {
  --size: 32px;
}

.audit-desc > div > div p {
  margin: 0;
}

.audit-desc > div > div p:first-child {
  color: var(--mza-core-text-a00);
  font-weight: 700;
}