the filter text not showed [closed]

enter image description here I developed a filter in my page the text for filter don't show when I pushed code on GitHub and host over AWS amplify. it works on local host. I check with cloud and Chat gpt and follow all steps but not fixing if anybody has the same experience I will be happy to hear your adviceenter image description here this is my local host .

.filter-section-collapsible { margin-top: 4px; } .filter-section-header { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #f0f0f0; border: none; padding: 10px 12px; font-weight: 600; font-size: 13px; cursor: pointer; border-radius: 4px; color: #333; } .filter-section-header:hover { background: #e4e4e4; } .filter-chevron { font-size: 16px; color: #666; transition: transform 0.2s; } .advanced-filter-group { padding: 8px 4px 4px; } .advanced-filter-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid #f2f2f2; } .advanced-filter-row:last-child { border-bottom: none; } .advanced-filter-row.plain { padding-left: 8px; } /* Purple bar icon */ .adv-bar-icon { display: flex; flex-direction: column; gap: 2px; width: 16px; flex-shrink: 0; } .adv-bar-icon span { display: block !important; height: 3px !important; border-radius: 2px; background: #7c3aed; flex: none !important; font-size: 0 !important; color: transparent !important; } .adv-bar-icon span:nth-child(1) { width: 100%; } .adv-bar-icon span:nth-child(2) { width: 70%; } .adv-bar-icon span:nth-child(3) { width: 100%; } .adv-bar-icon span:nth-child(4) { width: 55%; } /* Label — must come AFTER adv-bar-icon span */ .advanced-filter-row { flex: 1; font-size: 13px; color: #333; display: block !important; height: auto !important; width: auto !important; background: transparent !important; border-radius: 0 !important; } /* Toggle switch */ .adv-toggle { position: relative; width: 38px; height: 20px; border-radius: 10px; border: none; background: #ccc; cursor: pointer; transition: background-color 0.2s; flex-shrink: 0; padding: 0; } .adv-toggle.on { background: #7c3aed; } .adv-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .adv-toggle.on .adv-thumb { left: 20px; }