/* RAGO Addons - Loop Filter Styles v1.1.2 */

.rago-ff {
    margin: 0 0 20px;
}

.rago-ff__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rago-ff__item {
    margin: 0;
}

/* Each option is a full-width stacked row */
.rago-ff__opt {
    appearance: none;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    line-height: 1.3;
    color: #374151;
    transition: color .15s ease;
}

.rago-ff__opt:hover {
    color: #01a4e4;
}

.rago-ff__box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid #c4c9d0;
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: border-color .15s ease, background-color .15s ease;
}

.rago-ff__opt:hover .rago-ff__box {
    border-color: #01a4e4;
}

.rago-ff__opt.is-active .rago-ff__box {
    background: #01a4e4;
    border-color: #01a4e4;
}

.rago-ff__opt.is-active .rago-ff__box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.rago-ff__opt.is-active .rago-ff__label {
    color: #111827;
    font-weight: 600;
}

.rago-ff__label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Energy rows: colored badge sits inside the label area */
.rago-ff__opt--energy .rago-energy-badge {
    display: inline-block;
    min-width: 46px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: #fff;
}

.rago-energy-badge--a-plus-plus-plus { background: #004d00; }
.rago-energy-badge--a-plus-plus      { background: #006600; }
.rago-energy-badge--a-plus           { background: #009900; }
.rago-energy-badge--a                { background: #00bb00; }
.rago-energy-badge--b                { background: #66cc00; }
.rago-energy-badge--c                { background: #cccc00; color: #333; }
.rago-energy-badge--d                { background: #ffcc00; color: #333; }
.rago-energy-badge--e                { background: #ff9900; }
.rago-energy-badge--f                { background: #ff6600; }
.rago-energy-badge--g                { background: #dd0000; }