/* =========================================================
   WELLNESS FINAL FIX - Remove all circles and icons
   Forces text-only display
   ========================================================= */

/* Remove all circular backgrounds and borders */
.wellness-icon {
    background: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide all icons completely */
.wellness-icon i,
.wellness-icon .fas,
.wellness-icon .far,
.wellness-icon .fab,
.wellness-icon i[class*="fa-"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Style the text labels */
.wellness-icon span {
    color: #FFD700 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: block !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 10px !important;
}

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

/* Remove any hover effects */
.wellness-icon:hover {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Ensure no circles on any state */
.wellness-icon,
.wellness-icon:hover,
.wellness-icon:active,
.wellness-icon.active,
.wellness-icon.selected {
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Force hide any Font Awesome content */
.wellness-icon *::before,
.wellness-icon *::after {
    content: none !important;
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .wellness-icons {
        gap: 30px !important;
    }

    .wellness-icon span {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .wellness-icons {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .wellness-icon span {
        font-size: 1.1rem !important;
    }
}