/**
 * C4mulo5 — Auto-Fixes für ChatGPT-generierte HTML-Sections
 *
 * Korrigiert verbreitete Bug-Muster in inline-style HTML, das von ChatGPT
 * oder anderen KI-Tools generiert und per JSON-Import in Mesmerize-Sections
 * eingespielt wurde. Die Originale werden NICHT verändert — nur visuell
 * via CSS überschrieben.
 *
 * Diese Datei wird sowohl im Frontend als auch im Customizer-Preview geladen.
 *
 * Autor: Nico Eberhardt
 */

/* ═══ FIX 1: Runde Elemente ohne display:flex zentrieren ════════════
 *
 * Beispiel-Markup (häufiger ChatGPT-Bug):
 *   <div style="width:76px; height:76px; border-radius:50%;
 *               align-items:center; justify-content:center;
 *               font-size:30px;">1</div>
 *
 * Problem: ohne `display: flex` haben `align-items` und `justify-content`
 * keine Wirkung — die Zahl klebt oben am Rand des Kreises.
 *
 * Fix: `display: flex` erzwingen für genau diese Pattern-Kombination.
 * Sehr selektiv: trifft nur runde Elemente die explizit zentrieren wollen.
 */
[style*="border-radius: 50%"][style*="align-items: center"][style*="justify-content: center"] {
    display: flex !important;
}

/* Auch die kompakte Schreibweise (border-radius:50% ohne Leerzeichen)
 * — kommt bei manchen Generatoren vor */
[style*="border-radius:50%"][style*="align-items:center"][style*="justify-content:center"] {
    display: flex !important;
}