/* Unit Converter Specific Styles */

/* Category Selection Buttons - Standard Button Style */
.category-btn {
    background-color: rgb(55 65 81); /* gray-700 - same as btn-secondary */
    border: none;
    color: rgb(255 255 255); /* white */
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    font-weight: 500;
}

.category-btn:hover {
    background-color: rgb(75 85 99); /* gray-600 - same as btn-secondary:hover */
    color: rgb(255 255 255); /* white */
    transform: translateY(-1px);
}

.category-btn.active {
    background-color: rgb(30 64 175); /* blue-800 - deep blue */
    color: rgb(255 255 255); /* white */
    box-shadow: 0 0 10px rgba(30, 64, 175, 0.3);
}

.category-btn.active:hover {
    background-color: rgb(23 37 84); /* blue-900 - deeper blue on hover */
    color: rgb(255 255 255); /* white */
}

.category-btn i {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.category-btn span {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.category-btn:focus {
    outline: 2px solid rgba(59, 130, 246, 0.5); /* blue-500 with opacity */
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .category-btn {
        padding: 1rem;
        min-height: 80px;
    }
    
    .category-btn i {
        font-size: 1.5rem;
    }
    
    .category-btn span {
        font-size: 0.875rem;
    }
}

/* Value Input with Slider */
.value-input-container {
    @apply relative;
}

#value-slider {
    -webkit-appearance: none;
    appearance: none;
    @apply h-2 bg-gray-700 rounded-lg cursor-pointer;
}

#value-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    @apply w-4 h-4 bg-purple-600 rounded-full cursor-pointer;
}

#value-slider::-moz-range-thumb {
    @apply w-4 h-4 bg-purple-600 rounded-full cursor-pointer border-0;
}

/* Popular Conversions Cards */
.popular-conversion-card {
    @apply bg-gray-800 hover:bg-gray-700 border border-gray-600 rounded-lg p-4 text-center transition-all duration-200 cursor-pointer;
}

.popular-conversion-card:hover {
    @apply transform scale-105 border-purple-500;
}

.popular-conversion-card .from-unit {
    @apply text-lg font-bold text-white mb-1;
}

.popular-conversion-card .to-unit {
    @apply text-sm text-gray-400;
}

.popular-conversion-card .arrow {
    @apply text-purple-400 mx-2;
}

/* Unit Dropdown Enhancements */
.unit-dropdown-container {
    @apply relative;
}

.unit-search-input {
    @apply w-full bg-gray-800 border border-gray-600 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500;
}

.unit-options {
    @apply absolute z-10 w-full bg-gray-800 border border-gray-600 rounded-lg mt-1 max-h-60 overflow-y-auto shadow-lg;
}

.unit-option {
    @apply px-4 py-3 cursor-pointer hover:bg-gray-700 flex items-center justify-between;
}

.unit-option.selected {
    @apply bg-purple-600 text-white;
}

.unit-option .unit-abbr {
    @apply font-bold text-white;
}

.unit-option .unit-name {
    @apply text-sm text-gray-400 ml-2;
}

/* Responsive Design */
@media (max-width: 640px) {
    .category-btn {
        @apply min-h-[70px] p-3;
    }
    
    .category-btn i {
        @apply text-lg;
    }
    
    .category-btn span {
        @apply text-xs;
    }
    
    #value-input {
        @apply pr-4;
    }
    
    #value-slider {
        display: none;
    }
}

/* Animation for category switching */
.category-content {
    @apply transition-all duration-300 ease-in-out;
}

.category-content.fade-out {
    @apply opacity-0 transform scale-95;
}

.category-content.fade-in {
    @apply opacity-100 transform scale-100;
}

/* Enhanced result display */
#conversion-result {
    @apply transition-all duration-300;
}

#conversion-result.updated {
    @apply transform scale-105;
    animation: pulse 0.5s ease-in-out;
}

#result-display.copied {
    @apply bg-green-800 border-green-600;
    animation: copy-feedback 2s ease-in-out;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes copy-feedback {
    0% { background-color: rgb(34 197 94 / 0.2); }
    20% { background-color: rgb(34 197 94 / 0.3); }
    40% { background-color: rgb(34 197 94 / 0.2); }
    100% { background-color: rgb(31 41 55); }
}

/* Toast notification positioning */
#success-toast {
    @apply transition-transform duration-300 ease-out;
}

#success-toast.show {
    @apply transform translate-x-0;
}

/* Loading overlay styles */
#loading-overlay {
    backdrop-filter: blur(4px);
}

/* Custom scrollbar for unit options */
.unit-options::-webkit-scrollbar {
    width: 6px;
}

.unit-options::-webkit-scrollbar-track {
    @apply bg-gray-700 rounded;
}

.unit-options::-webkit-scrollbar-thumb {
    @apply bg-purple-600 rounded;
}

.unit-options::-webkit-scrollbar-thumb:hover {
    @apply bg-purple-500;
}

/* Enhanced input styling */
#value-input::placeholder {
    color: #6b7280; /* gray-500 - lighter placeholder */
    opacity: 0.7;
}

#value-input:focus::placeholder {
    opacity: 0.5;
}