/*=====================
  3.4  form CSS start
==========================*/
.auth-form {
  margin-top: 20px;

  .form-group {
    position: relative;
    display: block;
    margin-top: 15px;

    .form-label {
      font-size: 14px;
      font-weight: 500;
      color: rgba(var(--title-color), 1);
    }

    .form-control {
      position: relative;
      padding: 15px 15px 15px 40px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(var(--title-color), 1);
      background-color: rgba(var(--box-bg), 1);
      border: none;
      border-radius: 8px;
      box-shadow: 3px 7px 20px 0px rgba(var(--title-color), 0.03);

      @media (max-width: 600px) {
        padding: calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320))) calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320))) calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320))) 40px;
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (600 - 320)));
      }

      [dir="rtl"] & {
        padding: 15px 40px 15px 15px;

        @media (max-width: 600px) {
          padding: calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320))) 40px calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320))) calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320)));
        }
      }

      &.wo-icon {
        padding: 15px;
        background-color: rgba(var(--white), 1);
        box-shadow: 3px 7px 20px 0px rgba(var(--title-color), 0.03);

        @media (max-width: 600px) {
          padding: calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320)));
        }
      }

      &.with-eye {
        padding: 15px 40px 15px 40px !important;

        @media (max-width: 600px) {
          padding: calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320))) 40px !important;

          font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (600 - 320)));
        }
      }

      &.textarea-with-icon {
        position: relative;
      }

      &:focus {
        box-shadow: none;
        border-color: transparent;
      }

      &::placeholder {
        color: rgba(121, 125, 131, 1);
      }

      #picker {
        [dir="rtl"] & {
          position: absolute;
          top: 50%;
          left: 15px;
          transform: translateY(-50%);
        }
      }
    }

    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      --Iconsax-Color: rgba(var(--content-color), 1);
      --Iconsax-Size: 18px;

      [dir="rtl"] & {
        left: unset;
        right: 10px;
      }
    }

    .show-hide {
      position: absolute;
      bottom: 30%;
      right: 15px;
      transform: translateY(50%);

      [dir="rtl"] & {
        left: 15px;
        right: unset;
      }

      i {
        cursor: pointer;

        &.eye-icon {
          --Iconsax-Size: 18px;
        }

        &.icon-eye-splash {
          --Iconsax-Color: rgba(var(--content-color), 1);
        }

        &.icon-eye {
          --Iconsax-Color: rgba(var(--content-color), 1);
        }
      }

      .icon-eye-splash {
        display: none;
      }

      &.show {
        .icon-eye-splash {
          display: block;
          --Iconsax-Color: rgba(var(--content-color), 1);
        }

        .icon-eye {
          display: none;
        }
      }
    }

    input[type="date"i] {
      &::-webkit-calendar-picker-indicator {
        position: absolute;
        width: 80%;
        height: 20px;
        left: 40px;
        opacity: 0;
        cursor: pointer;

        [dir="rtl"] & {
          left: unset;
          right: 40px;
        }
      }
    }

    .dropdown {
      .dropdown-toggle {
        padding-left: 15px;
        font-size: 16px;
        line-height: 1.3;
        color: rgba(var(--content-color), 1);
        background-color: rgba(var(--box-bg), 1);
        box-shadow: 3px 7px 20px 0px rgba(var(--title-color), 0.03);
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 6px;

        @media (max-width: 600px) {
          font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (600 - 320)));
          padding-left: calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320)));
        }

        .dropdown-icon {
          --Iconsax-Color: rgba(var(--title-color), 1);
          --Iconsax-Size: 16px;
          width: 16px;
          height: 16px;
        }

        &::after {
          content: none;
        }

        &:first-child {
          &:active {
            border-color: rgba(var(--content-color), 0.15);
          }
        }

        &:focus {
          border-color: rgba(var(--content-color), 0.15);
        }

        .dropdown-icon {
          --Iconsax-Color: rgba(var(--content-color), 1);
          --Iconsax-Size: 16px;
        }
      }

      .dropdown-menu {
        &.show {
          min-width: 100%;
          background-color: rgba(var(--box-bg), 1);
        }

        li {
          width: 100%;

          .dropdown-item {
            color: rgba(var(--content-color), 1);
            display: flex;
            justify-content: flex-start;
            font-size: 16px;

            @media (max-width: 600px) {
              font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (600 - 320)));
            }

            &:active {
              background-color: rgba(var(--content-color), 0.05);
            }

            &:hover {
              background-color: transparent;
            }
          }
        }
      }
    }

    .form-check {
      margin-top: 8px;
      margin-bottom: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      float: unset;
      padding-left: 0;

      [dir="rtl"] & {
        padding-left: unset;
        padding-right: 0;
      }

      .form-check-label {
        color: rgba(var(--content-color), 1);
        cursor: pointer;
      }

      .form-check-input {
        width: 20px;
        height: 20px;
        margin-left: 0px;
        background-color: rgba(var(--white), 1);
        border: 1px solid rgba(var(--content-color), 0.5) !important;
        border-radius: 4px;
        box-shadow: 0px 2px 15px 0px rgba(78, 160, 247, 0.08);
        transition: all 0.15s ease-in-out;
        filter: none;
        cursor: pointer;

        [dir="rtl"] & {
          margin-left: unset;
          margin-right: 0;
        }

        &:focus {
          border-color: transparent;
          box-shadow: none;
        }

        &:checked {
          background-color: rgba(var(--theme-color), 1);
          border-color: rgba(var(--content-color), 0.15);
          float: unset;
        }
      }
    }

    .upload-image {
      position: relative;
      width: 100%;
      height: 120px;
      background-color: rgba(var(--white), 1);
      backdrop-filter: blur(2px);
      border-radius: 8px;
      color: rgba(var(--white), 1);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 12px;

      #file {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        z-index: 2;
        opacity: 0;
        cursor: pointer;
      }

      .upload-file {
        position: fixed;
        height: 100%;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: rgba(var(--content-color), 1);
        opacity: 0;
        z-index: 1;
      }

      .upload-icon {
        font-size: 20px;
        color: rgba(var(--title-color), 1);
        position: relative;
        --Iconsax-Color: rgba(var(--content-color), 1);
        --Iconsax-Size: 20px;
        transform: rotate(90deg);
      }

      .profile-icon {
        position: relative;
        width: 100px;
        color: rgba(var(--title-color), 1);
        filter: opacity(0.1);
      }

      &::after {
        content: "";
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        border: 1px dashed rgba(var(--content-color), 0.3);
        border-radius: 6px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      h5 {
        position: relative;
        margin-top: 5px;
        font-weight: 400;
        color: rgba(var(--content-color), 1);
      }

      &.profile-image {
        width: 100%;
        height: 300px;
      }
    }

    .form-select {
      &.language-select {
        position: relative;
        display: inline-block;
        padding: 8px;
        height: 100%;
        text-align: center;
        color: rgba(var(--title-color), 1);
        background-color: rgba(var(--white), 1);
        border: none;
        --bs-form-select-bg-img: none;
        z-index: 2;

        &:focus {
          box-shadow: none;
        }
      }

      &.offer-select {
        background-color: rgba(var(--white), 1);
        border: 1px solid rgba(var(--line-color), 1);

        &:focus {
          box-shadow: none;
        }
      }
    }
  }

  .google-btn {
    color: rgba(var(--title-color), 1);
    background-color: rgba(var(--box-bg), 1);

    .google {
      width: 20px;

      &.apple {
        body.dark & {
          filter: invert(1);
        }
      }
    }
  }

  .skip-btn {
    z-index: 2;
  }
}

.otp-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 20px;

  @media (max-width: 600px) {
    gap: calc(10px + (20 - 10) * ((100vw - 320px) / (600 - 320)));
  }

  .form-input {

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .form-control {
      position: relative;
      text-align: center;
      padding: 15px;
      color: rgba(var(--title-color), 1);
      background-color: rgba(var(--box-bg), 1);
      border-color: transparent;
      border-radius: 8px;

      @media (max-width: 600px) {
        padding: calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320)));
      }

      &::placeholder {
        color: rgba(121, 125, 131, 1);
      }

      &:focus {
        box-shadow: none;
        border: 1px solid rgba(var(--theme-color), 1);
      }
    }
  }

  .btn {
    margin-top: 80px;
  }
}

.theme-form {
  .form-group {
    position: relative;
    display: block;
    margin-top: 20px;

    .form-label {
      font-size: 14px;
      font-weight: 500;
      color: rgba(var(--title-color), 1);
    }

    .form-control {
      position: relative;
      padding: 15px;
      font-size: 16px;
      font-weight: 400;
      text-align: left;
      color: rgba(var(--title-color), 1);
      background-color: rgba(var(--box-bg), 1);
      border: none;
      border-radius: 8px;
      box-shadow: 3px 7px 20px 0px rgba(var(--title-color), 0.03);

      @media (max-width: 600px) {
        padding: calc(12px + (15 - 12) * ((100vw - 320px) / (600 - 320)));
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (600 - 320)));
      }

      [dir="rtl"] & {
        text-align: right;
      }

      &.with-icon {
        padding: 15px 15px 15px 40px;
        background-color: rgba(var(--box-bg), 1);
        box-shadow: 3px 7px 20px 0px rgba(var(--title-color), 0.03);

        @media (max-width: 600px) {
          padding: calc(10px + (15 - 10) * ((100vw - 320px) / (768 - 320))) calc(10px + (15 - 10) * ((100vw - 320px) / (768 - 320))) calc(10px + (15 - 10) * ((100vw - 320px) / (768 - 320))) 40px;
        }

        [dir="rtl"] & {
          padding: 15px 40px 15px 15px;

          @media (max-width: 600px) {
            padding: calc(10px + (15 - 10) * ((100vw - 320px) / (768 - 320))) 40px calc(10px + (15 - 10) * ((100vw - 320px) / (768 - 320))) calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320)));
          }
        }
      }

      &:focus {
        box-shadow: none;
        border-color: transparent;
      }

      &::placeholder {
        color: rgba(121, 125, 131, 1);
      }
    }

    .dollar-icon {
      position: absolute;
      top: 50%;
      left: 22px;
      transform: translate(-50%, -50%);
      --Iconsax-Color: rgba(var(--title-color), 1);
      --Iconsax-Size: 22px;

      [dir="rtl"] & {
        left: unset;
      }
    }

    .dropdown {
      .dropdown-toggle {
        display: flex;
        align-items: center;
        line-height: 1.5;
        color: rgba(var(--content-color), 1);
        background-color: rgba(var(--box-bg), 1);
        box-shadow: 3px 7px 20px 0px rgba(var(--title-color), 0.03);
        border-radius: 8px;
        gap: 6px;

        .dropdown-icon {
          --Iconsax-Color: rgba(var(--title-color), 1);
          --Iconsax-Size: 16px;
          height: 16px;
        }

        &::after {
          content: none;
        }

        &:first-child {
          &:active {
            border-color: transparent;
          }
        }

        &:focus {
          border-color: transparent;
        }

        .dropdown-icon {
          --Iconsax-Color: rgba(var(--content-color), 1);
          --Iconsax-Size: 16px;
        }
      }

      .dropdown-menu {
        &.show {
          min-width: 100%;
          margin-top: 5px !important;
          background-color: rgba(var(--box-bg), 1);
        }

        li {
          width: 100%;

          .dropdown-item {
            color: rgba(var(--content-color), 1);
            padding: 8px 12px;
            font-size: 16px;

            @media (max-width: 600px) {
              font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (600 - 320)));
            }

            &:active {
              background-color: rgba(var(--content-color), 0.05);
            }

            &:hover {
              background-color: transparent;
            }
          }
        }
      }
    }

    .form-select {
      &.language-select {
        color: rgba(var(--title-color), 1);
        background-color: rgba(var(--white), 1);
        border: none;
        height: 100%;

        &:focus {
          box-shadow: none;
        }
      }

      &.offer-select {
        height: 100%;
        padding: 15px;
        font-size: 16px;
        color: rgba(var(--title-color), 1);
        background-color: rgba(var(--white), 1);
        border: 1px solid rgba(var(--line-color), 1);

        @media (max-width: 600px) {
          padding: calc(12px + (15 - 12) * ((100vw - 320px) / (600 - 320)));
          font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (600 - 320)));
        }

        &:focus {
          box-shadow: none;
        }
      }
    }

    .form-check {
      margin-top: 8px;
      margin-bottom: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      float: unset;
      padding-left: 0;

      [dir="rtl"] & {
        padding-left: unset;
        padding-right: 0;
      }

      .form-check-label {
        color: rgba(var(--content-color), 1);
      }

      .form-check-input {
        width: 20px;
        height: 20px;
        margin-left: 0px;
        background-color: rgba(var(--box-bg), 1);
        border: 1px solid rgba(var(--content-color), 0.5) !important;
        border-radius: 4px;
        box-shadow: 0px 2px 15px 0px rgba(78, 160, 247, 0.08);
        transition: all 0.5s ease;

        [dir="rtl"] & {
          margin-left: unset;
          margin-right: 0;
        }

        &:focus {
          border-color: transparent;
          box-shadow: none;
        }

        &:checked {
          background-color: rgba(var(--title-color), 1);
          border-color: rgba(var(--content-color), 0.15);
          float: unset;
        }
      }
    }

    .upload-image {
      position: relative;
      width: 100%;
      height: 120px;
      background-color: rgba(var(--box-bg), 1);
      backdrop-filter: blur(2px);
      border-radius: 6px;
      color: rgba(var(--white), 1);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;

      .upload-file {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: rgba(var(--content-color), 1);
        opacity: 0;
        z-index: 1;
      }

      .upload-icon {
        font-size: 20px;
        color: rgba(var(--title-color), 1);
        position: absolute;
        --Iconsax-Color: rgba(var(--content-color), 1);
        --Iconsax-Size: 24px;
      }

      .profile-icon {
        position: absolute;
        width: 100px;
        color: rgba(var(--title-color), 1);
        filter: opacity(0.1);
      }

      &::after {
        content: "";
        position: relative;
        width: 100%;
        height: 100%;
        border: 1px dashed rgba(var(--content-color), 0.3);
        border-radius: 8px;
      }

      h6 {
        position: absolute;
        bottom: 30px;
        color: rgba(var(--content-color), 1);
      }

      &.profile-image {
        width: 100%;
        height: 300px;
      }
    }
  }

  .order-type {
    .form-check3 {
      position: relative;
      width: 100%;
      padding: 0;
      margin-bottom: 0;

      .form-check-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        float: unset;
        height: 100%;
        margin: 0;
        cursor: pointer;
        opacity: 0;

        [dir="rtl"] & {
          left: unset;
          right: 0;
        }

        &:checked {
          transition: all 0.25s ease-in-out;

          ~.form-check-label {
            font-weight: 600;
            border-color: rgba(var(--theme-color), 1) !important;
            background-color: rgba(var(--theme-color), 0.1) !important;
            transition: all 0.5s ease;

            .check-box {
              background-color: rgba(var(--theme-color), 1);
              transition: all 0.25s ease-in-out;
              border-color: transparent;

              &::after {
                content: "";
                position: absolute;
                top: 7px;
                left: 9px;
                border: 2px solid rgba(255, 255, 255, 1);
                transform: translate(-50%, -50%) rotate(45deg);
                width: 6px;
                height: 10px;
                border-top: unset;
                border-left: unset;
              }
            }
          }
        }
      }

      .form-check-label {
        width: 100%;
        padding: 10px 15px;
        margin: 0;
        font-weight: 400;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border: 1px solid rgba(var(--line-color), 1);
        border-radius: 6px;

        @media (max-width: 600px) {
          gap: calc(5px + (10 - 5) * ((100vw - 320px) / (600 - 320)));
        }

        .check-box {
          width: 20px;
          height: 20px;
          border: 1px solid rgba(var(--line-color), 1);
          border-radius: 100%;
          position: relative;
        }

        .name {
          font-weight: 400;
          font-size: 14px;
          white-space: nowrap;
          color: rgba(var(--title-color), 1);
        }
      }
    }
  }
}