.amfano-calc{
  max-width: 760px;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 18px;
	font-family: "komet", Sans-serif;
    font-weight: 600;
    color: var( --e-global-color-7ad0ebe );
}

.amfano-calc__progress{
  display:flex;
  gap:10px;
  margin-bottom: 14px;
}

.amfano-calc__step{
  flex:1;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f6f6;
  color:#444;
  text-align:center;
font-size:16px;
}

.amfano-calc__step.is-active{
  background:#A7FE6F;
  color:#080008;

}

.amfano-calc__panel{ display:none; }
.amfano-calc__panel.is-active{ display:block; }

.amfano-line{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.2fr;
  gap: 10px;
  align-items:end;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 14px;
  margin-bottom: 10px;
}

.amfano-line__title{
  grid-column: 1 / -1;
  font-weight: 600;
  margin-bottom: 2px;
}

.amfano-line label,
.amfano-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size: 13px;
}

.amfano-line input,
.amfano-grid input{
  height: 42px;
  border-radius: 12px;
  border: 1px solid #ddd;
  padding: 0 12px;
  outline: none;
}

.amfano-line__remove{
  height: 42px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  cursor:pointer;
}

.amfano-calc__summary{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background:#fafafa;
  border: 1px solid #eee;
	color:#080008;
}

.amfano-calc__actions{
  display:flex;
  gap:10px;
  margin-top: 14px;
}

.amfano-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid #111;
  background:#111;
  color:#fff;
  cursor:pointer;
  text-decoration:none;
font-size:15px;
}


.amfano-btn {
    position: relative; /* Nodig om de vul-laag te positioneren */
    z-index: 1; /* Zorgt dat tekst bovenop blijft */
    overflow: hidden; /* Alles wat buiten de knop komt, afknippen */
    background-color: #A7FE6F !important; /* Start Groen */
    transition: color 0.2s ease-in-out; 
	font-weight:bold;
	text-transform:uppercase;
	color:#080008;
	border-radius: 100px; 


}

/* 2. De 'Swipe' laag (Pseudo-element) */
.amfano-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-color: #080008; /* De kleur die erin schuift (Zwart) */
    z-index: -1; /* Achter de tekst plaatsen */
    
    /* Startpositie: breedte is 0 (onzichtbaar) */
    transform: scaleX(0); 
    transform-origin: left; /* Groei vanuit LINKS */
    
    /* De snelheid van de swipe.  */
    /* cubic-bezier zorgt voor die 'poppy' switch vibe: BAM-er-in. */
    transition: transform 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}

/* 3. Wat gebeurt er bij Hover? */
.amfano-btn:hover {
    color: #A7FE6F !important; /* Tekst wordt Groen */
    border-color: #A7FE6F !important;
}

.amfano-btn:hover::before {
    transform: scaleX(1); /* De zwarte laag vult de knop volledig */
}

.amfano-btn--ghost{
  background:transparent;
  color:#111;
}

.amfano-note{
  padding: 10px 12px;
}

.amfano-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.amfano-calc__status{
  margin-top: 10px;
  color:#333;
  font-size: 13px;
}

.amfano-calc__result{
  padding: 12px;
  border:1px solid #eee;
  border-radius: 14px;
  background:#fafafa;
}

.amfano-calc__cta{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border:1px solid #eee;
}
@media (max-width: 640px){
  .amfano-line{ grid-template-columns: 1fr 1fr; }
  .amfano-line__remove{ grid-column: 1 / -1; }
  .amfano-grid{ grid-template-columns: 1fr; }
}