/* 
   Custom styles for description toggle buttons 
   Multiple red color options - pick your favorite!
*/

/* Option 1: Bright Red (current) */
.btn.btn-link.p-0.description-toggle-btn {
    color: #e74c3c !important;  /* Bright red */
}

/* Option 2: Bootstrap Danger Red */
/* 
.btn.btn-link.p-0.description-toggle-btn {
    color: #dc3545 !important;  
}
*/

/* Option 3: Pure Red */
/* 
.btn.btn-link.p-0.description-toggle-btn {
    color: #ff0000 !important;  
}
*/

/* Option 4: Dark Red */
/* 
.btn.btn-link.p-0.description-toggle-btn {
    color: #c0392b !important;  
}
*/

/* Hover effects */
.btn.btn-link.p-0.description-toggle-btn:hover {
    color: #c0392b !important;  /* Darker red on hover */
    text-decoration: underline !important;
    transform: translateY(-1px);  /* Subtle lift effect */
}

.btn.btn-link.p-0.description-toggle-btn:active {
    color: #a93226 !important;  /* Even darker red when clicked */
    transform: translateY(0);    /* Reset lift on click */
}

/* Description toggle animation */
.description-toggle-animation {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icon animations for better UX */
.description-toggle-btn .fas.fa-chevron-down, 
.description-toggle-btn .fas.fa-chevron-up {
    transition: transform 0.2s ease;
}

.description-toggle-btn:hover .fas.fa-chevron-down {
    transform: translateY(2px);
}

.description-toggle-btn:hover .fas.fa-chevron-up {
    transform: translateY(-2px);
}

/* Focus states for accessibility */
.description-toggle-btn:focus {
    outline: 2px solid #e74c3c;
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .description-toggle-btn {
        font-size: 13px !important;
        padding: 2px 4px !important;
    }
}