.ResultFailed {
    padding: 24px 16px 32px;
}
.ResultFailed .result-body {
}
.ResultFailed .result-comment-top {
  margin: 0px 0px 10px 0px;
}

/* The failure card. Until 2026-08-18 this screen was a bare title + one line of raw server text
   flush against the left edge; a declined card and a store holiday looked identical. The card
   groups icon / what happened / what to do next so the customer can act without asking staff. */
.ResultFailed .result-error-card {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 22px 24px;
  text-align: center;
  background-color: var(--tmo-online-bg-page, #fefefe);
  border: 1px solid var(--tmo-online-divider, rgba(0, 0, 0, 0.08));
  border-radius: var(--tmo-online-body-radius, 16px);
  box-shadow: var(--tmo-online-body-shadow, 0 4px 16px rgba(0, 0, 0, 0.08));
}

.ResultFailed .result-error-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  font-size: 3.0rem;
  line-height: 56px;
  font-weight: 700;
  /* Tone is set by the JS (tone-card / tone-temporary / tone-order); these are the neutral
     defaults so an unknown tone still renders as a proper circle. */
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--tmo-online-text-primary, #333);
}
.ResultFailed .result-error-card.tone-card .result-error-icon {
  background-color: rgba(198, 40, 40, 0.10);
  color: var(--tmo-online-text-danger, #c62828);
}
.ResultFailed .result-error-card.tone-temporary .result-error-icon {
  background-color: rgba(224, 134, 0, 0.12);
  color: #e08600;
}
.ResultFailed .result-error-card.tone-order .result-error-icon {
  background-color: rgba(65, 84, 107, 0.10);
  color: #41546b;
}

.ResultFailed .result-comment-top-title {
  margin: 0;
  font-size: 2.0rem;
  line-height: 1.35;
  color: var(--tmo-online-text-title, inherit);
  font-family: var(--tmo-online-font-system-heading-family, inherit);
  font-weight: var(--tmo-online-font-system-heading-weight, 700);
}
.ResultFailed .result-comment-top-text {
  margin: 10px 0px 0px;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--tmo-online-text-primary, inherit);
  font-weight: var(--tmo-online-font-system-body-weight, inherit);
}

/* What to do next. Kept visually separate from the cause so it never reads as one long apology. */
.ResultFailed .result-error-hint {
  margin: 18px 0px 0px;
  padding: 12px 14px;
  text-align: left;
  font-size: 1.45rem;
  line-height: 1.6;
  color: var(--tmo-online-text-secondary, #555);
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}

.ResultFailed .result-comment-top-button-wrapper {
    width: 100%;
    margin-top: 26px;
}

.ResultFailed .result-comment-top-button {
    background-color: var(--tmo-online-bg-page, #fefefe);
    margin: auto;
    border: 1px solid #888;
    width: 300px;
    max-width: 100%;
    border-radius: 12px 12px;
    box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.15);
    line-height: 46px;
    text-align: center;
  font-family: var(--tmo-online-font-footer-action-family, inherit);
  font-weight: var(--tmo-online-font-footer-action-weight, inherit);
}

/* Tablet Only */
@media (min-width: 768px) and (max-width: 992px) {
}

/*--- Mobile Landscape & Portrait ---*/
@media (max-width: 767px) {
  .ResultFailed .result-error-card {
    padding: 24px 18px 20px;
  }
}