/**
 * Button Contrast and Clickability Fixes
 * Ensures all buttons meet WCAG AA contrast requirements and have clear interactive states
 * 
 * Issues addressed:
 * 1. Button text contrast against button backgrounds
 * 2. Buttons that don't look clickable (flat, no shadow, no hover states)
 * 3. Primary/secondary/outline buttons with poor contrast
 * 4. Disabled buttons that are indistinguishable from enabled
 * 5. Button hover/focus states that don't provide clear feedback
 * 6. Custom button classes with contrast issues
 */

/* =========================
   1. Core Button Styles
   ========================= */

/* Base button styles - ensure all buttons look clickable */
.btn,
button,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"] {
    /* Ensure minimum touch target size */
    min-height: 44px !important;
    min-width: 44px !important;
    
    /* Clear visual affordances */
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    
    /* Ensure text is readable */
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
}

/* Add subtle depth to all buttons by default */
.btn:not(.btn-link):not(.btn-flat) {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 
                0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

/* =========================
   2. Primary Button Fixes
   ========================= */

.btn-primary {
    /* Ensure solid background for contrast */
    background-color: #0F75BD !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 2px solid #0F75BD !important;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: #0A5A91 !important;
    border-color: #0A5A91 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #084673 !important;
    border-color: #084673 !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* =========================
   3. Secondary Button Fixes
   ========================= */

.btn-secondary {
    /* Use darker pink for better contrast */
    background-color: #D91A72 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 2px solid #D91A72 !important;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: #B11559 !important;
    border-color: #B11559 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.btn-secondary:active,
.btn-secondary.active {
    background-color: #8E1048 !important;
    border-color: #8E1048 !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* =========================
   4. Success Button Fixes
   ========================= */

.btn-success {
    background-color: #198754 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 2px solid #198754 !important;
}

.btn-success:hover,
.btn-success:focus-visible {
    background-color: #146C43 !important;
    border-color: #146C43 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* =========================
   5. Danger Button Fixes
   ========================= */

.btn-danger {
    background-color: #DC3545 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 2px solid #DC3545 !important;
}

.btn-danger:hover,
.btn-danger:focus-visible {
    background-color: #B02A37 !important;
    border-color: #B02A37 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* =========================
   6. Warning Button Fixes
   ========================= */

.btn-warning {
    background-color: #FFC107 !important;
    background-image: none !important;
    color: #000000 !important; /* Black text for contrast */
    border: 2px solid #FFC107 !important;
}

.btn-warning:hover,
.btn-warning:focus-visible {
    background-color: #E0A800 !important;
    border-color: #E0A800 !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* =========================
   7. Info Button Fixes
   ========================= */

.btn-info {
    background-color: #0DCAF0 !important;
    background-image: none !important;
    color: #000000 !important; /* Black text for contrast */
    border: 2px solid #0DCAF0 !important;
}

.btn-info:hover,
.btn-info:focus-visible {
    background-color: #0AA2C0 !important;
    border-color: #0AA2C0 !important;
    color: #FFFFFF !important; /* Switch to white on darker background */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* =========================
   8. Light Button Fixes
   ========================= */

.btn-light {
    background-color: #F8F9FA !important;
    background-image: none !important;
    color: #212529 !important;
    border: 2px solid #DEE2E6 !important;
}

.btn-light:hover,
.btn-light:focus-visible {
    background-color: #E9ECEF !important;
    border-color: #CED4DA !important;
    color: #212529 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* =========================
   9. Dark Button Fixes
   ========================= */

.btn-dark {
    background-color: #212529 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 2px solid #212529 !important;
}

.btn-dark:hover,
.btn-dark:focus-visible {
    background-color: #424649 !important;
    border-color: #424649 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 
                0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

/* =========================
   10. Outline Button Fixes
   ========================= */

.btn-outline-primary {
    background-color: transparent !important;
    color: #0F75BD !important;
    border: 2px solid #0F75BD !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background-color: #0F75BD !important;
    border-color: #0F75BD !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(15, 117, 189, 0.3) !important;
}

.btn-outline-secondary {
    background-color: transparent !important;
    color: #D91A72 !important;
    border: 2px solid #D91A72 !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    background-color: #D91A72 !important;
    border-color: #D91A72 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(217, 26, 114, 0.3) !important;
}

.btn-outline-success {
    background-color: transparent !important;
    color: #198754 !important;
    border: 2px solid #198754 !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus-visible {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(25, 135, 84, 0.3) !important;
}

.btn-outline-danger {
    background-color: transparent !important;
    color: #DC3545 !important;
    border: 2px solid #DC3545 !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
    background-color: #DC3545 !important;
    border-color: #DC3545 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(220, 53, 69, 0.3) !important;
}

.btn-outline-warning {
    background-color: transparent !important;
    color: #CC9A06 !important; /* Darker yellow for contrast */
    border: 2px solid #FFC107 !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus-visible {
    background-color: #FFC107 !important;
    border-color: #FFC107 !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(255, 193, 7, 0.3) !important;
}

.btn-outline-info {
    background-color: transparent !important;
    color: #0AA2C0 !important; /* Darker cyan for contrast */
    border: 2px solid #0DCAF0 !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus-visible {
    background-color: #0DCAF0 !important;
    border-color: #0DCAF0 !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(13, 202, 240, 0.3) !important;
}

.btn-outline-light {
    background-color: transparent !important;
    color: #6C757D !important; /* Gray text for contrast on white */
    border: 2px solid #DEE2E6 !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
    background-color: #F8F9FA !important;
    border-color: #DEE2E6 !important;
    color: #212529 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.btn-outline-dark {
    background-color: transparent !important;
    color: #212529 !important;
    border: 2px solid #212529 !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus-visible {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(33, 37, 41, 0.3) !important;
}

/* =========================
   11. Link Button Fixes
   ========================= */

.btn-link {
    color: #0F75BD !important;
    text-decoration: underline !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.btn-link:hover,
.btn-link:focus-visible {
    color: #0A5A91 !important;
    text-decoration: underline !important;
    background-color: rgba(15, 117, 189, 0.05) !important;
}

.btn-link:active {
    color: #084673 !important;
}

/* =========================
   12. Disabled Button States
   ========================= */

.btn:disabled,
.btn.disabled,
button:disabled,
button.disabled,
[type="button"]:disabled,
[type="submit"]:disabled,
[type="reset"]:disabled {
    opacity: 0.5 !important; /* Clear visual distinction */
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    
    /* Add pattern overlay for better distinction */
    position: relative !important;
    overflow: hidden !important;
}

/* Diagonal stripes for disabled buttons */
.btn:disabled::after,
.btn.disabled::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 200% !important;
    height: 100% !important;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.1) 3px,
        rgba(255, 255, 255, 0.1) 6px
    ) !important;
    pointer-events: none !important;
}

/* =========================
   13. Focus States
   ========================= */

.btn:focus,
.btn:focus-visible,
button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
[type="reset"]:focus-visible {
    outline: 3px solid rgba(15, 117, 189, 0.5) !important;
    outline-offset: 2px !important;
}

/* Different focus colors for different button types */
.btn-secondary:focus-visible {
    outline-color: rgba(217, 26, 114, 0.5) !important;
}

.btn-success:focus-visible {
    outline-color: rgba(25, 135, 84, 0.5) !important;
}

.btn-danger:focus-visible {
    outline-color: rgba(220, 53, 69, 0.5) !important;
}

.btn-warning:focus-visible {
    outline-color: rgba(255, 193, 7, 0.5) !important;
}

.btn-info:focus-visible {
    outline-color: rgba(13, 202, 240, 0.5) !important;
}

/* =========================
   14. Button Sizes
   ========================= */

.btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1.125rem !important;
    min-height: 48px !important;
}

.btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    min-height: 36px !important;
}

/* =========================
   15. Button Groups
   ========================= */

.btn-group > .btn {
    box-shadow: none !important;
}

.btn-group {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 
                0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

/* =========================
   16. Custom Button Classes
   ========================= */

/* Fix gradient buttons */
.btn[class*="gradient"],
.btn[style*="gradient"] {
    background-image: none !important;
    position: relative !important;
}

/* Add gradient as pseudo element to maintain contrast */
.btn[class*="gradient"]::before,
.btn[style*="gradient"]::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: inherit !important;
    opacity: 0.1 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
}

/* =========================
   17. Icon Buttons
   ========================= */

.btn > i,
.btn > svg,
.btn > .icon {
    vertical-align: middle !important;
    margin-right: 0.375rem !important;
}

.btn > i:last-child,
.btn > svg:last-child,
.btn > .icon:last-child {
    margin-right: 0 !important;
}

/* Icon-only buttons */
.btn-icon {
    padding: 0.5rem !important;
    line-height: 1 !important;
}

.btn-icon > i,
.btn-icon > svg,
.btn-icon > .icon {
    margin: 0 !important;
}

/* =========================
   18. Loading States
   ========================= */

.btn-loading,
.btn.loading {
    color: transparent !important;
    pointer-events: none !important;
}

.btn-loading::after,
.btn.loading::after {
    content: "" !important;
    position: absolute !important;
    width: 1rem !important;
    height: 1rem !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -0.5rem !important;
    margin-top: -0.5rem !important;
    border: 2px solid currentColor !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    animation: button-loading-spinner 0.6s linear infinite !important;
}

@keyframes button-loading-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* =========================
   19. High Contrast Mode
   ========================= */

@media (prefers-contrast: high) {
    .btn {
        border-width: 3px !important;
        font-weight: 600 !important;
    }
    
    .btn:focus-visible {
        outline-width: 4px !important;
        outline-offset: 4px !important;
    }
}

/* =========================
   20. Print Styles
   ========================= */

@media print {
    .btn {
        border: 2px solid !important;
        box-shadow: none !important;
    }
}

/* =========================
   21. Specific Fixes for Custom Classes
   ========================= */

/* DNA Romance specific button fixes */
.btn-dna,
.btn-romance,
.btn-match {
    background-image: none !important;
    font-weight: 500 !important;
}

/* Call-to-action buttons */
.cta-button,
.hero-button,
.action-button {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                0 2px 4px rgba(0, 0, 0, 0.06) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: none !important;
}

/* Form submit buttons */
form .btn[type="submit"],
form button[type="submit"] {
    font-weight: 600 !important;
    min-width: 120px !important;
}

/* Modal buttons */
.modal-footer .btn {
    min-width: 100px !important;
}

/* Card buttons */
.card .btn {
    width: 100% !important;
    margin-top: auto !important;
}

/* =========================
   22. Animation Enhancements
   ========================= */

/* Pulse animation for important CTAs */
.btn-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 
                    0 1px 2px rgba(0, 0, 0, 0.06);
    }
    50% {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 
                    0 2px 4px rgba(0, 0, 0, 0.08);
    }
    100% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 
                    0 1px 2px rgba(0, 0, 0, 0.06);
    }
}

/* =========================
   23. Override Bootstrap Gradients
   ========================= */

.bg-gradient-primary,
.bg-gradient-secondary,
.bg-gradient-success,
.bg-gradient-danger,
.bg-gradient-warning,
.bg-gradient-info {
    background-image: none !important;
}

/* =========================
   24. Ensure Proper Stacking
   ========================= */

.btn {
    z-index: 1 !important;
}

.btn:hover,
.btn:focus-visible {
    z-index: 2 !important;
}

.btn:active {
    z-index: 3 !important;
}

/* =========================
   25. Fix Hover Glow Overlay
   ========================= */

/* Remove the ugly oval overlay from hover-glow buttons */
.btn-hover-glow::after,
.hover-glow::after {
    display: none !important;
}

/* Add a cleaner hover effect for these buttons */
.btn-hover-glow:hover,
.hover-glow:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 
                0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Specifically for the Join Now button */
.btn-dna--primary.btn-hover-glow:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: currentColor !important;
}

/* =========================
   26. Fix Hero Background Override
   ========================= */

/* Ensure banner3 background image takes precedence over hero-modern gradient */
.hero-modern.banner3,
.hero-modern#topp {
    background-image: url('../images/background/background3XL.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Fallback for browsers without WebP support */
.no-webp .hero-modern.banner3,
.no-webp .hero-modern#topp {
    background-image: url('../images/background/background3XL.jpeg') !important;
}

/* Mobile responsive for DNA Romance */
@media (max-width: 768px) {
    .hero-modern.banner3,
    .hero-modern#topp {
        background-image: url('../images/background/backgroundmobile1XL.webp') !important;
    }
    
    .no-webp .hero-modern.banner3,
    .no-webp .hero-modern#topp {
        background-image: url('../images/background/backgroundmobile1XL.jpg') !important;
    }
}


/* DateMetriX - Personality focused background */
.hero-modern.banner3-datemetrix {
    background-image: url('../images/background/Personalities.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.webp .hero-modern.banner3-datemetrix {
    background-image: url('../images/background/Personalities.webp') !important;
}

/* GenePool - Donor/Co-parent focused background */
.hero-modern.banner3-genepool {
    background-image: url('../images/genepool/pexels-pavel-danilyuk-6025139.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* WellMatched - Add background image (currently missing) */
.hero-modern.banner3-wellmatched {
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(66, 165, 245, 0.8)),
                url('../images/background/couple.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* GeneRecovery - Recovery focused background */
.hero-modern.banner3-generecovery {
    background-image: url('../images/background/generecovery-hero.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.no-webp .hero-modern.banner3-generecovery {
    background-image: url('../images/background/generecovery-hero.jpg') !important;
}

/* HeritableHealth - Health focused background */
.hero-modern.banner3-heritablehealth {
    background-image: url('../images/background/heritablehealth-hero.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.no-webp .hero-modern.banner3-heritablehealth {
    background-image: url('../images/background/heritablehealth-hero.jpg') !important;
}