/**
 * JOIN NOW BUTTON FIX
 * ===================
 * Fixes the awful hover overlay on Join Now buttons
 * that "blows up to say log in on hover"
 */

/* Target the specific Join Now button with all its classes */
.btn-dna.btn-dna--primary.btn-hover-glow,
.btn-dna.btn-dna--primary.hover-glow,
.btn-dna.micro-interaction,
.btn[href*="signup-landing"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Remove any pseudo-elements that might create overlays */
.btn-dna::before,
.btn-dna::after,
.btn-hover-glow::before,
.btn-hover-glow::after,
.hover-glow::before,
.hover-glow::after,
.micro-interaction::before,
.micro-interaction::after,
.btn-ripple::before,
.btn-ripple::after {
    content: none !important;
    display: none !important;
}

/* Override the hover-glow class specifically */
.hover-glow {
    position: relative;
    transition: all 0.3s ease;
}

.hover-glow::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

/* Clean hover state for Join Now buttons */
.btn-dna.btn-dna--primary:hover,
.btn-dna.btn-hover-glow:hover,
.btn[href*="signup-landing"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(15, 117, 189, 0.2);
}

/* Remove any ripple effects */
.btn-ripple .ripple,
.btn-ripple .ripple-effect {
    display: none !important;
}

/* Disable micro-interactions that might cause overlays */
.micro-interaction {
    position: relative;
    overflow: hidden;
}

.micro-interaction > * {
    position: relative;
    z-index: 1;
}

/* Ensure text stays consistent */
.btn-dna span {
    position: relative;
    z-index: 2;
    display: inline-block;
}

/* Remove any tooltips or data attributes that might show on hover */
.btn-dna[data-tooltip],
.btn-dna[data-content],
.btn-dna[data-hover],
.btn-dna[title] {
    position: relative;
}

.btn-dna[data-tooltip]::before,
.btn-dna[data-tooltip]::after,
.btn-dna[data-content]::before,
.btn-dna[data-content]::after,
.btn-dna[data-hover]::before,
.btn-dna[data-hover]::after {
    display: none !important;
    content: none !important;
}

/* Specific override for DNA Romance primary button */
.btn-dna--primary {
    background-color: var(--color-primary);
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-dna--primary:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

/* Disable any animations on hover */
.btn-dna:hover,
.btn-dna:hover * {
    animation: none !important;
}

/* High specificity rule to ensure no overlays */
body .btn.btn-dna.btn-hover-glow.hover-glow:hover::before,
body .btn.btn-dna.btn-hover-glow.hover-glow:hover::after,
body .micro-interaction:hover::before,
body .micro-interaction:hover::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure button stays clickable */
.btn-dna {
    cursor: pointer;
    user-select: none;
}

/* Fix for any JavaScript-added elements */
.btn-dna + [class*="tooltip"],
.btn-dna + [class*="overlay"],
.btn-dna + [class*="hover"],
.btn-dna + [class*="popup"] {
    display: none !important;
    visibility: hidden !important;
}

/* Remove blur effects that might be causing the oval */
.btn-dna,
.btn-dna * {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Ensure the icon stays properly positioned */
.btn-dna i {
    position: relative;
    z-index: 2;
    display: inline-block;
    vertical-align: middle;
}

/* Fix for large buttons */
.btn-dna.btn-lg {
    font-size: 1.125rem;
    padding: 0.75rem 2rem;
    min-height: 48px;
}

/* Mobile touch state fix */
@media (hover: none) and (pointer: coarse) {
    .btn-dna:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Extra safety - remove any content injection on hover */
.btn-dna:hover span::before,
.btn-dna:hover span::after,
.btn-dna:hover i::before,
.btn-dna:hover i::after {
    content: none !important;
    display: none !important;
}

/* Ensure button text doesn't change */
.btn-dna:hover span {
    content: attr(data-original-text) !important;
}

/* Override any transform or scale effects that might create the oval */
.btn-dna:hover {
    transform: translateY(-2px) !important;
    transform-origin: center !important;
    border-radius: var(--radius-md) !important;
}