/* =========================================================
   DIRECT FIX FOR WELLNESS ICONS
   Ensures Physical, Emotional, Spiritual icons are visible
   ========================================================= */

/* Force Font Awesome icons to display */
.wellness-icon i.fas {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    color: #FFD700 !important;
    font-size: 3rem !important;
    line-height: 1 !important;
    margin-bottom: 15px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure ::before pseudo-elements work for these specific icons */
.wellness-icon i.fas.fa-dumbbell::before {
    content: "\f44b" !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    color: inherit !important;
}

.wellness-icon i.fas.fa-heart::before {
    content: "\f004" !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    color: inherit !important;
}

.wellness-icon i.fas.fa-om::before {
    content: "\f679" !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    color: inherit !important;
}

/* Fallback: If Font Awesome fails, use text */
.wellness-icon i.fas.fa-dumbbell:empty::after {
    content: "💪" !important;
    font-size: 3rem !important;
    color: #FFD700 !important;
}

.wellness-icon i.fas.fa-heart:empty::after {
    content: "❤" !important;
    font-size: 3rem !important;
    color: #FFD700 !important;
}

.wellness-icon i.fas.fa-om:empty::after {
    content: "🕉" !important;
    font-size: 3rem !important;
    color: #FFD700 !important;
}

/* Container styling */
.wellness-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;
    margin: 40px auto !important;
    padding: 20px !important;
    flex-wrap: wrap !important;
}

/* Individual icon wrapper */
.wellness-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px !important;
    min-width: 100px !important;
    cursor: pointer !important;
}

/* Text labels */
.wellness-icon span {
    color: #8B7355 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 0 !important;
    display: block !important;
}