/* ========================================
   CONTRAST FIXES FOR CTA BUTTONS
   ========================================
   
   This file fixes critical contrast issues where:
   1. White buttons appear on white backgrounds (invisible)
   2. Light text appears on light backgrounds (poor readability)
   3. Button states lack sufficient contrast
   
   Applied to all theme variations.
======================================== */

/* ===========================================
   1. WHITE BUTTON CONTRAST FIXES
   =========================================== */

/* Ensure white buttons always have visible borders and shadows */
.cta-button.white {
    background-color: var(--spurs-white) !important;
    color: var(--spurs-black) !important;
    border: 2px solid var(--spurs-pink) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    position: relative;
}

/* Enhanced hover state for white buttons */
.cta-button.white:hover {
    background-color: var(--spurs-pink) !important;
    color: white !important;
    border-color: var(--spurs-pink) !important;
    box-shadow: 0 6px 16px rgba(239, 66, 111, 0.3) !important;
    transform: translateY(-2px);
}

/* Special styling for white buttons in dark contexts (where they should remain white) */
.final-cta .cta-button.white,
.dark-section .cta-button.white,
.cta-section .cta-button.white {
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.final-cta .cta-button.white:hover,
.dark-section .cta-button.white:hover,
.cta-section .cta-button.white:hover {
    background-color: rgba(255,255,255,0.9) !important;
    color: var(--spurs-pink) !important;
    border-color: white !important;
}

/* ===========================================
   2. LIGHT SECTION BACKGROUND FIXES
   =========================================== */

/* Add background to sections that might have contrast issues */
.special-offer {
    background: linear-gradient(135deg, #fdf7f8 0%, #fff 100%);
    padding: 60px 0;
    border-top: 1px solid rgba(239, 66, 111, 0.1);
    border-bottom: 1px solid rgba(239, 66, 111, 0.1);
}

/* ===========================================
   3. PINK TEXT CONTRAST FIXES
   =========================================== */

/* Ensure pink links have sufficient contrast */
.service-link {
    color: var(--spurs-pink) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

/* In light pink contexts, use darker pink */
.light-pink-section .service-link,
.pink-gradient .service-link {
    color: #c91a4a !important; /* Darker pink for better contrast */
    text-shadow: none;
}

/* ===========================================
   4. BUTTON OUTLINE IMPROVEMENTS
   =========================================== */

/* Ensure all CTA buttons have defined boundaries */
.cta-button {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Primary button enhancements */
.cta-button.primary {
    border: 1px solid rgba(0,0,0,0.1);
}

/* Secondary button enhancements */
.cta-button.secondary {
    border: 1px solid rgba(0,0,0,0.1);
}

/* ===========================================
   5. ACCESSIBILITY IMPROVEMENTS
   =========================================== */

/* Focus states for keyboard navigation */
.cta-button:focus {
    outline: 3px solid rgba(239, 66, 111, 0.5);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .cta-button.white {
        border-width: 3px !important;
        border-color: var(--spurs-black) !important;
    }
    
    .service-link {
        text-decoration: underline;
        font-weight: 700 !important;
    }
}

/* ===========================================
   6. MOBILE RESPONSIVENESS
   =========================================== */

@media (max-width: 480px) {
    .cta-button.white {
        border-width: 2px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    }
    
    .special-offer {
        padding: 40px 0;
    }
}

/* ===========================================
   7. THEME-SPECIFIC FIXES
   =========================================== */

/* Standard theme fixes */
.theme-standard .cta-button.white {
    border-color: var(--spurs-teal);
}

.theme-standard .cta-button.white:hover {
    background-color: var(--spurs-teal) !important;
    color: white !important;
}

/* Fiesta theme fixes */
.theme-fiesta .cta-button.white {
    border-color: var(--spurs-pink);
}

.theme-fiesta .cta-button.white:hover {
    background-color: var(--spurs-pink) !important;
    color: white !important;
}

/* ===========================================
   8. EMERGENCY VISIBILITY FALLBACKS
   =========================================== */

/* If all else fails, ensure buttons are never completely invisible */
.cta-button.white:not(:hover):not(:focus) {
    min-width: 120px;
    min-height: 40px;
}

/* Add a subtle background pattern for extreme cases */
.cta-button.white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 1px,
        rgba(239, 66, 111, 0.03) 1px,
        rgba(239, 66, 111, 0.03) 2px
    );
    pointer-events: none;
    z-index: -1;
}