/* =========================================
   WS5 OftZusammenGekauft – Clean Layout FINAL
   Fokus: Checkboxen korrekt neben Text
   ========================================= */


/* ---------------------------------
   Container
--------------------------------- */

.ws5_ozg_container {
    background: #ffffff;
    border: 1px solid #e88a7d;
    padding: 22px 24px;
    margin: 20px 0 30px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}


/* ---------------------------------
   Headline
--------------------------------- */

.ws5_ozg_box_headline {
    font-size: 18px;
    font-weight: 600;
    color: #312f29;
    margin-bottom: 6px;
}


/* ---------------------------------
   Content Layout
--------------------------------- */

.ws5_ozg_box_content {
    display: flex;
    align-items: center;
    gap: 24px;
}


/* ---------------------------------
   Bilder – ohne Umrandung
--------------------------------- */

.ws5_ozg_bildcontainer {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws5_ozg_artikel img {
    max-height: 95px;
    max-width: 130px;
    border-radius: 0;
}


/* ---------------------------------
   Plus-Zeichen sauber zentriert
--------------------------------- */

.ws5_ozg_plus_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws5_ozg_plus {
    font-size: 1.4rem;
    color: #7d9b7b;
    opacity: 0.8;
}


/* =========================================
   CHECKBOXEN: Robust fix für Row/Col Layout
   ========================================= */

/* Die Zeile muss wirklich Flex sein */
.ws5_ozg_checkbox_row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    margin-bottom: 14px;
}

/* Erste Spalte (Checkbox) schmal und sauber ausgerichtet */
.ws5_ozg_checkbox_row>.col-1,
.ws5_ozg_checkbox_row>.col-auto,
.ws5_ozg_checkbox_row>.col {
    /* wir greifen zusätzlich ab, falls das Plugin andere col-Klassen nutzt */
}

.ws5_ozg_checkbox_row>.col-1,
.ws5_ozg_checkbox_row>.col-auto {
    flex: 0 0 24px !important;
    max-width: 24px !important;
    padding-left: 0 !important;
    padding-right: 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

/* Zweite Spalte (Text) soll den Rest nehmen */
.ws5_ozg_checkbox_row>.col-11,
.ws5_ozg_checkbox_row>.col-10,
.ws5_ozg_checkbox_row>.col-12 {
    flex: 1 1 auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Falls die Struktur nicht col-1/col-11 ist, sondern 2 DIVs ohne Klassen */
.ws5_ozg_checkbox_row>div:first-child {
    flex: 0 0 24px;
    max-width: 24px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.ws5_ozg_checkbox_row>div:last-child {
    flex: 1 1 auto;
    padding-left: 0;
}

/* Checkbox selbst auf erste Textzeile justieren */
.ws5_ozg_checkbox_row input[type="checkbox"] {
    accent-color: #e88a7d;
    transform: scale(0.95);
    margin: 6px 0 0 0 !important;
    /* <-- sitzt jetzt neben der ersten Zeile */
}

/* Wenn statt Input ein Icon/SVG verwendet wird */
.ws5_ozg_checkbox_row svg,
.ws5_ozg_checkbox_row i,
.ws5_ozg_checkbox_row .fa,
.ws5_ozg_checkbox_row .icon {
    margin-top: 6px !important;
}

/* Label-Typo */
.ws5_ozg_checkbox_label,
.ws5_ozg_checkbox_row label {
    margin: 0 !important;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #312f29;
    display: block;
}

.ws5_ozg_checkbox_label small {
    font-size: 0.85rem;
    color: #777;
}


/* ---------------------------------
   Button – Lachs
--------------------------------- */

.ws5_ozg_warenkorb_button {
    background: #e88a7d !important;
    border: 1px solid #e88a7d !important;
    color: #ffffff !important;
    border-radius: 5px;
    height: 46px;
    font-weight: 600;
    box-shadow: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ws5_ozg_warenkorb_button:hover {
    background-color: #6f8f70 !important;
    border: 1px solid #6f8f70 !important;
}

/* Preis im Button weiß */
.ws5_ozg_warenkorb_button span,
.ws5_ozg_warenkorb_button strong {
    color: #ffffff !important;
}


/* ---------------------------------
   Success Message
--------------------------------- */

.ws5_ozg_success_message {
    background: #eaf4ec;
    color: #2e6b3c;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
}


/* ---------------------------------
   Mobile
--------------------------------- */

@media (max-width: 768px) {

    .ws5_ozg_box_content {
        flex-direction: column;
        align-items: flex-start;
    }

    .ws5_ozg_plus_container {
        margin: 8px 0;
    }

}
/* Preis im Bundle-Button IMMER weiß */

.ws5_ozg_warenkorb_button .price,
.ws5_ozg_warenkorb_button .value,
.ws5_ozg_warenkorb_button .sum,
.ws5_ozg_warenkorb_button .amount,
.ws5_ozg_warenkorb_button .ws5_ozg_price,
.ws5_ozg_warenkorb_button small,
.ws5_ozg_warenkorb_button span,
.ws5_ozg_warenkorb_button strong {
    color: #ffffff !important;
}
/* =========================================
   Preis/Text im Bundle-Button: IMMER weiß
   (brutal, aber lokal und sicher)
   ========================================= */

.ws5_ozg_warenkorb_button {
    color: #fff !important;
}

.ws5_ozg_warenkorb_button * {
    color: #fff !important;
}

/* falls der Preis über pseudo-elemente kommt */
.ws5_ozg_warenkorb_button::before,
.ws5_ozg_warenkorb_button::after,
.ws5_ozg_warenkorb_button *::before,
.ws5_ozg_warenkorb_button *::after {
    color: #fff !important;
}

/* Warenkorb-Icon (svg) */
.ws5_ozg_warenkorb_button svg,
.ws5_ozg_warenkorb_button svg * {
    fill: #fff !important;
    stroke: #fff !important;
}