/* 
   FAUNA FLORA - CREATIVE BUTTON HOVER EFFECTS 
   Gradient Theme: Pink-Purple-Violet
*/

/* 1. Target all <button> elements and links with button-like characteristics */
button, 
.bg-theme, 
.bg-lime-500,
.bg-white[class*="border-lime-500"],
[class*="inline-flex"][class*="py-4"][class*="px-6"],
[class*="inline-flex"][class*="py-2.5"][class*="px-4"] {
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    z-index: 1;
}

/* 2. Primary Hover Effect */
button:hover, 
.bg-theme:hover, 
.bg-lime-500:hover, 
.bg-white[class*="border-lime-500"]:hover,
[class*="inline-flex"][class*="py-4"][class*="px-6"]:hover,
[class*="inline-flex"][class*="py-2.5"][class*="px-4"]:hover {
    background: linear-gradient(90deg, rgb(255, 45, 143) 0%, rgb(214, 51, 166) 50%, rgb(123, 44, 191) 100%) !important;
    color: #ffffff !important;
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 12px 24px rgba(214, 51, 166, 0.35) !important;
    border-color: transparent !important;
}

/* 3. Handle specific text/icon elements inside buttons */
button:hover span, 
.bg-theme:hover span, 
.bg-lime-500:hover span,
[class*="inline-flex"]:hover span {
    color: #ffffff !important;
}

button:hover svg, 
.bg-theme:hover svg, 
.bg-lime-500:hover svg,
[class*="inline-flex"]:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* 4. Smooth Icon Transitions */
button svg, 
.bg-theme svg, 
.bg-lime-500 svg,
[class*="inline-flex"] svg {
    transition: all 0.3s ease !important;
}

/* 5. Active/Press State */
button:active, 
.bg-theme:active, 
.bg-lime-500:active {
    transform: translateY(-2px) scale(0.98) !important;
    box-shadow: 0 5px 10px rgba(214, 51, 166, 0.2) !important;
}