.button-draggable {
    display: none;
}

/* Custom Select Styles */
.custom-select-container {
    position: relative;
    user-select: none;
}

.custom-select-trigger {
    position: relative;
    cursor: pointer;
    outline: none;
}

.custom-select-trigger:focus {
    border-color: #facc15;
    box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.2);
}

.custom-select-dropdown {
    transform: translateY(-5px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-select-dropdown:not(.opacity-0) {
    transform: translateY(0);
}

.custom-select-option {
    position: relative;
    transition: all 0.15s ease;
}

.custom-select-option:hover {
    background-color: #232323;
    color: white;
}

/* Animation for dropdown arrow */
.custom-select-trigger svg {
    transition: transform 0.2s ease;
}

/* Focus ring for better accessibility */
.custom-select-trigger:focus-visible {
    outline: 2px solid #facc15;
    outline-offset: 2px;
}

/* noUiSlider стили */
.noUi-target {
    background: #232323 !important;
    border: 1px solid #232323 !important;
    box-shadow: none !important;
    height: 3px !important;
    border-radius: 0px !important;
}

.noUi-connects {
    border-radius: 4px;
}

.noUi-connect {
    background: #facc15 !important;
    transition: background 0.2s ease;

}


.noUi-horizontal .noUi-handle {
    border: 2px solid #FCFDFF !important;
    width: .75rem !important;
    height: .75rem !important;
    top: -5px !important;
    right: -10px !important;
    border-radius: 0% !important;
    background: #0f0f0f !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.noUi-horizontal .noUi-handle:before,
.noUi-horizontal .noUi-handle:after {
    display: none !important;
}

.noUi-pips-horizontal {
    padding: 0 !important;
    height: 20px !important;
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 8px !important;
    width: 8px !important;
    background-color: #0f0f0f !important;
    border: 1px solid #3c3d3d;
    top: -4px;
}

.noUi-pips {
    color: #EBECF5;
    font-size: 10px;
}

.noUi-value {
    color: #EBECF5;
    font-size: 10px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.noUi-value:hover {
    color: #facc15;
}

.noUi-marker.active {
    background: #facc15 !important;
}

.sell-mode .noUi-marker.active {
    background: #ef4444 !important;
}

/* Улучшенные стили для маркеров */
.noUi-marker {
    background: #3c3d3d !important;
    border-radius: 0px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.noUi-marker:hover {
    background: #facc15 !important;
    border-color: #facc15 !important;
}

.noUi-marker.active {
    background: #facc15 !important;
    border-color: #facc15 !important;
}

.sell-mode .noUi-marker.active {
    background: #ef4444 !important;
}

.sell-mode .noUi-marker:hover {
    background: #ef4444 !important;
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 6px;
    width: 6px;
}

.noUi-marker-horizontal.noUi-marker-normal {
    height: 4px;
    width: 4px;
}

.noUi-marker-horizontal.noUi-marker-small {
    height: 2px;
    width: 2px;
}

/* Trading Form specific styles */
.trading-form-container {
    transition: all 0.2s ease;
}

.trading-form-container input:focus {
    border-color: #facc15;
    box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.2);
}

.trading-form-container button {
    transition: all 0.2s ease;
}

.trading-form-container button:hover {
    transform: translateY(-1px);
}

/* Buy/Sell tab transitions */
#buy-tab,
#sell-tab {
    transition: all 0.2s ease;
}

#buy-tab:hover,
#sell-tab:hover {
    transform: translateY(-1px);
}

/* Order type tab transitions */
#limit-tab,
#market-tab {
    transition: all 0.2s ease;
}

#limit-tab:hover,
#market-tab:hover {
    color: #facc15;
}

/* Action button hover effects */
#action-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(4, 185, 125, 0.3);
}

#action-button.bg-[#F13C54]:hover {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}