/* ========================================
   BUTTON FIX - Arrow Alignment & Text Color
   Fixes arrow alignment and ensures white text on all buttons
   ======================================== */

/* ========================================
   1. FIX ARROW ALIGNMENT
   ======================================== */

/* Ensure all btn-premium buttons use flexbox for proper alignment */
.btn-premium,
.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    vertical-align: middle !important;
}

/* Fix SVG arrow alignment - ensure it's vertically centered */
.btn-premium svg,
.btn-primary svg {
    display: inline-block !important;
    vertical-align: middle !important;
    align-self: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Fix span text alignment */
.btn-premium span,
.btn-primary span {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
}

/* ========================================
   2. FIX TEXT COLOR - Ensure White Text
   ======================================== */

/* Override any dark text colors - buttons should have white text */
.btn-premium,
.btn-primary {
    color: #ffffff !important;
}

/* Button text (span) should be white */
.btn-premium span,
.btn-primary span,
.btn-premium,
.btn-primary {
    color: #ffffff !important;
}

/* Button text on hover - keep white */
.btn-premium:hover span,
.btn-primary:hover span,
.btn-premium:hover,
.btn-primary:hover {
    color: #ffffff !important;
}

/* Button text on active - keep white */
.btn-premium:active span,
.btn-primary:active span,
.btn-premium:active,
.btn-primary:active {
    color: #ffffff !important;
}

/* Button text on focus - keep white */
.btn-premium:focus span,
.btn-primary:focus span,
.btn-premium:focus,
.btn-primary:focus {
    color: #ffffff !important;
}

/* ========================================
   3. FIX SVG ARROW COLOR - Ensure White
   ======================================== */

/* SVG arrows should be white */
.btn-premium svg,
.btn-primary svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}

/* SVG arrows on hover - keep white */
.btn-premium:hover svg,
.btn-primary:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* SVG arrows on active - keep white */
.btn-premium:active svg,
.btn-primary:active svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ========================================
   4. NAVBAR BUTTON SPECIFIC FIXES
   ======================================== */

/* Navbar Sign Up button - ensure proper alignment and white text */
.modern-navbar .btn-premium {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    color: #ffffff !important;
}

.modern-navbar .btn-premium span {
    color: #ffffff !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.modern-navbar .btn-premium svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    display: inline-block !important;
    vertical-align: middle !important;
    align-self: center !important;
    flex-shrink: 0 !important;
}

/* ========================================
   5. HERO BUTTON FIXES
   ======================================== */

/* Hero section buttons - ensure white text and proper alignment */
.hero-button-animate .btn-premium,
.home-hero-section .btn-premium {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    color: #ffffff !important;
}

.hero-button-animate .btn-premium span,
.home-hero-section .btn-premium span {
    color: #ffffff !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.hero-button-animate .btn-premium svg,
.home-hero-section .btn-premium svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    display: inline-block !important;
    vertical-align: middle !important;
    align-self: center !important;
    flex-shrink: 0 !important;
}

/* ========================================
   6. MOBILE BUTTON FIXES
   ======================================== */

/* Mobile buttons - ensure alignment and white text */
@media (max-width: 767px) {
    .btn-premium,
    .btn-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        color: #ffffff !important;
    }
    
    .btn-premium span,
    .btn-primary span {
        color: #ffffff !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    .btn-premium svg,
    .btn-primary svg {
        color: #ffffff !important;
        stroke: #ffffff !important;
        display: inline-block !important;
        vertical-align: middle !important;
        align-self: center !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================
   7. OVERRIDE ANY CONFLICTING STYLES
   ======================================== */

/* Override professional-fix.css dark text */
.btn-premium,
.btn-primary,
.btn-premium span,
.btn-primary span {
    color: #ffffff !important;
}

/* Override any black text colors */
.btn-premium[style*="color: black"],
.btn-premium[style*="color: #000"],
.btn-primary[style*="color: black"],
.btn-primary[style*="color: #000"] {
    color: #ffffff !important;
}

/* Ensure SVG stroke is white, not black */
.btn-premium svg[stroke="black"],
.btn-premium svg[stroke="#000"],
.btn-primary svg[stroke="black"],
.btn-primary svg[stroke="#000"] {
    stroke: #ffffff !important;
}