/* Roadmap Responsive Grid System - Professional Grade */
/* Replaces absolute positioning with CSS Grid for better responsive behavior */

.unified-icons-container {
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 2rem;
  position: relative;
  width: 100%;
  height: auto; /* Changed from fixed height */
  max-width: 800px;
  min-height: auto; /* Changed from fixed min-height */
  overflow: visible;
  backdrop-filter: blur(10px);
  
  /* CSS Grid Container */
  display: grid;
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
  
  /* Desktop: 6 columns grid */
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(80px, auto);
}

/* Individual icon positioning using grid-area */
.icon-card {
  /* Remove absolute positioning */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  
  /* Grid item properties */
  width: 70px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  
  background: transparent;
  border: 1px solid rgba(200, 200, 200, 0.2);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0.6;
  transform-origin: center center;
  z-index: 10;
}

/* Grid positioning for each icon - Desktop Layout (6 columns) */
/* Row 1, Column 3 - Регистрация */
#icon-1-3 { grid-area: 1 / 3 / 2 / 4; }

/* Row 2 - Верификация, Профиль, Настройки */
#icon-2-1 { grid-area: 2 / 1 / 3 / 2; } /* Верификация */
#icon-2-4 { grid-area: 2 / 4 / 3 / 5; } /* Профиль */
#icon-2-5 { grid-area: 2 / 5 / 3 / 6; } /* Настройки */

/* Row 3 - База данных, Интеграции, API, Webhooks, Дашборд */
#icon-3-1 { grid-area: 3 / 1 / 4 / 2; } /* База данных */
.icon-card:nth-of-type(6) { grid-area: 3 / 2 / 4 / 3; } /* Интеграции */
#icon-3-3 { grid-area: 3 / 3 / 4 / 4; } /* API */
.icon-card:nth-of-type(8) { grid-area: 3 / 4 / 4 / 5; } /* Webhooks */
#icon-3-6 { grid-area: 3 / 6 / 4 / 7; } /* Дашборд */

/* Row 4 - Заказы, Платежи */
#icon-4-1 { grid-area: 4 / 1 / 5 / 2; } /* Заказы */
#icon-4-4 { grid-area: 4 / 4 / 5 / 5; } /* Платежи */

/* Row 5 - Аналитика, Уведомления, Отчеты */
#icon-5-3 { grid-area: 5 / 3 / 6 / 4; } /* Аналитика */
.icon-card:nth-of-type(14) { grid-area: 5 / 4 / 6 / 5; } /* Уведомления */
#icon-5-5 { grid-area: 5 / 5 / 6 / 6; } /* Отчеты */

/* Row 6 - Автоматизация, ML, Оптимизация */
.icon-card:nth-of-type(16) { grid-area: 6 / 2 / 7 / 3; } /* Автоматизация */
.icon-card:nth-of-type(17) { grid-area: 6 / 5 / 7 / 6; } /* ML */
.icon-card:nth-of-type(18) { grid-area: 6 / 6 / 7 / 7; } /* Оптимизация */

/* Tablet Layout (1367px - 1024px) - 4 columns */
@media (max-width: 1366px) and (min-width: 1025px) {
  .unified-icons-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 600px;
  }
  
  /* Repositioning for 4-column grid */
  #icon-1-3 { grid-area: 1 / 2 / 2 / 3; }
  
  #icon-2-1 { grid-area: 2 / 1 / 3 / 2; }
  #icon-2-4 { grid-area: 2 / 3 / 3 / 4; }
  #icon-2-5 { grid-area: 2 / 4 / 3 / 5; }
  
  #icon-3-1 { grid-area: 3 / 1 / 4 / 2; }
  .icon-card:nth-of-type(6) { grid-area: 3 / 2 / 4 / 3; }
  #icon-3-3 { grid-area: 3 / 3 / 4 / 4; }
  .icon-card:nth-of-type(8) { grid-area: 3 / 4 / 4 / 5; }
  #icon-3-6 { grid-area: 4 / 2 / 5 / 3; }
  
  #icon-4-1 { grid-area: 5 / 1 / 6 / 2; }
  #icon-4-4 { grid-area: 5 / 4 / 6 / 5; }
  
  #icon-5-3 { grid-area: 6 / 2 / 7 / 3; }
  .icon-card:nth-of-type(14) { grid-area: 6 / 3 / 7 / 4; }
  #icon-5-5 { grid-area: 6 / 4 / 7 / 5; }
  
  .icon-card:nth-of-type(16) { grid-area: 7 / 1 / 8 / 2; }
  .icon-card:nth-of-type(17) { grid-area: 7 / 3 / 8 / 4; }
  .icon-card:nth-of-type(18) { grid-area: 7 / 4 / 8 / 5; }
}

/* Tablet Portrait (1024px - 768px) - 3 columns */
@media (max-width: 1024px) and (min-width: 769px) {
  .unified-icons-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 450px;
  }
  
  .icon-card {
    width: 60px;
    height: 60px;
  }
  
  /* Repositioning for 3-column grid */
  #icon-1-3 { grid-area: 1 / 2 / 2 / 3; }
  
  #icon-2-1 { grid-area: 2 / 1 / 3 / 2; }
  #icon-2-4 { grid-area: 2 / 2 / 3 / 3; }
  #icon-2-5 { grid-area: 2 / 3 / 3 / 4; }
  
  #icon-3-1 { grid-area: 3 / 1 / 4 / 2; }
  .icon-card:nth-of-type(6) { grid-area: 3 / 2 / 4 / 3; }
  #icon-3-3 { grid-area: 3 / 3 / 4 / 4; }
  .icon-card:nth-of-type(8) { grid-area: 4 / 1 / 5 / 2; }
  #icon-3-6 { grid-area: 4 / 3 / 5 / 4; }
  
  #icon-4-1 { grid-area: 5 / 1 / 6 / 2; }
  #icon-4-4 { grid-area: 5 / 3 / 6 / 4; }
  
  #icon-5-3 { grid-area: 6 / 2 / 7 / 3; }
  .icon-card:nth-of-type(14) { grid-area: 6 / 3 / 7 / 4; }
  #icon-5-5 { grid-area: 7 / 1 / 8 / 2; }
  
  .icon-card:nth-of-type(16) { grid-area: 7 / 2 / 8 / 3; }
  .icon-card:nth-of-type(17) { grid-area: 7 / 3 / 8 / 4; }
  .icon-card:nth-of-type(18) { grid-area: 8 / 2 / 9 / 3; }
}

/* Mobile (768px and below) - 2 columns */
@media (max-width: 768px) {
  .unified-icons-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    max-width: 300px;
    padding: 1rem;
  }
  
  .icon-card {
    width: 50px;
    height: 50px;
  }
  
  .icon-card i {
    font-size: 1.5rem;
  }
  
  .icon-card span {
    font-size: 0.4rem;
    max-width: 48px;
  }
  
  /* Repositioning for 2-column grid - more vertical */
  #icon-1-3 { grid-area: 1 / 1 / 2 / 2; }
  
  #icon-2-1 { grid-area: 2 / 1 / 3 / 2; }
  #icon-2-4 { grid-area: 2 / 2 / 3 / 3; }
  #icon-2-5 { grid-area: 3 / 1 / 4 / 2; }
  
  #icon-3-1 { grid-area: 3 / 2 / 4 / 3; }
  .icon-card:nth-of-type(6) { grid-area: 4 / 1 / 5 / 2; }
  #icon-3-3 { grid-area: 4 / 2 / 5 / 3; }
  .icon-card:nth-of-type(8) { grid-area: 5 / 1 / 6 / 2; }
  #icon-3-6 { grid-area: 5 / 2 / 6 / 3; }
  
  #icon-4-1 { grid-area: 6 / 1 / 7 / 2; }
  #icon-4-4 { grid-area: 6 / 2 / 7 / 3; }
  
  #icon-5-3 { grid-area: 7 / 1 / 8 / 2; }
  .icon-card:nth-of-type(14) { grid-area: 7 / 2 / 8 / 3; }
  #icon-5-5 { grid-area: 8 / 1 / 9 / 2; }
  
  .icon-card:nth-of-type(16) { grid-area: 8 / 2 / 9 / 3; }
  .icon-card:nth-of-type(17) { grid-area: 9 / 1 / 10 / 2; }
  .icon-card:nth-of-type(18) { grid-area: 9 / 2 / 10 / 3; }
}

/* Responsive roadmap layout adjustments */
@media (max-width: 1366px) {
  .roadmap-content-wrapper {
    grid-template-columns: 0.8fr 1.2fr !important; /* Still show icons, but adjust proportions */
    gap: 1.5rem;
  }
  
  .roadmap-animation-panel {
    display: flex !important; /* Override the hiding */
    height: auto !important;
  }
}

@media (max-width: 1024px) {
  .roadmap-content-wrapper {
    grid-template-columns: 1fr !important; /* Stack vertically */
  }
  
  .roadmap-text-panel {
    max-width: 100% !important;
    text-align: center !important;
    margin-bottom: 2rem;
  }
  
  .roadmap-animation-panel {
    order: 2; /* Place icons below text */
  }
}

/* Icon hover and interaction states remain the same */
.icon-card:hover {
  opacity: 1 !important;
  transform: scale(1.2) !important;
  transform-origin: center center !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
  gap: 0 !important;
  padding: 0 !important;
  /* Добавляем более медленный transition как у активной анимации */
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.icon-card i {
  font-size: 2rem;
  color: var(--text-gray);
  transition: all 0.3s ease;
}

.icon-card:hover i {
  color: var(--accent-blue) !important;
  transform: scale(0.75) !important;
  transition: all 0.3s ease !important;
}

.icon-card span {
  font-size: 0.5rem;
  color: var(--text-gray);
  text-align: center;
  line-height: 1;
  font-weight: 500;
  transition: all 0.3s ease;
  opacity: 0;
  position: static;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.icon-card:hover span {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Connection animation compatibility */
.icon-card.connection-active {
  opacity: 1 !important;
  transform: scale(1.2) !important;
  transform-origin: center center !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  gap: 0 !important;
  padding: 0 !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.icon-card.connection-active i {
  color: var(--accent-blue) !important;
  transform: scale(0.75) !important;
  transition: all 0.3s ease !important;
}

.icon-card.connection-active span {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Icon appear animation */
.icon-card {
  opacity: 0;
  animation: iconAppear 0.6s ease-out forwards;
}

@keyframes iconAppear {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  to {
    opacity: 1; /* Увеличена базовая opacity для лучшей видимости */
    transform: translateY(0) scale(1);
  }
}

/* Connection lines container for grid layout */
.connection-lines-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
  grid-column: 1 / -1; /* Span across all columns */
  grid-row: 1 / -1; /* Span across all rows */
  overflow: visible;
}

/* Ensure SVG inside container is visible */
.connection-lines-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 20;
}

/* Stage group animations with staggered delays */
.stage-group:nth-child(1) .icon-card {
  animation-delay: 0.2s;
}

.stage-group:nth-child(2) .icon-card {
  animation-delay: 0.4s;
}

.stage-group:nth-child(3) .icon-card {
  animation-delay: 0.6s;
}

.stage-group:nth-child(4) .icon-card {
  animation-delay: 0.8s;
}