/**
 * Join Now and Login Button Styles
 * Makes buttons more clickable with brand-specific colors
 */

/* Brand-specific colors for each site */
[data-site="dnaromance"] {
    --btn-primary-bg: #D91A72;
    --btn-primary-hover: #B71560;
    --btn-primary-shadow: rgba(217, 26, 114, 0.3);
}

[data-site="datemetrix"] {
    --btn-primary-bg: #6a1b9a;
    --btn-primary-hover: #5e35b1;
    --btn-primary-shadow: rgba(106, 27, 154, 0.3);
}

[data-site="genepool"] {
    --btn-primary-bg: #009688;
    --btn-primary-hover: #00796b;
    --btn-primary-shadow: rgba(0, 150, 136, 0.3);
}

[data-site="wellmatched"] {
    --btn-primary-bg: #5E60CE;
    --btn-primary-hover: #5390D9;
    --btn-primary-shadow: rgba(94, 96, 206, 0.3);
}

[data-site="generecovery"] {
    --btn-primary-bg: #795548;
    --btn-primary-hover: #5d4037;
    --btn-primary-shadow: rgba(121, 85, 72, 0.3);
}

[data-site="heritablehealth"] {
    --btn-primary-bg: #607d8b;
    --btn-primary-hover: #455a64;
    --btn-primary-shadow: rgba(96, 125, 139, 0.3);
}

/* Default fallback */
body {
    --btn-primary-bg: #D91A72;
    --btn-primary-hover: #B71560;
    --btn-primary-shadow: rgba(217, 26, 114, 0.3);
}

/* Primary Join Now button styling - ALL variations */
.btn-dna--primary,
.btn-dna.btn-dna--primary,
.btn-join-now,
.btn-primary,
a[href*="signup-landing"]:is(.btn, .btnn, .app-link),
.navbar a[href*="signup"]:not(.nav-link):not(.dropdown-item),
.custom-style-e208cf0f,
.custom-style-0843fcec,
.custom-style-29bcd606 {
    background-color: var(--btn-primary-bg) !important;
    color: white !important;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Hover state for Join Now buttons */
.btn-dna--primary:hover,
.btn-dna.btn-dna--primary:hover,
.btn-join-now:hover,
.btn-primary:hover,
a[href*="signup-landing"]:is(.btn, .btnn, .app-link):hover,
.navbar a[href*="signup"]:not(.nav-link):not(.dropdown-item):hover,
.custom-style-e208cf0f:hover,
.custom-style-0843fcec:hover,
.custom-style-29bcd606:hover {
    background-color: var(--btn-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px var(--btn-primary-shadow) !important;
    color: white !important;
}

/* Active state */
.btn-dna--primary:active,
.btn-dna.btn-dna--primary:active,
.btn-join-now:active,
.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Login button styling */
.btn-login,
.navbar a[href*="login"]:not(.nav-link):not(.dropdown-item):not(.text-muted),
a[href*="login-landing"]:is(.btn, .btnn) {
    background-color: transparent !important;
    color: var(--btn-primary-bg) !important;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    border: 2px solid var(--btn-primary-bg) !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* Login button hover */
.btn-login:hover,
.navbar a[href*="login"]:not(.nav-link):not(.dropdown-item):not(.text-muted):hover,
a[href*="login-landing"]:is(.btn, .btnn):hover {
    background-color: var(--btn-primary-bg) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px var(--btn-primary-shadow) !important;
}

/* Large button variants */
.btn-lg.btn-dna--primary,
.btn-lg.btn-join-now,
.btn-lg.btn-primary {
    padding: 14px 32px !important;
    font-size: 1.1rem !important;
}

/* Navbar specific styles */
.navbar .btn-dna--primary,
.navbar .btn-join-now,
.navbar .btn-primary,
.navbar .btn-login {
    padding: 8px 20px !important;
    font-size: 0.95rem !important;
}

/* Remove any text decoration on hover */
a.btn-dna--primary:hover,
a.btn-join-now:hover,
a.btn-primary:hover,
a.btn-login:hover {
    text-decoration: none !important;
}

/* Ensure icons inside buttons are properly aligned */
.btn-dna--primary i,
.btn-join-now i,
.btn-primary i {
    margin-left: 8px;
}

/* Make sure the button text doesn't wrap */
.btn-dna--primary span,
.btn-join-now span,
.btn-primary span {
    white-space: nowrap;
}

/* Override any conflicting styles */
.hero-modern__cta .btn-dna--primary,
.banner3-content .btn-dna--primary {
    background-color: var(--btn-primary-bg) !important;
    border: none !important;
}

/* Focus state for accessibility */
.btn-dna--primary:focus,
.btn-join-now:focus,
.btn-primary:focus,
.btn-login:focus {
    outline: 3px solid var(--btn-primary-shadow) !important;
    outline-offset: 2px !important;
}

/* Disabled state */
.btn-dna--primary:disabled,
.btn-join-now:disabled,
.btn-primary:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}