.elementor-widget-cro-badges {
    .cro-badge-divider { display: none; align-self: center; background-color: #ddd; }
    &.cro-badges-divider-yes .cro-badge-divider { display: inline-flex; }
}

.elementor-widget-container:has(.cro-badges) {
    height: 100%;
    display: flex;
}

.cro-badges {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-wrap: wrap;
}

.cro-badge-content {
    
}

.cro-badges .cro-badge {
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--bg);
    .cro-badge-content {
        display: flex;
        align-items: center;
        flex-grow: 1;
    }
}

.cro-badges .cro-badge > p {
    margin: 0;
}
.cro-badges .cro-badge > div {
    display: inline-block;
}

.cro-badges .cro-badge:after {
    border-color: #ddd;
}

.cro-badges .cro-icons:before {
    width: 100%;
    height: 100%;
}


/* alignments */
.cro-badges-layout-traditional {
    &.cro-badges-align-left .cro-badges          { align-items: start; }
    &.cro-badges-align-center .cro-badges        { align-items: center; }
    &.cro-badges-align-right .cro-badges         { align-items: end; }
    /* &.cro-badges-align-space-evenly .cro-badges  { justify-items: space-evenly; }
    &.cro-badges-align-space-between .cro-badges { justify-items: space-between; .cro-badge { flex: 1 1; } }
    &.cro-badges-justify-start .cro-badges       { align-items: start; }
    &.cro-badges-justify-center .cro-badges      { align-items: center; }
    &.cro-badges-justify-end .cro-badges         { align-items: end; } */
}

.cro-badges-layout-inline {
    .cro-badges      { flex-direction: row; }
    &.cro-badges-align-left .cro-badges          { align-items: unset; justify-content: left; }
    &.cro-badges-align-center .cro-badges        { align-items: unset; justify-content: center; }
    &.cro-badges-align-right .cro-badges         { align-items: unset; justify-content: right; }
    &.cro-badges-align-space-evenly .cro-badges  { align-items: unset; justify-content: space-evenly; }
    &.cro-badges-align-space-between .cro-badges { align-items: unset; justify-content: space-between; .cro-badge { flex: 1 1; } }

    &.cro-badges-justify-start .cro-badges        { align-items: start!important; }
    &.cro-badges-justify-center .cro-badges       { align-items: center!important; }
    &.cro-badges-justify-end .cro-badges          { align-items: end!important; }
}


.cro-icons {
    display: inline-flex; /* Changed from inline-block for better centering */
    align-items: center;
    justify-content: center;
    width: 1em;   
    height: 1em;
    vertical-align: middle;
    margin-top: -2px;
}

/* 2. Fix the Pseudo-element */
[class^="cro-icons-"]:before, 
[class*=" cro-icons-"]:before {
    content: "";
    display: inline-block; /* Crucial: allows width/height to work */
    width: 1em;            /* Inherits size from the parent .custom-svg */
    height: 1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}