/* [project]/app/style/first-page.css [app-client] (css) */
.langSwichers {
  text-align: center;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  position: absolute;
}

.langSwichers:before {
  content: "";
  z-index: -1;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%) 0 0 / 400% 400%;
  animation: 15s infinite gradientShift;
  position: fixed;
  inset: 0;
}

@keyframes gradientShift {
  0% {
    background-position: 0%;
  }

  50% {
    background-position: 100%;
  }

  100% {
    background-position: 0%;
  }
}

.card {
  -webkit-backdrop-filter: blur(20px);
  background: #0f172ab3;
  border: 1px solid #ffffff1a;
  border-radius: 20px;
  min-width: 320px;
  max-width: 420px;
  padding: 32px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 8px 32px #0006;
}

.card:hover {
  background: #0f172acc;
  border-color: #ffffff26;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px #00000080;
}

.card.language-card {
  min-width: 500px;
  max-width: 600px;
}

.card-title {
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 10px #0003;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}

.swicherInput {
  -webkit-backdrop-filter: blur(10px);
  color: #e2e8f0;
  cursor: pointer;
  appearance: none;
  background: #1e293b99 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e2e8f0' d='M6 9L1 4h10z'/%3E%3C/svg%3E") right 12px center no-repeat;
  border: 2px solid #94a3b84d;
  border-radius: 12px;
  outline: none;
  min-width: 180px;
  padding: 14px 40px 14px 18px;
  font-size: 16px;
  font-weight: 500;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 4px 15px #0000004d;
}

.swicherInput option {
  color: #e2e8f0;
  background-color: #1e293b;
  padding: 10px;
}

.textInput {
  -webkit-backdrop-filter: blur(10px);
  color: #e2e8f0;
  box-sizing: border-box;
  background: #1e293b99;
  border: 2px solid #94a3b84d;
  border-radius: 12px;
  outline: none;
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 500;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 4px 15px #0000004d;
}

.textInput::placeholder {
  color: #94a3b8b3;
}

.textInput:hover {
  background: #1e293bb3;
  border-color: #94a3b880;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #0006;
}

.textInput:focus {
  background: #1e293bcc;
  border-color: #94a3b8cc;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px #94a3b833, 0 8px 25px #0006;
}

.textInput.error {
  animation: .5s cubic-bezier(.36, .07, .19, .97) both shake;
  background: #ef44441a !important;
  border-color: #ef4444cc !important;
  box-shadow: 0 0 0 4px #ef444433, 0 8px 25px #ef44444d !important;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}

.input-wrapper {
  flex-direction: column;
  width: 100%;
  display: flex;
  position: relative;
}

.select-wrapper {
  width: auto;
  display: inline-block;
  position: relative;
}

.swicherInput:hover {
  background: #1e293bb3;
  border-color: #94a3b880;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #0006;
}

.swicherInput:focus {
  background: #1e293bcc;
  border-color: #94a3b8cc;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px #94a3b833, 0 8px 25px #0006;
}

.swicherInput.error {
  animation: .5s cubic-bezier(.36, .07, .19, .97) both shake;
  background: #ef44441a !important;
  border-color: #ef4444cc !important;
  box-shadow: 0 0 0 4px #ef444433, 0 8px 25px #ef44444d !important;
}

.error-icon {
  color: #ef4444;
  pointer-events: none;
  z-index: 100;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #ef444433;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 20px;
  animation: 1s ease-in-out infinite pulse;
  display: flex;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.select-wrapper .error-icon {
  right: 42px;
}

.phone-counter {
  color: #94a3b8cc;
  pointer-events: none;
  z-index: 5;
  background: #1e293be6;
  border: 1px solid #94a3b833;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: translateY(-50%)scale(1);
  }

  50% {
    opacity: .7;
    transform: translateY(-50%)scale(1.1);
  }
}

.arrow {
  -webkit-backdrop-filter: blur(10px);
  color: #e2e8f0;
  cursor: pointer;
  background: #1e293b99;
  border: 2px solid #94a3b84d;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  box-shadow: 0 4px 15px #0000004d;
}

.arrow:hover {
  background: #1e293bcc;
  border-color: #94a3b880;
  transform: scale(1.15)rotate(180deg);
  box-shadow: 0 8px 25px #00000080;
}

.arrow:active {
  transform: scale(1.05)rotate(180deg);
}

.arrow svg {
  width: 20px;
  height: 20px;
}

.nextButtonDiv {
  z-index: 10;
  position: fixed;
  bottom: 30px;
  right: 30px;
}

.nextButton {
  -webkit-backdrop-filter: blur(20px);
  color: #e2e8f0;
  cursor: pointer;
  text-shadow: 0 2px 10px #0000004d;
  background: #1e293bb3;
  border: 2px solid #94a3b866;
  border-radius: 25px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 4px 15px #0006;
}

.nextButton:hover {
  background: #1e293bd9;
  border-color: #94a3b899;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px #00000080;
}

.nextButton:active {
  transform: translateY(0);
}

.error-message {
  -webkit-backdrop-filter: blur(20px);
  background: #ef444433;
  border: 2px solid #ef444480;
  border-radius: 16px;
  padding: 16px 24px;
  animation: .4s cubic-bezier(.68, -.55, .265, 1.55) slideDown;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px #ef44444d;
}

.error-message:before {
  content: "";
  background: linear-gradient(90deg, #ef4444, #f87171, #ef4444) 0 0 / 200% 100%;
  height: 3px;
  animation: 2s linear infinite shimmer;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px)scale(.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.error-content {
  color: #fecaca;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
}

.error-icon-large {
  filter: drop-shadow(0 0 8px #ef4444cc);
  font-size: 24px;
  animation: 1s ease-in-out infinite bounce;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

/*# sourceMappingURL=app_style_first-page_94ec0b42.css.map*/