.mfb-container{display:flex;width:100%;}

.mfb-btn{
  -webkit-tap-highlight-color:transparent;
  appearance:none;
  background:transparent;
  background-color:transparent;
  text-decoration:none;
  border:none;
  outline:none;

  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  width:var(--mfb-width,auto);

  color:var(--mfb-text,#1A365D);
  cursor:pointer;
  font-weight:800;
  text-transform:uppercase;

  transition:color var(--mfb-dur,500ms) var(--mfb-ease,ease),
             background-color var(--mfb-dur,500ms) var(--mfb-ease,ease);
}

/* STRICT MODE (default): NO background-change. The left bar expands to fill. */
.mfb-btn:hover{
  background-color: transparent !important;
}

/* Optional fallback: force BG change ONLY when class is present */
.mfb-btn.mfb-bg-fallback:hover{
  background-color:var(--mfb-fill-hover,#1A365D) !important;
}

.mfb-inner{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.mfb-label{
  display:inline-block;
  transition:color calc(var(--mfb-dur,500ms)*0.6) var(--mfb-ease,ease);
  color:var(--mfb-text,#1A365D);
}

.mfb-bar{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:var(--mfb-bar-w,2px);
  height:var(--mfb-bar-h,32px);
  background:var(--mfb-bar,#A82025);
  transition:all var(--mfb-dur,500ms) var(--mfb-ease,ease);
  z-index:1;
}

.mfb-line{
  position:absolute;
  left:var(--mfb-line-inset,32px);
  right:var(--mfb-line-inset,32px);
  bottom:0;
  height:1px;
  background:var(--mfb-line,#E2E8F0);
  transition:all var(--mfb-dur,500ms) var(--mfb-ease,ease);
  z-index:3;
  pointer-events:none;
}

.mfb-btn:hover .mfb-label{color:var(--mfb-text-hover,#fff) !important;}

/* The essential effect: thin left bar grows & becomes fill color. */
.mfb-btn:hover .mfb-bar{
  height:100%;
  width:100%;
  background:var(--mfb-fill-hover,#1A365D) !important;
  top:0;
  transform:none;
}

.mfb-btn:hover .mfb-line{
  left:0;right:0;
  background:var(--mfb-line-hover,#A82025) !important;
}

.mfb-btn:focus-visible{
  box-shadow:0 0 0 2px var(--mfb-line-hover,#A82025);
  border-radius:inherit;
}