/* Button Color Slide Fill Effect
 * A modern, polished button animation effect that slides color into the button
 * on hover and focus states
 * 
 * This effect works alongside the existing button animations
 * but adds a smooth color transition effect
 */

/* Base button styling to ensure consistency */
.btn, 
button[type="submit"],
button[type="button"],
.navbar .btn,
.navbar-nav .nav-link,
.sidebar-link,
.qd-list a,
.action-buttons button,
a.btn,
.nav-donate {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 1;
    transform-origin: center;
}

/* The slide fill effect - created with a pseudo-element that slides in */
.btn::before, 
button[type="submit"]::before,
button[type="button"]::before,
.navbar .btn::before,
.navbar-nav .nav-link::before,
.sidebar-link::before,
.qd-list a::before,
.action-buttons button::before,
a.btn::before,
.nav-donate::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    z-index: -1;
}

/* Hover/Focus states - slide in the color */
.btn:hover::before, 
.btn:focus::before,
button[type="submit"]:hover::before,
button[type="submit"]:focus::before,
button[type="button"]:hover::before,
button[type="button"]:focus::before,
.navbar .btn:hover::before,
.navbar .btn:focus::before,
.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link:focus::before,
.sidebar-link:hover::before,
.sidebar-link:focus::before,
.qd-list a:hover::before,
.qd-list a:focus::before,
.action-buttons button:hover::before,
.action-buttons button:focus::before,
a.btn:hover::before,
a.btn:focus::before,
.nav-donate:hover::before,
.nav-donate:focus::before {
    left: 0;
}

/* Custom colors for different button types */
.btn-primary::before,
.action-buttons .btn-primary::before {
    background-color: #95bd30; /* Darker green for primary buttons */
}

.btn-secondary::before,
.action-buttons .btn-secondary::before {
    background-color: #e0e0e0; /* Darker gray for secondary buttons */
}

.btn--light::before {
    background-color: #f8f9fa; /* Light background for light buttons */
}

.navbar .btn-referral::before {
    background-color: #fcd92b; /* Yellow for referral buttons */
}

.nav-donate::before {
    background-color: #a6ce39; /* Green for donate buttons */
}

.btn::before {
    background-color: #20b4ef; /* Default blue for generic buttons */
}

/* Special styling for Get Support button */
#gbSupportBtn::before {
    background-color: #5ce1e6; /* Light blue */
}

.navbar-nav .nav-link::before {
    background-color: rgba(255, 255, 255, 0.2); /* Subtle highlight for nav links */
}

.sidebar-link::before,
.qd-list a::before {
    background-color: rgba(0, 0, 0, 0.1); /* Subtle dark highlight for sidebar links */
}

/* Active button states */
.btn:active::before,
button[type="submit"]:active::before,
button[type="button"]:active::before,
.navbar .btn:active::before,
.navbar-nav .nav-link:active::before,
.sidebar-link:active::before,
.qd-list a:active::before,
.action-buttons button:active::before,
a.btn:active::before,
.nav-donate:active::before {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Enhanced interaction with sparkle effect */
.btn:hover::after,
button[type="submit"]:hover::after,
.btn-primary:hover::after,
.nav-donate:hover::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10.5%),
                     radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10.5%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    animation: sparkle 3s linear infinite;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

/* Ensure text is visible with proper contrast */
.btn:hover, 
.btn:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
.btn-primary:hover,
.btn-primary:focus {
    color: white !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn--light:hover,
.btn--light:focus {
    color: #333 !important;
}

/* Enhance accessibility with focus states */
.btn:focus,
button[type="submit"]:focus,
button[type="button"]:focus,
.navbar .btn:focus,
.navbar-nav .nav-link:focus,
.sidebar-link:focus,
.qd-list a:focus,
.action-buttons button:focus,
a.btn:focus,
.nav-donate:focus {
    outline: 2px solid rgba(32, 180, 239, 0.5);
    outline-offset: 2px;
}

/* Add a subtle 3D effect for a more polished look */
.btn, 
button[type="submit"],
button[type="button"],
.navbar .btn,
.action-buttons button,
a.btn,
.nav-donate {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease, transform 0.2s ease;
}

.btn:hover, 
button[type="submit"]:hover,
button[type="button"]:hover,
.navbar .btn:hover,
.action-buttons button:hover,
a.btn:hover,
.nav-donate:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn:active, 
button[type="submit"]:active,
button[type="button"]:active,
.navbar .btn:active,
.action-buttons button:active,
a.btn:active,
.nav-donate:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}