@use "sass:math";

@import "@/styles/mixins.scss";
@import "@/styles/variables.scss";

.contact_form {
  &_widget {
    @include on-mobile() {
      display: none;
    }
    position: absolute;
    top: -2rem;
    right: 0;
    z-index: 1;
  }
  &_body {
    position: relative;
    z-index: 2;
    & > h5 {
      margin: 1rem 0;
    }
  }
}

.first_row {
  $size-split: 1rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap-reverse;
  padding: 4rem 0;
  @include on-desktop() {
    &_start, &_end {
      width: calc(50% - #{$size-split});
    }
    &_start {
      padding: 2rem;
      background-color: #FFF;
      @include box-shadow();
      @include border-radius();
    }
    &_end {
      padding: 2rem;
      background-color: #202765;
      @include box-shadow();
      @include border-radius();
      h1, h5, label {
        color: #FFF;
        &:hover {
          color: #FFF;
        }
      }
      :global(.privacy-policy-link) {
        color: #FFF;
        text-decoration: underline;
      }
      button[disabled] {
        color: rgba(#FFF, .5) !important;
        background-color: #485fc7 !important;
      }
    }
  }
  @include on-mobile() {
    &_start, &_end {
      width: 100%;
    }
    &_start {
      margin-top: 4rem;
    }
  }
}



.download {
  $count: 4;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0;

  a {
    &:hover {
      color: #fff;
    }
  }

  &_title {
    margin-bottom: 3rem;
    text-align: center;
  }

  &_list {
    display: flex;
    justify-content: space-around;
    width: 100%;
    @include on-desktop {
      flex-direction: row;
    }
    @include on-mobile {
      flex-direction: column;
    }
    &_item {
      display: block;
      height: 180px;
      @include on-desktop {
        width: calc(100% / #{$count} - 1rem * (#{$count} - 1));
      }
      @include on-mobile {
        width: 100%;
        &:not(:last-child) {
          margin-bottom: 2rem;
        }
      }
    }
  }
}

.header_phone {
  @include flex(space-between, center);
  cursor: pointer;
  &:hover {
    color: rgba($white, 0.6);
  }

  &_icon {
    cursor: pointer;
    color: $white;
    font-size: $font-h3;
  }

  &_label {
    margin-left: 0.5rem;
  }
}

.contact_float {
  $size-padding: 12px;
  $width: 42px + 2 * $size-padding;
  position: fixed;
  top: 50%;
  right: 16px;
  width: $width;
  padding: $size-padding;
  @include on-mobile() {
    width: math.div($width, 2);
    padding: math.div($size-padding, 2);
  }
  background-color: $white;
  border: 1px solid $lineColor;
  border-radius: 42px;
  z-index: 999;
  &_icon {
    $size: 42px;
    width: $size;
    height: $size;
    @include on-mobile() {
      width: math.div($size, 2);
      height: math.div($size, 2);
    }
    cursor: pointer;
  }
  &_split {
    margin: 8px 4px;
    height: 1px;
    background-color: $lineColor;
  }
}

.contact_modal {
  $width: 600px;
  $height: 300px;
  @include box-shadow(0, 0, 8px, 0, rgb(0 0 0 / 25%));
  @include border-radius(12px);
  position: fixed;
  //top: calc(50% - #{$width} / 2);
  //left: calc(50% - #{$height} / 2);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
  width: $width;
  height: $height;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: $white;
  background: #202765 url("https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/contact_floating_modal_background_83a900dbee.svg");

  a:hover {
    color: $white;
    text-decoration: underline;
  }

  &_title {
    @include h4();
    margin-bottom: 1.5rem;
  }
  &_phone {
    @include h0();
    $size-padding: 2rem;
    padding-bottom: $size-padding;
    margin-bottom: $size-padding;
    border-bottom: 1px solid $lineColor;
  }
  &_actions {
    display: flex;
    a {
      margin: 0 1rem;
    }
  }
}