/* 
   Project Sign Up CSS
*/

.p-signup__bg {
  display: block;
  position: absolute;
  height: 456px;
  border-radius: 10000px;
  opacity: 0.8;
  z-index: -1;

  &.bg-right {
    background: linear-gradient(310deg, var(--color-surface-primary-stop));
    width: 500px;
    transform: rotate(45deg);
    top: 420px;
    left: -360px;
    filter: blur(80px);

    @media (max-width: 640px) {
      width: 240px;
      height: 220px;
      top: 500px;
      left: -160px;
      filter: blur(40px);
    }
  }

  &.bg-left {
    background: linear-gradient(255deg, var(--color-surface-primary-stop));
    width: 400px;
    transform: rotate(-150deg);
    bottom: 280px;
    right: -288px;
    filter: blur(60px);

    @media (max-width: 640px) {
      width: 220px;
      height: 228px;
      bottom: 40px;
      right: -136px;
      filter: blur(30px);
    }
  }
}

/* ========================
   フォーム
   ======================== */
.p-signup__form-block {
  width: 100%;
}

.p-signup__container {
  position: relative;
  max-width: 100vw;
  overflow: hidden;
  gap: 64px;

  @media (max-width: 640px) {
    gap: 32px;
  }

  /* wp-members 会員登録フォームカスタマイズ */
  & #wpmem_reg {
    width: 100%;
    background-color: rgba(var(--color-surface-secondary-rgb), 0.2);
    padding: 40px 80px;
    border-radius: 8px;
    font-family:
      'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo,
      sans-serif;
    font-size: var(--typography-body-size);
    font-weight: var(--typography-body-weight);
    line-height: var(--typography-body-line-height);
    color: var(--color-text-primary);

    @media (max-width: 640px) {
      padding: 24px;
    }

    /* 必須表示 */
    & .req {
      display: none;
    }

    /* ボタン ラッパー */
    & .button_div {
      padding: 0;
      text-align: center;
      justify-self: center;
    }

    /* 各input */
    & input[type='text'],
    & input[type='email'],
    & input[type='password'] {
      /* base: .o-input */
      display: flex;
      align-items: center;
      flex-shrink: 0;
      font-size: var(--typography-label-size);
      font-weight: var(--typography-label-weight);
      line-height: var(--typography-label-line-height);
      background-color: var(--color-common-white);
      border-radius: 4px;
      border: 1px solid rgba(var(--color-surface-secondary-rgb), 0.4);
      transition: border-color 0.2s;
      appearance: none;
      cursor: text;

      /* size: .o-input--md */
      gap: 8px;
      height: 44px;
      min-width: 120px;
      padding: 12px 16px;

      margin-top: 12px;

      &:focus {
        border-color: rgba(var(--color-surface-secondary-rgb), 0.8);
        outline: none;
      }
    }

    /* label: 利用規約に同意 */
    & label[for='tos_agree'] {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;

      @media (max-width: 640px) {
        /* 余白追加 */
        margin-top: 8px;
      }
    }

    /* ボタン  */
    /* size: .o-button--lg */
    & .p-signup__button {
      font-size: var(--typography-button-lg-size);
      font-weight: var(--typography-button-lg-weight);
      line-height: var(--typography-button-lg-line-height);

      /* 余白追加 */
      margin-top: 8px;
    }
  }

  /* メッセージ */
  & .wpmem_msg {
    width: 100%;
    padding: 24px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background-color: var(--color-error-100);
    color: var(--color-error-900);
    font-size: var(--typography-error-md-size);
    font-weight: var(--typography-error-md-weight);
    line-height: var(--typography-error-line-md-height);

    @media (max-width: 640px) {
      padding: 12px;
    }
  }
}

.p-signup__field {
  width: 100%;

  &:has([type='checkbox']) {
    font-size: var(--typography-label-size);
    font-weight: var(--typography-label-weight);
    line-height: var(--typography-label-line-height);
    text-box: trim-both cap alphabetic;
    position: relative;

    & input[type='checkbox'] {
      opacity: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 20px;
      height: 0;
      z-index: -1;
    }

    & label[for='tos_agree'] {
      cursor: pointer;
      align-self: start;

      &::before {
        font-family: 'Material Symbols Outlined';
        content: '\e835';
        font-size: 20px;
        color: var(--color-gray-300);
      }
    }
  }

  &:has([type='checkbox']:checked) label[for='tos_agree']::before {
    font-variation-settings: 'FILL' 1;
    font-family: 'Material Symbols Outlined';
    content: '\e834';
    font-size: 20px;
    color: var(--color-text-primary);
  }

  & .text {
    font-size: var(--typography-heading-2xs-size);
    font-weight: var(--typography-heading-2xs-weight);
    line-height: var(--typography-heading-2xs-line-height);
  }
}

/* バリデーション */
.p-signup__validation {
  margin: 12px 0 0;
}

.p-signup__validation-list {
  padding: 0;
  list-style: none;
}

.p-signup__validation-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;

  &::before {
    font-variation-settings: 'FILL' 1;
    font-family: 'Material Symbols Outlined';
    content: '\ef4a';
    font-size: 6px;
    line-height: 0;
  }
}

.p-signup__button {
  justify-self: center;
  width: 240px;

  @media (max-width: 640px) {
    width: 100%;
  }
}

/* ========================
   メリットセクション
   ======================== */
.p-signup__advantage-contents {
  justify-items: flex-start;
}

.p-signup__advantage-list {
  list-style: none;
  counter-reset: list;
  margin: 0;
  padding: 0;
}

.p-signup__advantage-item::before {
  counter-increment: list;
  content: counter(list, decimal-leading-zero) '/';
  display: inline-block;
  margin-bottom: 12px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-surface-secondary);
}

/* ========================
  確認メール送信,登録完了（register-confirm,register-thanks）
   ======================== */
.p-register__container {
  padding: 32px 0 64px;

  @media (max-width: 640px) {
    padding: 32px 0;
  }
}

.p-register__button {
  width: 240px;
  justify-self: flex-start;

  @media (max-width: 640px) {
    width: 100%;
  }
}

.p-register__button-group {
  justify-self: flex-start;
  width: 100%;

  @media (max-width: 640px) {
    justify-content: center;
  }
}

.p-register-confirm__link {
  font-size: var(--typography-caption-size);
}