.elemate-fitfinder .eff-features { margin: 10px 0 16px; }
.elemate-fitfinder .eff-features-h, .elemate-fitfinder .eff-compare-vs, .elemate-fitfinder .eff-ai-h  { font-weight: 600; margin-bottom: 6px; }
.elemate-fitfinder .eff-features-list { margin: 0; padding-left: 35px; }

.eff-compare-card .eff-col {
  position: relative; /* anchor the badge */
  overflow: hidden; 
}

/* shared badge style */
.eff-compare-card .eff-col::before {
  position: absolute;
  top: 11px;
  left: -43px;
  width: 121px;
  text-align: center;
  transform: rotate(-45deg);
  padding: 3px 5px 5px 8px;
  background: #61CE70;      /* red */
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  border-radius: 0px;
  z-index: 1;
  content: "";              /* set per card below */
}

/* first and second column labels */
.eff-compare-card .eff-col:nth-child(1)::before { content: "BEST"; }
.eff-compare-card .eff-col:nth-child(2)::before { content: "NEXT-BEST"; }

.elemate-fitfinder input:focus-visible, .eff-ai-note textarea:focus-visible{
	outline:none;
}

.elemate-fitfinder input:focus, .eff-ai-note textarea:focus{
border-color: #02b896;
}

.elemate-fitfinder input[type="text"], .elemate-fitfinder input[type="email"]{
  color:#555;
}

.elemate-fitfinder input::placeholder {
color: #a3a3a3;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
button:focus,
[type="button"]:focus {
  background: #111;
}

.eff-title { margin: 0 0 6px }
.eff-sub { margin: 0 0 14px; color: #555 }

.eff-row { margin-bottom: 10px }
.eff-row label, .eff-ai-note label { 
  margin-bottom: 5px;
 }
.eff-ai-hint{
margin-bottom: 10px;
}

.eff-row input {
  width: 100%;
  padding: 8px 10px 10px 10px;
  border: 1px solid #dadada;
}

.eff-btn {
  appearance: none;
  border: 0;
  background: #111;
  color: #fff;
  padding: 8px 14px 10px 14px;
  cursor: pointer
}
.eff-btn[disabled] { opacity: .6; cursor: not-allowed; }
.eff-prev { background: #f3f3f3; color: #111; margin-right: 8px }

.eff-btn.eff-next:hover, .eff-btn.eff-prev:hover {
  background-color: #61CE70;
}

.eff-error.is-error { 
        margin-top: 8px; 
        text-shadow: none;
        font-size:1em;
        border: 0px;
        color: #D8000C;
        text-align: left;
        background-color: #FFBABA;
        padding: 2px 10px 5px 10px;
}
.eff-error{
 font-size:1em;
}


.eff-step { display: none }
.eff-step.is-active { display: block }

.eff-progress { 
display: flex; 
align-items: center; 
margin-bottom: 10px; 
background-color:lightgray;
border-radius: 1px;
position: relative;
}
.eff-bar { 
display: block; 
height: 10px; 
background: #111; 
width: 0;
transition: width .3s;
flex-shrink: 0;
border-radius: 1px;
 }
.eff-count { 
font-size: 7px; 
color: #FFF;
font-weight:600;
position: absolute;
 }

.eff-options { 
 display: grid;
 gap: 8px;
 margin-bottom: 10px;
 min-height: 225px;
}
.eff-opt {
  display: flex; 
  align-items: center; 
  gap: 8px; 
  padding: 10px;
  border: 1px solid #e8e8e8; 
  border-radius: 2px; 
  cursor: pointer;
}

.eff-opt.contain-help {
  flex-wrap: wrap;
}

.eff-opt.contain-help .eff-opt-label {
  flex-grow: 1;
  width: 90%;
}


.eff-opt:hover { border-color: #bbb }
.eff-opt input { margin-top: 2px }
.eff-opt-label { font-weight: 600 }
.eff-opt-help { display: block; font-size: 12px; color: #666; margin-left: 24px }
.eff-unsure { opacity: .9 }

.eff-ai {
 margin-bottom: 10px;
 background: #fff2e7;
 padding: 12px 20px 20px;
}

.eff-ai-note textarea {
  width: 100%;
  padding: 8px 10px 10px 10px;
  border: 1px solid #dadada;
}

.eff-loading { display: flex; align-items: center; gap: 8px }
.eff-loading[hidden] { display: none }
.eff-spinner {
  width: 16px; height: 16px; border: 2px solid #ddd; border-top-color: #111;
  border-radius: 50%; display: inline-block; animation: effspin 1s linear infinite
}
@keyframes effspin { to { transform: rotate(1turn) } }

.eff-result[hidden] { display: none }

.eff-winner .eff-badge {
  display: inline-block; background: #eef2ff; color: #2f3a89;
  border-radius: 2px; padding: 1px 8px 3px; font-size: 12px;
}

.eff-name-block{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top:6px;
}
.eff-name { margin: 0 }
.eff-img { max-width: 220px; border-radius: 10px; margin: 6px 0 }
.eff-desc { color: #333 }
.eff-cta { display: flex; gap: 8px; margin: 10px 0 }
a.eff-primary { background: #111; color: #fff; border-radius: 2px; }
a.eff-primary:hover { background: #61CE70; }
a.eff-secondary { background: #fcb343; color: #111; border-radius: 2px; }
a.eff-secondary:hover { background: #61CE70; color: #fff; }
button.eff-btn.eff-retake { background: #111; color: #fff; border-radius: 2px; }
button.eff-btn.eff-retake:hover { background: #61CE70; }
button.eff-btn.eff-share { background: #fcb343; color: #111; border-radius: 2px; }
button.eff-btn.eff-share:hover { background: #61CE70; color: #fff; }



.eff-conf { 
  color: #666; 
  font-size: 12px; 
  margin-top: 0px;
  background: #e7fff9;
  color: #00981e;
  border-radius: 2px;
  padding: 1px 8px 3px;
 }
.eff-reasons { margin: 10px 0 0 18px }

.eff-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px }
.eff-compare { font-size: 14px; color: #333 }
.eff-compare-wrap[hidden] { display: none }

.eff-compare-card { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; margin-bottom: 15px; }
.eff-compare-card .eff-col { background:#EFEFEF; border: 1px solid #eee; border-radius: 2px; padding: 25px }
.eff-compare-card .eff-h { font-weight: 700; margin-bottom: 6px }

/* Ratings block */
.eff-starts-avg-overall{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.eff-stars-line { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px }
.ele-ratings { display: grid; gap: 6px; margin: 0px 0 10px }
.ele-rating-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 8px;
}
.ele-rating-label { font-weight: 600; font-size: 14px }
.ele-rating-num { font-size: 12px; opacity: 0.8 }


/* Stars */
.ele-stars { display: inline-block; line-height: 1.3; text-align: end; }
.ele-star { font-size: 14px }
.ele-star--full  { color: #f5a623 }
.ele-star--half, .ele-star--point-one, .ele-star--point-two, .ele-star--point-three, .ele-star--point-four, .ele-star--point-six, .ele-star--point-seven, .ele-star--point-eight, .ele-star--point-nine  { color: #ccc; position: relative }
.ele-star--point-one::before {
  content: '★'; color: #f5a623; position: absolute; left:0; top:0; width: 10%; overflow: hidden; line-height: 1.22;
}
.ele-star--point-two::before {
  content: '★'; color: #f5a623; position: absolute; left:0; top:0; width: 20%; overflow: hidden; line-height: 1.22;
}

.ele-star--point-three::before {
  content: '★'; color: #f5a623; position: absolute; left:0; top:0; width: 30%; overflow: hidden; line-height: 1.22; 
}

.ele-star--point-four::before {
  content: '★'; color: #f5a623; position: absolute; left:0; top:0; width: 40%; overflow: hidden; line-height: 1.22;
}

.ele-star--half::before {
  content: '★'; color: #f5a623; position: absolute; left:0; top:0; width: 50%; overflow: hidden; line-height: 1.22;
}

.ele-star--point-six::before {
  content: '★'; color: #f5a623; position: absolute; left:0; top:0; width: 60%; overflow: hidden; line-height: 1.22;
}

.ele-star--point-seven::before {
  content: '★'; color: #f5a623; position: absolute; left:0; top:0; width: 70%; overflow: hidden; line-height: 1.22;
}

.ele-star--point-eight::before {
  content: '★'; color: #f5a623; position: absolute; left:0; top:0; width: 80%; overflow: hidden; line-height: 1.22;
}

.ele-star--point-nine::before {
  content: '★'; color: #f5a623; position: absolute; left:0; top:0; width: 90%; overflow: hidden; line-height: 1.22;
}
.ele-star--empty { color: #e5e7eb }



.eff-compare-wrap .eff-col{
  display:flex;
  align-items:center;
  justify-content:space-between;  /* title left, stars right */
  flex-wrap:wrap;                 /* lets the features drop to the next line */
}

/* left title */
.eff-compare-wrap .eff-h{
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;         /* avoids weird overflow */
}

/* right stars */
.eff-compare-wrap .eff-stars-line{
  margin-left:auto;               /* pushes to the right */
  white-space:nowrap;             /* keeps "4.5/5" on one line */
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 0;
}

/* full-width second line */
.eff-compare-wrap .eff-features{
  margin-top: 0;
  flex: 0 0 100%;
  margin-bottom: 26px;
}

.eff-compare-wrap .eff-features-list {
  padding-left: 18px;
}

@media only screen and (max-width: 767px) {
.eff-compare-card {
  grid-template-columns: 1fr;
}
}