/* Layout */
.fe-roi-container {
    display: flex;
    gap: 50px;

    border-radius: 12px;
    padding: 20px;
}
.fe-roi-left, .fe-roi-right {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Headings */
.fe-roi-left h3, .fe-roi-right h3 {
    margin-bottom: 10px;
}

.fe-roi-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fe-roi-title.roi svg {stroke: #2563eb;}
.fe-roi-title.pot svg {stroke: #16a34a;}

.fe-roi-right h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #2563eb;
}

/* Breakdown Box */
.fe-roi-breakdown {
    margin-top: 20px;
    background: #f1f5f9;
    padding: 15px;
    border-radius: 8px;
}
.fe-roi-breakdown p {
    display: flex;
    justify-content: space-between;
}

/* Slider Labels */
.fe-roi-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin: 5px 0 15px;
}
.fe-roi-labels .fe-current {
    font-weight: 600;
}

/* Ion Slider Blue Styling */
.irs--round .irs-bar {
    background-color: #2563eb;
}
.irs--round .irs-handle {
    border-color: #2563eb;
    background-color: #2563eb;
}


/*  */
.irs--round .irs-line {height: 10px;}
.irs--round .irs-bar {height: 10px;}
.irs--round .irs-handle{top: 28px;}
.fe-roi-wrap > label {
    position: absolute;
}

.fe-roi-annual {
    padding-left: 25px;
    border-left: 5px solid #2563eb;
}
.fe-roi-annual h2 {
    margin: 0;
}
.fe-roi-annual p {
    margin: 0;
}

.fe-roi-results {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.fe-roi-results p {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.fe-roi-results p strong {
    font-size: 23px;
    color: #131313;
}

.fe-roi-breakdown {}
.fe-roi-breakdown h4 {
    font-size: 17px;
    margin-bottom: 15px;
}
.fe-roi-breakdown p {
    margin-bottom: 1px;
    font-size: 15px;
}

.fe-roi-breakdown p span {
    color: #000;
    font-weight: 600;
}

@media only screen and (max-width:767px) {
  .fe-roi-container {
    flex-direction: column;
  }
}
