.profile-header {
  padding-block: var(--spacing-12) var(--spacing-6);
  display: grid;
  gap: var(--spacing-2);
  .profile-title,
  .profile-lead {
    text-align: center;
    color: var(--color-text-inverse-high);
    text-shadow: 0 4px 48px rgba(95, 45, 55, 0.6);
  }
  .profile-lead {
    margin-bottom: var(--spacing-6);
  }
}
.c-profile-stepper {
  display: flex;
  .stepper-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-4);
    &:first-child {
      .stepper-count {
        &:before {
          opacity: 0;
        }
      }
    }
    &:last-child {
      .stepper-count {
        &:after {
          opacity: 0;
        }
      }
    }
    &.current {
      .stepper-count {
        gap: 3px;
        &:before {
          background: var(--color-surface-primary);
        }
        .numbering {
          background: var(--color-surface-primary);
          color: var(--color-text-inverse-high);
          outline: var(--color-border-primary) solid 2px;
          outline-offset: 2px;
        }
      }
      .stepper-label {
        color: var(--rose-7);
      }
    }
    &.passed {
      .stepper-count {
        &:before,
        &:after {
          background: var(--color-surface-primary);
        }
        .numbering {
          border: 2px solid var(--color-border-primary);
        }
      }
    }
    .stepper-count {
      display: flex;
      align-items: center;
      width: 100%;
      &:before,
      &:after {
        content: "";
        height: 2px;
        flex: 1;
        background: var(--white-alpha-7);
      }
      .numbering {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        width: 32px;
        border-radius: var(--radius-round);
        background: var(--white-alpha-7);
        color: var(--rose-4);
        font-weight: bold;
        z-index: 1;
        font-size: var(--font-size-6);
        .icon {
          width: 20px;
          height: 20px;
          fill: var(--color-text-primary);
        }
      }
    }
    .stepper-label {
      font-size: var(--font-size-2);
      font-weight: bold;
      color: var(--color-text-inverse-high);
    }
  }
}
.c-registration-form-section {
  display: grid;
  gap: var(--spacing-8);
}
.c-registration-submit-area {
  padding-block: var(--spacing-12) 0;
  display: flex;
  gap: var(--spacing-6);
  .btn.main {
    flex: 1;
  }
}
.category-section {
  padding-block: var(--spacing-6);
  display: grid;
  gap: var(--spacing-4);
  .category-title {
    color: var(--color-text-inverse-high);
    text-shadow: 0 4px 48px rgba(95, 45, 55, 0.6);
  }
}
.category-select-item {
  padding: var(--spacing-2) var(--spacing-);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 40px;
  position: relative;
  &:has(input[type="checkbox"]:checked) {
    background: var(--rose-1);
    border: 1px solid var(--color-border-primary);
    .category-select-label {
      color: var(--color-text-primary);
      &:before {
        content: "";
        width: 20px;
        height: 20px;
        background: var(--color-surface-primary);
        border-radius: var(--radius-round);
        position: absolute;
        right: -6px;
        top: -6px;
      }
      &:after {
        content: "";
        width: 6px;
        height: 4px;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
        transform: rotate(-45deg);
        position: absolute;
        right: 1px;
        top: 1px;
      }
    }
  }
  .category-icon {
    width: 48px;
    height: 48px;
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .category-select-label {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: var(--font-size-3);
    line-height: var(--line-height-2);
    font-weight: 700;
    color: var(--color-text-base-middle);
  }
}
.l-profile-event {
  .card {
    margin-block: var(--spacing-2);
  }
}
.c-profile-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: var(--spacing-8);
  padding-top: var(--spacing-4);
  .image-wrapper {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-round);
    overflow: hidden;
    background: var(--color-surface-base-tertiary);
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .delete-image {
    position: absolute;
    top: calc(120px - 32px);
    left: calc(50% + 36px);
  }
}