/* Modul-specifické styly s použitím ID modulu */
[data-vb-color-gradient] .gradient-card [title], 
[data-vb-color-gradient] .gradient-card [data-toggle="tooltip"] {
  position: relative;
}

[data-vb-color-gradient] .gradient-card [title]:before, 
[data-vb-color-gradient] .gradient-card [title]:after,
[data-vb-color-gradient] .gradient-card [data-toggle="tooltip"]:before,
[data-vb-color-gradient] .gradient-card [data-toggle="tooltip"]:after,
[data-vb-color-gradient] .gradient-card .tooltip {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Explicitní zaměření zón pro hover */
[data-vb-color-gradient] .gradient-clickable-area:hover .copy-icon {
  opacity: 1 !important;
}

/* Speciální nastavení pro střední ikonu */
[data-vb-color-gradient] .middle-side:hover ~ div .middle-icon {
  opacity: 1 !important;
} 

/* Při opuštění a hidden stavu - skrýt ikony úplně */
[data-vb-color-gradient] .copy-icon.hidden,
[data-vb-color-gradient] .copy-icon.hiding {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
}

/* Speciální pravidlo pro karty, které jsou opouštěny */
[data-vb-color-gradient] .gradient-card.leaving .copy-icon {
  transition: none !important;
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Zakrytí ikony copy při leaving stavu */
[data-vb-color-gradient] .gradient-card.leaving .left-icon svg,
[data-vb-color-gradient] .gradient-card.leaving .middle-icon svg,
[data-vb-color-gradient] .gradient-card.leaving .right-icon svg {
  display: none !important;
}

/* Nastavení velikosti a umístění ikon */
[data-vb-color-gradient] .copy-icon svg {
  width: 16px;
  height: 16px;
}

[data-vb-color-gradient] .copy-icon.animate svg {
  width: 18px;
  height: 18px;
}

@keyframes iconBounce {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

[data-vb-color-gradient] .copy-icon.animate {
  opacity: 1 !important;
  animation: iconBounce 0.25s ease;
}

[data-vb-color-gradient] .copy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

[data-vb-color-gradient] .left-icon {
  margin-left: 6px;
  color: <?= $firstTextColor ?>;
  fill: <?= $firstTextColor ?>;
}

[data-vb-color-gradient] .middle-icon {
  color: <?= $secondTextColor ?>;
  fill: <?= $secondTextColor ?>;
  z-index: 4;
  left: -24px !important; /* Upravte tuto hodnotu */
  top: 2px !important; /* Upravte tuto hodnotu pro vertikální posun */
}

[data-vb-color-gradient] .right-icon {
  margin-right: 6px;
  color: <?= $hasThirdColor ? $thirdTextColor : $secondTextColor ?>;
  fill: <?= $hasThirdColor ? $thirdTextColor : $secondTextColor ?>;
}

/* Responsivní styly pro mobilní zařízení */
@media (max-width: 768px) {
  [data-vb-color-gradient] .gradient-card p.text-small {
    font-size: 0.75rem !important;
  }
  
  [data-vb-color-gradient] .gradient-card strong.gradient-color-value {
    font-size: 0.7rem !important;
  }
  
  [data-vb-color-gradient] .copy-icon svg {
    width: 12px;
    height: 12px;
  }
  
  [data-vb-color-gradient] .copy-icon.animate svg {
    width: 14px;
    height: 14px;
  }
  
  /* Upravená stylizace pro prostřední kontejner na mobilech */
  [data-vb-color-gradient] .middle-container {
    display: inline-flex !important;
    position: relative !important;
    flex-direction: row !important;
  }
  
  /* Upravená pozice prostřední ikony na mobilech */
  [data-vb-color-gradient] .middle-icon {
    position: absolute !important;
    left: -23px !important;
    top: -1px !important;
    margin-right: 0 !important;
  }
  
  /* Menší padding pro mobilní zobrazení */
  [data-vb-color-gradient] .gradient-card [style*="padding: 18px"] {
    padding: 12px !important;
  }
}