/* блок «что распознаётся в паспорте РФ?»

xs  < 576px — базовые стили
sm  ≥ 576px
md  ≥ 768px
lg  ≥ 992px
xl  ≥ 1200px
xxl ≥ 1400px
*/

.id-recognition-section {

  .id-recognition-black-circle {
    position: absolute;
    z-index: -1;
    background: #101a18;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 850px;
    height: 850px;
  }
}

.id-recognition-plate-container {
  position: relative;
  min-height: 100px;

  .id-recognition-plate-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    padding: 16px;
    font-size: 16px;
    border-radius: 12px;
    border: 1px solid #c9cfce;
    box-shadow: 4px 4px 0 #c9cfce;
    opacity: 0;
    transition: all 0.9s ease;
  }
  h3 {
    display: none;
  }

  .id-recognition-plate-content.active {
    opacity: 1;
  }
}

@keyframes in-animation {
  from {
    opacity: 0;
    transform: translateX(-1200px) translateY(1000px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes out-animation {
  from {
    opacity: 1;
    transform: translateX(0) translateY(0);  }
  to {
    opacity: 0;
    transform: translateX(-1200px) translateY(-1000px);
  }
}

@keyframes in-animation-circle {
  from {
    opacity: 0;
    transform: translateX(-1200px) translateY(1000px) scale(0.1);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
}

@keyframes out-animation-circle {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-1200px) translateY(-1000px) scale(0.1);
  }
}

.id-spread-content {
  min-height: 380px;

  .id-spread {
    width: 100%;
    position: absolute;
    opacity: 0;
    transition: all 1s ease;

    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 360px;
    }
  }
  .id-spread.in {
    opacity: 1;
  }
}

.passport-elements-select {
  appearance: none;
  margin-bottom: 24px;
  width: 100%;
  padding: 16px 12px;
  font-size: 16px;
  border-radius: 12px;
  outline: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 15'><path fill='%23136F68' d='M17.12 13.864c-.548.728-1.872.728-2.42 0L6.614 3.114C6.05 2.364 6.726 1.41 7.823 1.41h16.174c1.097 0 1.774.954 1.21 1.704l-8.088 10.75Z'/> <path fill='%2300B09A' d='M15.71 12.454c-.548.728-1.872.728-2.42 0L5.204 1.704C4.64.954 5.316 0 6.413 0h16.174c1.097 0 1.774.954 1.21 1.704l-8.088 10.75Z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 24px;
}


/* ========================================
   (≥ 576px)
   ======================================== */
@media only screen and (min-width: 576px) {

}

/* ========================================
   (≥ 768px)
   ======================================== */
@media only screen and (min-width: 768px) {
  .id-recognition-section {

    .id-recognition-black-circle {
      width: 1000px;
      height: 1000px;
    }
  }
  h2 {
    margin-bottom: 32px;
  }
}

/* ========================================
   (≥ 992px)
   ======================================== */
@media only screen and (min-width: 992px) {
  .id-recognition-section {

    .id-recognition-black-circle {
      position: absolute;
      z-index: -1;
      background: #101a18;
      border-radius: 50%;
      top: 50%;
      left: 10%;

      transform: translateX(-1200px) translateY(-50%) scale(0.1);
      opacity: 0;
      transition: opacity 0.9s ease, transform 0.9s ease;
    }
  }
  /* Анимация при фокусе на блоке */
  .id-recognition-section.animation-on {
    .id-recognition-black-circle.in {
      animation: in-animation-circle  0.9s forwards;
    }
    .id-recognition-black-circle.out {
      animation: out-animation-circle  0.9s forwards;
    }

    .id-recognition-black-circle {
      transform: translateX(-50%) translateY(-50%) scale(1);
      opacity: 1;
    }
  }

  .id-recognition-plate-container {
    min-height: 250px;
    margin-top: 0;

    .id-recognition-plate-content {
      width: 85%;
      height: 248px;
      padding: 16px 45px;
      font-size: 20px;
      right: 0;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transform: translateX(600px);

      h3 {
        font-size: 28px;
        display: inline;
      }
    }
    .id-recognition-plate-content.active {
      transform: translateX(0);
    }
  }

  .id-spread-content {
    min-height: 400px;

    .id-spread {
      width: 100%;

      img {
        width: 360px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .id-spread.out {
      animation: out-animation 0.9s forwards;
    }
    .id-spread.in {
      animation: in-animation 0.9s forwards;
    }
  }

  .id-recognition-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    gap: 12px;
    align-self: stretch;
    flex-wrap: wrap;
  }

  .id-recognition-button {
    border-radius: 16px;
    border: 1px solid #c9cfce;
    background: #fff;
    padding: 16px 20px;
    box-shadow: 4px 4px 0 0 #c9cfce;
    transition: all 100ms linear ;

    &:hover {
      border-radius: 16px;
      border: 1px solid #c9cfce;
      background: #fff;
      padding: 16px 20px;
      box-shadow: 2px 2px 0 0 #c9cfce;
      transform: translate(2px, 2px);
    }

    &:focus {
      padding: 16px 20px;
      background: #fff;
      border: 1.254px solid #c9cfce;
      box-shadow: 4px 4px 0 0 #c9cfce;
    }

    &:focus:hover {
      box-shadow: 2px 2px 0 0 #c9cfce;
      transform: translate(2px, 2px);
    }

    &:active, &.active {
      text-decoration: none;
      color: #fff;
      box-shadow: 0 0 0 #c9cfce !important;
      background: #00b09a;
      transform: translate(4px, 4px) !important;
      border: 1.254px solid #00b09a;
    }
  }
}

/* ========================================
   (≥ 1200px)
   ======================================== */
@media only screen and (min-width: 1200px) {
}

/* ========================================
   (≥ 1400px)
   ======================================== */
@media only screen and (min-width: 1400px) {
  .id-spread-content {
    .id-spread {
      img {
        width: 560px;
      }
    }
  }

}