.seatreg-registrations {
  --seatreg-donate-rows: 3;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 16px;
  margin-bottom: 32px;

  #create-registration-form,
  .your-registrations-header,
  .donate-wrap {
    grid-column: 1 / -1;
  }

  .donate-wrap {
    align-self: start;
  }
}

@media screen and (min-width: 860px) {
  .seatreg-registrations {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    #create-registration-form,
    .your-registrations-header,
    .seatreg-registrations-empty {
      grid-column: 1 / -3;
    }

    .donate-wrap {
      grid-row: 1 / span var(--seatreg-donate-rows);
      grid-column: -3 / -1;
    }
  }
}

@media screen and (min-width: 1250px) {
  .seatreg-registrations {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1600px) {
  .seatreg-registrations {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1900px) {
  .seatreg-registrations {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.seatreg-registrations-empty {
  grid-column: 1 / -1;
  margin-top: 28px;
  padding: 24px;
  border: 1px dashed #c3c4c7;
  border-radius: 4px;
  color: #646970;
}

.seatreg-registration-card {
  display: flex;
  font-size: 13px;
  flex-direction: column;
  row-gap: 8px;
  padding: 16px;
  background-color: #fff;
  border: 1px solid #dcdcde;
  border-radius: 4px;

  &__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 8px;
  }

  &__status {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    column-gap: 6px;
  }

  &__calendar-icon {
    color: #646970;
    font-size: 14px;
  }

  &__title {
    margin: 0;
    overflow-wrap: anywhere;

    .registration-name-link {
      color: rgb(51, 51, 51);
      font-size: 18px;
    }
  }

  &__badge {
    flex-shrink: 0;
    padding: 4px 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;

    &--open {
      background-color: #2e7d32;
    }
    &--scheduled {
      background-color: #0073aa;
    }
    &--closed {
      background-color: #8c8f94;
    }
    &--ended {
      background-color: #50575e;
    }
  }

  &__meta {
    color: #646970;
    font-size: 13px;
  }

  &__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 4px;
    padding-top: 4px;

    a,
    .btn-link {
      padding: 0;
      color: rgb(66, 139, 202);
      font-size: 14px;
      text-align: left;
    }
  }

  &__footer {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #c3c4c7;
  }

  &__footer-date {
    color: #646970;
    font-size: 12px;

    .fa {
      margin-right: 4px;
    }
  }

  &__footer-notice {
    color: #646970;
    font-size: 13px;
    font-style: italic;
  }

  &__stats {
    display: flex;
    column-gap: 8px;
  }

  &__stat {
    display: flex;
    flex: 1;
    flex-direction: column;
    text-decoration: none;

    &:hover,
    &:focus {
      text-decoration: none;

      .seatreg-registration-card__stat-value {
        color: rgb(66, 139, 202);
      }
    }

    &--highlight .seatreg-registration-card__stat-value {
      color: #b32d2e;
    }
  }

  &__stat-value {
    color: #646970;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
  }

  &__stat-label {
    color: #8c8f94;
    font-size: 12px;
  }
}

@media screen and (max-width: 782px) {
  .seatreg-registrations {
    grid-template-columns: minmax(0, 1fr);
  }
}