/* Animation fixes for Baza Orders Landing */

/* 1. Fix language switcher animation */
.language-switcher {
  position: relative !important;
  overflow: hidden !important;
}

.lang-slider {
  position: absolute !important;
  left: 3px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 47px !important;
  height: 30px !important;
  background: var(--accent-blue) !important;
  border-radius: 20px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
  z-index: 1 !important;
}

.lang-slider.en {
  transform: translateY(-50%) translateX(47px) !important;
}

.lang-option {
  position: relative !important;
  z-index: 2 !important;
}

/* 2. Fix ALL hero cards to only have mouse-follow animation */
.cards-container .card {
  transition: transform 0.1s ease-out !important;
  transform-style: preserve-3d !important;
}

/* Remove ALL hover transforms from hero cards */
.card-left,
.card-right,
.card-center {
  transition: transform 0.1s ease-out !important;
}

.card-left:hover,
.card-right:hover,
.card-center:hover {
  transform: none !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3) !important;
}

/* 3. Ensure card-center is interactive */
.card-center.interactive-card {
  pointer-events: auto !important;
  transition: transform 0.1s ease-out !important;
  transform-style: preserve-3d !important;
}

/* 4. Fix pricing cards animation - ensure they work */
.pricing-container .pricing-card {
  transition: transform 0.1s ease-out !important;
  transform-style: preserve-3d !important;
  perspective: 1000px !important;
}

.pricing-container .pricing-card.interactive-card {
  transition: transform 0.1s ease-out !important;
  transform-style: preserve-3d !important;
}

/* Remove conflicting hover styles */
.pricing-container .pricing-card:hover {
  box-shadow: 0 16px 40px rgba(59, 130, 246, 0.6) !important;
  filter: brightness(1.1) !important;
}

/* 5. Fix input label animations */
.input-label {
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  transform: translateY(-50%) !important;
  font-size: 0.9rem !important;
  color: var(--text-gray) !important;
  font-weight: normal !important;
  pointer-events: none !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  padding: 0 5px !important;
  z-index: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(100% - 28px) !important;
}

input:focus + .input-label,
input:not(:placeholder-shown) + .input-label,
textarea:focus + .input-label,
textarea:not(:placeholder-shown) + .input-label {
  top: -8px !important;
  left: 12px !important;
  transform: translateY(0) !important;
  font-size: 0.75rem !important;
  color: var(--accent-blue) !important;
  background: var(--card-bg-solid) !important;
  padding: 0 4px !important;
  opacity: 1 !important;
}

/* Ensure inputs have transparent placeholder */
input::placeholder,
textarea::placeholder {
  color: transparent;
}

/* Override any card-hover interference */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card-hover:not(.interactive-card):not(.card-left):not(.card-right):not(.card-center):not(.pricing-card):hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 16px 40px rgba(59, 130, 246, 0.3) !important;
}

/* Fix mobile styles for input labels */
@media (max-width: 1366px) {
  .input-label {
    top: 50% !important;
    left: 10px !important;
    font-size: 0.8rem !important;
  }
  
  input:focus + .input-label,
  input:not(:placeholder-shown) + .input-label,
  textarea:focus + .input-label,
  textarea:not(:placeholder-shown) + .input-label {
    top: -8px !important;
    left: 10px !important;
    font-size: 0.75rem !important;
  }

  /* Mobile language switcher fix */
  .lang-slider {
    width: 47px !important;
  }
  
  .lang-slider.en {
    transform: translateY(-50%) translateX(47px) !important;
  }
  
  /* ПОЛНОЕ скрытие анимированных иконок на мобильных устройствах */
  .roadmap-animation-panel,
  .unified-icons-container {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Расширяем левый блок на всю ширину при скрытых иконках */
  .roadmap-content-wrapper {
    grid-template-columns: 1fr !important;
    max-width: 1200px !important;
  }
  
  .roadmap-text-panel {
    max-width: 100% !important;
    text-align: center !important;
  }
  
  .roadmap-main-title {
    text-align: center !important;
  }
  
  .roadmap-subtitle {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 2rem auto !important;
  }
}