/**
 * MD-act — USP's / trustbar
 * Geenqueued vanuit functions.php (frontend + Elementor-preview).
 * Hoort bij shortcode [mdact_usps].
 *
 * Kleuren (MD-act design system):
 *   wit      = #FFFFFF   (tekst + links)
 *   zandgeel = #E8C89A   (dots; via --mdact-usp-dot)
 *
 * Let op: GEEN achtergrond hier. De balk-achtergrond zet je op de
 * Elementor-container; een achtergrond in deze CSS geeft een dubbele balk.
 */

.mdact-usps {
    list-style: none;
    margin: 0;
    padding: 14px 0 14px 18px; /* 18px links: het eerste bolletje start op de contentlijn (8px dot + 10px gap) */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start; /* links uitgelijnd, loopt mee met de content */
    gap: 12px 22px;
}

/* Tablet: hier passen ze niet op een regel; dan is centreren het netst */
@media (max-width: 1024px) and (min-width: 768px) {
    .mdact-usps {
        justify-content: center;
    }
}

.mdact-usp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.3;
}

.mdact-usp__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--mdact-usp-dot, #E8C89A);
}

/* Links (bv. telefoonnummer): wit, geen onderstreping - ook niet op hover.
   !important overschrijft de standaard link-stijl van het thema. */
.mdact-usp a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.mdact-usp a:hover,
.mdact-usp a:focus {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* Mobiel: gecentreerd oogt daar juist netjes (items wrappen onder elkaar) */
@media (max-width: 767px) {
    .mdact-usps {
        justify-content: center;
        gap: 10px 20px;
    }
}