.subscription {
  align-items: center;
  background-color: var(--section-tinted-background);
  display: flex;
  flex-direction: column;
  padding: var(--section-padding-block) var(--section-padding-inline);
  row-gap: var(--space-md);

  h3 {
    color: var(--color-text-brand);
    font-weight: var(--font-weight-medium);
  }

  p {
    color: var(--color-text-subtle);
  }

  button {
    background-color: var(--button-primary-background);
    border-radius: var(--button-radius);
    border: none;
    color: var(--button-primary-foreground);
    cursor: pointer;
    font: var(--button-typography);
    padding-block: var(--button-size-md-padding-block);
    padding-inline: var(--button-size-md-padding-inline);
  }
}

.subscription-modal {
  background: var(--modal-background);
  border-radius: var(--modal-radius);
  border: none;
  padding: var(--modal-padding);
  width: var(--modal-width);

  &::backdrop {
    background-color: var(--modal-overlay);
  }

  .modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-2xl);
    position: absolute;
    right: 12px;
    top: 10px;
  }

  .modal-content h2 {
    color: var(--modal-title-color);
    padding: var(--modal-title-padding);
    text-align: center;
  }

  .subscription-form {
    display: grid;
    gap: var(--modal-gap);

    input {
      border-radius: var(--input-radius);
      border: var(--input-border);
      padding: var(--input-padding-block) var(--input-padding-inline);
      width: 100%;
    }

    button[type="submit"] {
      background-color: var(--button-primary-background);
      border-radius: var(--button-radius);
      border: none;
      color: var(--button-primary-foreground);
      cursor: pointer;
      font: var(--button-typography);
      padding-block: var(--button-size-md-padding-block);
      padding-inline: var(--button-size-md-padding-inline);
    }
  }

  .notification {
    margin-block: var(--space-md);

    &.success button {
      display: none;
    }
  }
}