/* ==========================================================================
   CENTERED PAGE
   Full-page centered content for confirmations, success messages, etc.
   ========================================================================== */

@layer components {
  .centered-page {
    max-width: var(--max-width-form);
    margin: calc(var(--block-space-double) * 2) auto;
    text-align: center;

    .btn {
      margin-top: var(--block-space);
    }
  }

  .centered-page__title {
    font-size: var(--text-large-title);
    font-weight: 700;
    margin-bottom: var(--block-space);
  }

  .centered-page__text {
    color: var(--color-ink-light);
    margin-bottom: var(--block-space);
  }

  .centered-page__subtitle {
    color: var(--color-ink-light);
    margin-bottom: var(--block-space-double);
  }

  .centered-page__footer {
    margin-top: var(--block-space-double);
    font-size: var(--text-footnote);
    color: var(--color-ink-light);
  }

  /* Form within centered page */
  .centered-page__form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    text-align: left;

    .form-group {
      margin-bottom: 0;
    }
  }
}