.trade-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: 20;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transform: translateY(-20px); /* Move markers above candles */
}

.trade-marker[title*="Kupno"], 
.trade-marker[title*="Buy"] {
    background-color: #10b981; /* Green for buy */
    width: 20px;
    height: 20px;
}

.trade-marker[title*="Sprzedaż"], 
.trade-marker[title*="Sell"] {
    background-color: #ef4444; /* Red for sell */
    width: 20px;
    height: 20px;
}

.trade-marker[title*="Zamknięcie"], 
.trade-marker[title*="Close"] {
    background-color: #000000; /* Black for close */
    width: 20px;
    height: 20px;
}

/* Add pulsating effect to markers */
@keyframes pulse {
    0% {
        transform: translateY(-20px) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-20px) scale(1);
        opacity: 1;
    }
}

.trade-marker {
    animation: pulse 2s infinite;
}

/* Different animation delay for different marker types */
.trade-marker[title*="Kupno"], 
.trade-marker[title*="Buy"] {
    animation-delay: 0s;
}

.trade-marker[title*="Sprzedaż"], 
.trade-marker[title*="Sell"] {
    animation-delay: 0.5s;
}

.trade-marker[title*="Zamknięcie"], 
.trade-marker[title*="Close"] {
    animation-delay: 1s;
}

/* Add border to make markers more visible */
.trade-marker[title*="Kupno"], 
.trade-marker[title*="Buy"] {
    border: 2px solid white;
}

.trade-marker[title*="Sprzedaż"], 
.trade-marker[title*="Sell"] {
    border: 2px solid white;
}

.trade-marker[title*="Zamknięcie"], 
.trade-marker[title*="Close"] {
    border: 2px solid white;
}