<script setup lang="ts">
import regex from '/@src/utils/regex'
import rules from '/@src/utils/rules'
const router = useRouter()
const notyf = useNotyf()
const step = ref(0)
// const selectedAvatar = ref(2)

const isLoading = ref(false)
const registerForm = ref({
  bizNo: '111-11-11111',
  pwd: 'kospo2025!',
  rePwd: 'kospo2025!',
  compNm: '테스트1',
  repNm: '테스트1',
  email: 'aa@naver.com',
  prv: false,
})
const initValid = {
  bizNo: true,
  pwd: true,
  rePwd: true,
  email: true,
}
const privacyCheckBox = [
  true,
  false,
]

const registerValid = ref(initValid)
const handleSignup = async () => {
  if (!isLoading.value) {
    let submit = true
    step.value++
    isLoading.value = true
    registerValid.value = structuredClone(initValid)
    console.log(registerValid)
    notyf.dismissAll()
    if (!registerForm.value.prv) {
      notyf.error('약관에 동의해 주세요.')
      step.value = 1
      isLoading.value = false
      return
    }
    if (!regex.bizNo.test(registerForm.value.bizNo)) {
      notyf.error('사업자번호가 정상적이지 않습니다. 다시 입력해주세요.')
      registerValid.value.bizNo = false
      step.value = 0
      submit = false
    }
    if (!regex.email.test(registerForm.value.email)) {
      notyf.error('이메일이 정상적이지 않습니다. 다시 입력해주세요.')
      registerValid.value.email = false
      step.value = 0
      submit = false
    }
    if (registerForm.value.pwd !== registerForm.value.rePwd) {
      notyf.error('비밀번호가 일치 하지 않습니다..')
      registerValid.value.pwd = false
      registerValid.value.rePwd = false
      step.value = 0
      submit = false
    }
    if (!regex.password.test(registerForm.value.pwd)) {
      notyf.error('비밀번호는 영문 숫자 특수기호 조합 8자리이상 으로 입력해주세요.')
      registerValid.value.pwd = false
      registerValid.value.rePwd = false
      step.value = 0
      submit = false
    }
    if (submit) {
      /* kcb 인증 추가 영역 */
      api.register(registerForm.value).then(() => {
        router.push('/auth/login')
      }).catch((res) => {
        notyf.error(res.response._data.body)
        step.value = 0
      })
    }
    else {
      return false
    }
    isLoading.value = false
  }
}

const onBizNoComplete = (e: any) => {
  registerForm.value.bizNo = e.value
}

const onEmailComplete = (e: any) => {
  registerForm.value.email = e.value
}

useHead({
  title: '소액계약관리 - 회원가입',
})
</script>

<template>
  <LandingGrids />
  <div>
    <div class="signup-nav">
      <div class="signup-nav-inner">
        <RouterLink
          to="/"
          class="logo"
        >
          <AnimatedLogo
            width="250px"
          />
        </RouterLink>
      </div>
    </div>

    <div class="signup-wrapper">
      <div
        class="signup-steps"
      >
        <div class="steps-container">
          <div
            class="step-icon is-active"
            :class="[step >= 0 && 'is-active', step < 0 && 'is-inactive']"
          >
            <div class="inner">
              <VIcon
                icon="lucide:user"
                @click="step = 0"
              />
            </div>
            <span class="step-label">사용자 정보</span>
          </div>
          <div
            class="step-icon"
            :class="[step >= 1 && 'is-active', step < 1 && 'is-inactive']"
          >
            <div class="inner">
              <VIcon
                icon="lucide:shield"
                @click="step = 1"
              />
            </div>
            <span class="step-label">개인정보 동의서</span>
          </div>
          <div
            class="step-icon"
            :class="[step >= 3 && 'is-active', step < 3 && 'is-inactive']"
          >
            <div class="inner">
              <VIcon
                icon="lucide:check"
              />
            </div>
            <span class="step-label">완료</span>
          </div>
          <progress
            class="progress"
            :value="step - 1"
            :max="2"
          >
            25%
          </progress>
        </div>
      </div>

      <img
        :class="[step > 0 && 'is-hidden']"
        class="card-bg"
        src="/images/backgrounds/signup/vuero-signup.webp"
        alt=""
      >

      <div class="hero is-fullheight">
        <div class="hero-body">
          <div class="container">
            <!-- Step 1 -->
<!--            <div-->
<!--              class="columns signup-columns"-->
<!--              :class="[step !== 0 && 'is-hidden']"-->
<!--            >-->
<!--              <div class="column is-4">-->
<!--                <h1 class="title is-3 signup-title">-->
<!--                  소액 계약관리 플랫폼-->
<!--                </h1>-->
<!--                <h2 class="subtitle signup-subtitle">-->
<!--                  남부발전 계약관리 시스템-->
<!--                </h2>-->
<!--                <div class="signup-card">-->
<!--                  <form-->
<!--                    method="post"-->
<!--                    novalidate-->
<!--                    class="signup-form is-mobile-spaced"-->
<!--                    @submit.prevent=""-->
<!--                  >-->
<!--                    <div class="columns is-multiline">-->
<!--                      <div class="column is-12">-->
<!--                        <VField>-->
<!--                          <VControl :class="[!registerValid.bizNo && 'valid-err']">-->
<!--                            <VIMaskInput-->
<!--                              class="input v-input"-->
<!--                              mask="000-00-00000"-->
<!--                              :model-value="registerForm.bizNo"-->
<!--                              :options="rules.bizNo"-->
<!--                              placeholder="111-11-11111"-->
<!--                              autocomplete="username"-->
<!--                              @complete="onBizNoComplete"-->
<!--                            />-->
<!--                            <VLabel-->
<!--                              raw-->
<!--                              class="auth-label"-->
<!--                            >-->
<!--                              사업자번호-->
<!--                            </VLabel>-->
<!--                          </VControl>-->
<!--                        </VField>-->
<!--                      </div>-->
<!--                      <div class="column is-12">-->
<!--                        <VField>-->
<!--                          <VControl>-->
<!--                            <VInput-->
<!--                              v-model="registerForm.compNm"-->
<!--                              type="text"-->
<!--                              autocomplete="family-name"-->
<!--                            />-->
<!--                            <VLabel-->
<!--                              raw-->
<!--                              class="auth-label"-->
<!--                            >-->
<!--                              업체명-->
<!--                            </VLabel>-->
<!--                          </VControl>-->
<!--                        </VField>-->
<!--                      </div>-->
<!--                      <div class="column is-12">-->
<!--                        <VField>-->
<!--                          <VControl>-->
<!--                            <VInput-->
<!--                              v-model="registerForm.repNm"-->
<!--                              type="text"-->
<!--                              autocomplete="family-name"-->
<!--                            />-->
<!--                            <VLabel-->
<!--                              raw-->
<!--                              class="auth-label"-->
<!--                            >-->
<!--                              대표자명-->
<!--                            </VLabel>-->
<!--                          </VControl>-->
<!--                        </VField>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div class="button-wrap has-help">-->
<!--                      <VButton-->
<!--                        color="primary"-->
<!--                        size="big"-->
<!--                        bold-->
<!--                        fullwidth-->
<!--                        rounded-->
<!--                        @click="step++"-->
<!--                      >-->
<!--                        가입-->
<!--                      </VButton>-->
<!--                      <span>-->
<!--                        또는-->
<!--                        <RouterLink to="/auth/login"> 로그인 </RouterLink>-->
<!--                        을 하세요.-->
<!--                      </span>-->
<!--                    </div>-->
<!--                  </form>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

            <!-- Step 2 -->
            <div
              class="columns signup-columns"
              :class="[step !== 0 && 'is-hidden']"
            >
              <div class="column is-6 is-offset-3 username-form">
                <h1 class="title is-5 signup-title has-text-centered">
                  사용자 정보 입력
                </h1>
                <h2 class="subtitle signup-subtitle has-text-centered">
                  비밀번호 규칙(소문자 + 숫자 + 특수기호) 8자리 이상 입니다.<br/>
                  계약 발생시 아래에 입력된 이메일로 발신 됩니다. 정확하게 입력해주세요.
                </h2>
                <form
                  method="post"
                  novalidate
                  class="signup-form"
                  @submit.prevent="handleSignup"
                >
                  <div class="columns is-multiline">
                    <div class="column is-6">
                      <VField>
                        <VControl :class="[!registerValid.bizNo && 'valid-err']">
                          <VIMaskInput
                            class="input v-input"
                            mask="000-00-00000"
                            :model-value="registerForm.bizNo"
                            :options="rules.bizNo"
                            placeholder="111-11-11111"
                            autocomplete="username"
                            @complete="onBizNoComplete"
                          />
                          <VLabel
                            raw
                            class="auth-label"
                          >
                            사업자번호
                          </VLabel>
                        </VControl>
                      </VField>
                    </div>
                    <div class="column is-6">
                      <VField>
                        <VControl>
                          <VInput
                            v-model="registerForm.compNm"
                            type="text"
                            autocomplete="family-name"
                          />
                          <VLabel
                            raw
                            class="auth-label"
                          >
                            업체명
                          </VLabel>
                        </VControl>
                      </VField>
                    </div>
                    <div class="column is-6">
                      <VField>
                        <VControl>
                          <VInput
                            v-model="registerForm.repNm"
                            type="text"
                            autocomplete="family-name"
                          />
                          <VLabel
                            raw
                            class="auth-label"
                          >
                            대표자명
                          </VLabel>
                        </VControl>
                      </VField>
                    </div>
                    <div class="column is-6">
                      <VField>
                        <VControl :class="[!registerValid.email && 'valid-err']">
                          <VIMaskInput
                            class="input v-input"
                            :mask="String"
                            :model-value="registerForm.email"
                            :options="rules.email"
                            placeholder="kospo@kospo.co.kr"
                            autocomplete="email"
                            @complete="onEmailComplete"
                          />
                          <VLabel
                            raw
                            class="auth-label"
                          >
                            이메일
                          </VLabel>
                        </VControl>
                      </VField>
                    </div>
                    <div class="column is-6">
                      <VField>
                        <VControl :class="[!registerValid.pwd && 'valid-err']">
                          <VInput
                            v-model="registerForm.pwd"
                            type="password"
                            autocomplete="current-password"
                          />
                          <VLabel
                            raw
                            class="auth-label"
                          >
                            비밀번호
                          </VLabel>
                        </VControl>
                      </VField>
                    </div>
                    <div class="column is-6">
                      <VField>
                        <VControl :class="[!registerValid.rePwd && 'valid-err']">
                          <VInput
                            v-model="registerForm.rePwd"
                            type="password"
                            autocomplete="current-password"
                          />
                          <VLabel
                            raw
                            class="auth-label"
                          >
                            비밀번호 확인
                          </VLabel>
                        </VControl>
                      </VField>
                    </div>
                  </div>

                  <div class="button-wrap is-centered has-text-centered">
                    <VButton
                      color="primary"
                      size="big"
                      rounded
                      lower
                      @click="step++"
                    >
                      다음
                    </VButton>
                  </div>
                </form>
              </div>
            </div>

            <!-- Step 3 -->
            <div
              class="columns signup-columns"
              :class="[step !== 1 && 'is-hidden']"
            >
              <div class="column is-8 is-offset-4 username-form">
                <form
                  method="post"
                  novalidate
                  class="signup-form"
                  @submit.prevent="handleSignup"
                >
                  <div class="columns is-multiline">
                    <div class="column is-12 privacy-wrapper has-slimscroll">
                      <ul>
                        <li class="titleB">개인정보 활용 동의</li>
                        <li class="txt">소액계약관리플랫폼 이용을 위한 개인정보 이용에 대한 안내</li>
                        <li class="txt">정보주체가 되는 이용자께서는 아래 내용을 자세히 읽어보신후 동의여부를 결정하여 주시기 바랍니다.</li>
                      </ul>
                      <div class="borderRound">
                        <ul>
                          <li class="titleB">개인정보 수집 및 이용에 대한 안내</li>
                          <li class="txt">당사는 개인정보보호법(법률 제 10465호) 등 관련법령에 의거하여,</li>
                          <li class="txt">정보주체로부터 개인정보를 수집함에 있어, 아래 내용을 안내하고 있습니다.</li>
                          <li class="txt">정보주체가 되는 이용자께서는 아래 내용을 자세히 읽어보신후 동의여부를 결정하여 주시기 바랍니다.</li>
                        </ul>
                        <ul>
                          <li class="titleB">1. 수집하는 개인정보의 항목</li>
                          <li class="txt">우리회사는 시험성적서 검증시스템과 관련하여‘공공기관의 정보공개에 관한 법률’ 제10조에 의거하여 아래와 같은 개인정보를 수집하고 있습니다.</li>
                          <li class="txt dot orange">필수 수집항목 : 회사정보(회사명, 사업자등록번호, 대표자명, 담당자명, 이메일)</li>
                          <li class="txt dot orange">수집방법 : 홈페이지 (회원 가입)</li>
                        </ul>
                        <ul>
                          <li class="titleB">2. 개인정보의 수집 및 이용목적</li>
                          <li class="txt">우리 회사는 수집한 개인정보를 다음의 목적을 위해 활용합니다.</li>
                          <li class="txt dot orange">소액계약관리 견적조사를 위한 이용자 관리</li>
                        </ul>
                        <ul>
                          <li class="titleB">3. 개인정보 보유 및 이용기간</li>
                          <li class="txt">개인정보의 수집 및 이용목적이 달성되면 지체 없이 파기합니다. 단, 다음의 정보에 대해서는 아래의 이유로 명시한 기간 동안 보존합니다.</li>
                          <li class="txt dot orange">보존 이유 : 서비스 제공 위한 사용자 관리</li>
                          <li class="txt dot orange">보존 기간 : 1년</li>
                        </ul>
                        <ul>
                          <li class="titleB">4. 동의를 거부할 권리 및 동의 거부에 따른 안내</li>
                          <li class="txt">고객께서는 본 안내에 따라 개인정보 수집에 대하여 거부를 하실 수 있는 권리가 있습니다.</li>
                          <li class="txt">본 개인정보 수집에 대하여 거부하시는 경우, 이용자 확인이 이루어지지 않음에 따라 당사의 안전품질협업 시스템 관련 서비스를 이용하실 수 없습니다.</li>
                        </ul>
                      </div>
                    </div>
                  </div>


                  <div class="checkbox-wrap is-centered has-text-centered">
                    <VField horizontal>
                      <div class="txt">개인정보 이용 및 수집 동의(필수)</div>
                      <VSwitchSegment
                        v-model="registerForm.prv"
                        label-true="동의"
                        label-false="거부"
                        color="primary"
                      />
                    </VField>

                  </div>
                  <div class="button-wrap is-centered has-text-centered">
                    <VButton
                      size="big"
                      color="primary"
                      type="submit"
                      rounded
                      primary
                      lower
                      :loading="isLoading"
                    >
                      완료
                    </VButton>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="signup-footer">
      <div class="container">
        <div class="footer-inner">
          <VDarkmodeToggle />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
:root {
  zoom: 1.2;
}
.file-label {
  margin: 1rem auto 0;
}

.signup-nav {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 65px;
  z-index: 99;
  @media (width <= 768px) {
    .signup-nav-inner {
      padding: 0 3rem;
    }
  }
  .signup-nav-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .logo {
      img {
        display: block;
        min-width: 48px;
        /*max-width: 48px;*/
      }
    }
  }
}

.signup-footer {
  position: absolute;
  bottom: 10px;
  inset-inline-start: 0;
  inset-inline-end: 0;

  .footer-inner {
    display: flex;
    align-items: center;
    padding: 0 1rem;
  }

  .dark-mode {
    transform: scale(0.6);
  }
}

.signup-steps {
  position: absolute;
  top: 80px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: 0 auto;
  max-width: 500px;

  .steps-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .progress {
      position: absolute;
      top: 50%;
      inset-inline-start: 0;
      inset-inline-end: 0;
      transform: translateY(-50%);
      width: calc(100% - 80px);
      margin: 0 auto;
      height: 0.35rem !important;
      background-color: var(--white);
      z-index: 0;

      &::-webkit-progress-bar {
        background-color: var(--white);
      }

      &::-webkit-progress-value {
        background-color: var(--primary);
        transition: width 0.5s ease;
      }

      &::-moz-progress-bar {
        background-color: var(--primary);
        transition: width 0.5s ease;
      }

      &::-ms-fill {
        background-color: var(--primary);
        transition: width 0.5s ease;
      }
    }

    .step-icon {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      width: 50px;
      border-radius: var(--radius-rounded);
      background: var(--fade-grey);
      cursor: pointer;
      z-index: 1;

      &.is-active {
        .inner {
          background: var(--white);
          border-color: var(--primary);

          .iconify {
            color: var(--primary);
          }
        }
      }

      &.is-done {
        .inner {
          background: var(--primary);
          border-color: var(--primary);

          .iconify {
            color: var(--smoke-white);
          }
        }
      }

      &.is-inactive {
        pointer-events: none;
      }

      .inner {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 40px;
        border-radius: var(--radius-rounded);
        border: 2px solid var(--primary-grey);
        background: var(--primary-grey);
      }

      .step-label {
        position: absolute;
        top: 52px;
        inset-inline-start: 0;
        inset-inline-end: 0;
        margin: 0 auto;
        text-align: center;
        min-width: 100px;
        transform: translateX(calc(var(--transform-direction) * -25%));
        font-size: 1.0rem;
        font-weight: 500;
        color: var(--dark-text);
      }

      .iconify {
        height: 20px;
        width: 20px;
        font-size: 20px;
        color: var(--muted-grey);
      }
    }
  }
}

.signup-columns {
  animation: fadeInLeft 0.5s;

  .column.is-8 {
    margin: 0 auto;
  }
}

.signup-wrapper {
  position: relative;
  //min-height: 100vh;
  //background: var(--fade-grey);

  .card-bg {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    transform: scaleX(calc(var(--transform-direction) * 1));
    display: block;
    width: 90%;
    transition: all 0.3s; // transition-all test

    &.faded {
      opacity: 0;
    }
  }

  .signup-title {
    font-family: var(--font-alt);
    color: var(--dark-text);
    font-size: 2.2em;
  }

  .signup-subtitle {
    font-family: var(--font);
    color: var(--muted-grey);
    font-size: 1.2rem;
  }

  .hero {
    .hero-body {
      overflow-x: hidden;
    }

    .signup-form {
      h2 {
        font-size: 1.6em;
      }

      h3 {
        font-size: 1.4em;
      }

      p {
        font-size: 1.1em;
      }
      .control {
        position: relative;
        width: 100%;

        &.has-switch {
          display: flex;
          align-items: center;

          span {
            display: block;
            color: var(--muted-grey);
          }

          > div {
            margin-inline-start: auto;
            transform: scale(0.8);
          }
        }

        &.is-agree {
          span {
            color: color-mix(in oklab, var(--placeholder), black 8%);

            a {
              color: var(--muted-grey);
              font-weight: 500;
              transition: color 0.3s;

              &:hover,
              &:focus {
                color: var(--primary);
              }
            }
          }
        }

        .input {
          padding-top: 20px;
          height: 60px;
          padding-inline-start: 10px;
          border-radius: 8px;
          font-size: 1.2em;
          transition: all 0.3s; // transition-all test

          &:focus {
            background: color-mix(in oklab, var(--fade-grey), white 6%);
            border-color: var(--placeholder);

            ~ .auth-label,
            ~ .autv-icon .iconify {
              color: var(--muted-grey);
            }
          }
        }

        .error-text {
          color: var(--danger);
          font-size: 0.8rem;
          display: none;
          padding: 2px 6px;
        }

        .auth-label {
          position: absolute;
          top: 6px;
          inset-inline-start: 10px;
          font-size: 1.0rem;
          color: var(--dark-text);
          font-weight: 500;
          z-index: 2;
          transition: all 0.3s; // transition-all test
        }

        .autv-icon {
          position: absolute;
          top: 0;
          inset-inline-start: 0;
          height: 60px;
          width: 60px;
          display: flex;
          justify-content: center;
          align-items: center;

          .iconify {
            font-size: 24px;
            color: var(--placeholder);
            transition: all 0.3s; // transition-all test
          }
        }

        &.has-validation {
          .validation-icon {
            position: absolute;
            top: 0;
            inset-inline-end: 0;
            height: 60px;
            width: 60px;
            display: none;
            justify-content: center;
            align-items: center;

            .icon-wrapper {
              height: 20px;
              width: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: var(--radius-rounded);

              .iconify {
                height: 10px;
                width: 10px;
                stroke-width: 3px;
                color: var(--white) !important;
              }
            }

            &.is-success {
              .icon-wrapper {
                background: var(--success);
              }
            }

            &.is-error {
              .icon-wrapper {
                background: var(--danger);
              }
            }
          }

          &.has-success {
            .validation-icon {
              &.is-success {
                display: flex;
              }

              &.is-error {
                display: none;
              }
            }
          }

          &.has-error {
            .input {
              border-color: var(--danger);
            }

            .error-text {
              display: block;
            }

            .validation-icon {
              &.is-error {
                display: flex;
              }

              &.is-success {
                display: none;
              }
            }
          }
        }

        &.is-flex {
          display: flex;
          align-items: center;

          a {
            display: block;
            margin-inline-start: auto;
            color: var(--muted-grey);
            font-weight: 500;
            font-size: 0.9rem;
            transition: color 0.3s;

            &:hover,
            &:focus {
              color: var(--primary);
            }
          }

          .remember-me {
            font-size: 0.9rem;
            color: var(--muted-grey);
            font-weight: 500;
          }
        }
      }
    }

    .button-wrap {
      margin: 20px 0 0;

      &.has-help {
        display: flex;
        align-items: center;

        > span {
          margin-inline-start: 12px;
          font-family: var(--font);

          a {
            color: var(--primary);
            font-weight: 500;
            padding: 0 3px;
            font-size: 1.1em;
          }
        }
      }

      &.is-centered {
        margin-top: 40px;
        text-align: center;

        .button {
          min-width: 180px;
          margin-inline-start: 0 !important;
        }
      }

      .button {
        height: 46px;
        width: 190px;
        margin-inline-start: 6px;
        font-size: 1.1em;

        &:first-child {
          &:hover {
            opacity: 0.95;
            box-shadow: var(--primary-box-shadow);
          }
        }

        &:nth-child(2) {
          color: var(--dark-text);
          border-color: var(--placeholder);
        }
      }
    }

    .signup-type {
      display: flex;
      align-items: center;

      // margin-top: 16px;

      .box-wrap {
        width: 100%;
        position: relative;

        input {
          position: absolute;
          top: 0;
          inset-inline-start: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          cursor: pointer;

          &:checked + .signup-box {
            border-color: var(--primary);

            .iconify {
              color: var(--primary);
            }

            .meta {
              span:first-child {
                color: var(--primary);
              }
            }
          }
        }

        .signup-box {
          display: flex;
          align-items: center;
          padding: 12px;
          background: var(--white);
          border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
          border-radius: var(--radius-large);
          transition: all 0.3s; // transition-all test

          .iconify, .lnil {
            font-size: 2rem;
            color: var(--muted-grey);
          }

          .meta {
            margin-inline-start: 10px;

            span {
              display: block;

              &:first-child {
                font-size: 0.85rem;
                font-weight: 500;
                color: var(--dark-text);
              }

              &:nth-child(2) {
                font-size: 0.8rem;
                color: var(--muted-grey);
              }
            }
          }
        }

        &:first-child {
          margin-inline-end: 6px;
        }

        &:nth-child(2) {
          margin-inline-start: 6px;
        }
      }
    }
  }
}

.signup-profile-wrapper {
  padding: 80px 60px 10px;

  .title,
  .subtitle {
    text-align: center;
  }

  .title {
    font-family: var(--font-alt);
    font-size: 1.4rem;
  }

  .subtitle {
    font-family: var(--font);
    font-size: 1rem;
  }

  .picture-selector,
  .skill-picture-selector {
    width: 100%;
    text-align: center;

    .image-container {
      position: relative;
      width: 140px;
      height: 140px;
      margin: 10px auto;
      border-radius: var(--radius-rounded);

      img {
        width: 140px;
        height: 140px;
        border-radius: var(--radius-rounded);
        display: block;
        border: 4px solid #e8e8e8;
        margin-inline-start: -1px;
      }

      .upload-button {
        position: absolute;
        bottom: 18px;
        inset-inline-end: 0;
        width: 36px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--white);
        border-radius: var(--radius-rounded);
        border: 1px solid color-mix(in oklab, var(--fade-grey), black 4%);
        z-index: 5;
        transition: all 0.3s; // transition-all test
        cursor: pointer;

        &:hover,
        &:focus {
          box-shadow: var(--light-box-shadow);
        }

        .iconify {
          height: 16px;
          width: 16px;
          color: var(--dark-text);
        }
      }
    }
  }
}

.avatar-carousel,
.avatar-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;

  .carousel-item {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    margin: 2rem 0;
    width: 25%;

    &:hover {
      img {
        opacity: 0.9;
      }
    }

    &.active {
      img {
        transform: scale(1);
        border: 3px solid var(--primary);
        opacity: 1;
        filter: grayscale(0);
      }
    }
  }

  .image-wrapper {
    position: relative;
    height: 80px;
    width: 80px;
    margin: 0 auto;

    &.is-smaller img {
      height: 80px;
      width: 80px;
    }

    img {
      height: 80px;
      width: 80px;
      border-radius: var(--radius-rounded);
      margin: 0 auto;
      filter: grayscale(1);
      opacity: 0.6;
      transition: all 0.3s; // transition-all test
    }
  }

  .tns-item {
    max-width: 120px;
    text-align: center;
    cursor: pointer;

    img {
      opacity: 0.6;
      border: 4px solid transparent;
      transform: scale(0.75);
    }

    &.active {
      img {
        opacity: 1;
        transform: scale(1);
        border: 2px solid var(--primary);
      }
    }
  }

  .slick-dots {
    bottom: -60px !important;
  }

  .slick-prev::before,
  .slick-next::before {
    color: var(--muted-grey);
  }

  .slick-custom {
    position: absolute;
    top: calc(50% - 15px);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--fade-grey);
    width: 30px;
    height: 30px;
    background: var(--white);
    border-radius: 100px;
    cursor: pointer;
    color: var(--dark-text);
    transition: all 0.3s; // transition-all test
    z-index: 25;
    opacity: 0;

    .iconify {
      height: 16px;
      width: 16px;
      color: var(--primary);
      transition: all 0.3s; // transition-all test
    }

    &:hover {
      border-color: color-mix(in oklab, var(--fade-grey), black 4%);
      color: var(--white);
      box-shadow: var(--light-box-shadow);
    }

    &.is-prev {
      inset-inline-start: -6px;
    }

    &.is-next {
      inset-inline-end: -6px;
    }
  }
}

.resize-handler {
  max-width: 200px;
  margin: 7px auto 10px;
}
@media (hover: none) and (pointer: coarse) {
  .username-form {
    padding-top: 140px !important;
  }
}
.username-form {
  padding-top: 80px;
}

.is-dark {
  .signup-wrapper {
    background: color-mix(in oklab, var(--dark-sidebar), white 10%);
  }

  .signup-steps {
    .steps-container {
      .progress {
        &::-webkit-progress-bar {
          background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
        }

        &::-webkit-progress-value {
          background: var(--primary);
        }

        &::-moz-progress-bar {
          background: var(--primary);
        }

        &::-ms-fill {
          background: var(--primary);
        }
      }

      .step-icon {
        background: color-mix(in oklab, var(--dark-sidebar), white 7%);

        &.is-active {
          background: color-mix(in oklab, var(--dark-sidebar), white 16%);

          .inner {
            background: var(--primary);

            .iconify {
              color: var(--white);
              stroke: var(--white);
            }
          }

          .step-label {
            color: var(--primary);
            opacity: 1;
          }
        }

        .inner {
          background: color-mix(in oklab, var(--dark-sidebar), white 9%);
          border-color: color-mix(in oklab, var(--dark-sidebar), white 9%);
        }

        .step-label {
          color: var(--dark-dark-text);
          opacity: 0.6;
        }
      }
    }
  }

  .hero {
    .signup-form {
      .control {
        .auth-label {
          color: var(--light-text);
        }

        .input {
          &:focus {
            background: color-mix(in oklab, var(--dark-sidebar), black 4%);
            border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

            ~ .auth-label,
            ~ .auth-icon .iconify {
              color: var(--primary);
            }
          }
        }
      }

      .signup-type {
        .box-wrap {
          input {
            &:checked + .signup-box {
              border-color: var(--primary);

              .iconify {
                color: var(--primary);
              }

              .meta {
                span:first-child {
                  color: var(--primary);
                }
              }
            }
          }

          .signup-box {
            background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
            border-color: color-mix(in oklab, var(--dark-sidebar), white 4%);

            .meta {
              span:first-child {
                color: var(--dark-dark-text);
              }
            }
          }
        }
      }

      .button-wrap {
        &.has-help {
          > span {
            color: var(--light-text);

            a {
              color: var(--primary);
            }
          }
        }
      }
    }
  }

  .signup-profile-wrapper {
    .picture-selector {
      .image-container {
        img {
          border-color: color-mix(in oklab, var(--dark-sidebar), white 10%);
        }

        .upload-button {
          background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
          border-color: color-mix(in oklab, var(--dark-sidebar), white 10%);

          .iconify {
            color: var(--light-text);
            stroke: var(--light-text);
          }
        }
      }
    }
  }

  .divider-container {
    .divider {
      span {
        &::before,
        &::after {
          border-color: color-mix(in oklab, var(--dark-sidebar), white 18%);
        }
      }
    }
  }

  .avatar-carousel {
    .slick-slide {
      &.slick-current {
        img {
          border-color: var(--primary);
        }
      }
    }

    .slick-custom {
      background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
      border-color: color-mix(in oklab, var(--dark-sidebar), white 10%);

      &::before,
      &::after {
        color: var(--light-text);
      }
    }
  }
}

@media only screen and (width <= 767px) {
  .signup-footer {
    position:fixed;
    bottom: 10px !important;
    width: 50px;
  }

  .signup-nav {
    background-color: white;
  }

  .is-dark {
    .signup-nav {
      background-color: color-mix(in oklab, var(--dark-sidebar), white 10%);
    }
  }

  .signup-steps {
    .steps-container {
      padding: 0 1rem;

      .step-icon {
        .step-label {
          display: none;
        }
      }
    }
  }

  .signup-wrapper {
    .card-bg {
      bottom: -75px;
    }

    .columns {
      padding: 0;
      text-align: center;
    }

    .signup-columns {
      max-width: 100vw;
    }

    .signup-subtitle {
      max-width: 330px;
      margin-inline-start: auto;
      margin-inline-end: auto;
    }

    .avatar-selector {
      .carousel-item {
        width: 50%;
      }
    }

    .button-wrap {
      margin-top: 10px !important;

      &.has-help {
        justify-content: center;
      }
    }
  }
}

@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: portrait) {
  .signup-wrapper {
    .card-bg {
      bottom: -75px;
    }

    .columns {
      padding: 0 80px;
      text-align: center;
    }

    .signup-columns {
      max-width: 100vw;
    }

    .signup-subtitle {
      max-width: 330px;
      margin-inline-start: auto;
      margin-inline-end: auto;
    }

    .button-wrap {
      &.has-help {
        justify-content: center;
      }
    }
  }
}

.privacy-wrapper {
  height: 400px;
  overflow: auto;

  .borderRound {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
  }

  .titleB {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 21px;
    letter-spacing: -.45px;
    padding: 15px 0;
  }

  .orange {
    color: var(--orange);
  }

  .orange.dot {
    &:before {
      background-color: var(--orange) !important;
    }
  }
  .dot {
    position: relative;
    padding-left: 7px;
    &:before {
      content: '';
      position: absolute;
      left: 0;
      width: 3px;
      height: 3px;
      background-color: black;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 3px;
      font-size:14px;
      letter-spacing: -.35px;
    }
  }
  .txt {
    font-size: 0.9em;
    line-height: 20px;
  }

  ul {
    li {
      padding: 4px 0;
    }
  }
}

.checkbox-wrap {
  .is-horizontal {
    justify-content: end;
  }
  .txt {
    line-height: 25px;
    padding-right: 20px;
    letter-spacing: -.45px;
  }
  .switch-segment {
    .is-label {
      font-size:1em;
    }
  }
}
</style>
