/* Button States CSS - Disabled/Inactive Button Styles */

/* Contact Button Disabled States */
.contact-btn--disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.7) !important;
}

.contact-btn--phone.contact-btn--disabled {
    background: #e5e7eb !important;
    border-color: #e5e7eb !important;
}

.contact-btn--phone.contact-btn--disabled .material-icons {
    color: #9ca3af !important;
}

.contact-btn--message.contact-btn--disabled {
    background: #e5e7eb !important;
    border-color: #e5e7eb !important;
}

.contact-btn--message.contact-btn--disabled .material-icons {
    color: #9ca3af !important;
}

.contact-btn--edit.contact-btn--disabled {
    background: #e5e7eb !important;
    border-color: #e5e7eb !important;
}

.contact-btn--edit.contact-btn--disabled .material-icons {
    color: #9ca3af !important;
}

.contact-btn--favorite.contact-btn--disabled {
    background: #e5e7eb !important;
    border-color: #e5e7eb !important;
}

.contact-btn--favorite.contact-btn--disabled .material-icons {
    color: #9ca3af !important;
}

.contact-btn--blog.contact-btn--disabled {
    background: #e5e7eb !important;
    border-color: #e5e7eb !important;
}

.contact-btn--blog.contact-btn--disabled .material-icons {
    color: #9ca3af !important;
}

/* Material 3 Design System for Mobile */
@media (max-width: 768px) {
    .contact-btn--disabled {
        /* Material 3 disabled state */
        opacity: 0.38 !important;
        background: var(--m3-surface-variant, #e7e0ec) !important;
        color: var(--m3-on-surface, #1d1b20) !important;
    }
    
    .contact-btn--disabled .material-icons {
        color: var(--m3-on-surface-variant, #49454f) !important;
    }
    
    /* Material 3 Surface tones for disabled states */
    .contact-btn--phone.contact-btn--disabled {
        background: var(--m3-surface-disabled, #e7e0ec) !important;
    }
    
    .contact-btn--message.contact-btn--disabled {
        background: var(--m3-surface-disabled, #e7e0ec) !important;
    }
    
    .contact-btn--favorite.contact-btn--disabled {
        background: var(--m3-surface-disabled, #e7e0ec) !important;
    }
    
    .contact-btn--edit.contact-btn--disabled {
        background: var(--m3-surface-disabled, #e7e0ec) !important;
    }
    
    .contact-btn--blog.contact-btn--disabled {
        background: var(--m3-surface-disabled, #e7e0ec) !important;
    }
}

/* Hover effects disabled for disabled buttons */
.contact-btn--disabled:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Tooltip system for disabled buttons */
.contact-btn--disabled {
    position: relative;
}

.contact-btn--disabled[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

.contact-btn--disabled[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.8);
    z-index: 1000;
    pointer-events: none;
}

/* Additional disabled states for other button types */
.btn--disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
}

.btn--disabled:hover {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn--disabled .material-icons {
    color: #9ca3af !important;
}

/* Accessibility improvements for disabled buttons */
.contact-btn--disabled:focus,
.btn--disabled:focus {
    outline: 2px solid #d1d5db;
    outline-offset: 2px;
    opacity: 0.6;
}

/* Animation for state transitions */
.contact-btn,
.btn {
    transition: all 0.3s ease;
}