/* ==========================================================================
   CHECKBOX CUSTOM STYLES (Das "Häkchen"-System)
   - "checkout-place-order.php", "leave_feedback.php"
   - ggf. in Verbindung mit "tooltip.css" für Tooltips, falls gewünscht
   ========================================================================== */

/* DIE ECHTEN CHECKBOXEN VERSTECKEN 
   Wir nutzen eigene Labels als Klick-Fläche, 
   daher brauchen wir die Standard-Boxen nicht. */
input.custom-check { display: none !important; }

label.checkmark { /* Das Label (Quadrat) */
    display: block !important;
    float: left !important;
    position: relative;
    width: 18px;
    height: 18px;
    outline: 2px solid #305c9e;
    background: #ebebde;
    margin: 5px 15px 0 2px;/* ABSTÄNDE */
    cursor: pointer;
}

label.checkmark:hover { background-color: #5d9ccc; }

/* Das Häkchen - (Das gedrehte "L" im Inneren) */
label.checkmark:after {
    content: "";
    position: absolute; 		/* Fixiert Haken im Quadrat, text-unabhängig */
    display: none;
    left: 5px;
    top: 1px;           		/* Feinjustierung IM Quadrat */
    width: 5px;
    height: 9px;
    border: solid #5b51a4;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Aktivierter Zustand: Das Quadrat wird blau, wenn die Box gecheckt ist */
input.custom-check:checked ~ label.checkmark {background-color: #2196F3;}

/* STEUERUNG DES HÄKCHENS:
 * Zeigt das Häkchen (::after) universell bei allen Elementen mit der Klasse .custom-check an,
 * sobald diese den Zustand :checked haben. 
 * Das Tilde-Zeichen (~) findet das zugehörige Label im HTML-Stammbaum.
 * WICHTIG: Da auch der Tooltip ::after nutzt, stellt diese 'checked'-Regel sicher, 
 * dass der Haken NUR im Quadrat erscheint und nicht im gelben Tooltip-Kasten. */
input.custom-check:checked ~ label.checkmark:after {display: block !important;}

/* --- VALIDIERUNGS-EFFEKT (Roter Rahmen um Checkbox bei Fehler) --- */
/* DER ALARM: Wird vom JavaScript für 3 Sekunden "scharf" geschaltet */
label.checkmark.RedCheckbox {outline-color: #d81912 !important;}
/* END CHECKBOX STYLES */

/* 1. Der breite Anker für alle Bildschirme */
.checkbox-container {
    position: relative !important;
    width: 100%;
    overflow: visible !important;
    margin-bottom: 5px; /* mehrere Checkboxen untereinander voneinander trennen */
    /* ERZEUGT EINEN EIGENEN LAYOUT-KONTEXT (BFC):
	Sorgt dafür, dass der Container die gefloatete Checkbox voll umschließt.
    Ersetzt das alte <div style="clear:both;"></div> und verhindert, 
    dass nachfolgende Elemente in die Checkbox-Zeile hineinrutschen.*/
    display: flow-root; /* Ersetzt das clear:both div komplett */
}
/* Fallback für Browser, die flow-root noch nicht kennen */
.checkbox-container::after {
    content: "";
    display: table;
    clear: both;
}

/* Desktop-Basis (Checkbox-Wrapper bleibt Anker für den Pfeil) */
.checkbox-wrapper {
    float: left;
    width: 25px;
    position: relative; 
    width: auto !important; /* Erlaubt dem Wrapper, so breit wie die Box + Margin zu sein */
}

/* Der Text-Bereich */
.check-label-text {
    /* fester Pixelwert für maximale Ruhe im Layout 
    Bei 1.6 muss der Browser rechnen (z. B. 14px * 1.6 = 22.4px). 
    Diese "krummen" Werte führen beim Skalieren des Fensters oft zu Rundungsfehlern, 
    die die Checkbox daneben zum Zittern bringen. */
    /*vertikaler Zeilenabstand (Die "Luft" im Text)*/
    line-height: 24px;        	/* Mehr Platz nach unten/oben zwischen Checkboxen */
    margin-top: 1px;         	/* Feinjustierung: Schiebt Text auf Höhe der Box */
    display: block !important;  /* Block statt inline-block verhindert das Springen */
    overflow: hidden;           /* Erzeugt eine eigene Spalte neben dem Float */
    cursor: pointer;     		/* Zeigt das Händchen beim Drüberfahren */	
	
}

@media screen and (max-width: 680px) {
    /* Tooltip-Freigabe & Wackel-Stopp */
    .checkbox-wrapper, label.checkmark {
        position: static !important;
    }
    .checkbox-wrapper {
    	width: auto !important; /* Erlaubt dem Wrapper, so breit wie die Box + Margin zu sein */
	}
	
    /* BOX-STABILISATOR: Das stoppt das vertikale Zittern */
    label.checkmark {
        display: block !important;
        float: left !important;
        height: 18px !important; /* Zwingt die Box auf feste Höhe */
        width: 18px !important;
        line-height: 0 !important;
        font-size: 0 !important;
        /* Das Margin-Bottom auf 0 zu setzen ist wichtig, damit 
       	kein zusätzlicher Platz nach unten das Layout beim Umbruch aufbläht */
       	/* HIER steuerst du den Abstand zum Text: 
       	   Die 15px (rechts) sind dein Textabstand */
        margin: 5px 15px 0 2px !important; /* Exakt wie Desktop */
        /* Padding auf 0 stellt sicher, dass die Box exakt 18x18px bleibt. 
        Wichtig, falls Browser-Standards oder andere Regeln (z.B. für Form-Labels) 
        einen ungewollten Innenabstand vererben, der die Box aufblähen würde. */
        padding: 0 !important;
    }

    /* DAS HÄKCHEN-FIX (Nur einmal!) */
    input.custom-check:checked ~ label.checkmark:after {
        position: absolute !important;
        display: block !important;
        /* Da das Label static ist, kleben wir den Haken fest 
        auf die Koordinaten der Checkbox im Container */
        left: 7px !important;  
        top: 6px !important; 
    }
}