/* ===== GLOBAL HOVER COLOR FIXES ===== */
/* This file ensures all hover states have proper contrast and visibility across all pages */

/* Primary brand colors */
:root {
    --brand-primary: #7A567F;
    --brand-secondary: #E8E0EC;
    --brand-dark: #6B4C74;
    --brand-light: #F8F5F9;
}

/* ===== UNIVERSAL HOVER FIXES ===== */

/* Fix all text hover states */
a:hover,
button:hover,
.hover\:text-brand-500:hover,
.hover\:text-brand-600:hover,
.hover\:text-brand-400:hover,
.hover\:text-brand-300:hover,
[class*="hover:text-brand"]:hover {
    color: var(--brand-primary) !important;
    transition: color 0.2s ease !important;
}

/* Fix hover states on light backgrounds */
.bg-\[\#E8E0EC\] a:hover,
.bg-\[E8E0EC\] a:hover,
footer a:hover,
.footer a:hover,
[style*="background-color: #E8E0EC"] a:hover,
[style*="background: #E8E0EC"] a:hover,
.bg-gray-50 a:hover,
.bg-gray-100 a:hover,
.bg-white a:hover {
    color: var(--brand-primary) !important;
    text-decoration: underline !important;
    transition: all 0.2s ease !important;
}

/* Fix hover states on dark backgrounds */
.bg-gray-800 a:hover,
.bg-gray-900 a:hover,
.bg-black a:hover {
    color: var(--brand-secondary) !important;
    transition: color 0.2s ease !important;
}

/* ===== BUTTON HOVER FIXES ===== */

/* Primary button hover states */
.hover\:bg-brand-600:hover,
.hover\:bg-brand-700:hover,
.hover\:bg-brand-500:hover,
button:hover[class*="bg-brand"],
.bg-brand-500:hover,
.bg-brand-600:hover {
    background-color: var(--brand-dark) !important;
    color: white !important;
    transition: all 0.2s ease !important;
}

/* Transparent button hover states */
.hover\:bg-transparent:hover,
button.hover\:bg-transparent:hover {
    background-color: var(--brand-primary) !important;
    color: white !important;
    border-color: var(--brand-primary) !important;
    transition: all 0.2s ease !important;
}

/* White button with colored text hover states */
.bg-white.text-brand-500:hover,
.bg-white[class*="text-brand"]:hover {
    background-color: var(--brand-primary) !important;
    color: white !important;
    transition: all 0.2s ease !important;
}

/* ===== NAVIGATION HOVER FIXES ===== */

/* Navigation and menu hover states */
nav a:hover,
.nav a:hover,
.menu a:hover,
.navigation a:hover,
.navbar a:hover,
header a:hover {
    color: var(--brand-primary) !important;
    transition: color 0.2s ease !important;
}

/* Mobile menu hover states */
.hamburger-menu a:hover,
.mobile-menu a:hover,
.sidebar a:hover {
    color: var(--brand-primary) !important;
    background-color: var(--brand-light) !important;
    transition: all 0.2s ease !important;
}

/* ===== FOOTER SPECIFIC FIXES ===== */

/* Footer hover states */
footer a:hover,
.footer a:hover,
footer .hover\:text-brand-500:hover,
footer [class*="hover:text-brand"]:hover {
    color: var(--brand-primary) !important;
    text-decoration: underline !important;
    transition: all 0.2s ease !important;
}

/* Footer button hover states */
footer button:hover,
.footer button:hover {
    background-color: var(--brand-dark) !important;
    color: white !important;
    transition: all 0.2s ease !important;
}

/* ===== FORM ELEMENT HOVER FIXES ===== */

/* Input focus and hover states */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px rgba(122, 86, 127, 0.2) !important;
    outline: none !important;
}

/* Checkbox and radio hover states */
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--brand-primary) !important;
}

/* ===== PRODUCT CARD HOVER FIXES ===== */

/* Product card link hover states */
.product-card a:hover,
.card a:hover,
.item a:hover {
    color: var(--brand-primary) !important;
    transition: color 0.2s ease !important;
}

/* Product card button hover states */
.product-card button:hover,
.card button:hover,
.item button:hover {
    background-color: var(--brand-primary) !important;
    color: white !important;
    transition: all 0.2s ease !important;
}

/* ===== SPECIFIC COMPONENT FIXES ===== */

/* Wishlist and cart icon hover states */
.wishlist-btn:hover,
.cart-btn:hover,
#wishlist-icon:hover,
#cart-icon:hover {
    color: var(--brand-primary) !important;
    background-color: var(--brand-light) !important;
    transition: all 0.2s ease !important;
}

/* Breadcrumb hover states */
.breadcrumb a:hover,
.breadcrumbs a:hover {
    color: var(--brand-primary) !important;
    transition: color 0.2s ease !important;
}

/* Pagination hover states */
.pagination a:hover,
.page-link:hover {
    color: var(--brand-primary) !important;
    background-color: var(--brand-light) !important;
    transition: all 0.2s ease !important;
}

/* ===== OVERRIDE PROBLEMATIC HOVER STATES ===== */

/* Fix any invisible hover states */
*:hover[style*="color: transparent"],
*:hover[style*="color: rgba(0,0,0,0)"],
*:hover[style*="color: rgba(255,255,255,0)"] {
    color: var(--brand-primary) !important;
}

/* Fix same-color-as-background hover states */
.bg-\[\#E8E0EC\] *:hover[style*="color: #E8E0EC"],
.bg-white *:hover[style*="color: white"],
.bg-white *:hover[style*="color: #ffffff"] {
    color: var(--brand-primary) !important;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Ensure proper contrast ratios */
*:hover {
    transition: all 0.2s ease !important;
}

/* Focus states for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--brand-primary) !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    a:hover,
    button:hover {
        color: var(--brand-primary) !important;
        text-decoration: underline !important;
        font-weight: bold !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none !important;
    }
}