/* Container */
.roi-calc {
  --roi-border: #DEDEDE;
  --roi-text: #24324a;
  --roi-muted: #253048B2;
  --roi-card-bg: #F4F4F4;  /* input kortelės */
  --roi-result-bg: #D9E3EE66;/* result kortelės (švelniai melsva) */

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--roi-text);
}

/* Frame like screenshot: blue top line + subtle border */
.roi-calc__frame {
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

/* Top grid (2x2) */
.roi-calc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom:16px;
}

.roi-card {
  padding: 8px 12px 8px 12px;
  border-bottom: 1px solid var(--roi-border);
  border-radius:8px;
}


.roi-card--input {
  background: var(--roi-card-bg);
}

.roi-card__label {
  color: #253048B2;
  font-family: "Titillium Web", Sans-serif;
  font-weight:400;
  font-size:14px;
  line-height: 150%;
}

.roi-card__row {
  display: flex;
  gap: 0px;
}

.roi-card__prefix {
  font-size: 12px;
  color: var(--roi-muted);
  transform: translateY(5px);
  min-width: 28px;
  font-family: "Titillium Web", Sans-serif;
}

.roi-input {
  width: 100%!important;
  border: none!important;
  outline: none!important;
  background: var(--roi-card-bg)!important;
  font-size: 16px!important;
  font-weight: 600!important;
  color: var(--roi-text)!important;
  padding: 2px 0!important;
  box-shadow: none!important;
  height:30px!important
 
}

.roi-input:focus {
  outline: none;
}

/* Results row (2 columns) */
.roi-calc__results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.roi-card--result {
  background: var(--roi-result-bg);
  border-bottom: 1px solid #E8E8E8;
}



.roi-card__label--result {
  font-size: 13px;
  color: #2b3b55;
  margin-bottom: 10px;
}

.roi-formula {
  ont-family: 'Titillium Web', sans-serif;
    font-weight: 600;              /* SemiBold */
    font-size: 20px;
    line-height: 1.5;              /* 150% */
    letter-spacing: 0;
    color: rgba(37, 48, 72, 0.7);  /* #253048 at 70% opacity */
}

/* Big number like screenshot */
.roi-big {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.roi-big__value {
   font-family: 'Titillium Web', sans-serif;
    font-weight: 600;        /* SemiBold */
    font-style: normal;
    line-height: 1.2;        /* 120% */
    letter-spacing: 0;
    font-size:48px;
}

.roi-big__suffix {
   font-family: 'Titillium Web', sans-serif;
    font-weight: 400;        /* Regular */
    font-style: normal;
    font-size: 32px;
    line-height: 1.2;        /* 120% */
    letter-spacing: 0;
    color:#253048B2;
}

/* Responsive */
@media (max-width: 720px) {
  .roi-calc__results {
    grid-template-columns: 1fr;
  }

  .roi-card {
    border-right: none !important;
  }

}



@media (max-width: 720px) {

  .roi-calc__grid {
    grid-template-columns: 1fr 1fr;
  }


}

@media (max-width: 220px) {
  .roi-calc__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .roi-card__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
    .roi-hide-mobile {
    display: none;
  }
}