.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: #f3f4f6;
    color: black;
}

.dark .custom-select-option:hover {
    background-color: #2a2a2a;
    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: #e5e7eb !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  height: 3px !important;
  border-radius: 0px !important;
}

.dark .noUi-target {
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
}

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

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

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

.dark .noUi-horizontal .noUi-handle {
  border: 2px solid #FCFDFF !important;
  background: #1a1a1a !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: #ffffff !important;
  border: 1px solid #d1d5db;
  top: -4px;
}

.dark .noUi-marker-horizontal.noUi-marker-large {
  background-color: #1a1a1a !important;
  border: 1px solid #404040;
}

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

.dark .noUi-pips {
  color: #d1d5db;
}

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

.dark .noUi-value {
  color: #d1d5db;
}

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

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

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

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

.dark .noUi-marker {
  background: #404040 !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);
}