/* =============================================
   OBS Care: Trust Badges
   ============================================= */

.obs-care-trust-badges {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Layout: Inline --- */
.obs-care-trust-badges--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.obs-care-trust-badges--inline .obs-care-trust-badges__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- Layout: Grid --- */
.obs-care-trust-badges--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    text-align: center;
}

.obs-care-trust-badges--grid .obs-care-trust-badges__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    background: #fff;
}

.obs-care-trust-badges--grid.obs-care-trust-badges--dark .obs-care-trust-badges__item {
    background: #2a2a2a;
    border-color: #444;
}

/* --- Layout: Footer Bar --- */
.obs-care-trust-badges--footer-bar {
    display: flex;
    flex-wrap: wrap; /* schmale Footer-Spalte: umbrechen statt ueber die Kante quellen (Issue #20) */
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid #e8e8e8;
}

/* --- Layout: Feste Spaltenzahl (columns="N") ---
   Fuer schmale Container (z.B. Footer-Spalte ~210px) ein sauberes N-Spalten-Raster
   (columns=2 -> 2x2 fuer vier Badges) statt Shop-CSS-Hack. Die Spalten sind
   minmax(0,1fr) (der Shortcode setzt repeat(N, minmax(0,1fr)) inline), damit die
   Tracks nie breiter werden als der Container und keine Card ueber die Kante
   laeuft. Icon ueber Label gestapelt, Label darf umbrechen: so passt es auch mit
   sichtbaren Labels in eine schmale Spalte. */
.obs-care-trust-badges--fixed-cols {
    display: grid;
    justify-items: center;
    align-items: start;
    gap: 12px 16px;
}
.obs-care-trust-badges--fixed-cols .obs-care-trust-badges__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    min-width: 0;
}
.obs-care-trust-badges--fixed-cols .obs-care-trust-badges__label {
    white-space: normal; /* schmale Spalte: umbrechen statt ueberlaufen */
}

.obs-care-trust-badges--footer-bar.obs-care-trust-badges--dark {
    border-color: #444;
}

.obs-care-trust-badges--footer-bar .obs-care-trust-badges__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- Icon & Label --- */
.obs-care-trust-badges__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.obs-care-trust-badges__icon svg {
    display: block;
}

.obs-care-trust-badges__label {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}

/* --- Dark Theme --- */
.obs-care-trust-badges--dark .obs-care-trust-badges__label {
    color: #bbb;
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .obs-care-trust-badges--inline {
        justify-content: center;
    }
    .obs-care-trust-badges--footer-bar {
        flex-wrap: wrap;
        gap: 12px;
    }
}