Update product_search.py

product_search.py

@@ -549,6 +549,24 @@ _PROGRESS_HTML = """
 """
 
 
+_SCOPE = "#affiliate-modal-container"
+
+
+def _scope_css(css: str) -> str:
+    """
+    Awali setiap selector berbasis class dengan #affiliate-modal-container.
+    Gradio membungkus gr.HTML dalam `.prose` dan memaksa warna teks tema lewat
+    `.gradio-container-x .prose *` (spesifisitas 0,2,0). Selector satu class
+    (0,1,0) kalah, sehingga teks modal jadi pucat. Dengan prefix ID (1,x,0)
+    warna modal menang tanpa memakai !important di mana-mana.
+    """
+    return re.sub(
+        r"(?m)^(\s*)(\.[^{}\n]+)\{",
+        lambda m: f"{m.group(1)}{_SCOPE} {m.group(2)}{{",
+        css,
+    )
+
+
 def _build_card(row: pd.Series, show_relevance: bool) -> str:
     name = html_escape(row["name"])
     category = html_escape(row["category"])
@@ -601,10 +619,10 @@ def _build_card(row: pd.Series, show_relevance: bool) -> str:
 def build_modal_html(products: pd.DataFrame, subtitle: str, show_relevance: bool = False) -> str:
     cards_html = "\n".join(_build_card(row, show_relevance) for _, row in products.iterrows())
 
-    css = _BASE_CSS
+    css = _scope_css(_BASE_CSS)
     progress_html = ""
     if CLOSE_DELAY_SECONDS and CLOSE_DELAY_SECONDS > 0:
-        css += _LOCK_CSS.replace("__DELAY__", str(int(CLOSE_DELAY_SECONDS)))
+        css += _scope_css(_LOCK_CSS.replace("__DELAY__", str(int(CLOSE_DELAY_SECONDS))))
         progress_html = _PROGRESS_HTML
 
     return f"""
@@ -703,4 +721,4 @@ if __name__ == "__main__":
             ],
         },
     }
-    print(debug_search(sample))
+    print(debug_search(sample))